nathansmith / 960-grid-system Goto Github PK

The 960 Grid System is an effort to streamline web development workflow.

CSS 66.54% HTML 33.46%

960-grid-system's Introduction

960 Grid System

Created by Nathan Smith. See the official site for more info: http://960.gs

To install the Adobe Fireworks extension, simply double-click the *.mxp file included in the /app_plugins/fireworks directory. If you are running Windows 7 you will need admin permissions in order to install this extension properly.

Thank you for downloading the 960 Grid System. I hope it helps to streamline web development workflow. Enclosed in the bundle are printable sketch sheets and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio.

Also included is a lightweight CSS file, which contains the grid dimensions. To use this file, simply include the 960.css in the <head> of the HTML page. You may also use the reset.css and text.css files, or opt to leave them out. Here is an example of the XHTML code necessary to incorporate the CSS files:

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>

It is worth noting that these styles do not automatically make up a finished site design. They are simply a starting point, ideally for rapid prototyping or as a basis for creating your own designs. You should not feel constrained by the way I have built the initial code. If you disagree with how something has been done, feel free to revise it for the needs of your particular site.

The files in the 960 Grid System are free of charge, licensed under MIT/GPL.

Note that if you are building a site in a language which reads from right to left, use the CSS files that end in _rtl.css instead. Denote the language:

<html lang="..." dir="rtl">

Be sure to set lang="..." to the appropriate two-letter abbreviation of the language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic.

GPL license: http://www.gnu.org/licenses/gpl.html

MIT license: http://www.opensource.org/licenses/mit-license.php

960-grid-system's People

Contributors

Stargazers

Watchers

Forkers

bjclark wesbos glam k9coaches thmghtd alihbuzaid n8osapi hiltongoncalves peterarmstrong spills mattdot shikar eastagile fabiotnt michaelcgorman m0nkey bclubb schram zurt matenia justlikeicarus kurtz protez mralex warvik craigallenpetersen weisun gemin berboiss communitybuilders jtwb luismgarcia hardikshah euclidsoftware apcrash romvadik rgada kaiquewdev apnerve connorlee mohkul heltiongson oguzserdar musikboy temperatio bengt jdm2000 kracher roberttayco gordyt node-alpha sammanjac nirmalgyanwali tengle1080 gbysea inthecompanyofus jarod022 mohamedalaa super0555 mikheenko baligena wouterlangen mattgoldspink paultreny germanocaldeira billywu thecoffemaker mamigaku wilson212 gnimmel richkait chiaan madbarua goonielips nicktoye neojjang allternative mattclements jdcollier jechnd ranjithtenz darklee smlabs mdjohnson1 strangeline tonilaukka kengwei aeolus74 reynaldobarrosjr pirate42 hwindo kmusiclife conradmuan robrocker7 parag anitoku m4gz sediakj alongbao jmarmolejos

960-grid-system's Issues

960gs x Quirks Mode

Hi guys, I really appreciate your job with 960gs - kudos!

Please check in the attachments what IE8 in Quirks Mode does to the demo and demo_rtl HTMLs when the declaration is removed. I can easily fix the alignment with "text-align: center" hack but it messes with the DIVs using prefix or suffix classes. Is there any trick to fix this?

Sadly, right now I see myself forced to work with a legacy system that generates it's default html template without a DOCTYPE declaration, what activates Quirks Mode in all browsers. Firefox/Chrome are OK with that but IE complains.

Probably it would be a lot easier to fix the legacy system, but let's just assume that NO ONE is allowed to do it right now.

Thank you, cheers!

1200px size psds?

By some chance, are there 1200px wide templates out there for photoshop? Our company has been using your adapt.js library for a while and conjunction with 960.gs (btw Great work! We love it) .

We just have issues designing for it. Our designer is asking for a psd of this size.

If there isn't that exists we'd like to go ahead and create some and contribute back to your project.

Unknown Margin / Padding

I'm using the frame work with a custom Joomla Template only to find that the elements are not sitting together in my 24 column design. See screenshot here - http://img.skitch.com/20100917-qn14iwcwcr2qkepgp85fuuran4.jpg

Convert to 1260px version

Hi Nathan,

May I as what calculation you used for the grid sizing, as I would like to make a 24 col for 1260px wide?

licence with GPL or MIT

we are cdnjs team (https://github.com/cdnjs/cdnjs), we want to host/add your project 960-Grid-System on cdnjs,
but here is a problem that we need clearly licence,
could you please help me to figure it out?

Plugin NOT working with Photoshop CS6

Hi, guys!

Is 960.gs plugin compatible with Photoshop CS6?

I couldn't install it.

I copied 960_GRIDS.atn to "/Applications/Adobe Photoshop CS6/Presets/Actions" then I opened PS and there is nothing in Actions window.

After that I tried to move 960_GRIDS.atn from "/Applications/Adobe Photoshop CS6/Presets/Actions" to "/Users/sandro/Library/Application Support/Adobe/Adobe Photoshop CS6/Presets/Actions" then I closed PS and re-opened it, but with no luck too. :(

I've no idea what's going on.

Can you please help-me? Thanks in advance.

Cant seem to download the zip today

please include Sketch 2 Grid files

Although Sketch 2 allows you to create a 960 grid within the app it lacks the guides so its not very useful.

feel free to include these i created for my own use. others might find them useful as well

http://cl.ly/1T0O2C3s2P0K

http://cl.ly/2F2N0s340W0W

960 with HTML5

Hey guys, most of the examples I have seen on the 960 system uses divs. Is there any drawback with HTML5? Am trying to get used to using section, article and the other HTML5 tags, so less divs.

Pardon me if this has been answered somewhere else that I have missed.

Thanks.

SCSS version of the system

I use 960.gs a lot but am kind of bummed about "contaminating" the semantic HTML with grid_1 alpha all over the place so I created this SCSS version of it based on the SASS version but does not depend on any plugins:

https://gist.github.com/2703485

Enjoy!

html, body reset bug in Chrome

I just noticed that using html, body {height:100%} will cause Chrome to ignore any padding applied directly to the body. It also seems to ignore margins added to nested containers.

Breaking in Chrome 38

The grid is breaking in Chrome 38, it will stop any behaviour with jQuery. Then position: relative; is removed from ".grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12" everything works again.

URL: http://www.bicehipotecaria.cl/ (will be fixed soon)
Video: http://cl.ly/YBGD

Reset outline property

I've noticed that in reset.css there's no outline reset and chrome adds an outline for input fields that should be overriden with

*:focus {outline: none;}

Printing grid alignment in IE7

We have implemented the 960 grid system into a site template. An issue was discovered during testing. When a page is printed, the grid layout does not flow correctly in Internet Explorer 7 - blank pages appear where content should be.

Further research ended up at the 960 grid system website, which when printed and compared between IE7 and Chrome/Firefox, also differs where the right most columns are pushed downwards causing the layout to become misaligned. Are there print stylesheet rules that could be added to remedy this issue? We will be attempting to fix and will contribute back any fixes that are found.

bad width on 24col templates?

i think some of templates have incorrect width

example
*psd/gimp template width = 990 pixel (last guide position)
*illustrator template width = 1020 pixel (last guide position)

am i crazy or that's true?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of nathansmith/960-Grid-System!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library nathansmith/960-Grid-System is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "nathansmith/960-Grid-System",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Clearfix Reloaded

I think that packing 960.gs with the "new" clearfix method would be a very welcomed addiction, as it fixes a couple of very annoying bugs...

Have a nice day

Clearfix method realy need line-height, width and font-size?

You use http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ method but what do you add line-height, width and font-size?

Your code

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

 /*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
 */
 * html .clearfix,
 *:first-child+html .clearfix {
zoom: 1;
 }

The original code

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

test

Improve InDesign templates

The template files for InDesign contain a layer "xx Grid" where the column placeholders reside on. The way these placeholders are formatted (filled with RGB Red and set to an opacity of 10%) leads to weird display behaviour when InDesign does quick/preview renderings (e.g. while dragging/moving some page items around) of the actual spread while using display quality "highest" (dunno the exact wording).

It's not critical in any way because it disappears after the the "final" view is rendered ... just irritating and little bit annoying when doing layouts.

Solution

This of course only works when you have the grid layer in the background.

Instead of decreasing the opacity value (= transparency effect, what leads to that behaviour) down to 10%, keep it at 100% and decrease the tint to 10% instead.

PSD and PNG Corrupt on Mac Open

Couldn't open either PSD or PNG files

Got Not a valid PS doc and a similar error when opening PNG

New Clearfix Technique

Nicolas Gallagher's micro clearfix hack is the new chapter in the neverending clearfix affair.

It's incredibly lightweight and it's working like a charm.

Here's the code (2011-04-25 revision)

.cf { zoom: 1 }
.cf:before, 
.cf:after { content: ""; display: table }
.cf:after { clear: both }

960gs rtl - IE8 list item background issue

I have used -
reset, rtl_text.css, rtl_960.css

markup:
<div class="container_12"> <div class="grid_9"> Arabic content - ul li list </div> </div>

CSS :
html, body {
direction:rtl;
}

ul {
list-style:none;
margin:0 0 20px 0;
padding:0;
}

li {
background:url(images/arrow_01.gif) no-repeat right 6px;
color:#666666;
margin:0;
padding:0 10px 4px 0;
}

In IE8 list bg is not displaying correctly. When we remove margin-left:auto, margin-right:auto from container. it works correctly in IE8.

http://www.decodize.com/rnd/ie8issue/

thanks