Flexible grid system

Today we started to look at different Grid based layout’s. We was each given a different grid system to try out then apply it to our own App websites. I was given the 1140 grid system (http://cssgrid.net/). This system was a very good introduction to the grid based approach.

Here are my pros and cons of the system:

Pro’s:

Great easy use

attached photshop file to show the layout aswell as HTML file showing the coloum princable in an easy to understand way

helpful for understanding flexiable grids

Quick and easy layout’s

gives you the abilty to make anything! (you dont have to find work arounds as the code is basic and only for layout you not restricted creativly by certain add ons or limitaions)

Cons:

No added goodies (like drop down menu’s)Responsive is limited it simply is fluid until 767px where it converts everything to a 1 colum layout

basic

This exsperience has helped me a lot however and so for been the most valuable lesson i belive along with media quieres. I have took what i learnt today and took a fresh look at Bootstrap (http://twitter.github.com/bootstrap/) as i was looking at this before however was to scared by the daunting task of attacking it on my own however with my new found insight into the working of a grid system i can easily see how the system works. Bootstrap is what i will most likely look at for creating my website. I am going to create a simple block colour mock up in bootstrap with no content simply to use it i will aim to creat somthing similar to my photoshop wireframes. If this is successful it also means i can replace my HTML with a new HTML file with the content in and it will fill it in for me :D. I am very excited about this devleopment and makes Web design less of a task i still enjoy HTML and belive its essetial to know but this means i create more profesional and quicker website’s.

 

 

 

 

Advertisements

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