Hvordan bruke Blueprint Med HTML 5

January 13

Blueprint er en CSS rammeverk som legger grunnlaget for den nye nettsiden design. The Blueprint tilbyr et stilark for layout, typografi og skjemaer som du kan tilpasse med din egen skrift stiler, farger og effekter. Når den brukes i kombinasjon med HTML5 eller en HTML5 "standardtekst", kan du opprette en formatert og meget funksjonell nettside i bare noen få timer. For å starte, bør du laste ned begge pakkene fra sine respektive hjemmesider: blueprintcss.org og html5boilerplate.com.

Bruksanvisning

1 Lag din HTML-dokument eller åpne "index.html" som er pakket med HTML5 Tekst og lagre den på et nytt sted som vil fungere som ditt nettsted roten. Hvis du bruker HTML5 Tekst, åpner style.css og lagre den på samme sted som den nye HTML-fil, eller lage en ny ny fil og lagre den som style.css på samme sted.

2 Åpne "screen.css" filen ligger i utpakkede Blueprint er "blåkopi" -mappen. Hvis du ikke bruker HTML5 Boilerplate, kopiere innholdet i denne filen i style.css. Hvis du bruker standardteksten, finn ".small" class rundt linjen 68. Plasser markøren i begynnelsen av denne linjen og dra nedover for å markere den og alt under den. Kopier koden og lim den inn i style.css under "Primary stiler" kommentar på slutten av dokumentet.

3 Tilpass stilene med dine ønskede skrifttyper, farger, bakgrunnsbilder eller effekter. For å få mest mulig ut av Blueprint og Tekst, bør du avstå fra å endre den opprinnelige stilen informasjon (for eksempel marginer.) The Blueprint inneholder 12 egendefinerte klasser som er forklart i Blueprint dokumentasjon. For å bruke disse klassene, kan du legge dem til en tag i HTML-dokumentet. For eksempel "<p class =" top ">" fjerner eventuelle padding eller margin over avsnittet som kan defineres ved standard avsnittsstiler i Blueprint.

4 Koble stilark til HTML-dokumentet hvis du ikke bruker Tekst. For å gjøre dette, legg til følgende linje med kode ovenfor din </ head> -taggen, og fremfor noen <script> tags:

Du kan også ønske å kopiere "ie.css" og "print.css" fra Blueprint mappen til ditt nettsted mappe og koble dem også. Begge disse stilark inneholder spesielle klasser for å hjelpe formatere nettside for eldre nettlesere og skrivere. Hvis du vil koble dem, bruke link tag som ovenfor:

5 Kopier de gjenværende filer fra HTML5 tekst til ditt nettsted mappe og begynne å bygge det nye nettstedet. Hvis du ikke bruker Boilerplate, bør du opprette egne mapper for bilder og Javascript-filer. For å legge til egendefinerte klasser og velgere for HTML5-koder, legge dem til bunnen av din style.css dokument og tar seg ikke å gjenta velgere som allerede eksisterer.

Hint

Hvis du lagrer din stil ark i en egen "css" -mappen, må du justere stiene riktig i din link koder.
Bruk alltid CSS levert av HTML5 Boilerplate i forrang over Blueprint når du bruker de to sammen. Det er viktig at du bare kopiere de egendefinerte stiler, former og rutenett fra Blueprint.