What is css Blueprint

Blueprint is a CSS framework that divides layout, typography, widget, reset, and print into different CSS files.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Recommended: css video tutorial

Blueprint (CSS framework)

Blueprint is a CSS framework whose purpose is to reduce It’s time for your CSS development. It gives you a solid foundation in CSS, with an easy-to-use grid to base your top items on, sensible typography, and even print style sheets.

Use Blueprint as a guide when designing web pages, and then design or generate HTML so that Blueprint CSS styles are applied to HTML elements. In fact, because Blueprint provides powerful CSS, it is possible to design web pages in HTML without having to use a graphics design program, such as Photoshop, to simulate the final page. In a sense, Blueprint offers true What You See Is What You Get (WYSIWYG) web design because the prototype will use the same code as the final site.

In addition, because the main role of Blueprint is to simulate the appearance of a printed page, using Blueprint for interactive design feels more like using QuarkXPress or Adobe InDesign. Blueprint styles are based on pixels and a baseline grid of 18 pixels. With design talent and effort, it's possible to create professional-looking pages.

Style Example

Blueprint's default grid is 950 pixels wide, divided into 24 30 pixel wide columns separated by 10 pixel dividers: [( 24 columns * 30 pixels/column) (23 dividers * 10 pixels/divider) = 950 pixels]. If there is a preference or need for a wider or narrower grid or different column widths, Blueprint provides a Ruby tool for regenerating the Blueprint to the required specification. The Ruby tool also creates a grid image that can be referenced in Photoshop, and the final CSS is compressed to reduce file size, thus reducing transfer time and bandwidth.

Normally, Blueprint CSS files should not be edited. Instead, you should define your own styles in a separate file and override the Blueprint code as needed. This is the role of the last file, css/custom.css, which is created and maintained as part of the code.

For more programming-related knowledge, please visit: Programming Courses! !

The above is the detailed content of What is css Blueprint. For more information, please follow other related articles on the PHP Chinese website!