Blueprint è un framework CSS che pone le basi per il vostro nuovo sito web design. Il progetto offre un foglio di stile per il layout, tipografia e forme che è possibile personalizzare con il proprio stili di carattere, colori ed effetti. Quando usato in combinazione con HTML5 o un HTML5 "boilerplate", è possibile creare una pagina web formattata e altamente funzionale in poche ore. Per iniziare, è necessario installare entrambi i pacchetti da loro rispettive Homepage: blueprintcss.org e html5boilerplate.com.

Istruzioni

1

Creare un documento HTML o aprire la "index. html" che è confezionato con l'HTML5 Boilerplate e salvarlo in un nuovo percorso che servirà come root il tuo sito Web. Se si utilizza HTML5 Boilerplate, aprire lo Style. CSS e salvarlo nella stessa posizione come nuovo file HTML, o creare un secondo file nuovo e salvarlo come Style. CSS nella stessa posizione.

2

Aprire il file "CSS" nella cartella "blueprint" del vostro modello estratti. Se non si utilizza HTML5 Boilerplate, copiare il contenuto di questo file nel vostro style. CSS. Se si utilizza il Boilerplate, individuare la classe. "Small" nei dintorni di linea 68. Posizionare il cursore all'inizio di questa linea e trascinare verso il basso per evidenziare e tutto sotto di essa. Copiare il codice e incollarlo lo Style. CSS sotto il commento di "Stili primari" alla fine del documento.

3

Personalizzare gli stili con tipi di carattere desiderati, colori, immagini di sfondo o effetti. Per ottenere il massimo dal Blueprint e Boilerplate, si dovrebbe astenersi dal modificare le informazioni di stile originale (ad esempio margini.) Il progetto contiene 12 classi personalizzate che sono spiegate nella documentazione di progetto. Per utilizzare queste classi, voi può aggiungere a qualsiasi tag nel documento HTML. Ad esempio, "< classe p ="top">" rimuove qualsiasi imbottitura o margine sopra il paragrafo che può essere definito con gli stili di paragrafo predefiniti nel Blueprint.

4

Link il tuo foglio di stile al documento HTML, se non si utilizza il Boilerplate. Per effettuare questa operazione, aggiungere la seguente riga di codice sopra riportato il tuo < / head > tag e sopra qualsiasi tag < script >:

< link rel = "stylesheet" href="style.css?v=2" >

Puoi anche copiare il "IE" e "Print" dalla cartella Blueprint alla tua cartella di sito Web e collegarli come bene. Entrambi di questi fogli di stile contengono classi speciali per aiutare la tua pagina Web per browser meno recenti e le stampanti di formato. Per collegarli, è necessario utilizzare il tag link come sopra:

< link rel = "stylesheet" href="print.css" >

< link rel = "stylesheet" href="ie.css" >

5

Copiare i file rimanenti da HTML5 boilerplate alla tua cartella di sito Web e iniziare a costruire il tuo nuovo sito. Se non si utilizza il Boilerplate, è consigliabile creare cartelle separate per immagini e file JavaScript. Per aggiungere classi personalizzate e selettori per tag HTML5, aggiungerli alla parte inferiore del documento di Style. CSS e fare attenzione a non per ripetere i selettori che già esistono.

Consigli & Avvertenze

• Se si archiviano i fogli di stile in una cartella separata "css", assicurarsi che è regolare i percorsi in modo appropriato nei tag link.
• Utilizzare sempre il CSS fornito da HTML5 Boilerplate in precedenza sopra la cianografia quando si utilizzano i due insieme. È importante che si copia solo gli stili personalizzati, forme e griglia dal progetto.