Outdoors Template

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

By in Playground on
Demo Code

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.

outdoors_featured

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this layout and find it inspiring!

Thank you, Gil, you rock!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Experimental CSS-Only Carousels with Scroll-Driven Animations

Creating a Bulge Distortion Effect with WebGL

Some More On-Scroll Typography Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 23

Comments are closed.

  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.

  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.

    • “Template”
      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!

  6. working in Firefox but doesn’t Working on Chrome 63 Version. Grid Structure is breaking.

  8. 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

    • 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

    • The easiest way I can think of is using on.mouse scroll click next item (or trigget next item).

      I can help you out via email if you want.

      Cheers!
      -Roch

    • Hi, I’m very bad in JS, I tried to do some tests of functions in main.js but I can not do anything that works. I would also like to make slides changing on scroll. If you arrived to make it works, it would interest me if you accept to share how you did it. 🙂

    • Hi Roch,

      Will be really appropriated if you can share the function that scroll triggers next item, please let me know. Thanks

      Regards,
      Ke

  13. Thanks for this template, its awesome. But i found a bug if i download this layout and only checking the facts in 2nd and 3rd section.
    Would be great if you can answer me, thanks.

  15. Love the template thanks for sharing and keep on sharing these awesome templates 🙂

  17. Awesome Effort. I loved the coding and interactions. Is there any way to control this sliding animation with thumbnails.