Blueprint è un insieme di fogli di stile CSS scritto da progettazione Web norvegese Olav Bjorkoy. Blueprint rende facile per creare rapidamente una pagina Web divisa in sezioni e colonne che è compatibile con tutti i principali browser Web. Blueprint anche formati contenuti adeguatamente per la stampa. Con la cianografia è evitare il fastidio di istituire una nuova pagina da zero, consentendo di concentrarsi maggiormente sul suo contenuto.

Istruzioni

1

Scarica Blueprint da blueprintcss.org.

2

Pulsante destro del mouse il file scaricato in Windows Explorer e scegliere "Estrai tutto". Fare clic su "Estrai".

3

Aprire la cartella rivelata. Caricare la cartella "blueprint" all'interno di esso al server Web, nella stessa directory come i documenti HTML delle tue pagine Web o in una directory speciale di CSS.

4

Creare un nuovo documento HTML e inserire il seguente codice tra i tag "head".

< link rel = "stylesheet" href="blueprint/screen.css" type = "text/css" media = "schermo, proiezione" >

< link rel = "stylesheet" href="blueprint/print.css" type = "text/css" media = "stampa" >

<!-[se lt IE 8] >

< link rel = "stylesheet" href="blueprint/ie.css" type = "text/css" media = "schermo, proiezione" >

<! [endif]-->

Correggere gli attributi di "href" come necessario per riflettere il percorso corretto per la directory "blueprint" sul vostro server.

5

Aggiungere un elemento div con classe "contenitore" per tra i tag body del documento HTML utilizzando il seguente codice.

< div class = "container" >

< / div >

Tutto il resto del codice corpo dovrebbe andare tra questi due tag.

6

Creare tre colonne nella pagina aggiungendo div all'interno delle classi di "span" di Blueprint di "contenitore" div. uso. Digitare il seguente codice immediatamente dopo il tag che si apre il div "contenitore".

< div class = "span-8" > colonna sinistra < / div >< div class = "span-8" > colonna centrale < / div >< div classe = "ultima campata-8" > colonna destra < / div >

La larghezza della pagina è 24 delle unità di progetto, quindi aggiungono i numeri utilizzati fino a 24. Assicurarsi che l'ultima colonna in qualsiasi set appartiene anche alla classe "ultimo". Posizionare qualsiasi HTML contenuto che ti piace in questi div creare la tua pagina Web.

7

Aggiungere il seguente codice dopo l'ultima colonna per inserire un piè di pagina sotto le colonne che si estende su tutta la pagina.

< div class = "span-24" > piè di pagina < / div >

È possibile aggiungere sezioni come molti in questo modo mentre gradite, ciascuno contenente div con "span" classi cui numeri di aggiungono fino a 24.

8

Utilizzare le classi di "anteporre" e "Aggiungi" per aggiungere colonne vuote aggiuntiva prima o dopo una determinata colonna, rispettivamente. Ad esempio, digitare il seguente codice.

< div class = "span-8" > colonna sinistra < / div >< div classe = "span-6 anteporre-2" > colonna centrale con spazio supplementare alla sua sinistra < / div >< div class = "ultima campata-8" > colonna destra < / div >

Si noti che i numeri, compreso quello della classe di "anteporre", aggiungere ancora a 24.

9

Stilizzare il contenuto di una colonna associandola a una o più delle seguenti classi.

"piccolo" - testo di piccole dimensioni

"grande" - testo di grandi dimensioni

colore del testo disattivato "tranquilla"-

"rumoroso" - colore testo forte (nero)

sfondo "evidenziare" - giallo

"aggiunto" - priorità bassa verde

"rimosso" - priorità bassa rossa

Consigli & Avvertenze

• Consultare il Blueprint CSS Framework Tutorial e documenti wiki relativa al repositorio per vedere esempi di Blueprint più avanzati e tecniche.