Badge: Frameworks

The idea of CSS frameworks is very simple. Your content is all separated vertically by a grid. This allows designers to organize and visualize along this grid to space and arrange their elements. It’s really quite genius and once I got the hang of it, I appreciated the simplicity of it. I opted to use the 960 grid system. In most of my projects now, 960 is pretty much my standard main content width. It just really seems to work. It’s wide enough to fill the page, but it’s narrow enough to not make you feel like the content is overwhelming. Anyways, within the 960, you can have a grid of either 12 or 16 columns. I like 12 columns, so that’s what I worked with. Each column is 60 pixels wide with a padding of 10px in between each column. You arrange things by designating how many columns it ought to take up. I’ll show you an example below.

Version one of my frameworks design.

As you can see, the pictures are arranged in three columns. So I told the coding, “Okay, I would like the picture to take up four columns.” I tell it that by putting it in a div id and then naming the class of that div “grid_4″ — this tells it to take up four columns. I did the same for my other two pictures. If I told the third picture to take up 5 columns instead by saying grid_5, then it would have bumped down below the first picture because it wouldn’t have fit within the 960px. Everything has to add up to 960px.

When I did the columns, I put the text in their own div tags and called their class “grid_6″ because I wanted them each to take up six columns. See? It’s really quite simple once you understand what the class names are telling each part to do.

This is a good way to organize material if you are in a rush and just need to get some stuff up there in a jiffy. I’m not 100% sure I will ever use CSS frameworks in the future, but I think it’s something really interesting to know how to do. I think it would be even better if they had something that arranged content both vertically and horizontally, but that’s probably more complicated since you can scroll down eternally on a webpage.

If anyone would like to learn frameworks, I used this tutorial video to teach myself.

Also below are the other versions of the content I arranged.

Version two of “Silver-Locks and the Three Bears”

And version 3

About these ads

One response to “Badge: Frameworks

  1. Pingback: CSS Frameworks (Laura Schluckebier) « Trinity Web Design Badges (Spring 2012)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: