Prowler » Loves

Prowler » Loves

A webmaster blog helping you add stuff people will love

Introduction to css grid layouts

[image coming soon]

Who remembers the days in the 1990s, when you would design a website in Photoshop, slice it, then have it fit into a table? In those times it was impressive to have content in an ever expanding box. People who didn’t even know HTML would be amazed when they saw that, and ask how it’s done. Those were the times! You would have to slice a table that would have 5 or 9 cells for that. We’ve moved a long way from that, so we thankfully don’t have to do that any more.

Now we have CSS, people have created CSS frameworks to help us create our layouts. This post is for the people who want to learn how to create layouts using a css grid. We don’t use tables any more for layouts, so every web designer will have to learn this anyway at some point. We use CSS frameworks to create grid layouts.

I’ll give you an example of a grid layout.

css grid layout example yeeaahh

yeeaahh

This post will teach you how to create grid layouts.

Fixed grid layouts

The way grid systems work, instead of fiddling with awkward colspan and rowspan as you would with tables, you instead have your rows which are divs, and then you add columns in those rows, which are also divs. As with all grid systems, there is a minimum width for each column, and a maximum amount of columns that you can make. There is also a gutter which is the spacing between each column. CSS frameworks help you make grid layouts.

The first ever CSS framework made  is called the 960 grid system. It allows people to create websites with a 960px width. With  the 960 grid system, the minimum column width is 40px or 60px, and the maximum columns you can have is 12 or 16. People like css frameworks, as they allow people to add structure to their designs. Below is what the 960 grid system looks like with 12 columns.

960 grid system 12 columns

If you want to check out examples of websites made with 960, you can check out the website.

The first time I saw 960.gs, I thought it was useless for me. I didn’t like the idea that the css framework made the layouts 960px. I wanted there to be an option to choose the maximum width of the layout. So after looking around, I found a css framework that I liked. It’s called 1kb grid.

1kb grid is really cool, because you get to choose how many columns you want, your column width, and your gutter width. It provides you with flexibility. The website provides a really good and easy tutorial, so it’s better you learn off that. You can launch 1kb grid now.

A shortcoming of 1kb grid, is that you only have a predefined set of options to choose from. If you’re coming off with some next crazy stuff, you can have total flexibility of your grid, by choosing the Variable Grid System. You might not ever have to use it, but the option is there.

Fluid grid layouts

You might be wondering how to use css frameworks to make fluid grid layouts. The concept is basically the same. I forgot to mention that with grid layouts, that all the rows are stored inside <div class=”container”></div>. Now what happens is that instead of the container being a fixed width, that it’s instead a percentage value such as 90%. You can change this in the CSS file. Each column is worth a percentage. If you have 12 columns of 960px, then each column would be worth 8.3%.

If you like the 1kb grid system, you will be happy to know that there is a fluid version if. It’s called Tiny Fluid Grid. That doesn’t need any tutorials, and it’s very easy to convert your fixed 1kb grid layouts, to tiny fluid grid layouts.

The Variable Grid System supports fluid designs, so there’s nothing much to say about that here.

Adaptive grid layouts

There is a new term today in the world of UI designers web designers called responsive design. It means when a website changes its width when you resize the browser window to make the website smaller. It allows websites to work well on computers, mobiles, and tablets.

What I don’t like about responsive design, is how web designers use it to be pretentious and then start to brag that they can do responsive design, and make their clients pay extra for it. I don’t mind them paying extra for it, but their pretentiousness is annoying to web designers like me, who can see through their braggadocios façade. That’s all most web designers do nowadays, brag about their design and clients, when they are cliché and mediocre. It’s like they don’t try any more.

Enough about that, swiftly moving on, there are new CSS frameworks that have come out to let people make responsive designs. You could easily make them yourself by adding media queries width width and clear both attributes, but the new CSS frameworks makes it easier from the start. You also get to work less. Below I will show you 3 css frameworks that are really cool, so they are worth trying out.

Intuit CSS is good. I’ve used it, and it helped me do columns and center things on the screen. What I like about it, is that it even helps you get your typography right. It lets you set a baseline.

About Less Framework, that’s better described with an image. I haven’t tried this one out.

less framework options

Don’t we all love css wizards? Those people who push css to its limits, in ways that you could never think of? Well those css wizards have done it again. The same person who made Less Framework made a successor to it called Frameless. According to its creator, Frameless is not a css framework, as it doesn’t include any files. It’s just an idea. So that makes it some sort of shadow framework. That is weird. I’ve went on the website to look on the instructions of how to do it, and I don’t get it. I’m going to have to examine the source or something later on. You can read about Frameless here.

I caught word from someone about two more CSS frameworks that are really cool that they use for wireframe mockups.  The first one is called Bootstrap which is made by Twitter. If you couldn’t guess, it was made for web applications. Foundation is another cool one. It’s main features are an impressive grid layout, rapid prototyping, and responsive layouts. About the grid, you can center columns, and override the default column stacking behaviour of the responsive framework, to decide how big you want columns to be when the window is resized.

For when CSS Frameworks won’t help

There are times when a CSS framework won’t help, like for example when you make a design like this.

I’m sure if I gave you the psd for this, that you could slice this into a pure css layout. This layout doesn’t use a grid at all. The thing with css frameworks, is that you use the framework to create a skeleton structure for your website, and then design it in Photoshop afterwards. Maybe you don’t use Photoshop but I do. I find that some designs I use Photoshop first and don’t use a css framework for a grid layout, and sometimes I use a css framework for a grid, then fill in all the design details in after, using Photoshop. What you do should depend on the task at hand. The only thing you might need help on, is how to create rows and grids.

Conclusion

So now we’ve covered how to use css frameworks. There’s nothing much I can think about saying now, other than that they should save you loads of time. I wonder what advances css have in web design next.

What about you? What CSS frameworks do you use, and what are your thoughts on this?

Related Posts Plugin for WordPress, Blogger...
This entry was posted in Design.

*
*

Your email will not be published.