noupe.com— An overview of the 5 most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.
Feb 2, 2009View in Crawl 4
For me, CSS changed the way I think about layout. With table based layout the nesting of <td> and <table> elements became unwieldy for me. Often I couldn't quickly tell which table this <td> belonged to or which <table>/<tr>/<td> tag wasn't closed because there was just soo much html code in the page. I still use tables to display table data though....I keep track of which </div> belongs to its parent by using a simple <!--comment--> on the </div> So it looks like this:<div id="navigation">...</div><!--navigation-->Easy to distinguish.Additionally, there's a far higher code to content ratio using tables than css.With css, most everything is just a box. You simply place stuff in boxes (<div>s) and then apply formatting. Boxes can overlap, you can control what box appears in front of the others, and probably most importantly, you can change the layout almost trivially by modifying the css. You cannot do that with table based layouts.Also you can modify the display based on the medium. Want a graphics free print version of your content? CSS can help you do that with very little effort. Want to narrow the site to accommodate a handheld device? CSS can help you do that with very little effort.Go through the pain to learn css. You'll be glad you did. I sure am glad I did.Two books that helped me are:"CSS Mastery" by Andy Budd <a class="user" href="http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145/ref=pd_sim_b_1">http://www.amazon.com/CSS-Mastery-Advanced-Standar ...</a>Bullet Proof Website Design by Dan Cederholm <a class="user" href="http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939">http://www.amazon.com/Bulletproof-Web-Design-flexi ...</a>
The problem with most of these frameworks is that they require you to put presentation classes in your markup. This might be ok with you, but if it's not, I recommend using Sass -- an alternate syntax for writing your stylesheets. There are ports of Blueprint, 960.gs, and YUI to Sass available from Compass <a class="user" href="http://compass-style.org">http://compass-style.org</a>
Frameworks are quite useful especially CSS frameworks. My personal favorites are Tripoli as a reset and 960 is a very good one as well for multi-column layouts.
If you're getting paid to know CSS, and you need to use a framework, you lied to get the job. I don't call myself a back end guy because I can do half of your job with Word Press.
I think HTML 5 is going to be a flop because IE is only going to have more things to screw up not less. It's like an entire segment of the industry has collective amnesia or something. The whole point of CSS is to get everybody on the same page and give IE fewer non-explicit things to screw up. CSS is very explicit and IE can't even get that right. Now we're going back to mixing content and presentation? WTF? Why is this a good thing?
fredfredricksonFeb 2, 2009
Explain why. HTML isn't going anywhere.
johnnybravohFeb 2, 2009
For me, CSS changed the way I think about layout. With table based layout the nesting of <td> and <table> elements became unwieldy for me. Often I couldn't quickly tell which table this <td> belonged to or which <table>/<tr>/<td> tag wasn't closed because there was just soo much html code in the page. I still use tables to display table data though....I keep track of which </div> belongs to its parent by using a simple <!--comment--> on the </div> So it looks like this:<div id="navigation">...</div><!--navigation-->Easy to distinguish.Additionally, there's a far higher code to content ratio using tables than css.With css, most everything is just a box. You simply place stuff in boxes (<div>s) and then apply formatting. Boxes can overlap, you can control what box appears in front of the others, and probably most importantly, you can change the layout almost trivially by modifying the css. You cannot do that with table based layouts.Also you can modify the display based on the medium. Want a graphics free print version of your content? CSS can help you do that with very little effort. Want to narrow the site to accommodate a handheld device? CSS can help you do that with very little effort.Go through the pain to learn css. You'll be glad you did. I sure am glad I did.Two books that helped me are:"CSS Mastery" by Andy Budd <a class="user" href="http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145/ref=pd_sim_b_1">http://www.amazon.com/CSS-Mastery-Advanced-Standar ...</a>Bullet Proof Website Design by Dan Cederholm <a class="user" href="http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939">http://www.amazon.com/Bulletproof-Web-Design-flexi ...</a>
crispeeFeb 2, 2009
The problem with most of these frameworks is that they require you to put presentation classes in your markup. This might be ok with you, but if it's not, I recommend using Sass -- an alternate syntax for writing your stylesheets. There are ports of Blueprint, 960.gs, and YUI to Sass available from Compass <a class="user" href="http://compass-style.org">http://compass-style.org</a>
bilcoFeb 3, 2009
Video down currently, anyone got another link for it ?
destinyx3Feb 3, 2009
Frameworks are quite useful especially CSS frameworks. My personal favorites are Tripoli as a reset and 960 is a very good one as well for multi-column layouts.
alwed5Mar 23, 2009
<a class="user" href="http://www.linkedin.com/pub/12/353/a74" rel="nofollow">http://www.linkedin.com/pub/12/353/a74</a><a class="user" href="http://chat.ader3.com/" rel="nofollow">http://chat.ader3.com/</a><a class="user" href="http://qlbe.ahlablog.com/" rel="nofollow">http://qlbe.ahlablog.com/</a><a class="user" href="http://www.diigo.com/profile/abdalazez" rel="nofollow">http://www.diigo.com/profile/abdalazez</a><a class="user" href="http://www.blinklist.com/3bdalazez/" rel="nofollow">http://www.blinklist.com/3bdalazez/</a><a class="user" href="http://chatrooma.blogspot.com/" rel="nofollow">http://chatrooma.blogspot.com/</a><a class="user" href="http://www.4shared.com/u/qkspkmp/3394e779/_sharing.html" rel="nofollow">http://www.4shared.com/u/qkspkmp/3394e779/_sharing ...</a><a class="user" href="http://video.google.com/videoplay?docid=8926494886046824018" rel="nofollow">http://video.google.com/videoplay?docid=8926494886 ...</a><a class="user" href="http://www.alexa.com/data/details/main/dll3.cc" rel="nofollow">http://www.alexa.com/data/details/main/dll3.cc</a><a class="user" href="http://dll3.onsugar.com/2807515" rel="nofollow">http://dll3.onsugar.com/2807515</a><a class="user" href="http://dll3.onsugar.com/" rel="nofollow">http://dll3.onsugar.com/</a><a class="user" href="http://www.dll3.cc/Partners/" rel="nofollow">http://www.dll3.cc/Partners/</a><a class="user" href="http://forum.dll3.cc/showthread.php?t=3194" rel="nofollow">http://forum.dll3.cc/showthread.php?t=3194</a><a class="user" href="http://forum.dll3.cc/showthread.php?t=701" rel="nofollow">http://forum.dll3.cc/showthread.php?t=701</a><a class="user" href="http://forum.dll3.cc/showthread.php?t=1713" rel="nofollow">http://forum.dll3.cc/showthread.php?t=1713</a>
pherdnutApr 28, 2009
If you're getting paid to know CSS, and you need to use a framework, you lied to get the job. I don't call myself a back end guy because I can do half of your job with Word Press.
pherdnutApr 28, 2009
I think HTML 5 is going to be a flop because IE is only going to have more things to screw up not less. It's like an entire segment of the industry has collective amnesia or something. The whole point of CSS is to get everybody on the same page and give IE fewer non-explicit things to screw up. CSS is very explicit and IE can't even get that right. Now we're going back to mixing content and presentation? WTF? Why is this a good thing?
wologoloJan 2, 2010
Great tuts