What is Blueprint css framework and how to used it

Before we go to learn how to used blue print let me introduce what is CSS Frame work. CSS Framework is a good tool for web developers to use CSS without having to go into the syntax of CSS. There are several CSS Framework is available for free on the internet. Some of them are made by the site that no longer foreign to you: Google and Yahoo.

This tutorial specially covered about CSS codes that already contained in the Blueprint CSS. About the use of additional Ruby scripts that are included in the bundle of this framework will be discussed in more advanced session (when I was able to use Ruby: D).

This tutorial consists of 3 pages.
Getting Source Code Blueprint CSS

Blueprint can be accessed and downloaded via Blueprintcss.org. site. You will be served by the ZIP or TAR file which then need software to open decompressor. Fortunately every Operating System (XP, Mac, Linux) already have it, so I assume you are open and extract the file.

For this tutorial, please direct to the folder “blueprint” and saw the three CSS files in the folder. Blueprint-style shared their CSS style into 3 files:

1. screen.css: CSS role to determine the layout as you see on your screen right now. This file is used for media type “screen” and “projection”, this includes all types of screens that projected from a PC or laptop. More information can be seen in the following description of this media type.
2. print.css: Like screen.css, only this time aimed at the media printing. This style appears when you press the “Print” on your browser.
3. ie.css: Style is intended specifically for Internet Explorer (IE). For those who do not know, IE is the browser besutan giant Microsoft. This browser has a problem in piles that always comes up every time a new update.

Many of the rules agreed at the World Wide Web Consortium (a consortium led every website that you see in this world the same in any browser) does not apply to IE browsers.

Because of the nature of IE is inconsistent, then almost every website has a “special rules” to improve the appearance of the IE browser. Because after all, IE users in the world is still very much considering that IE is the browser gained by users of Windows directly from CD / DVD installation.

To use it, enter the following code in the head tag:

The media attribute is used to reinforce the use of CSS. Print.css placed after screen.css order to definite the re CSS rules on printing media.

While ie.css placed in the Conditional Comment. Conditional Comment can only be seen by the IE browser. This is because IE renders web pages with different methods with other browsers. “Gaffe” this is precisely the gap that used the website designers to fix these mess.

Now for next step i introduce to u what is screen.css

If you look at the contents of the file screen.css, all styles are neatly arranged according to function:). Imagine how much time you can save from writing CSS from scratch! Not to mention the debugging process annoying IE browser. : D.

The following description of an explanation based stylesheet functions:
Reset CSS

The contents of the CSS Reset function is more or less the same as the other CSS Reset as I explained earlier in this article. Generally CSS Reset function to set the CSS standards so that every browser has a stylesheet to the same standards.

It is recommended that you do not tamper with any of the CSS Reset. Because each style is defined in Blueprint CSS is based on the CSS Reset has been made.
Typography

As the name implies, typography set the rules for the use of CSS properties that have an effect on the type and style of the letter. Properties defined in this section are:

1. font-family
2. font-style
3. font-weight
4. font-size
5. color
6. line-height
7. margin
8. padding

Blueprint also added classes that also serves to give a special accent on a particular function:

1. . small, to decrease the font size
2. large, to enlarge the font size
3. . hide, to hide certain elements
4. . quiet, to give accent “quiet” by giving the font color of the very young
5. . loud, to give accent “loud” by giving the font color of very bright
6. . highlights, to give marks on the writing
7. . added, useful to inform that a data has been added
8. . removed, useful to inform that the data was deleted
9. . first,. last,. top,. bottom is still not clear to me why. But viewed from the css seem to control where the floating element. If anyone knows, once commented, well.

Forms

This CSS defines the style-specific style for form elements. These elements are:

1. labels
2. fieldset
3. legend
4. input (to type text, password, radio buttons and checkboxes)
5. textarea
6. form

Special classes for form elements in CSS are:

1. .error, to provide information “Error” when submit form
2. .notice, to provide notification when filling out the form
3. .success, to provide information “Success” at the time of submit the form

Grid

CSS is often a major reason why people use CSS Grid Framework for functions to determine the size and position of the element. Properties that are often encountered on this Grid are:

1. float (left or right)
2. clear
3. margin
4. padding

In the Grid there is a bunch of CSS class. Very many, detailed, and each class has a characteristic of each. But still can be classified into the following list:

1. p-#, function determines the size of the element width. Example. P-1, will give width of 30 pixels. When juxtaposed with elements of form, will set the length of each box-based form elements (input type text, password, submit, and textarea)
2. append-#, serves to give the right padding to the box-based elements of a particular pixel. Named “append” because of the addition is “after” content.
3. prepend-#, the opposite of append, prepend it to add the left padding.
4. div.border, provides for the right border column
5. div.colborder, also provides the right border, but more to add right padding to create a more spacious impression
6. pull-#, giving a negative left margin to give the impression of “attracted” to the left
7. Push-#, the opposite of the pull, push the left margin positive gave to give the impression “pushed” to the right
8. prepend-append-top and bottom, providing padding in accordance with their respective names
9. clear, clearfix, hr, hr.space; serves to “clean up” the layout of the floating elements

One thing to note for Blueprint CSS is the assumption that the width of the website is 950pixel (can be seen in class. Container). It is worth noting for the website developer that the classes in this Grid can function optimally for the website by 950 pixels wide. You may add or reduce the width of your website. However noteworthy that some classes have a large width, for example. Prepend-23 has a left padding of 920 pixels certainly not good for the website is only 900 pixels wide.

I personally have never used Grid CSS because too many classes are “not necessary”. In a sense, I would not use all 100% p-# or append-# into my designs. Better allocation of the excess space is distributed to my class with all the necessary measures. But this is only a matter of preference only, you are certainly free to use these classes.

to be continued

Posted by admin in Articles

BabyGore

The Art Of Knowledge

What is Blueprint css framework and how to used it