CSS also has a Framework: Introduction to Blueprint

CSS framework design can help us quickly and effectively create high-quality pages, and also contribute to the standardization of code. Of course, each framework is based on the efforts of countless predecessors. Here is a recommended 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

1. Introduction

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

Follow the method of building a css framework as described in Jeff Croft's Frameworks for Designers (or the Chinese version of Understanding Web Frameworks and How to Build a CSS Framework):

There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn' t need one or two of them, they don't have to be included. The framework we created in our office has five stylesheets:.

reset.css—handles the mass reset.

type.css—handles the typography.

grid.css—handles the layout grid.

widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.

base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

The blueprint is built similarly :

Divide and conquer :

In terms of functional organization, buleprint disperses functions such as layout, typography, widget, reset, and print into different css files. This makes it convenient for users to only import the functions they want to use, instead of importing all files, and improves page loading performance. Currently, the component section only provides button processing, and has not yet achieved McKinsey's MECE ("mutually independent and completely exhaustive") approach.

Unified interface :

Although the functions are dispersed into multiple css files, when importing, only the same file screen.css needs to be included. The specific import details are processed in screen.css, which unifies the external interface.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

Description of the css file included in blueprint:

screen.css

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

Similar to Jeff Croft's base.css function, you only need to include this file and it can be imported

print.css

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

Used to handle printing and 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 handle page layout (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.

Used to handle the layout of page elements.

lib/reset.css

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

Used to reset the page and specify default values ​​for page elements that do not specify css attributes.

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

Used to handle 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

Provide compressed css files (including grid.css, typography.css, reset.css, buttons.css).

2. Research on usage of each module

2.1. Research on grid.css

Compatibility handling of cross-browser centering

Generally speaking, to deal with the differences between Firefox and IE when dealing with centering, the following methods are used:

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

Retrieved from: http://www.maxdesign.com.au/presentation/center/

How to handle blueprint:

body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* A container should group all your columns. */ .container { text-align: left; position: relative; padding: 0; margin : 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }How to implement blueprint for columns (Columns):

blueprint defines .column, .span-x, and .last, which are combined to realize the column function.

Among them: .column defines the float attribute of the column; .span-x defines the column width; .last sets the margin-right to 0px,

2.2. Research on reset.css

The original code of reset.css should come from Eric Meyer. Eric Meyer has two logs about reset, which are used to deal with the problem of different default values ​​across browsers. Eric Meyer's documentation is excellent:

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 uses * to represent all elements of the document, for example

* { margin: 0;} Some resources on the topic of reset style:

YUI reset library: http://developer.yahoo.com/yui/reset/

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

The following articles are actually articles discussing CSS framework or tips, but they all mention 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.3. Research on typography.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. Research on buttons.css

Rediscovering the Button Element discusses the various benefits of using the button element to replace the input element. The button element provides richer functions.

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

2.4. Print.css research

Eric Meyer has an article about implementing the print function in css, which can be used as a reference for understanding print.css.

CSS Design: Going to Print

Print Different

2.5, compressed.css

compressed.css is a package that compresses several blueprint files. It also compresses the css file, removing useless spaces, newlines, comments and other text.

This method is used when deploying on production systems to avoid importing multiple css files on the page, and it is also helpful to improve 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, similar services that provide optimization and compression of css and javascript include:

http://csstidy.sourceforge.net/ (open source)

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

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

3. Usage examples

4. Reference documents

http://code.google.com/p/blueprintcss/wiki/Tutorial

5. Related projects

blueprint-generator: http://kematzy.com/blueprint-generator/

tripoli: http://monc.se/tripoli/

Recommended article: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/