Hvordan bruke Blueprint CSS

December 30

Blueprint er et sett av Cascading Style Sheets er skrevet av Norsk Web designer Olav Bjørkøy. Blueprint gjør det enkelt å raskt opprette en webside delt inn i seksjoner og kolonner som er kompatibel med alle de store nettleserne. Blueprint formaterer også innholdet passende for utskrift. Med Blueprint unngår du irritasjonen av å sette opp en ny side fra bunnen av, slik at du kan fokusere mer på innholdet.

Bruksanvisning

1 Last ned Blueprint fra blueprintcss.org.

2 Høyreklikk den nedlastede filen i Windows Utforsker, og velg "Pakk ut alle." Klikk "Extract".

3 Åpne avslørt mappen. Last opp "blåkopi" mappen i det til din server, i samme katalog som HTML-dokumenter av dine websider eller i en spesiell CSS katalogen.

4 Opprett en ny HTML-dokument, og sett inn følgende kode mellom "hodet" tags.

<! - [If lt IE 8]>

<! [Endif] ->

Korriger "href" attributter som er nødvendig for å reflektere den riktige banen til "blåkopi" katalog på serveren din.

5 Legg en div med "container" class til mellom body-kodene på HTML-dokumentet ved hjelp av følgende kode.

</ Div>

Hele resten av legemet koden skal gå mellom disse to koder.

6 Lag tre kolonner på siden ved å legge til divs innenfor "container" div. Bruk Blueprint er "span" klasser. Skriv inn følgende kode rett etter koden som åpner "container" div.

<Div class = "span-8"> Venstre kolonne </ div> <div class = "span-8"> Middle Column </ div> <div class = "span-åtte siste"> Høyre kolonne </ div>

Bredden på siden er 24 av Blueprint enheter, slik at tallene som brukes legge opp til 24. Pass på at den siste kolonnen i et sett hører også til den "siste" -klassen. Plassere noen HTML-innhold du liker i disse divs å lage din webside.

7 Legg til følgende kode etter den siste kolonnen for å plassere en bunntekst under kolonnene som spenner over hele siden.

<Div class = "span-24"> bunntekst </ div>

Du kan legge til så mange deler på denne måten som du liker, som hver inneholder divs med "span" klasser som tallene legge opp til 24.

8 Bruk "setter du" og "Tilføy" klasser for å legge til ekstra tomme kolonner før eller etter en bestemt kolonne, henholdsvis. For eksempel inn følgende kode.

<Div class = "span-8"> Venstre kolonne </ div> <div class = "span-6 foranstilte-2"> Middle Column med ekstra plass til sin venstre </ div> <div class = "span-åtte siste "> Høyre kolonne </ div>

Merk at tallene, blant annet fra "setter du" klasse, likevel legge til 24.

9 Stylize en kolonne innhold ved å knytte den med en eller flere av følgende klasser.

"Liten" - liten tekst

"Stort" - stor tekst

"Stille" - dempet tekstfarge

"Høyt" - sterk tekstfarge (svart)

"Høydepunkt" - gul bakgrunn

"Lagt til" - grønn bakgrunn

"Fjernet" - rød bakgrunn

Hint

Ta kontakt med Blueprint CSS Framework Opplæring og relaterte wiki dokumenter på github.com å se mer avansert Blueprint eksempler og teknikker.