Use rails and blueprint for fast development (Part 1)

ArticleDirectory

• Reset.
• Typographical. It is basically used for block elements. Design the program.
• Widgets are mostly used in inline elements to refine details.
• Grid, something really used for Layout
• A lot of hack, mainly for ie5's weird box model!
• Button
• Provide icons for links, as the name suggests.
• Some beautiful font section settings. Even Chinese. No drama!
• Read style from right to left! Useless!

This is my new favorite. 960 was also such a time, but it was time to think differently! No way. This is the attitude of Ruby people living at the forefront. In the words of the ancients, this is called "no corruption in water, no household pivot "!

Of course it is not 960 bad, but its meaning is so much that it cannot be dug up! Yui seems to be only a good choice. What is the negative margin, liquid layout, and variable font are worth looking. Then the ability is limited. It is impossible to students into fat people. So my eyes are still on blueprint, and I will select Yui next time.

• Blueprint/src/reset.css: the reset solution for best practices has been summarized. Reset the default values for page elements to eliminate the differences between the browser and browser.
• Blueprint/src/grid.css: the grid design improves availability and accessibility. Currently, both 960 and blueprint are solid-state grids, and there is a lack of liquid effects like Veerle's blog that can adapt to the width, but this is enough to support the most complex layout.
• Blueprint/src/typography.css: CSS for typographical, including some very exquisite text typographical styles.
• Blueprint/src/forms.css: contains some form styles.
• Blueprint/src/print.css.
• Blueprint/src/ie.css: contains many CSS hack of IE6 and IE7.

The following is an introduction.

Reset reset.css.

There is nothing to say.

The default Row Height is 1.5. The border of the table is separated.

Typography.css layout. It is basically used for block elements. Design the program.

The font unit is em, which is better than 960. In fact, many of the styles are in the resetting category, but they use the relative unit em a lot.

The forced background is white, which makes me very uncomfortable!

Provides several useful classes.

Table-based zebra crossings tr. Even TD {Background: # e5ecf9;} gray-blue.

Zoom out. Small {font-size:. 8em; margin-bottom: 1.875em; line-Height: 1.875em ;}

Zoom in. Large {font-size: 1.2em; line-Height: 2.5em; margin-bottom: 1.25em ;}

Hide. Hide {display: none ;}

Quiet. Quiet {color: #666;} is similar to the light black of the gauze.

Nov. Dark {color: #000;} dark black.

Highlight. Highlight {Background: # ff0;} Not To Mention yellow (yellow fading technology has a long history )!

Add. Added {Background: #060; color: # FFF;}. You can think of the restoration of everything in spring.

Remove. removed {Background: #900; color: # FFF;} brick red, autumn color, hard mud burned after the fire.

. First {margin-left: 0; padding-left: 0;} clears gaps on the left.

. Last {margin-Right: 0; padding-Right: 0;} clears gaps on the right.

. Top {margin-top: 0; padding-top: 0.

. Bottom {margin-bottom: 0; padding-bottom: 0.

Forms.css
Widgets are mostly used in inline elements to refine details.

Set text fields, buttons, drop-down selection boxes, single choice ammonium twisting, and other elements of the form.

Three styles are also provided:. Error,. Notice,. SuccessIs exactly the three states of flash.

Grid.css
Grid, something really used for Layout

First, a iner class is provided to pack everything, which is 950px.

From span-1 to span-24, the width increases by 40px in sequence, the smallest span is 30px, and the maximum span-24 is 950, all float to the left, in other words, they are block elements that can also be placed in parallel. You can divide a page into 24 columns at most. Except span-24, all others have the right boundary, which is 10px.

The above is a global range. The text fields and multi-row text boxes are also divided into 24 columns. The minimum is 18px (18 years old, adult age), and then 40px is added up! Different from the. Column class above, there is a gap between the left and right. The border is 1px, and the inner patch is 5px, that is, 12px.

It also provides 23 suffixes (append) to increase its visible area to 40 * (2-x) Px to the right! The 23th prefix (prepend) expands the visible area from the left. The 24 pull uses the negative margin technology to move the entire target to the left of the screen. 24 pushes with similar functions are moved to the right, but the original space to be moved is retained.

Since there is column, there is gutter. Unfortunately, this is css3. Blueprint combines the right border, right border, and right patch into a single slot.

 
Div. border {padding-Right: 4px; margin-Right: 5px; border-Right: 1px solid # Eee;} Div. colborder {padding-Right: 24px; margin-Right: 25px; border-Right: 1px solid # Eee ;}
 

Finally, a box class and two classic clear floating classes are provided.

Ie.css
A lot of hack, mainly for ie5's weird box model!

 
IMG {-MS-interpolation-mode: bicubic ;}
 

Private Attribute of IE7-MS-interpolation-mode, used to solve the problem of scaling image distortion

In fact, there are many bugs in IE, and this CSS is not comprehensive, which is much worse than Yui. For example, if the height self-adaptation problem (the external Div cannot fully frame the DIV inside), it is obviously not enough to specify a height: 1%.

 
. Self_adaption {overflow: auto;/* Non-ie and IE7 */_ Height: 1%;/* IE6 */}
 

Minimum cross-browser height

. Min_height {Background: # CCC; Min-Height: 100px; Height: Auto! Important; Height: 100px; overflow: visible ;}
 

Expression is recommended for the minimum width and maximum width of IE6. For example:
# ID {_ width: expression (document. Body. clientwidth> 1024? "700px": "Auto ");}
When the Li element contains the IMG element, IMG in IE will have 5 more pixels of white space (as long as the block-level style element is included ).

• Solution 1: Float Li and set IMG as a block-level element;
• Solution 1: Set UL's font-size: 0;
• Solution 1: Set vertical-align of IMG: bottom;
• Solution 1: Set the IMG's margin-bottom:-5px.

Recommended method 3.

Fold rows in the table.

 
# Table {table-layout: fixed;/* Related Materials */} # Table TD {word-break: Break-all;/* Related Materials */word-wrap: break-word;/* Related Materials */}
 

A solution that can perfectly solve the page forced line feed problem in IE and Firefox, using the nowrap attribute.

IE floating boundary bug, which is the famous double margin bug.

Condition: In a container, when I set the padding (margin-left) for the floating container, as a series of containers inside it are arranged in floating form, damn IE6, the left margin of the first floating container will be automatically double (double), which is incredible.

Solution: Set the display attribute of the floating container to inline.

Introduction to the 51js.com ultra edition aoao statement

Currently, as long as float appears, it must be followed by display: inline;

In Yui, the dotted line outline is set to none, which affects the appearance. I recently read the article "ease of use of pages: Why do I need to remove the dotted box around the link?", I decided not to do this silly thing anymore!

Button.css button

The button mentioned here is not <input type = "button" value = "normal button"/& gt, <input type = "Submit" value = "Submit"/& gt, <input type = "reset" value = "reset"/> the three buttons generated by the input element are the buttons generated by the forgotten button element. To implement the above three functions, you only need to set the button type to the corresponding attribute!

The HTML button tag and input type = "button | submit | RESET" play the same role. The button tag is in IE6, by default, IE7 does not write the type attribute, which is equivalent to <button type = "button">, meaning form submission is not performed; if you do not write type in IE8 or Firefox, it is equivalent to <button type = "Submit"> by default, and the form is submitted.

Why do we need the button element? According to W3C definition, the button element came into being to solve the differences in cross-browser performance.

Buttons created with the button element function just like buttons created with the input element, but they offer richer rendering possibilities: the button element may have content. for example, a button element that contains an image functions like and may resemble an input element whose type is set to "image", but the button element type allows content.

In addition, the setting of Button elements in CSS is far more user-friendly than that in input!

Usage

 
<Button type = "Submit" class = "button positive">  Save </ button> <a class = "button" href = "/password/reset/">  Change Password </a> <a href = "#" class = "button negative">  cancel </a>
 

Link-icons.css, as its name suggests, provides icons for links

With the attribute selector of css2, IE6 is no effect. For example:

 
/* External links */A [href ^ = "http:"] {background-image: URL (icons/external.png);}/* href ^ = "http: "indicates that it starts with" http: "*/A [href ^ =" mailto: "] {background-image: URL (icons/email.png );} A [href ^ = "http:"]: visited {background-image: URL (icons/visited.png);}/* files */A [href $ = ". PDF "] {background-image: URL (icons/pdf.png);}/* href $ =" http: "indicates ". the end of PDF. */A [href $ = ". doc "] {background-image: URL (icons/doc.png);} A [href $ = ". xls "] {background-image: URL (icons/xls.png);}/* MISC */A [href $ = ". RSS "], a [href $ = ". RDF "] {background-image: URL (icons/feed.png);} A [href ^ =" aim: "] {background-image: URL (icons/im.png );}
 

By the way, this part is completely copied to elements (another css framework )!

Fancy_type.css has some beautiful font section settings. Even Chinese. No drama! Rtl.css's reading style from right to left! Useless!

Some practices!

Implementation of Columns

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;}/* Custom class, but violates the original blueprint Calculation formula */. span-26 {width: 1150px; margin: 0;}/* Custom class for wide screen. Obviously 950px is too stingy! * // * The last element in a multi-column block needs this class. */. Last {margin-Right: 0 ;}
 

Implementation of the three columns:1 + 16 + 4. Last = 24This idea of bar layout can be designed through simple computing comes from 960!

<Divclass = "Container"> <divclass = "column span-24"> header </div> <divclass = "column span-4"> left sidebar </div> <divclass = "column span-16"> main content </div> <divclass = "column span-4 last"> right sidebar </div>
 

Implementation of the four columns:4 + 3 + 15 + 4. Last = 26

 
<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-15"> main content 1 </div> <Div class = "column span-4 last"> right sidebar </div>
 

Note that the width in. Container (defines the width of the entire page) is changed to 1150px.

Implementation of blank columns:

You can use. append-X and. prepend-X to fill multiple columns (for example, five columns) with blank columns (for example, left and right columns are blank.

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 */}
 

Another example

<Div class = "container showgrid"> <Div class = "span-24"> header </div> <Div class = "span-4"> left sidebar </Div> <Div class = "span-16"> <Div class = "span-8"> center row 1-1 </div> <Div class = "span-4"> center row 1-2 </div> <Div class = "span-4 last"> center row 1-3 </div> <Div class = "span-16 last"> body content </div> <Div class = "span-4 last"> right sidebar </div> <Div class = "span-24"> footer </ div> </div>
 

The next section describes how to use rails for fast development!

Posted onSitu zhengmei reading (...) Comment (...) EDIT favorites