Outdoors Template

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

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:




We hope you enjoy this layout and find it inspiring!

Thank you, Gil, you rock!

References and Credits


Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 13

  1. 2

    Stunning! Heads up though, the demo is only working for me through Safari. It’s not displaying properly on the latest Chrome and Firefox builds. I’m using a MacBook.

  2. 3

    Is this going to be a finished build or just a sample homepage? I really like the feeling and layout, but all the menu buttons and the read more button doesn’t work as of yet.

    • 4

      As in, something to learn from- or a starting point. Though I have seen some AWWWARDS sites that are literally Codrops demos, with different information…

      You can add functionality or styling to the read more button yourself, can’t you? That’s part of the fun of web design and development. Learning and applying what you know.
      There are quite a few helpful resources on this very site!

  3. 9

    Hello, beautiful and awesome work!
    I was reading the code and I was wandering if you can tell us how you generate this project. By sharing maybe your package.json ? I love how you wrote the main.js and I’d love to have some recommandations to work like that. I also read your css and how you wrap your classes by using double underscore.
    It will be awesome if you answered me!

    Thanks a lot

    • 12

      Very nice, but links don’t work in gallery 1 and gallery 2.
      If you define a link for gallery 1, then gallery 2 has the same link
      I need help
      Tahnk you

Follow this discussion

Leave a Comment