際際滷

際際滷Share a Scribd company logo
960 Grid System
    An introduction




   by Mario Hernandez
About
 Web developer for the federal government
 Freelancer with over 10 years experience in
  web design
 Front-end designer
 Main platform: Drupal
 Founder of DesignsDrive.com
How far has css come?
 CSS is more powerful than ever
 CSS3 & HTML5
 JQuery and Javascript
What is 960 Grid System?
 The 960 Grid System is an effort to streamline web
  development work鍖ow by providing commonly used
  dimensions, based on a width of 960 pixels.
 Created by Nathan Smith (http://sonspring.com/about)
 There are two variants: 12 and 16 columns, which can
  be used separately or in tandem.
 Get it at http://960.gs
Three things:
 You should have a good understanding of css
 This framework will not solve all your
  problems
 The grid is not for all websites (newspaper/
  magazine style)
Pros
 Rapid development
 Clean grid structure
 Cross browser compatibility - web standards
 Light weight code (~20kb)
 Build complicated layouts easily
Cons
 You are limited to a 960 width
 As with any framework, you lose some
  鍖exibility
 Its not your own code
The true power of 960 is demonstrated when building
          complex newspaper-like layouts.
An introduction to the 960 grid system
An introduction to the 960 grid system
css classes: grid_x
                            12


1                                11


    2                                 10


        3                                  9


            4                                  8


                5                                  7


                    6                                  6


                        7                                  5
css classes now in session
  alpha (鍖rst child grid within a grid)
  omega (last child grid within a grid)
  pre鍖x_x (to apply empty space before)
  suf鍖x_x (to apply empty space after)
  pull_x (to horizontally reposition content)
  push_x (to horizontally reposition content)
An introduction to the 960 grid system
An introduction to the 960 grid system
Lets get started
    Download & demo
An introduction to the 960 grid system
Other options
 http://www.blueprintcss.org/
 http://www.thegridsystem.org/
Questions?
 web: http://designsdrive.com
 email: designsdrive@gmail.com
 twitter: @designsdrive

More Related Content

Similar to An introduction to the 960 grid system (20)

CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing website
Mario Hernandez
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
Gaurav Mishra
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Four Kitchens
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
Nathan Smith
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Four Kitchens
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
Mario Hernandez
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
Steve Hong
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
Adrian Westlake
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Four Kitchens
CSS Grid Systems
CSS Grid SystemsCSS Grid Systems
CSS Grid Systems
Leonardo Ortega
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
sharjeet
Drupal 7 ninja theming
Drupal 7 ninja themingDrupal 7 ninja theming
Drupal 7 ninja theming
Claudio Beatrice
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
Mario Hernandez
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
Randy Connolly
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise Jacobs
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
Denise Jacobs
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Four Kitchens
CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing website
Mario Hernandez
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
Gaurav Mishra
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Four Kitchens
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
Nathan Smith
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Four Kitchens
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
Mario Hernandez
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
Steve Hong
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
Adrian Westlake
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Four Kitchens
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
sharjeet
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
Randy Connolly
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
Denise Jacobs
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Four Kitchens

More from Mario Hernandez (11)

Responsive images in Drupal 8
Responsive images in Drupal 8Responsive images in Drupal 8
Responsive images in Drupal 8
Mario Hernandez
Component-driven Drupal Theming
Component-driven Drupal ThemingComponent-driven Drupal Theming
Component-driven Drupal Theming
Mario Hernandez
Responsive design with flexbox
Responsive design with flexboxResponsive design with flexbox
Responsive design with flexbox
Mario Hernandez
Building your first d8 theme
Building your first d8 themeBuilding your first d8 theme
Building your first d8 theme
Mario Hernandez
HTML5 and CSS3
HTML5 and CSS3HTML5 and CSS3
HTML5 and CSS3
Mario Hernandez
Introduction to drupal
Introduction to drupalIntroduction to drupal
Introduction to drupal
Mario Hernandez
Rapid wireframing and prototyping
Rapid wireframing and prototypingRapid wireframing and prototyping
Rapid wireframing and prototyping
Mario Hernandez
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Mario Hernandez
Introduction to Drupal Content Management System
Introduction to Drupal Content Management SystemIntroduction to Drupal Content Management System
Introduction to Drupal Content Management System
Mario Hernandez
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
Mario Hernandez
Responsive images in Drupal 8
Responsive images in Drupal 8Responsive images in Drupal 8
Responsive images in Drupal 8
Mario Hernandez
Component-driven Drupal Theming
Component-driven Drupal ThemingComponent-driven Drupal Theming
Component-driven Drupal Theming
Mario Hernandez
Responsive design with flexbox
Responsive design with flexboxResponsive design with flexbox
Responsive design with flexbox
Mario Hernandez
Building your first d8 theme
Building your first d8 themeBuilding your first d8 theme
Building your first d8 theme
Mario Hernandez
Introduction to drupal
Introduction to drupalIntroduction to drupal
Introduction to drupal
Mario Hernandez
Rapid wireframing and prototyping
Rapid wireframing and prototypingRapid wireframing and prototyping
Rapid wireframing and prototyping
Mario Hernandez
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Mario Hernandez
Introduction to Drupal Content Management System
Introduction to Drupal Content Management SystemIntroduction to Drupal Content Management System
Introduction to Drupal Content Management System
Mario Hernandez
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
Mario Hernandez

Recently uploaded (20)

Blockchain for Businesses Practical Use Cases & Benefits.pdf
Blockchain for Businesses Practical Use Cases & Benefits.pdfBlockchain for Businesses Practical Use Cases & Benefits.pdf
Blockchain for Businesses Practical Use Cases & Benefits.pdf
Yodaplus Technologies Private Limited
Benchmark Testing Demystified: Your Roadmap to Peak Performance
Benchmark Testing Demystified: Your Roadmap to Peak PerformanceBenchmark Testing Demystified: Your Roadmap to Peak Performance
Benchmark Testing Demystified: Your Roadmap to Peak Performance
Shubham Joshi
Supercharge Your Career with UiPath Certifications
Supercharge Your Career with UiPath CertificationsSupercharge Your Career with UiPath Certifications
Supercharge Your Career with UiPath Certifications
DianaGray10
Caching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at ScaleCaching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at Scale
ScyllaDB
TrustArc Webinar: State of State Privacy Laws
TrustArc Webinar: State of State Privacy LawsTrustArc Webinar: State of State Privacy Laws
TrustArc Webinar: State of State Privacy Laws
TrustArc
UiPath Automation Developer Associate Training Series 2025 - Session 1
UiPath Automation Developer Associate Training Series 2025 - Session 1UiPath Automation Developer Associate Training Series 2025 - Session 1
UiPath Automation Developer Associate Training Series 2025 - Session 1
DianaGray10
William Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae - A Seasoned Professional RenownedWilliam Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae
Teaching Prompting and Prompt Sharing to End Users.pptx
Teaching Prompting and Prompt Sharing to End Users.pptxTeaching Prompting and Prompt Sharing to End Users.pptx
Teaching Prompting and Prompt Sharing to End Users.pptx
Michael Blumenthal (Microsoft MVP)
SB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure ServicesSB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure Services
Reuben Jasper
Kickstart Your QA: An Introduction to Automated Regression Testing Tools
Kickstart Your QA: An Introduction to Automated Regression Testing ToolsKickstart Your QA: An Introduction to Automated Regression Testing Tools
Kickstart Your QA: An Introduction to Automated Regression Testing Tools
Shubham Joshi
Combining Lexical and Semantic Search with Milvus 2.5
Combining Lexical and Semantic Search with Milvus 2.5Combining Lexical and Semantic Search with Milvus 2.5
Combining Lexical and Semantic Search with Milvus 2.5
Zilliz
Agentic AI: The 2025 Next-Gen Automation Guide
Agentic AI: The 2025 Next-Gen Automation GuideAgentic AI: The 2025 Next-Gen Automation Guide
Agentic AI: The 2025 Next-Gen Automation Guide
Thoughtminds
Dev Dives: Unlock the future of automation with UiPath Agent Builder
Dev Dives: Unlock the future of automation with UiPath Agent BuilderDev Dives: Unlock the future of automation with UiPath Agent Builder
Dev Dives: Unlock the future of automation with UiPath Agent Builder
UiPathCommunity
Understanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced ManagementUnderstanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced Management
Drew Madelung
Deno ...................................
Deno ...................................Deno ...................................
Deno ...................................
Robert MacLean
Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3
Margaret Maynard-Reid
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIATHE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
Srivaanchi Nathan
AI Trends and Fun Demos Sothebys Rehoboth Presentation
AI Trends and Fun Demos  Sothebys Rehoboth PresentationAI Trends and Fun Demos  Sothebys Rehoboth Presentation
AI Trends and Fun Demos Sothebys Rehoboth Presentation
Ethan Holland
DealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures CapitalDealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures Capital
Yevgen Sysoyev
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdfWhat is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
Yodaplus Technologies Private Limited
Benchmark Testing Demystified: Your Roadmap to Peak Performance
Benchmark Testing Demystified: Your Roadmap to Peak PerformanceBenchmark Testing Demystified: Your Roadmap to Peak Performance
Benchmark Testing Demystified: Your Roadmap to Peak Performance
Shubham Joshi
Supercharge Your Career with UiPath Certifications
Supercharge Your Career with UiPath CertificationsSupercharge Your Career with UiPath Certifications
Supercharge Your Career with UiPath Certifications
DianaGray10
Caching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at ScaleCaching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at Scale
ScyllaDB
TrustArc Webinar: State of State Privacy Laws
TrustArc Webinar: State of State Privacy LawsTrustArc Webinar: State of State Privacy Laws
TrustArc Webinar: State of State Privacy Laws
TrustArc
UiPath Automation Developer Associate Training Series 2025 - Session 1
UiPath Automation Developer Associate Training Series 2025 - Session 1UiPath Automation Developer Associate Training Series 2025 - Session 1
UiPath Automation Developer Associate Training Series 2025 - Session 1
DianaGray10
William Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae - A Seasoned Professional RenownedWilliam Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae - A Seasoned Professional Renowned
William Maclyn Murphy McRae
SB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure ServicesSB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure Services
Reuben Jasper
Kickstart Your QA: An Introduction to Automated Regression Testing Tools
Kickstart Your QA: An Introduction to Automated Regression Testing ToolsKickstart Your QA: An Introduction to Automated Regression Testing Tools
Kickstart Your QA: An Introduction to Automated Regression Testing Tools
Shubham Joshi
Combining Lexical and Semantic Search with Milvus 2.5
Combining Lexical and Semantic Search with Milvus 2.5Combining Lexical and Semantic Search with Milvus 2.5
Combining Lexical and Semantic Search with Milvus 2.5
Zilliz
Agentic AI: The 2025 Next-Gen Automation Guide
Agentic AI: The 2025 Next-Gen Automation GuideAgentic AI: The 2025 Next-Gen Automation Guide
Agentic AI: The 2025 Next-Gen Automation Guide
Thoughtminds
Dev Dives: Unlock the future of automation with UiPath Agent Builder
Dev Dives: Unlock the future of automation with UiPath Agent BuilderDev Dives: Unlock the future of automation with UiPath Agent Builder
Dev Dives: Unlock the future of automation with UiPath Agent Builder
UiPathCommunity
Understanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced ManagementUnderstanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced Management
Drew Madelung
Deno ...................................
Deno ...................................Deno ...................................
Deno ...................................
Robert MacLean
Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3
Margaret Maynard-Reid
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIATHE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
Srivaanchi Nathan
AI Trends and Fun Demos Sothebys Rehoboth Presentation
AI Trends and Fun Demos  Sothebys Rehoboth PresentationAI Trends and Fun Demos  Sothebys Rehoboth Presentation
AI Trends and Fun Demos Sothebys Rehoboth Presentation
Ethan Holland
DealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures CapitalDealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures Capital
Yevgen Sysoyev
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdfWhat is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
Yodaplus Technologies Private Limited

An introduction to the 960 grid system

  • 1. 960 Grid System An introduction by Mario Hernandez
  • 2. About Web developer for the federal government Freelancer with over 10 years experience in web design Front-end designer Main platform: Drupal Founder of DesignsDrive.com
  • 3. How far has css come? CSS is more powerful than ever CSS3 & HTML5 JQuery and Javascript
  • 4. What is 960 Grid System? The 960 Grid System is an effort to streamline web development work鍖ow by providing commonly used dimensions, based on a width of 960 pixels. Created by Nathan Smith (http://sonspring.com/about) There are two variants: 12 and 16 columns, which can be used separately or in tandem. Get it at http://960.gs
  • 5. Three things: You should have a good understanding of css This framework will not solve all your problems The grid is not for all websites (newspaper/ magazine style)
  • 6. Pros Rapid development Clean grid structure Cross browser compatibility - web standards Light weight code (~20kb) Build complicated layouts easily
  • 7. Cons You are limited to a 960 width As with any framework, you lose some 鍖exibility Its not your own code
  • 8. The true power of 960 is demonstrated when building complex newspaper-like layouts.
  • 11. css classes: grid_x 12 1 11 2 10 3 9 4 8 5 7 6 6 7 5
  • 12. css classes now in session alpha (鍖rst child grid within a grid) omega (last child grid within a grid) pre鍖x_x (to apply empty space before) suf鍖x_x (to apply empty space after) pull_x (to horizontally reposition content) push_x (to horizontally reposition content)
  • 15. Lets get started Download & demo
  • 17. Other options http://www.blueprintcss.org/ http://www.thegridsystem.org/
  • 18. Questions? web: http://designsdrive.com email: designsdrive@gmail.com twitter: @designsdrive