nathansmith / 960-grid-system Goto Github PK
View Code? Open in Web Editor NEWThe 960 Grid System is an effort to streamline web development workflow.
Home Page: http://960.gs
The 960 Grid System is an effort to streamline web development workflow.
Home Page: http://960.gs
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.
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.
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 }
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.
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.
test
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
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.
Couldn't open either PSD or PNG files
Got Not a valid PS doc and a similar error when opening PNG
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?
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
You use http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ method but what do you add line-height, width and font-size?
.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;
}
/* 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 */
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.
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;}
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.
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.
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?
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
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!
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
Hi
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!
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.