Our homepage is getting CSS Grid a makeover! |
| The new CSS Grid layout technique that CoffeeCupper Bob has been writing about is gaining speed. Now that all major browsers support it, we couldn't wait to implement it on our website. So we're starting by refreshing our homepage.
|
| You see these stacked images below? Using CSS Grid for layout they are layered as you see them for small screens, while placed next to each other on larger screens. And since they are separate images, some buttery animations can be added to them as well. You can check out the demo here.
|
| "Grid' is great for a modular design approach, updating section by section with this modern layout technique, instead of overhauling the page at once. We are documenting and video-ing the process as we go and we felt this would be an excellent start to the CSS Grid (App) educational series.
|
| In this first article, Bob completes the design of the hero section of our new homepage. You will be able to follow along and learn how to code CSS Grid layouts, and see how this can be done visually with CSS Grid Builder.
|
| Don't miss out on the great video demonstration narrated by Suzanne while you're there. It is not all about layout either. In under 15 minutes you will also learn about #css-transitions , see how to design #mobile-first , update properties at #breakpoints and use the style controls in #css-grid-builder .
|
| If you haven't downloaded the free Grid Builder app yet, we totally recommend it. It's an awesome tool to prepare and perfect this layout skill. We'll have more tutorials and videos coming next week. Stay tuned! |
|
|
|
