Metalsmith Company Starter
Using "sectioned" pages to build flexible page layouts
This starter is build in the style of a company marketing site. The components on this site are bare-bone interpretations of common information presentation patterns that can be found on many corporate websites. The source code for this site can be found on GitHub.
Photo by Anamul Rezwan from Pexels
How is this site build?
Styles are written in SCSS, scripts in Javasript and compiled with Metalsmith plugins. Content is written in Markdown and templates are coded with Nunjucks. All page content is defined in the frontmatter of each page. Except for blog pages, there are no long-text markdown sections. Rather, content text area fields in the page frontmatter are compiled into HTML with a Nunjucks filter.
Page sections are defined as a YAML object in the frontmatter. This approach lends itself to an easy integration with headless CMSs like forestry.io. Get more detailed explanations in this blogpost.
For example, this page is build with a header and footer that are the same for every page. Then it uses three components, a Banner, a text section and a media component twice for the body content.
Important implementation details
- Images hosted on cloudinary.io.
- All images are loaded with Low Res Placeholders first and then replaced when the image enters the browser viewport (lazy load).
- SVG Icons integration.
Photo by Andre Furtado from Pexels
Digital Asset Management with Cloudinary
Images are easy
Cloudinary is used to store, transform, optimize, and deliver all site media assets — images and videos with easy-to-use APIs. This service takes the pain of image management and responsive image set creations away. You just tell cloudinary, in the image url, what the image size should be and more. Click here to get started.
Read about the responsive image javascript module on glinka.co.
to discuss all-things Metalsmith.