Bluebrintcss

reset.
css
DOCUMENT COLUMNS
Blueprintcss resets all browsers
default css tags to:
- margin, padding and border: 0, Blueprintcss defaults
- font-size:100%,
v.0.6 document’s width to 24
- font-weights:normal, cols, 950px. Use this table
- other font values: inherit, Copyright (c) 2007 Olav Bjorkoy (http://bjorkoy.com)
- image borders:0 Help Sheet v.0.3 by Alejandro Vasquez (http://ww.digitart.net) 13-11-07 to calculate other widths or
column numbers.
Tables still need 'cellspacing="0"' in the
cols-23 910px
markup though. LINKING cols-22 870px
cols-21 830px
SPAN CLASSES Download the latest version from http://code.google.com/p/blueprintcss/ and cols-20 790px
add this lines into the <head> of your page. Check that your href path is correct. cols-19 750px
Use these classes to set the cols-18 710px
width of a column <link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection">
cols-17 670px
span-1 span-13 <link rel="stylesheet" href="blueprint/print.css" type="text/css" cols-16 630px
span-2 span-14 media="print"> cols-15 590px
span-3 span-15 
span-6 span-18 TYPOGRAPHY CLASSES
span-7 span-19
span-8 span-20 This classes are defined in
span-9 span-21 GRID STRUCTURE the typography.css file.
Other typographic tags as
span-10 span-22 hx, p, a, ul, ol, etc. are also
span-11 span-23 950px (24 cols)
redefined in this file
span-12 span-24
added color #060
bottom bottom margins 0
PUSH/PULL CLASSES top top margins 0
hide display none
Use these classes on an
highlight bg yellow
element to push it into the next
column, or to pull it into the large 1.2em lines 2.5em
750px (19 cols)
previous column. small .8em lines 1.87em
790px (20 cols) quiet color #666
push-0
removed color #900
push-1 pull-1 830px (21 cols)
push-2 pull-2 p.last margin bottom 0
push-3 pull-3 870px (22 cols) table.last padding right 0
push-4 pull-4 910px (23 cols)
forms.css
If you need fewer or more columns, use this formula to find the new total width:
APPEND CLASSES Total width = (columns * 40) - 10 This tags with classes have
Add these to a column to special definitions on file
append empty cols. forms.css.
BASIC SETUP typography.css
append-1 append-13
For text fields, use class
append-2 append-14 <body>
.title or .text
append-3 append-15 <div class="container"> Sets up some sensible default typography.
append-4 append-16 <div class="column span-15"> This is where the base 12px font size
<p>Some column content</p> (75%) is defined. input.text w: 300px pad 5px
append-5 append-17 </div> inut.title font-size: 1.5em
append-6 append-18 The line-heights and vertical margins are
<div class="column span-6 last"> automatically calculated from this in ems. textarea w:400px h:250px
append-7 append-19 <p>Another column</p> select w:200px
append-8 append-20 </div> It sets a baseline (line-height) of 18px (1.5 label bold
append-9 append-21 </div>
ems). This means that every element, from fieldset pad:1.4em, border
</body>
append-10 append-22 line-heights to images has to have a height legend font-size: 1.2em
append-11 append-23 that is a multiple of 18 (or 1.5 if you use
append-12 ems). This may seem a bit tedious, but the
Remember to use “last” for the last results tend to look great. FORMS CLASSES
column of the row to avoid it to “jump”
PREPEND CLASSES into the next row If you want to use your own typographic This classes are defined in
Columns can be nested inside other definitions, you can still use reset.css and the form.css file. Other form
Add these to a column to columns, just remember to use grid.css to your liking. Just remember to related tags such as input,
prepend empty cols. “last” at the end of each row compress them in one new single css file. textarea, select etc. are
also redefined in this file
prepend-1 prepend-13
prepend-2 prepend-14 GRID CLASSES error red frame
prepend-3 prepend-15 notice yellow frame
prepend-4 prepend-16 container The container that groups all your columns. success green frame
prepend-5 prepend-17 column Usewith with span-x to create combinations of columns in the layout. hide display none
prepend-6 prepend-18 border Draws a border on the right hand side of a column. highlight bg yellow
prepend-7 prepend-19 colborder Border with more whitespace, spans one column. large 1.2em lines 2.5em
prepend-8 prepend-20 clear Clearing floats without extra markup. small .8em lines 1.87em
prepend-9 prepend-21 box Creates a padded box inside a column. Use it on column’s childs quiet color #666
prepend-10 prepend-22 last The last column in a row needs this class. removed color #900
prepend-11 prepend-23 showgrid Displays the grid in the “container” or in any element p.last margin bottom 0
prepend-12 hr.space (only for <hr>) Creates an invisible (white) horizontal ruler. table.last padding right 0

Bluebrintcss

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Bluebrintcss

Hochgeladen von

Copyright:

Verfügbare Formate

reset.

Das könnte Ihnen auch gefallen