Learning about the CSS Foundation framework

What is a CSS foundation framework?

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.

Why do you need to study and use it?

In the current browser a lot of different situations and how uniform style compatible with most browsers is necessary to extract abstract modules from the performance of the image to reuse, is to reduce user downloads, convenient team and personal development of the most important means. So the CSS framework is a necessity.

What are the more well-known frameworks now?

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.

Thirst cut-Open source Chinese CSS framework

Thirst Cut (CUTTER.CSS) is an open source Chinese (X) HTML/CSS framework, which is designed to reduce your CSS development time. It provides a reliable CSS foundation to create your project, can be used for the rapid design of the site, by resetting and rebuilding the browser standards, you can let each site to prevent tedious cross-browser compatibility testing. You can think of him as a set of templates that contain the CSS classes that are needed in most sites. He is small, only four files. Less than 6KB in total.

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.

Bootstrap

Bootstrap is an open source toolkit for front-end development launched by Twitter. It was developed by Twitter's designer Mark Otto and Jacob Thornton, and is a css/html framework. It's a simple, intuitive, and powerful front-end development framework that makes web development faster and easier. Its own JS and CSS can do most of the common Web page effects and response functions, is a good framework. 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.

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 and so on are all sencss can do.

General development Order

Format CSS (CSS reset)--layout, basic style, print style, table Form navigation, etc.--specific application scenarios (large block layout), etc.

Development tools

You should first look at the CSS preprocessor.

CSS is not a programming language. You can use it to develop a Web page style, but you can't program it. In other words, CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables, there are no conditional statements, just a line of simple description, it is rather cumbersome to write. Naturally, someone started adding programming elements to the CSS, which is called the "CSS Preprocessor" (CSS preprocessor). Its basic idea is to use a special programming language, Web page style design, and then compiled into a normal CSS file.

More useful is less, SASS

How to use it can be found in the less Chinese web and Sass website.

I prefer less. And the development tool can choose to use webstorm or brackets can use plug-ins to automatically compile. less files into CSS

My development process:

The first step

Defining Global CSS Variables

Step Two

A hybrid CSS is similar to a macro-defined function

Step Three

Reset CSS

Fourth Step

Define a whole style like body div

Fifth Step

Define the style of form btn a table, etc.

Sixth step

Define the style of the input Nav

The last code is about 1000 lines, so I'm ready to put it on.