Älskar det eller hatar det, 960.gs gör för några otroligt snabba prototyper. Genom att använda förinställda klasser kan du uppnå ganska komplexa layouter med liten eller ingen ansträngning.
Idag tar vi med dig en gratis enkelsidig mall, helt kodad med 960.g. Mallen har några fina CSS3-effekter och använder @ font-face för att implementera lite vacker anpassad typografi. Nedan hittar du nedladdningen och en grundläggande steg-för-steg-handledning för hur du bygger din egen.
Du kan ladda ner mallen helt gratis och använda den men du vill ha nollskrivning.
Ladda ner mallen
- Förhandsgranska i webbläsare
- Hämta .ZIP
Här är en snabb förhandsgranskning av hur mallen ser ut:
Ladda ner 960.GS Resources
Det första du vill göra är att gå över till 960 Grid System hemsida och klicka på nedladdningsknappen längst upp till vänster på sidan.
Nedladdningen har massor av saker i det men egentligen allt vi behöver är tre CSS-filer: reset.css, text.css och 960.css. Det här är de standardkomponenter som gridsystemet är byggt på. Återställnings- och textstilsortsbladen är helt frivilliga men vi använder dem för att säkerställa att allt stannar fint och konsekvent över olika webbläsare.
Handledningen nedan antar att du är ganska bekant med både CSS och 960.gs. Om du behöver en kraschkurs på nätverkssystem, kolla in min 960-guide på Six Revisions.
Steg 1: Starta dina HTML- och CSS-filer
Förutom de CSS-filer som följer med 960.gs behöver vi vår egen. Skapa en katalog på din maskin, kasta in de filer du laddat ner och skapa en index.html-fil och en style.css-fil.
Klistra in följande kod i din HTML för att komma igång:
Vi har i grund och botten bara kopplats till våra olika CSS-filer (förmodligen alltför många för en enda webbsida men den är byggd för att expandera) och startade HTML-koden.
Designen har tunna gråstänger längst upp och längst ner på sidan. Vi vill att dessa ska sträcka sig hela vägen över sidan så vi placerar dem utanför 960 div.
Därefter är mellanrubriken och sidfoten en div med en klass av? Container_12 ?. Eftersom vi använder den 12 kolumnversionen av 960-systemet skapar detta en div som sträcker sig över hela vägen över sidan och centreras automatiskt horisontellt.
Steg 2: Teckensnitt
Vi använder två anpassade icke-webbfonter för detta projekt: Hummer och kaviar drömmar. Båda dessa finns i FontSquirrel @ Font-Face Kit Library.
Ladda ner kit för varje typsnitt och placera de olika typfilerna i din projektfil. I CSS som levereras med varje kit borde du hitta @ font-face-koden för att bädda in det här tecknet. Ta tag i snippet för varje typsnitt och klistra in det i din stye.css-fil.
Med hjälp av denna kod kan vi nu inkludera dessa teckensnitt i våra typsnittstaplar genom att helt enkelt skriva 'Lobster13Regular' eller 'CaviarDreamsRegular'.
Steg 3: Rubrik
Eftersom vi redan har lagt till rubriken i vår HTML, behöver vi bara göra att det visas, lägga till lite grundläggande styling.
I grund och botten har allt vi gjort här fått huvudet en höjd och bakgrundsfärg.
Steg 4: Navigering HTML
Det första som visas efter rubriken är navigeringen. Det här är lite knepigt eftersom det floats på höger sida av sidan. Vi kunde ställa in en 960-klass och sedan använda kommandot push men det är mycket lättare att bara inte tillämpa någon klass på div och flyta den rätt med CSS.
För HTML-filen behöver vi bara en standard oorderad lista med några länkar. Jag har kastat i några platshållare länkar här men du vill självklart vilja anpassa detta till din egen webbplats.
Steg 5: Navigation CSS
Nästa måste vi ställa in en hel massa stilar för navigering. Länkar, oorderade listor, listobjekt och svepverkningar måste alla utarbetas.
Observera att vi har ställt in fonten till Caviar Dreams som vi lärde oss ovan och såg till att några få säkerhetskopior listades om webbläsaren inte fyller in rätt teckensnitt.
Det märkligaste här är att vi har använt både en flottör till vänster och en flottör till höger. För att få listobjekten att visas i en rad istället för staplade, måste vi flyta? Ul li? vänster. För att få setet som helhet att hålla sig till höger om vår container div, floated vi #nav höger.
Allt annat är bara en massa grundläggande styling som färg, typsnitt, etc. För att skilja länken på svävar tillämpade jag en enkel understrukning.
Vid denna tidpunkt bör din sida börja ta form. Se till att den ser nära förhandsvisningen nedan.
Steg 6: Rubrik HTML
Efter navigeringen lägger du till en div med ett id på? Rubrik? och en klass av? grid_12 ?. Klassen grid_12 kommer att göra bredden på div lika med den för hela behållaren. Inuti den div har en h2-tagg och ett stycke tagg med lite innehåll.
Observera att efter navigerings- och rubrikavdelningarna finns en div med en klass av? Clear ?. Så här rensar 960 Grid-systemet tidigare implementerade floats. Se till att du slänger in den när du vill starta en ny rad av innehåll.
Steg 7: Headline CSS
Lägg sedan till i stilar för rubriken, rubriken h2-taggen och rubriken för rubriken för rubriken. Jag satte h2 till 50px hummer och stycket till 25px Caviar Dreams.
Därmed borde din sida nu ha en toppfält, ett navigeringsområde och en fin stor rubrik.
Steg 8: Big Photo HTML
För att lägga till i fotot använder vi en tom div med klassen grid_12 och ställer in bakgrunden med hjälp av CSS.
Steg 9: The Big Photo CSS
För CSS ställde vi en bakgrundsbild för diven, gav den en 3px-gräns och tillämpade en CSS3-boxskugga. Den vita gränsen skulle inte dyka upp på en vit bakgrund, så skuggan ger bilden lite djup.
Steg 10: Linjepost HTML
Det sista stycket av HTML vi behöver är rutorna och texten längst ner på sidan.Vi utformar dessa med en klass för att göra det enkelt att lägga till senare.
För att bygga den här sektionen vill vi ha två kolumner: en för bilden och en för texten bredvid den. Det är här 960.gs gör det enkelt för oss. Eftersom vi använder 12-kolonnversionen vill vi att vårt nummer totalt tolv sträcker sig hela vägen över behållaren.
Genom att använda "grid_4" klass följt av "grid_8" klass, vi får två kolumner, den första är halva bredden på den andra (8 + 4 = 12).
Observera att vi har fördubblat vår kod och satt in olika bilder. Detta ger oss två av? LineItem? områden. Lägg bara till en annan dubblett för att lägga till en tredje eller fjärde.
Steg 11: Linjepost CSS
Nästa lägger vi till en massa styling till detta område för att få det att se bra ut. Ge bilderna en skugga och skiss och använd lämpliga teckensnitt.
Observera att vi har använt? Kontur? istället för? gränsen? här. Detta är ett snyggt CSS-trick som väsentligen låter dig få en bildgräns som inte skruvar upp din layout.
När du är klar ska dina rader se fantastisk ut och delas in i tydligt definierade kolumner.
Steg 12: Footer CSS
Det sista steget är att tillämpa samma stilar på sidfot som vi gjorde för rubriken. Detta ger platsen en fin stor kontrast på botten och toppen.
Slutresultat
Det borde ge dig en färdig färdig produkt! Observera att det mesta av vårt arbete verkligen var att utforma objekten som vi placerade på sidan. Vi spenderade nästan ingen tid att oroa sig för positionering. Detta är huvuddragen i nätverkssystem som 960 och Blueprint.
Vi kan argumentera semantik hela dagen men i slutet hjälper dessa verktyg dig att fokusera mer på design och mindre på layout woes. Det är troligt att ju mer erfarna du blir med CSS, desto mindre ser du behovet av att använda ett nätsystem för att utföra layouten för dig, men tills dess är det trevligt att lösa dina problem innan de ens uppstår.
Slutsats
Som det är oundvikligt i dessa typer av inlägg, kommer flera personer utan tvekan att lämna kommentarer bashing grid system. Sanningen är att jag sällan använder dem. Men jag ser deras värde och jag gillar att fiska med dem för att se vad jag kan komma med. Nedre raden, om du inte gillar 960.gs, ladda inte mallen!
Men om du är bekväm med rutnät och gillar gratis saker, ladda ner filen och tweak bort! Om du använder det i ett projekt kasta en länk nedan (valfritt) så jag kan kontrollera hur du implementerade det och förlängde designen. Om du behöver ett förslag skriker det stora fotot till att bli en jQuery-reglage.