Hvordan bruke Blueprint CSS Framework

Hvordan bruke Blueprint CSS Framework


Blueprint CSS er et rutenett-basert layout rammeverk som kjører på Cascading Style Sheets. Hoved stilark inneholder "reset" stiler, grunnleggende typografi innstillinger og en komplisert, 24-kolonne grid. Du kan bruke dette rutenettet til å legge ut divs som kolonner med innhold på websidene. Webutviklere som bruker Blueprint CSS gjør det fordi det tar ut mye av arbeidet med å skrive CSS-koden for å plassere divs på websider. Siden styre utformingen av divs er en utfordring å uerfarne programmerere, er det også et godt verktøy for nybegynnere.

Bruksanvisning

1 Gå til Blueprint CSS hjemmeside og laste ned ZIP-fil for rammeverket. Pakk ut filen og plasser følgende tre CSS-filer i nettstedets mappe: screen.css, print.css og ie.css. Den screen.css filen er din viktigste rammen fil, mens print.css håndterer den trykte utformingen av nettstedet ditt og ie.css gir noen feilrettinger for eldre Internet Explorer (IE) nettlesere.

2 Legg til følgende kode mellom hvert sett <head> og </ head> taggene på nettstedet ditt:

<Link rel = "stylesheet" href = "css / blåkopi / screen.css" type = "text / css" media = "skjerm, projeksjon" />

<Link rel = "stylesheet" href = "css / blåkopi / print.css" type = "text / css" media = "print" />

<! - [If lt IE 8]>

<Link rel = "stylesheet" href = "css / blåkopi / ie.css" type = "text / css" media = "skjerm, projeksjon" />

<! [Endif] ->

Denne koden knytter alle de tre Blueprint CSS-filer til websidene. IE-spesifikke filen laster bare for versjoner under IE 8.

3 Pakk en DIV med en klasse navnet "container" rundt alt innholdet på hver side på nettstedet ditt. Dette DIV bør starte like etter åpningen <body> -koden og slutt rett før den avsluttende </ body> -koden. Her er et enkelt eksempel:

<Body>

<Div class = "container">

Nettstedets tekst, bilder og andre divs gå inn her.

</ Div>

</ Body>

4 Lag en DIV for hver kolonne du vil. Gi at div en klasse navnet "span-X", der "X" er antall Blueprint grid kolonner du vil at innholdskolonne å span. The Blueprint rutenettet er delt inn i 24 kolonner, hver 40 piksler bredt. For eksempel, for å lage tre like store kolonner med innholdet på websiden, gi hver div en klasse navnet "span-8."

5 Legg klassenavnet "siste" til den siste innhold kolonnen for hver rad av websiden. Her er hva koden ser ut for en DIV inneholder to klasse navn, en for spennet og en for "siste":

<Div class = "span-10 siste">

Enhver DIV gitt klassenavnet "siste" tømmer seg selv, så noen DIV etter at den begynner på en ny rad.

6 Legg til "foranstilte-X" eller "legge-X" klasser til divs når du ønsker å legge til ekstra tomrom på forsiden eller baksiden av dem. Prepending kolonner legger plass til venstre for divs, mens tilføye kolonner legger plass til høyre for divs. Prepended og de etterfølgende kolonner teller for de samlede 24 kolonner tilgjengelig i Blueprint rutenettet.

Hint

  • Bruk Photoshop-filen i Blueprint CSS ZIP-pakken som en mal for å utforme nettsteder. Dra nytte av de horisontale linjene, alle fordelt 18 piksler fra hverandre, når du plasserer tekst.
  • Bruk av for mange separate CSS-filer vil avta ditt nettsted.
  • Sikkerhetskopiere HTML og CSS-filer før du redigerer dem.