Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 106,575
Total Posts: 592,698
There are 86 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Graphic Design, Multimedia and Photography :

How Do You Use A Grid System?

Thread title: How Do You Use A Grid System?
Reply    
    Thread tools Search this thread Display Modes  
08-11-2012, 08:14 PM
#1
BoyWonder is offline BoyWonder
Status: Member
Join date: Mar 2012
Location: Brooklyn, United States
Expertise: Programming
Software: Notepad++
 
Posts: 102
iTrader: 0 / 0%
 

BoyWonder is on a distinguished road

  Old  How Do You Use A Grid System?

I am a developer, who knows close to nothing about design, so please bear with me. As I read books about design, I keep getting stuck at the idea of a grid system such as 960gs. I completely understand designing within a width of 960px, but I don't understand what the red columns are for, or how this helps with the layout of a site. As a side note, I don't really see the benefit of the class library, as it just seems to increase load time for basic styles.

08-12-2012, 08:48 PM
#2
Trustworthy is offline Trustworthy
Status: Junior Member
Join date: May 2012
Location:
Expertise:
Software:
 
Posts: 98
iTrader: 2 / 100%
 

Trustworthy is on a distinguished road

  Old

A skeleton or framework basicaly just sets the max width of a page and inserts collumns in that width.

For example you can have four collumns each 240px wide ( 4 x 240 = 960). This means that you can have one, two, three, four ( and possibly more) collumns which makes it super easy to customize a page with simple html coding with some css backbone.

For example: (simplified coding)

<div class="col960"> text here </div>
<div class="col720">text here</div> <div class="col240"> text here </div>

This would create a single collumn and beneath it a 3/4 and 1/4 collumn.

Needless to say this is a really easy and practical way of dividing a webpage into pieces moreover it offers a simple way of making numerous pages on your website each with another collumn layout.

I agree that it might seem abstract but if you pay attention to premium web templates out there you will most likely see that 99.9 percent uses such a skeleton!

Hope I've helped ^_^

kind regards

08-12-2012, 09:43 PM
#3
BoyWonder is offline BoyWonder
Status: Member
Join date: Mar 2012
Location: Brooklyn, United States
Expertise: Programming
Software: Notepad++
 
Posts: 102
iTrader: 0 / 0%
 

BoyWonder is on a distinguished road

  Old

i'm sorry, i still don't follow. what exactly are the columns for? what exactly is a column in regard to layout? again, i nearly have any knowledge of design. and how do you design/layout a page according to a grid system framework?

Reply With Quote
08-13-2012, 01:11 PM
#4
Trustworthy is offline Trustworthy
Status: Junior Member
Join date: May 2012
Location:
Expertise:
Software:
 
Posts: 98
iTrader: 2 / 100%
 

Trustworthy is on a distinguished road

  Old

The collumns are content holders ( text, image etc ), they display the content in their defined space.

Take a look at : http://demohtml.templatesquare.com/lighter/

You can see the slider and below are three "services" blocks! Those three blocks are collumns (might wanna take a look at the source code of that page and you'll see it in div's ) Aswell as the text below them.

You can search "skeleton HTML framework". You'll find HTmL and CSS "boilerplates". This means that you can just download those files and use them directly in your design! Basically it's a CSS file with predefined collumn widths made into classes and you can use those classes in your HTML file ( div class= ).

It's hard for me to explain why this is so usefull, but if you spend a little time using it you'll just notice that such a boilerplate makes it so much easier to customize a templates look and feel witouth to much hassle! ^_^

hope i've helped and if you have any qestions do not hesitate to contact me!

Kind regards

01-31-2013, 05:47 AM
#5
Twoodson is offline Twoodson
Twoodson's Avatar
Status: I'm new around here
Join date: Jan 2013
Location: Chicago, IL
Expertise: Design
Software: Microsoft Office (Word)
 
Posts: 5
iTrader: 0 / 0%
 

Twoodson is on a distinguished road

  Old

This might help you!! When you get to the web site under the first column to your left which is about articles click on the first following article "The 960 Grid System Made Easy" or, you can get there quicker by clicking on the website link I have provided below:

http://sixrevisions.com/web_design/t...tem-made-easy/

http://www.thegridsystem.org

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed