2013年流行的CSS框架

1. Skeleton: 

Skeleton Framework provides a collection of CSS files that helps you build your site in quick time. Responsive nature will remain as the prime factor which will adjust to any size depending on the device.

The Grid: 

Skeleton is a variation of 960 grid system. It is having a pixel range starting from 40 to 640. It depends on how you choose to have the size of the left or the right side bar. If the left bar is 40 pixel then the connecting right side one will be 640 pixel. The more size the left side one grows the lesser is size for right one. The responsiveness of skeleton is splendid. You can re-size your site and check with the nature.

Typography:

Typography in skeleton is developed based on the basic styles. The fonts can be easily changed with a couple of adjustments. Regular paragraphs are of 14 pixel size and the height is of 21 pixel.

Buttons: 

Button is a mode of action. In-order to perform any action, you need buttons. So giving a strong priority for buttons skeleton has developed buttons in a simple way as it generally does.

Forms:

You don’t really have to keep these forms in a complicated way. If you have messed up these forms? Then, you are losing your value. Keeping forms in a simple way will do good to you. Skeleton has developed some simple styles for fonts as well.

2. Pure: 

Pure is one of the CSS Framework that provides some set of tools for us in every web project. It even contains the same that skeleton provides which includes Grids, Forms, Buttons, Tables and Menus.

Buttons: 

You can create your buttons by naming the class name that is equivalent to the class name of the framework that you are looking at. By inserting the same class names the buttons will automatically get adjusted into your website.

There are a few types of buttons that Pure has focused on. They are, Default button, Disabled button, Active button, primary button, customizing button, colored buttons with rounded corners, buttons with different sizes, buttons with icons.

For Example, If you are looking into insert a button with icon on it, then you need to code it this way.

Tables: 

To add tables into your website, style an HTML table, add the pure-table class name. This class adds padding and borders to table elements, and emphasizes the header.

3. Foundation: 

Highlights of Foundation are Flexible Grid, Rapid prototyping, Multi-Device mobility. And it provides features like Responsive Layout, Source ordering, Typography, Forms, Buttons, Navigation, Media queries and JS libraries.

Rapid prototyping: 

Rapid prototyping helps you to create your own prototype in less time. Here, you don’t need to code everything in detailed manner. You just need to code the information or the data that has to be appeared on the site. Foundation provides various styles that will make your site look great. All of the prototype elements from Foundation are production-ready codes.

Mobility: 

Mobiles have already occupied the space. Evolution of smart phones and ease of using internet has taken a complete toll on desktops. But, if the websites are not responsive, it makes no sense. They have to make up their sites in a responsive way. Be it on desktops, laptops, mobiles, tablets.

4. 960 Grid System: 

960 grid system is an effort to streamline web development work inflow. The purpose of 960 grid system is that, it deals with source ordering. It is of 12,16 and 24 columns. The negative factor of 960 grid system is that, it is not responsive.

5. Less Framework: 

Less framework is a CSS grid system for designing adaptive websites. It consists of 4 layouts and 3 sets of typography presets, all based on a single grid. The layouts are like, Default layout, Table layout, Mobile layout, Wide mobile layout. This is purely of a responsive website which can fit into any device in a better way.

6. Blueprint Framework:

Blueprint is a CSS Framework, which aims to lessen your development time period. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a style sheet for printing. Blueprint frameworks isn’t responsive in nature.

7. Bootstrap:

Bootstrap contains wide variety of options available for the developers. Glyphicons, Button groups, Button dropdowns, Input groups, Navs, Navbar, Breadcrumbs, Pagination, Labels, Jumbotron, Page header, Thumbnails etc. Bootstrap is highly responsive and fits great on any device.