The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren’t grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They’re easy. We’ll set a simple one up in just a few minutes. The concepts at work here insprired the article “Don’t Overthink It Grids.”
Of course, we run into a few problems along the way (as you do). In this case, we used an attribute selector that didn’t match like we wanted it to.
We also set up a “toolbox” CSS file that will contain classes that are generic, reusable, and kind of globally useful. The first one, as ever, is the Clearfix – a bit of CSS we can use on parent elements that we don’t want collapsing because of their floated children. We don’t load up this toolbox CSS as a separate file, we @import it into the global.
We get the grid working, but we still have work to do in getting the modules sitting in there correctly and gutters set up.
I’m not being paid by Gridset to endorse their product, but I have to say the grid layout and the abilities of the overlay script to line things up much tighter and in a responsive way is the bees knees.
I like to start with a number or object that relates to the grid. If you don’t have an object or number then make a number up. 15px gutters are way too small and 60px is way too large. Staying in between 30-40px feels just right -like my porridge.
Checkout the Mark Boulton video series on grids.
This is why box-sizing: border-box; rocks my world. Enables percentage based grids not to be ruined by adding in a fixed or px based padding. My life was complete that day.
However, I do disagree on Gridset. While I think it’s a nice GUI and a clever idea, my concern is that if average people or those new to coding don’t understand how the grids work or what they need to consider with the box model it’s not great.
Also – I built my own grid framework a while back using 1140px grid as inspiration but I probably only use it 50% of the time because half the sites are quite unique in terms of layouts etc.
I switched to Gridset from Twitter Bootsrap. It is so nice. It just gives me a grid, and it’s whatever I want.
For all new to gridset, make sure you use Clearfix with it Chris mentioned.
Nice too see the ‘don’t-overdo-it grid’ there… I’ve always been a bit scared of all the grid frameworks out there. But, wow, how simple is it!
Thanks
I really like the “don’t overthink it grids” concept. Allthough this is just a 10 min screencast, I think it’s one of the most useful ones.
Also it’s great that you host the videos on Vimeo, they now load a lot faster for me.
Thanks!
Love the screencasts so far buddy, one question though, wouldn’t it be just as easy to use
column-count,column-widthandcolumn-gapwithin CSS3? An example would be something like this.or use the shorthand
and add that to a
section? This way the browser does the work from you and there is zero math required. I’m guessing this will fail horribly in ltIE10 but want doesn’t :)We use CSS3 columns later on in this series for the gallery, so check that out for an example of how that works.
I think of CSS3 columns as for text and simple content, not really for layout. For example, you can’t just say “I want this thing in the third column” – you don’t get that choice. Things just flow into the third column as dictated by the flow. That’s not going to work for most designs.
Good call, after playing around with them a little further I found they are a little limited and the flow has some quirks with borders flowing where I didn’t want them too…
Thank you Obi Wan, this padawan has much to learn.
Chris, awesome videos!
Around 4:31, you write [class^=’grid-‘] { /* some code*/}. I’m a newb and have never seen that before. Is that type of class selection something that’s built into sass? My limited experience looking at code has led me to believe that this syntax was only for selecting _attributes_ that “begin with”, “contain”, etc., as opposed to elements with a particular class or id name.
Thanks!
[class^=’grid-‘] { /* some code*/}
That selector means in English: “select elements with a class attribute that starts with ‘grid-‘.”
It has the same specificity as a class selector, so it’s just a shortcut so you don’t have to do like:
You can just do
And get them both because they both start the same. It might be overly clever though. Current Chris is more inclined to use the actual class name. Partly because that way it doesn’t matter how you order the class names on the element then, like it does if you use “starts with.” You could use
*=as well for basically “contains” – but that has it’s fragilities as well.