Metalsmith Components
Demonstrating the use of "sectioned" pages
This site is build in the style of a company marketing site. The components on this site are bare-bone interpretations of universal information presentation patterns that can be found anywhere. The source code for this site can be found on GitHub.
How is this site build?
Gulp4 is used to process all assets first and then Metalsmith to build the site. Styles are written in SCSS and scripts in Javasript. Content is written in Markdown and templates are coded with Nunjucks.
Swup is used for page transitions and page prefetching to provide the user with a smooth Single Page App (SPA) experience... or as much as one can do without actually building an SPA.
Some implementation details to check out:
- Page transition with Swup.
- Page backgrounds with Gradien Magic CSS.
- Simple Feather icons.
- 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).
About Nunjucks
A powerful templating language for JavaScript
- Templating language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2
- High-performant. Small 8K gzipped runtime with precompiled templates in the browser
- Extensible with custom filters and extensions
- Available in node and all modern web browsers, with thorough precompilation options
What is Swup?
In their own words: "Think of swup as being pjax on steroids. The concepts are similar to those used in barba.js or other transition libraries, but swup gives more attention to ease of use and flexibility. Apart from loading the contents of the new page and replacing required parts in DOM, swup is built around CSS transition. The main thing that needs to be done is defining hidden state in CSS. Swup detects the end of transition of animated elements and proceeds to replacing the content of containers and animating your page back. For the animations based on CSS to be possible, swup uses several classes that are assigned to the html tag through the process of page transition."
And what about these georgeous background gradients?
Gradient Magic is the largest gallery of CSS Gradients on the web, with new and exciting gradients added all the time
CSS Gradients are fancy patterns created via CSS, primarily used to add color or patterns to a website. They have many benefits over images, including being easier to work with and much smaller in size.
As long as you don't re-distribute or re-sell gradients or derived images from gradientmagic.com, you may use them on personal or commercial projects with attribution.
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.
Check out the responsive image javascript module to see this in action.
