CSS frame, a sharp sword

CSS Framework is a collection of CSS files, including basic element reset, page layout, grid layout, form style, general rules and other code blocks, to simplify the work of Web front-end development, improve productivity.

Cause

Internet industry has developed for many years, the browser from the earliest popular NS to the present ff3.ie7 and so on ... The position of the front-end development engineer was also born. In recent years, in web development, there is a very fire word-"frame". YUI, JQuery, prototype these JavaScript frameworks are really a tool for front-end development engineers when developing Web sites. Why is it? Because the framework consists of tools, library of functions, conventions, and attempts to abstract generic modules from common tasks, designers and programmers avoid duplication of development.

Writing CSS is also the same, from the beginning just to define the text color, content layout, to now define all the performance. CSS frameworks are also being taken seriously, as we all recognize that extracting abstract modules from representational performance is the most important means to reduce user downloads, facilitate team and personal development.

Features of the CSS framework

1. Abstraction of common CSS styles, high re-usability, high portability

2. There are inherent definitions, detailed documentation and development features

3. High compatibility, can be compatible with popular browser

4. CSS-based, but not necessarily all CSS, there may be some JS (or other) script for compatible browser

The development order of CSS frameworks

A) format reset.css

The real benefit of formatting CSS is the ability to start work quickly, and you can introduce frames into new HTML files without having to deal with resetting padding and margins to achieve uniform typography and the same performance under the browser.

b) Layout layout.css

Define whether the page is two columns or three columns, full screen or 1024x768 ...

The design of a site may have many layouts, but most are made up of several reusable layouts that selectively introduce the desired layout and can quickly apply the desired page layout.

c) Basic style Type.css

Defines the font size and color for body, H1-h6, a:link-a:active, p, and so on.

Basic style CSS references, such as the UL definition class "Ul-text", to show the same icon, line spacing, link color.

It can also be applied like this: class= "Ul-text Square", Li before the show is square-shaped icon.

d) Table Decoration Table.css

Defines the performance of table, TR, TD, Th, THEAD, TFOOT, Tbody, caption and other labels.

As with the basic style, but the table in the existing site is almost the form of processing data, so the reference is stored separately. For example, applying table-style-1 on table is a table with a black border, and table-style-2 is a yellow border table.

e) Form Decoration form.css

Defines the performance of fieldset, label, button, input, select, textarea.

Most Web sites have almost the same form, button, and input boxes. This CSS was introduced for the purpose of unifying the presentation in each browser. The default buttons, input boxes, and so on in the various browser display is very different, although in the format of the CSS has been initially unified, but the border of the input box, the style of the button will need to be defined in this CSS. Helpless is the select can not be unified, if you consider the implementation of JS, the cost is too big point.

f) Print modification print.css

decorates the printed output page.

g) CSS that contains other CSS

Frontpage.css, List.css, Detail.css, REGISTER.CSS, etc.

The corresponding CSS is introduced according to various references. For example, the list page does not require a table decoration, it does not introduce table.css. In order to conserve the amount of code.

Advantages of CSS Framework

A) Improve development efficiency.

b) Specification name definition, easy to maintain.

c) Standardize the project development process

d) CSS code is clearer and simpler. The HTML code is more reasonable.

e) Reduce user downloads in large-scale projects

The drawbacks of CSS frameworks.

A) increased learning costs. You need to understand the entire framework and need to read the framework's documentation.

b) The CSS framework is bloated for pages such as a small project. There may be a lot of code in the framework that you can't use.

c) may not be able to help you improve your technology. Too dependent on the framework, so it is difficult to eliminate bugs. Includes bugs in the frame itself.

D) It is painful to choose the framework and development framework that you need. Write to the back found more and more inflexible, more and more bloated.

Popular CSS Frames: 960GS

The 960-megapixel page width seems to be a design standard that shows the content of the Web page well at the current resolution. Provides a more commonly used size to simplify the web design process, making work simple and efficient. YUI 2:grids CSS

Mango once introduced by the Yahoo Development Group launched Yui, and this Yui Grids CSS is part of it. As one of the most famous CSS frameworks, YUI Grids CSS offers four preset page widths and six preset templates. One of the negative Margin technology, using the unit of Measure EM, clear the layout of floating technology is worth learning and reference. Blueprint

Blueprint is a mature CSS framework that places layouts (layout), typography (typography), components (widgets), reset (reset), printing (print) into different CSS files. In the design of the Web page reduces the introduction of code, improve page loading efficiency. Bluetrip

Bluetrip is a well-done part integrating the Blueprint & Tripoli Framework, Hartija print style, 960gs simplicity, and a CSS framework for the Elements icon. Provides you with a handy collection of styles and a common way to make websites. So you can focus on the design. Elastic CSS

Elastic is a simple CSS framework used to lay out web pages. Elastic can implement a variety of common Web page layouts. Easy

The popular jquery component features are included in the framework, so you can use this framework directly without having to learn complex Ajax jquery syntax. Ez-css

Ez-css is a lightweight, browser-friendly, easy-to-use CSS framework. The page complex layout (layouts) used to create the css+div. Tripoli

Tripoli is a general-purpose CSS specification for HTML performance. By resetting and rebuilding browser standards, Tripoli provides a standard, cross-browser basis for your site projects. Clevercss

Clevercss is a python-inspired, small markup language for CSS that can be used to create a style sheet in a neat and structured way. In many ways it is more neat and powerful than CSS2. The most obvious difference from CSS is syntax: It is based on indentation and is not monotonous. While this is clearly a violation of Python's rules, it's still a good idea to organize styles. Sencss

It provides a reasonable style for the parts of your CSS that you repeat, so you can focus more on the style of your website. Sencss Unlike other CSS frameworks, it does not contain a variety of cluttered layout styles or predefined grid systems, what can sencss just do? Baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms, etc. are all sencss can do.

CSS frame, a sharp sword