Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
26 Mar

960 Grid System Streamline Web Development Workflow

  • Framework, GPL License, MIT License
  • Leave a Comment

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

960-grid.png

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with. You can download a Zip file which contains PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML.

Requirements: -
Demo: http://960.gs/
License: MIT / GPL License

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Mueller: A Modular Grid System for Responsive Layouts

Mueller: A Modular Grid System for Responsive Layouts

Professional PDF A4 Sketch Sheets for Web Designers

Professional PDF A4 Sketch Sheets for Web Designers

Arrange Images into Flexible Grid with Photoset Grid

Arrange Images into Flexible Grid with Photoset Grid

Fluid 960 Grid System Templates

Fluid 960 Grid System Templates

A Responsive Grid System for Fixed & Fluid Layouts

A Responsive Grid System for Fixed & Fluid Layouts

The 1140 CSS Grid 12 Columns Fluid Down to Mobile

The 1140 CSS Grid 12 Columns Fluid Down to Mobile

Comments
  • Pingback: » 960 Grid System Streamline Web Development Workflow Webcreatives

  • http://www.manorbierdesign.com Spence

    Looks very nice, also highly recommend BluePrint CSS for anyone who hasn’t seen it. Very similar code, URL: http://code.google.com/p/blueprintcss/

  • http://www.arborwebsolutions.com Kevin Zurawel

    This certainly looks useful, but how is it different from the highly-mature Blueprint project (http://code.google.com/p/blueprintcss/)? I think the sketch sheets are a great idea, but the CSS seems very close to Blueprint’s, just with some slightly different names for the same classes.

  • http://justinlilly.com Justin Lilly

    Another useful link, the author basically goes through to tell you the benefits of using this over Blueprint.

    http://sonspring.com/journal/960-grid-system

    The general idea is Blueprint enforces more stuff (’s are yellow, etc). Having used blueprint, I’m itching to try this one out in order to get away from the feeling of imposed stylings.

  • http://www.arborwebsolutions.com Kevin Zurawel

    @Justin Lilly: Thanks for the article link, after reading through it I’m excited to give 960 a try.

  • http://www.keoshi.com/ keoshi

    Reminds me of the grid created in the Swiss Style years. Great implementation of an old concept.

  • http://www.w1zdom.com Michael Jenkins

    hmmm nice… this looks like an interesting, fresh, alternative ;) .

  • Pingback: ZK-Ajax + Mobile Framework with Direct RIA, CSS Frameworks | Custom Website Design - Web Links Directory - Software Development

  • Pingback: SirViejo » Css Frameworks: El Css hecho facil

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • The Most Well-Made, Free & Open Source Fonts
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Make FullScreen Page Transitions with CSS
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework214
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free738
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA