Contact Us


FriendFeed FriendFeed


follow us on twitter Twitter


 Rss Feed


Favorites Add to Favorites

Tuesday, June 16, 2009

Popular CSS Frameworks - Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery

Tried of writing HTML, CSS code to your web pages? Making your site to work with all the major browsers. Running behind CSS hacks? Here is a simple way to solve all your issues, CSS Frames. Most of the designers would heard about CSS Frames, for those who don’t know here is a brief description from: Wikipedia

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

5 Popular CSS Frameworks
1) Yahoo YUI (Yahoo User Interface Library)
2) 960 CSS Framework
3) Blueprint CSS Framework
4) Yaml (Yet Another Multicolumn Layout)
5) The jQuery UI CSS Framework

These are the top 5 CSS Framework. I have no idea about the other css framework, but i have used Yahoo's YUI framework. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. For CSS, they provide

1) CSS Reset (neutralizes browser CSS styles)
2) CSS Base (applies consistent style foundation for common elements)
3) CSS Fonts (foundation for typography and font-sizing)
4) CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

You can choose the overlay of the width, by mentioning #doc or #doc2 or #doc3 etc...
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
* #doc-custom - an example of a custom page width

Optionally choose the secondary column's width and orientation with one of six templates.

* .yui-t1 - Two columns, narrow on left, 160px
* .yui-t2 - Two columns, narrow on left, 180px
* .yui-t3 - Two columns, narrow on left, 300px
* .yui-t4 - Two columns, narrow on right, 180px
* .yui-t5 - Two columns, narrow on right, 240px
* .yui-t6 - Two columns, narrow on right, 300px

Nesting Grids
Optionally nest standard grids (.yui-g) and special grids (.yui-gb, ... .yui-gf) to subdivide.

* .yui-g - Standard half grid (and nest again for quarters).
* .yui-gb - Special grid, 1/3 - 1/3 - 1/3
* .yui-gc - Special grid, 2/3 - 1/3
* .yui-gd - Special grid, 1/3 - 2/3
* .yui-ge - Special grid, 3/4 - 1/4
* .yui-gf - Special grid, 1/4 - 3/4

If you find this is diificult to keep in mind, they have got a grid builder, a simple interface for Grids customization. Where you mention the values in the box, it will provide you the results.

YUI Components
Along with CSS they also provide YUI Components where you can easily integrate with javascripts for animations, Carousel, Slider, Resize and lots more...

YUI Compressor
With this tool YUI Compressor, you compress your css and javascripts file which will reduce your file size into half. This is very much helpful for web optimizer.

To know more details and to download the latest version of YUI, please visit the site Yahoo YUI. Majore Interent companies like Sulekha, Sify are using YUI.

Labels: , , , , , , , ,


Anonymous Rich said...

Really Alva? "Deeply Moved"?? I mean it was a pithy post about YUI but puhleaaase! :)

August 17, 2009 at 4:59:00 AM PDT  
Blogger Omega software said...

This post is very helpful, edifying and in addition cool thoughts on the topic. It's very encouraging to find this site, can't wait to check out new stuff you post. CMS website development company || Web Designing || Website Development

January 7, 2015 at 11:58:00 PM PST  
Blogger Omega software said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck. Website Development in Mumbai || CMS Website Developer || Website Maintenance in Mumbai

January 7, 2015 at 11:58:00 PM PST  
Blogger Albert Andrada said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 7:58:00 AM PDT  
Blogger Suseela Susiee said...

Great and useful article. Creating content regularly is very tough. Your points are motivated me to move on.

SEO Company in Chennai

June 22, 2016 at 12:06:00 AM PDT  
Blogger Kanye Co Jamila said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

March 30, 2018 at 9:50:00 PM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home