The Starter page boilerplate template is what we use when we start coding any new design for a landing page.

The template code uses modern HTML and CSS techniques to make it accessible, compatible across browsers, and easy to work with. And it includes basic component examples based on most commonly used layouts and elements.

Modern HTML and CSS

The approach we take with our code is to use modern techniques that allow for the most flexibility. Both for design, and for being able to maintain the code long-term. Here are some ways that’s done:

• Key header meta options that include mobile properties and dark mode
• Open graph tags for previews used on social media and link cards
• Column layouts using CSS grid
• Standalone component examples for images, text, and buttons
• Example layouts for various standard column formats

Basic components

The components included come out of common design patterns for landing pages. They provide structure for your design pieces and are mobile-responsive ready. Here’s what they can be used for:

• Header and footer examples
• Standard image with text formats
• Two-column and three-column layouts
• A four-column with icons and short text
• Listing of items

The template is now available as a free to download, with Blocks Edit template tags added as well.