960 Grid System -  A hands-on introduction
Upcoming SlideShare
Loading in...5
×
 

960 Grid System - A hands-on introduction

on

  • 5,628 views

This hands-on introduction to the 960 grid system was prepared by Mario Hernandez in an effort to educate fellow designers and developers of the Federal Court system in the use of grids and ...

This hands-on introduction to the 960 grid system was prepared by Mario Hernandez in an effort to educate fellow designers and developers of the Federal Court system in the use of grids and frameworks. August 2011

Statistics

Views

Total Views
5,628
Views on SlideShare
4,701
Embed Views
927

Actions

Likes
1
Downloads
95
Comments
2

5 Embeds 927

http://designsdrive.com 407
http://www.socalcodecamp.com 336
http://www.3waves.ro 135
http://feeds.feedburner.com 44
http://www.designsdrive.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hello MIcah David,
    Thank you for your comment. This presentation is not a video. They're simply power point slides you would normally use during a presentation. If you'd like to see a hands-on video of the 960 Grid System I suggest you take a look at this one http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/.

    I hope that helps.

    Mario
    Are you sure you want to
    Your message goes here
    Processing…
  • HOW CAN I DOWNLOAD THIS VIDEO?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

960 Grid System -  A hands-on introduction 960 Grid System - A hands-on introduction Presentation Transcript

  • 960 Grid System A hands-on introduction By Mario Hernandez - District Court - California Central Collaborative Applications Development Forum - August 2011Sunday, August 28, 11
  • What is a grid system? A series of columns working as guides to streamline web development workflow by providing commonly used dimensions, based on a fixed width of 960 pixels. Source: WikipediaSunday, August 28, 11
  • Not exclusive to web designSunday, August 28, 11
  • Grid Systems on Graphic DesignSunday, August 28, 11
  • Source: Grid (page layout), wikipediaSunday, August 28, 11
  • Painting by Piet Mondriaan (later Mondrian)Sunday, August 28, 11
  • Grid systems on the web • Grid systems on the web usually take the form of a CSS framework • A framework is a “reuseable abstraction of code wrapped in a well-defined API” * • A collection of tools and shortcuts designed to minimize code and make your life easier* Source: Software framework, WikipediaSunday, August 28, 11
  • Examples of FrameworksSunday, August 28, 11
  • CSS Frameworks • Apply the principles of software frameworks to web design • They provide standardized rules and shortcuts for: • Browser resets (http://meyerweb.com/eric/tools/css/reset/) • Typography • Navigation • Print styleSunday, August 28, 11
  • Why use a grid system? • Saves time • Saves money • Reduces frustrationSunday, August 28, 11
  • Adopting a grid system can accelerate design while maintaining orderPhoto by dysturb, Grid. FlickrSunday, August 28, 11
  • How do grid systems work? • Grid systems are built using columns • Columns are grid system’s smallest unit of measurement • The two most popular version of a grid system are 12 and 16 columnsExample based on 960.gs (12 columns)Sunday, August 28, 11
  • Column width • Page regions (header, sidebar, content, etc.,) are defined by column width • As in: “The header is eight columns wide”Example based on 960.gs (12 columns)Sunday, August 28, 11
  • Gutters (margins) • Margins are used to create gutters between columns • These margins provide gutters between page regionsExample based on 960.gs (12 columns)Sunday, August 28, 11
  • Floating <div> elements • The wrapping <div> class: grid_12 elements are assigned a column width using a class: grid_4 class: grid_4 class: CSS class grid_4 • Because these classes class: grid_8 also float the elements, they simply fall into class: grid_6 class: grid_6 place on the pageSunday, August 28, 11
  • Example of floating elements .box1 .box2 .box3Sunday, August 28, 11
  • Example of floating elements .box1 .box2 .box3Sunday, August 28, 11
  • Example of floating elements .box1 .box2 .box3Sunday, August 28, 11
  • Example of floating elements .box1 .box2 .box3 .box1, .box2, .box3 { display:block; float:left; margin: 0 10px; }Sunday, August 28, 11
  • What is 960.gs? • 960.gs — also known as the 960 Grid System — was created by Nathan Smith in order to “streamline web development workflow” • It’s both a prototyping and development framework Source: 960.gsSunday, August 28, 11
  • What’s in it? • You can download it from http://960.gs • GPL and MIT licensed • The 960.gs download includes: • Printable sketch sheets for doodling • Design templates for all most applications: Photoshop, Illustrator, Inkscape, OmniGraffle, etc. Source: 960.gsSunday, August 28, 11
  • 12 column version Source: 960.gsSunday, August 28, 11
  • Grid system CSS classes • grid_x (where X indicates the number of columns an element is given) • alpha & omega: Fix floats on nested regions • prefix & suffix: Allow empty spaces before or after a region grid_4 grid_4 • pull & push: Rearrange push_6 pull_6 regions independently of the order they appear on the markup Source: 960.gsSunday, August 28, 11
  • Grid system CSS classes • grid_x (where X indicates the number of columns an element is given) • alpha & omega: Fix floats on nested regions • prefix & suffix: Allow empty spaces before or after a region grid_4 • pull & push: Rearrange push_6 pull_6 regions independently of the order they appear on the markup Source: 960.gsSunday, August 28, 11
  • Grid system CSS classes • grid_x (where X indicates the number of columns an element is given) • alpha & omega: Fix floats on nested regions • prefix & suffix: Allow empty spaces before or after a region grid_4 grid_4 • pull & push: Rearrange pull_6 push_6 regions independently of the order they appear on the markup Source: 960.gsSunday, August 28, 11
  • Let’s see it in action The rest of the presentation is a hands-on demo of the grid system.Sunday, August 28, 11
  • Sunday, August 28, 11
  • When not to use a grid system • Implementing a grid will probably be impossible if your site’s layout... • uses irregular column sizes • has irregular margins or gutters • has a width that isn’t divisible by a sane numberSunday, August 28, 11
  • Questions? phone: 818-275-4927 email: designsdrive@gmail.com twitter: @designsdriveSunday, August 28, 11
  • Acknowledgements • Nathan Smith: Creator of the 960 grid system. Without his influence and vision this presentation would not be possible. Learn more about the grid system at http://960.gs • Todd Nienkerk: Co-founder, designer four kitchens (twitter: @toddross). I saw his 960 grid system presentation at the 2011 LA DrupalCamp conference and he blew me away. He kindly allowed me to use some of his material for this presentation. You can catch his presentations at http://fourkitchens.com/presentations. • Jonathan D’andries: Developer for District Court, WIWD. His hard work on promoting standards and best practices for design and development within the Court’s system is influential. I personally thank him for the opportunities he has given me.This presentation was created by Mario Hernandez in an effort to educate fellow designers and developers of the Federal Courts Systemin the use grids and frameworks. August 2011.Sunday, August 28, 11