Outdoors Template

January 31, 2018 0 Comments

Outdoors Template

 

 

An implementation of Gil Huybrecht's “Outdoors” design project powered by layered CSS grids.

outdoors_featured

Today we’re very excited to share an experimental implementation of one of Gil Huybrecht’s designs with you. Gil creates fantastic signature designs with amazing animations and he kindly permitted us code up one of his works.

The design project is called “Outdoors” and it has a very interesting layout with a content/image slideshow and an expanding element. While we tried to implement it as close as possible to the design, we opted to adjust some details. We hope you like the way that it turned out!

If you like Gil’s design, we recommend you checking out his Skillshare class where he teaches about visual hierarchy and spacing.

Note that this implementation is a proof-of-concept that uses modern CSS properties like grid and custom properties. You’ll need to implement proper fallbacks for older browsers.

The layout is powered by layered CSS grids which allow us to use a more semantic HTML structure (see mobile version) without repeating content. We use anime.js for the animations, imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

Have a look at some screenshots:

outdoors_01

outdoors_02

outdoors_03

We hope you enjoy this layout and find it inspiring!

Thank you, Gil, you rock!

References and Credits


Tag cloud