Comments on: Prototyping With The Grid 960 CSS Framework http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ Web Development & Design Tutorials Sat, 21 Nov 2009 22:51:56 -0800 http://wordpress.org/?v=2.8.4 hourly 1 By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129216 madmax Tue, 10 Nov 2009 20:24:50 +0000 http://nettuts.com/?p=1787#comment-129216 another helpful tip for using this system, when designing its is some times hard to figure out what the grid is doing with your content, it doesnt do what you expected, this is a matter of troubleshooting the code and finding out what is out of place. to create a visual aid you can define a class callled ".show" and in it define a background color. add it to the grid class in your div and you will be able to visually see what it is doing. you can take that out when done. it really helps to trouble shoot positioning or determine if you need "grid_1" spacing anywhere another helpful tip for using this system, when designing its is some times hard to figure out what the grid is doing with your content, it doesnt do what you expected, this is a matter of troubleshooting the code and finding out what is out of place. to create a visual aid you can define a class callled “.show” and in it define a background color. add it to the grid class in your div and you will be able to visually see what it is doing. you can take that out when done. it really helps to trouble shoot positioning or determine if you need “grid_1″ spacing anywhere

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129204 madmax Tue, 10 Nov 2009 20:13:03 +0000 http://nettuts.com/?p=1787#comment-129204 i dont see what you mean, there is always more than one way to do anything in the computer world. it has nothing to do with "better" its just preference i dont see what you mean, there is always more than one way to do anything in the computer world. it has nothing to do with “better” its just preference

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129202 madmax Tue, 10 Nov 2009 20:11:25 +0000 http://nettuts.com/?p=1787#comment-129202 its really not once you understand how the classes are to be used in your divs, I saw how easy this was the first time i saw it because i had to figure out how to evenly lay out a grid of photos to use with light box and i saw a common pattern in my css, i stumble across this and realize its already written as a system. its really not once you understand how the classes are to be used in your divs,

I saw how easy this was the first time i saw it because i had to figure out how to evenly lay out a grid of photos to use with light box and i saw a common pattern in my css, i stumble across this and realize its already written as a system.

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129200 madmax Tue, 10 Nov 2009 20:06:11 +0000 http://nettuts.com/?p=1787#comment-129200 try coda try coda

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129194 madmax Tue, 10 Nov 2009 19:59:11 +0000 http://nettuts.com/?p=1787#comment-129194 here is some further explaination, http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ in other words, the web will look more and more like interactive web magazines rather than static text. Its like the difference between doing magazine layout in microsoft word compared to adobe illustrator or indesign. here is some further explaination,

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

in other words, the web will look more and more like interactive web magazines rather than static text.

Its like the difference between doing magazine layout in microsoft word compared to adobe illustrator or indesign.

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129191 madmax Tue, 10 Nov 2009 19:54:44 +0000 http://nettuts.com/?p=1787#comment-129191 he grid system started with laying out text and graphics for print design, every time you read a magazine, newspaper etc, you are staring at the grid system, you dont realize this because its creates a harmony for you eyes, it also creates a design out of the layout, for instance, you may see a photo in the background of a city, over that photo you see your columns of text in a spot of the photo that contains a large area of one color, then you see a composition of large display fonts creating a design over the photo. this couldnt be done gracefully without css, and now we can use a standard "grid" to "layout" web design instead of hacking and pixel pushing your stuff around until it fits. look here, and compare the compositions one is css layout and the other is plain old web. http://www.csszengarden.com/?cssfile=150/150.css (this looks like a magazine) http://oldstylewebdesign.com/ (this guy is full of crap, he just doesnt know how to use current standards, this site is dookie, remember in back in 2000 when the majority of sites looked like this, everyone needed flash in order to attempt what you can do with lightweight css) he grid system started with laying out text and graphics for print design, every time you read a magazine, newspaper etc, you are staring at the grid system, you dont realize this because its creates a harmony for you eyes, it also creates a design out of the layout, for instance, you may see a photo in the background of a city, over that photo you see your columns of text in a spot of the photo that contains a large area of one color, then you see a composition of large display fonts creating a design over the photo. this couldnt be done gracefully without css, and now we can use a standard “grid” to “layout” web design instead of hacking and pixel pushing your stuff around until it fits.

look here, and compare the compositions one is css layout and the other is plain old web.

http://www.csszengarden.com/?cssfile=150/150.css
(this looks like a magazine)

http://oldstylewebdesign.com/
(this guy is full of crap, he just doesnt know how to use current standards, this site is dookie, remember in back in 2000 when the majority of sites looked like this, everyone needed flash in order to attempt what you can do with lightweight css)

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129181 madmax Tue, 10 Nov 2009 19:40:38 +0000 http://nettuts.com/?p=1787#comment-129181 OMG, tables? what is the point of furthering web standards, tables give you dookie looking sites with no flexability in layout, css enables all the same directives as print design. you can define how far apart columns of text are down to the very pixel!! you can have total control over how your fonts are styled, DUDE tables are lazy!!, save the tables for displaying data from a database, thats what they are for. OMG, tables? what is the point of furthering web standards, tables give you dookie looking sites with no flexability in layout, css enables all the same directives as print design. you can define how far apart columns of text are down to the very pixel!! you can have total control over how your fonts are styled,

DUDE tables are lazy!!, save the tables for displaying data from a database, thats what they are for.

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129179 madmax Tue, 10 Nov 2009 19:37:40 +0000 http://nettuts.com/?p=1787#comment-129179 notepad and a webbrowser notepad and a webbrowser

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129177 madmax Tue, 10 Nov 2009 19:35:03 +0000 http://nettuts.com/?p=1787#comment-129177 its useful because in print layout there is a universal grid system for consistent design layout, they grid can change and you may even use the grid abstractly but there is still a grid that drives the gutter space, margins, rag, etc.. you will notice the same directives in css to emulate print layout while designing web. This is why web pages are looking more and more like magazine layouts, because of css. Now we have a "standard" grid system that we can start with and then "tweak" to suit our needs, just like designing a mag layout in indesign or quark, but this is measured for browsers and pixels. css is simple however very seldom is "web layout" structured and consistent. its useful because in print layout there is a universal grid system for consistent design layout, they grid can change and you may even use the grid abstractly but there is still a grid that drives the gutter space, margins, rag, etc.. you will notice the same directives in css to emulate print layout while designing web. This is why web pages are looking more and more like magazine layouts, because of css. Now we have a “standard” grid system that we can start with and then “tweak” to suit our needs, just like designing a mag layout in indesign or quark, but this is measured for browsers and pixels. css is simple however very seldom is “web layout” structured and consistent.

]]> By: madmax http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/#comment-129170 madmax Tue, 10 Nov 2009 19:28:54 +0000 http://nettuts.com/?p=1787#comment-129170 no use it in your real site! have one css file named 960.css and include it as your framework, then include a second for page specific directives. no use it in your real site! have one css file named 960.css and include it as your framework, then include a second for page specific directives.

]]>