Blueprint CSS Framework (advanced tutorial)

The css framework design can help us quickly and effectively establish high-quality pages and help code standardization. Of course, every framework is built on the efforts of countless predecessors, the following is a css framework -- the blueprint css framework.

CSS frameworks + CSS Reset: Design from scratch

Http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

Introduction

Blueprint is a so-called css framework. In comparison, the comments in the blueprint code are more detailed.

Follow the methods described by Jeff Croft's frameworks for designers (or a Chinese version to understand the Web framework and how to build a css framework) to build a css framework:

Blueprint is built in a similar way.:

Divide and conquer:

In the functional organization, buleprint includes layout, typography, widget, reset, and print) and other functions are scattered in different CSS files. In this way, you only need to import the functions you want, instead of importing all files, to improve page loading performance. Currently, only the components are provided for processing the button. McKinsey's MECE ("independent, completely exhausted") is not implemented.

Unified Interface:

The external interface is unified.

<LINK rel = "stylesheet" href = "CSS/blueprint/screen.css" type = "text/CSS" Media = "screen, projection"/>

Description of the CSS file contained in blueprint:

Screen.css

This is the main file of the framework. It imports other CSS files from the "lib" directory, and shocould be stored ded on every page.

Similar to the base.css function of Jeff croft, you only need to include this file to import

Print.css

This file sets some default print rules, so that printed versions has ded on every page.

Used to process printing. It can be classified as a widget.

Lib/grid.css

This file sets up the grid (it's true). It has a lot of classes you apply to divs to set up any sort of column-based grid.

Used to process page la S (columns)

Lib/typography.css
This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.

It is used to process the layout of page elements.

Lib/reset.css

This file resets CSS values that browsers tend to set for you.

This interface is used to reset pages. It specifies the default value for page elements without css attributes.

Lib/buttons.css
Provides some great CSS-only buttons.

Used for processing buttons, which can be classified as Widgets

Lib/compressed.css

A compressed version of the core files. Use this on every live site.

See screen.css for instructions

Css files (including grid.css, tyopgraphy.css, reset.css, and buttons.css) compressed by the handler.

2. Usage of each module

2.11_grid.css

Compatibility processing for cross-browser center Processing

Generally, the following method is used to handle the differences between firefox and ie in center processing:

Body {text-align: center;} div # container {margin-left: auto; margin-right: auto; width: 50em; text-align: left ;}

From: http://www.maxdesign.com.au/presentation/center/

Blueprint processing method:

Body {text-align: center;/* IE6 Fix */margin: 36px 0 ;}

/* A container shocould group all your columns .*/

. Container {text-align: left; position: relative; padding: 0; margin: 0 auto;/* Centers layout */width: 1150px;/* Total width */}

Implementation of Columns

Blueprint processing method:

Blueprint defines. column,. span-X, and. Last. The two are combined to implement the column sharding function.

Where:. column defines the float attribute of the column;. span-X defines the column width;. Last sets margin-Right to 0px,

. Column {float: Left; margin-Right: 10px; padding: 0 ;} /* Use these classes to set how wide a column shocould be .*/ . Span-1 {width: 30px ;} . Span-2 {width: 70px ;} . Span-3 {width: 110px ;} . Span-4 {width: 150px ;} ... Span-8 {width: 310px ;} . Span-9 {width: 350px ;} . Span-10 {width: 390px ;} ... Span-23 {width: 910px ;} . Span-24 {width: 950px; margin: 0 ;} . Span-25 {width: 200px ;} . Span-26 {width: 1150px; margin: 0 ;} /* The last element in a multi-column block needs this class .*/ . Last {margin-Right: 0 ;} Implementation of the three columns: <Div class = "Container"> <Div class = "column span-24"> header </div> <Div class = "column span-4"> left sidebar </div> <Div class = "column span-16"> main content </div> <Div class = "column span-4 last"> right sidebar </div> </Div> Implementation of the four columns: <Div class = "Container"> <Div class = "column span-26"> header </div> <Div class = "column span-4"> left sidebar </div> <Div class = "column span-3"> main content 0 </div> <Div class = "column span-25"> main content 1 </div> <Div class = "column span-4 last"> right sidebar </div> </Div> Note that the width in. Container (defines the width of the entire page) is changed to 1150px. Implementation of blank columns: for multiple columns (for example, five columns), there are blank columns (for example, the left and right columns are blank), which can be used. append-X and. prepend-X to fill. Append-x adds a blank column after the column (padding-right), and prepend-x adds a blank column before the column (padding-left. General container definitions /* A container shocould group all your columns .*/ . Container {text-align: left; position: relative; padding: 0; margin: 0 auto;/* Centers layout */width: 1150px;/* Total width */}

2.2、reset.css

The initial code of reset.css should come from Eric Meyer. Eric Meyer has two logs about reset to deal with different default values across browsers. Eric Meyer's documents are brilliant:

Reset reasoning: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Reset reloaded: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Why reset?
The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (okay, no two browser families-most gecko-based browsers do have the same defaults .)
For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;

Why use reset style instead of universal selector?

The so-called universal selector is to use * to represent all the elements of the document, such

* {Margin: 0;} resources about reset style:

Reset library for Yui: http://developer.yahoo.com/yui/reset/

Http://leftjustified.net/journal/2004/10/19/global-ws-reset/

The following articles are actually about css framework or tips, but all mentioned the reset topic.

Http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

Http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

Http://businesslogs.com/design_and_usability/my_5_css_tips.php

Http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3366typography.css

Typography.css is used to determine the default layout format (baseline) of page elements ):

Setting type on the web to a baseline grid:

Http://alistapart.com/articles/settingtypeontheweb

2.4、buttons.css

Rediscovering the button element discusses the advantages of replacing the input element with the button element. The button element provides rich functions.

Http://particletree.com/features/rediscovering-the-button-element

2.4、print.css

Eric meyerhas a document about CSS's real-time printfunction, which can be used as a reference for print.css.

CSS Design: Going to Print

Print Different

2.5、compressed.css

Compressed.css compresses and combines several blueprint Files, and compresses css files to Remove useless spaces, line breaks, comments, and other texts.

This method is used for deployment in the production system to avoid importing multiple css files on the page and improve the page performance.

According to the instructions in lib/screen.css, the css compression service provided by teenage should be used:

Http://teenage.cz/acidofil/tools/cssformat.php

In addition, the following services are provided to optimize and compress css and Cr ī pt:

Http://csstidy.sourceforge.net/(Open Source)

Http://www.cssdrive.com/index.php/main/csscompressor/

Http://www.cleancss.com/(based on csstidy)