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

Previous:
Next:

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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 23

Comments are closed.
  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

      “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!

  3. 7

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

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

    • 14

      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

    • 15

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

    • 16

      Hi Roch,

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

      Regards,
      Ke

  5. 18

    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.

  6. 21

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

  7. 23

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

Comments are closed.