Hello and welcome to RWD Weekly edition #288 where I thought we'd round up a few articles and resources for those of you that want to up your CSS Grid game.
Christmas is my favourite time of year because clients start to go on leave and the work tends to be a little bit quieter over the holidays allowing for a bit of experimentation and play. If you're lucky enough to be a bit quieter over the holidays take the opportunity to up your skills in Grid and find out why this is going to be THE new approach to laying out web sites.
| | | Reasons to: is the award-winning international design and code conference with a festival vibe. I attended my first this year in Brighton and have already snapped up my ticket for London next March. It literally has changed the way I work and caused me to become more creative in my day to day life. | | Articles When you're laying out your new grid based pages it's good to know just how users consume content on the page, and what makes it easier/less effort.
Get started with Grid Layout and mix in a bit of Flexbox as well as you read through this post from Eva Ferreira from Aerolab. There's a few real world examples in there for you to check out too.
I'm doing a lot of experimenting and reading on Grid Layout at the moment so it's good to see article after article coming through from either of the experts, Jen Simmons or, in this case, Rachel Andrew.
If you're like me and wanting to push the designers you work with to take advantage of the new capabilities the Grid and Flexbox give us then this article might help them get to grips with the capabilities.
For me, minmax() is the key responsive feature of the CSS Grid Layout specification and provides the most responsive capabilities for the least amount of effort. If you're not sure what minmax() does with Grid then I strongly urge you to find 2.5minutes in your day and watch this video from Rachel Andrew.
Tutorials Laying out a calendar can be tricky when it comes to multiple viewports. We've previously covered responsive calendars, but in this tutorial Snook takes you through an approach using CSS Grid.
If you're digging into CSS Grid Layout then you might want to check out using something like this Sass Mixin to provide some better browser support.
A look at how to start a layout with floats before moving to Flexbox and then on to Grid. Me, well I'm working on a small project at the moment which has not floats in it at all, but then if you're supporting back to IE9 you might find this incredibly helpful.
Learn the CSS Grid in ASCII... you know you want to! It actually gets a lot more detailed than ascii diagrams though, but it is a very good way to showcase the layout and changes required at different viewports. Varun uses a product grid over at Aldo shoes to show how Grid can make it super easy to achieve really fluid and gorgeous layouts.
Last year Tyler came to the party with an approach to break out a full-width image away from our content container. Now he's found a similar way to achieve this through the use of the new Grid CSS spec that's taking the world by storm... or at least it certainly should be taking your world by storm.
In this tutorial from Rachel which takes the Responsive Calendar and rebuilding it using the CSS Grid. It's a different approach from Snook below, but as with everything when it comes to building on the web there are many ways to accomplish the same result
These are a set of awesome experiments from Jen Simmons
This is a great example of a big site in production for a big brand that is using Grid Layout. Let's break it down.
A great magazine based layout in Codepen using the CSS Grid Layout and some large typography.
I was really keen to create a website within a virtual box using transforms and CSS Grid, and this comes pretty close to my initial idea. This kind of stuff becomes even more interesting when you start to apply the Z index and bring the content into WebAR or WebVR which is really starting to peak my interest.
Tools & Resources This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew. It's so choc-a-block full of information it's probably the only link you really need to go to this week ;)
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! This is similar to Flexbox Froggy and will teach you the new syntax in a simple carrot growing way.
CSS Tricks is always good for a CSS Trick or two. Their Flex Box reference has helped me out on more occasions than I'd like to admit and now they've got the same resource for Grids.
Jobs Weebly Engineers enjoy a unique opportunity to work with a wide array of technologies. Engineers are actively encouraged to explore different sectors of the tech stack and delve into specific areas of interest. As a Weebly Engineer you will have the freedom, and be supported by the entire team, to grow professionally.
See you next week for our bumper to bumper responsive images edition.
Cheers,
Justin. | | | |
No comments:
Post a Comment