A List of CSS Frameworks
Web designers use CSS, or Cascading Style Sheet, frameworks to quickly build websites with complicated, multicolumn layouts. In most frameworks, you add the stylesheet to your website and then specify how many columns wide you want to make each div on a page. For example, you could make the content eight columns wide with a four-column sidebar. Frameworks also come with tools, Photoshop templates and extra styles to get you started.
Other People Are Reading
-
960 Grid System
-
The 960 Grid System is based on a site width of 960 pixels and up to 24 columns. While 960 GS does not come with any preconfigured styles other than the columns, it does offer some useful tools like an online CSS generator. The generator allows you to specify custom column amounts and width. The stylesheet comes in two flavors: fixed-width and fluid. Fluid widths make your website adapt browser sizes. This framework also has a mobile-friendly version called Adapt.js, which can help if you want your layout to change according to the device being used.
Blueprint CSS
-
The biggest difference between 960 GS and Blueprint is the addition of typographical styles. Blueprint CSS comes with built-in styles for fonts, links and tables. Though it uses a “reset” stylesheet to normalize CSS between browsers, it adds back in styles so you can quickly get a simple page going without needing to code much CSS. Blueprint also comes with a Photoshop grid template that not only shows you columns but also rows. Everything is set to an 18-pixel line height to help you space text and other elements in a visually pleasing, standardized fashion.
-
Less Framework
-
Do not confuse Less Framework with LESS CSS, since the latter has nothing to do with layouts or grids. Less Framework is designed with mobile development in mind, so it comes with four stylesheets: default, tablet, mobile and wide mobile. Column counts vary between templates because it is assumed that the smaller the screen, the less content you will display per row on the grid. Less is not for the beginner, though. In Less, you have to set the width of every div manually, looking at the column widths given as a guide.
YUI 2: Grids CSS
-
YUI, or Yahoo! User Interface, Grids CSS was created by Yahoo! and is available on the Yahoo! Developer Network. This framework comes with four page widths and six preset templates, and supports both fixed and fluid widths. Yahoo! Offers some tutorials and a grid builder to help you get started. The grid builder is useful because, unlike other frameworks, it shows you the layout as you choose various options. All you need to do is build your layout structure and get the code to start using YUI Grids with your website.
-
