Gratis 960.GS CSS fotografimal og opplæring
Elsker det eller hater det, 960.gs gir noen utrolig raske prototyper. Ved å bruke forhåndsinnstilte klasser kan du oppnå ganske komplekse oppsett uten liten eller ingen anstrengelse.
I dag gir vi deg en gratis enkeltsidemal, fullkodet ved hjelp av 960.gs. Malen har noen kjekke CSS3-effekter og bruker @ font-face for å implementere noen vakre tilpassede typografier. Nedenfor finner du nedlastingen og en grunnleggende trinnvis opplæring for hvordan du bygger din egen.
Du kan laste ned malen helt gratis og bruke den du vil med null attribusjon.
Last ned malen
- Forhåndsvisning i nettleseren
- Last ned .ZIP
Her er en rask forhåndsvisning av hvordan malen ser ut:
Last ned 960.GS ressurser
Det første du vil gjøre er å gå til 960 Grid System-nettstedet og klikke på nedlastningsknappen øverst til venstre på siden.
Nedlastingen har mange ting i seg, men alt vi trenger er tre CSS-filer: reset.css, text.css og 960.css. Dette er standardkomponentene som nettverket er bygget på. Tilbakestillings- og tekststilsarkene er helt valgfrie, men vi bruker dem for å sikre at alt forblir fint og konsistent på tvers av forskjellige nettlesere.
Opplæringen nedenfor vil anta at du er ganske kjent med både CSS og 960.gs. Hvis du trenger et krasjkurs på nettsystemer, sjekk ut 960-guiden min på Six Revisions.
Trinn 1: Start HTML- og CSS-filene
I tillegg til CSS-filene som følger med 960.gs, trenger vi våre egne. Lag en katalog på maskinen din, kast inn filene du lastet ned og lag en index.html-fil og en style.css-fil.
Lim inn følgende kode i HTML-koden for å komme i gang:
Vi har i utgangspunktet bare koblet til de forskjellige CSS-filene våre (sannsynligvis altfor mange for en enkelt webside, men dette er bygget for å utvide) og startet HTML-koden.
Designet har tynne grå bjelker øverst og nederst på siden. Vi vil at disse skal strekke seg helt over siden slik at vi plasserer dem utenfor 960 div.
Dernest, mellom topptekst og bunntekst, er en div med en klasse "container_12". Siden vi bruker 12-kolonne-versjonen av 960-systemet, vil dette opprette en div som spenner mesteparten av veien over siden og sentreres automatisk horisontalt.
Trinn 2: Skrifttypene
Vi bruker to tilpassede skrifter som ikke er nettet for dette prosjektet: Hummer og Kaviar Dreams. Begge disse finner du i FontSquirrel @ Font-Face Kit Library.
Last ned settene for hver font og legg de forskjellige fontfilene i prosjektfilen din. I CSS som følger med hvert sett, bør du finne @ font-face-koden for å legge inn skriften. Grip utdraget for hver skrift og lim det inn i stye.css-filen.
Ved å bruke denne koden, kan vi nå inkludere disse skrifttypene i fontstablene ved å skrive 'Lobster13Regular' eller 'CaviarDreamsRegular'.
Trinn 3: Topptekst
Siden vi allerede har lagt overskriften til HTML-koden vår, er alt vi trenger å gjøre for å vises vises å legge til noen grunnleggende styling.
I utgangspunktet er alt vi har gjort her gitt overskriften en høyde og bakgrunnsfarge.
Trinn 4: Navigering HTML
Det første som vises etter overskriften er navigasjonen. Dette er litt vanskelig siden det flyter på høyre side av siden. Vi kan sette en 960-klasse og deretter bruke push-kommandoen, men det er mye enklere å bare ikke bruke noen klasse på div og float det riktig med CSS.
For HTML trenger vi bare en standard uordnet liste med noen lenker. Jeg har kastet inn noen plasseringskoblinger her, men du vil tydeligvis tilpasse dette til ditt eget nettsted.
Trinn 5: Navigering CSS
Deretter må vi sette en hel haug med stiler for navigasjonen. Koblinger, uordnede lister, listeelementer og sveveeffekter må alle utarbeides.
Legg merke til at vi har angitt skrifttypen til Caviar Dreams som vi lærte ovenfor og sørget for at noen få sikkerhetskopier ble oppført i tilfelle at nettleseren ikke laster inn riktig font.
Det merkeligste her er at vi har brukt både en flottør venstre og en flottør høyre. For å få listeelementene til å vises på en linje i stedet for å bli stablet, må vi flyte “ul li” til venstre. For å få settet som helhet til å feste seg til høyre side av containerdelen vår, fløt vi #nav til høyre.
Alt annet er bare en haug med grunnleggende styling som farge, skriftstørrelse osv. For å skille koblingen på svevet påførte jeg en enkel understrek.
På dette tidspunktet skulle siden begynne å ta form. Forsikre deg om at den ser nær forhåndsvisningen nedenfor.
Trinn 6: Overskrift HTML
Etter navigeringen legger du til en div med en ID for "overskrift" og en klasse "rutenett_12". Grid_12-klassen vil gjøre bredden på div lik den for hele containeren. Inne i det div plasserer du en h2-kode og en avsnittkode med noe innhold.
Legg merke til at etter at navigasjonen og overskriften er delt, er det en div med en klasse av "klar". Slik tømmer 960 Grid System tidligere implementerte flottører. Forsikre deg om at du kaster dette inn når du vil starte en ny rad med innhold.
Trinn 7: Overskrift CSS
Legg deretter til stiler for overskriften, overskriften h2-taggen og overskriften avsnitt. Jeg satte h2 til 50px hummer og avsnittet til 25px kaviar drømmer.
Med det skulle siden din nå ha en topplinje, et navigasjonsområde og en fin stor overskrift.
Trinn 8: The Big Photo HTML
For å legge til i bildet, bruker vi en tom div med grid_12-klassen og setter bakgrunnen ved hjelp av CSS.
Trinn 9: The Big Photo CSS
For CSS satte vi et bakgrunnsbilde for div, ga den en 3px kant og påførte en CSS3-boks skygge. Den hvite grensen vil ikke vises på hvit bakgrunn, så skyggen gir bildet litt dybde.
Trinn 10: Linjevare HTML
Den siste HTML-koden vi trenger er boksene og teksten nederst på siden. Vi styler disse med en klasse for å gjøre det enkelt å legge til mer senere.
For å bygge denne delen vil vi ha to kolonner: en for bildet og en for teksten ved siden av. Det er her 960.gs gjør det enkelt for oss. Siden vi bruker 12-kolonne-versjonen, vil vi at antallet totalt skal tolv strekke seg hele containeren.
Ved å bruke “grid_4” -klassen etterfulgt av “grid_8” -klassen, får vi to kolonner, hvorav den første er halvparten av bredden på den andre (8 + 4 = 12).
Legg merke til at vi har doblet koden vår og lagt inn forskjellige bilder. Dette gir oss to av "lineItem" -områdene. Bare legg til en annen duplikatbit for å legge til en tredje eller fjerde.
Trinn 11: Linjepost CSS
Deretter legger vi til en haug med styling til dette området for at det skal se bra ut. Gi bildene en skygge og omriss og bruk de aktuelle skriftene.
Legg merke til at vi har brukt "disposisjon" i stedet for "grense" her. Dette er et pent CSS-triks som i utgangspunktet lar deg ha en bildekant som ikke skruer opp utformingen.
Når du er ferdig, skal linjepostene dine se fantastiske ut og vil bli delt inn i klart definerte kolonner.
Trinn 12: Bunntekst CSS
Det siste trinnet er å bruke de samme stilene på bunnteksten som vi gjorde på overskriften. Dette gir nettstedet en fin kraftig kontrast på bunnen og toppen.
Endelig resultat
Det skal gi deg et fungerende ferdig produkt! Legg merke til at det meste av arbeidet vårt egentlig var å style objektene som vi plasserte på siden. Vi brukte nesten ingen tid på å bekymre oss for posisjonering. Dette er hovedtrekningen av ridesystemer som 960 og Blueprint.
Vi kan diskutere semantikk hele dagen, men til slutt hjelper disse verktøyene deg med å fokusere mer på design og mindre på layoutveier. Det er sannsynlig at jo mer erfarne du blir med CSS, jo mindre vil du se behovet for å bruke et rutenettsystem for å utføre oppsettet for deg, men inntil da er det hyggelig å få dine problemer løst før de selv oppstår.
Konklusjon
Som det er uunngåelig i denne typen innlegg, vil flere mennesker uten tvil legge igjen kommentarer på baserte ridesystemer. Sannheten er at jeg sjelden bruker dem. Imidlertid ser jeg verdien av dem, og jeg liker å fikle med dem for å se hva jeg kan komme på. Ergo, hvis du ikke liker 960.gs, ikke last ned malen!
Imidlertid, hvis du er komfortabel med ridesystemer og liker gratis ting, kan du laste ned filen og finpusse! Hvis du bruker det i et prosjekt, kan du kaste en lenke nedenfor (valgfritt), så jeg kan sjekke hvordan du implementerte det og utvidet designet. Hvis du trenger et forslag, skriker det store bildet for å bli omgjort til en jQuery-glidebryter.
