Share
960gs var flott! Da de fleste besøkende på nettstedet ditt brukte skrivebord med monitorer minst like stort som 1024 piksler, gjorde 960gs det enkelt å designe et nettsted i kode. Imidlertid, med tilstedeværelsen av enhetsproliferasjon og medieforespørselsprevalens, er faste breddeområder avgjort mindre effektive enn responsive layouter.
I dette dokumentet vil jeg beskrive hvordan du tar din faste bredde 960gs-side og flytter den til ZURBs fundament rammeverk. Uten å kaste ut for mye, vil jeg være rettferdig til 960gs og nevne adapt.js, det rammets svar på responsivt webdesign. Nå vil denne artikkelen dekke grunnlaget for stiftelsesnettverket, hvordan det sammenlignes med 960gs 'nett og noen ekstra alternativer med Stiftelsens Sass. For denne opplæringen antar jeg at du allerede er kjent med 960gs og ser på Foundation som en måte å oppnå en responsiv design på.
For å komme i gang må du forstå de grunnleggende konseptene i rader og kolonner i Foundation. 960gs 'konvensjon var å bruke en mega container og stole på hver kombinasjon av DIVs for å lage en rad. Som så:
Du kan ha en kastet mellom grid DIV som legger opptil 12, men det er valgfritt. Dette oppsettet vil i virkeligheten produsere to rader med to kolonner som også fordeler den tilgjengelige bredden. Hvis du legger til alfa og omega klasser, vil det henholdsvis stripe ekstra margin-left og margin-right.
I Stiftelsens forhåndsdefinerte HTML-klasser vil dette samme oppsettet bli oppnådd av følgende utdrag:
Det er ingen mega-beholder for Foundation, i stedet er det rader og rader som inneholder kolonner, og kolonnene må totalt 12. Hver kolonne er definert ved å legge til kolonner klasse ledsaget av minst en klasse for å diktere bredden på den kolonnen.
For å gå på en kort tangent, for hva det er verdt, stammer Foundation's grid til Twitter Bootstraps rader og spenner, unntatt Foundation gir deg muligheten til å definere kolonnebredder ved flere bruddpunkter.
Du vil legge merke til notasjonen medium-6. Det betyr at på middels brytepunkt (men det er definert, standard er 641px), vil du se seks kolonner verdt bredde, eller halvparten av den tilgjengelige bredden. En annen klasse kan legges til for å indikere hvor mange kolonner som er verdt bredde div bør ta opp på andre bruddpunkter, inkludert liten og stor. Slik ser det ut:
Stiftelsen er mobil-først. Kode for små skjermer først, og større enheter vil arve disse stilene. Tilpass for større skjermer etter behov. kilde
Som standard er Foundation designet i et mobilt første konsept. Hva dette betyr for nett er at liten klassen kan brukes alene for å definere bredden på en kolonne ved det lille brytepunktet og alle brytepunktene ovenfor vil arve fra det så lenge en medium eller stor klassen er ikke til stede. På baksiden, hvis du bare bruker a medium klassen, så vil standard liten brytepunktsoppsett forvandle DIVene til stablede enkelkolonne rader (tilsvarende small-12) som er standard brukt på kolonner i det lille brytepunktet.
Med alt det i tankene, er det grunnleggende ved å endre oppslaget ditt som følger: Først, div med container klassen kan slettes. Deretter rundt din Nett_# DIV som utgjør "rader", må du opprette en div med klassen rad. De individuelle DIVene inneholder Nett klasser kan endres til medium-#.
Dette vil gi deg noe som ser forferdelig ut som din gamle 960gs layout for visningsporter over 640 piksler og under denne bredden, du vil bare ha full bredde stabler med rader, noe som betyr at hver kolonne div vil endres til 100% bredde.
Her er noen andre 960gs-konsepter oversatt til Foundation parlance:
I 960gs kunne nesting oppnås ved å legge til alfa til den første kolonnen i din rad og omega til din siste, effektivt fjerning av horisontale marginer. Når du brukte denne tilnærmingen, måtte dine nestede rader være summen av kolonnens bredde som de nestede kolonnene bodde innenfor.
I Stiftelsen er nesting gjort for deg, du må bare sette inn en rad inne i en kolonne. Ingen ekstra klasser kreves. Den andre hovedforskjellen er at hver nestrad antar en fersk 12 kolonner innenfor det tilgjengelige redeområdet. Så en rad inne i a medium-6 vil tillate deg å dele de seks kolonnene inn i 12.
960gs prefiks- og suffiks-klasser var gode verktøysklasser for å skape tomt rom i oppsettet ditt og ga et middel for sentrering. Stiftelsen har de samme evner, med Offsets.
Dette er faktisk ganske mye det samme i begge rammene. Kildebestilling lar deg lage dine kolonner i hvilken som helst rekkefølge du vil ha i din faktiske HTML, men få den til å vises i en annen venstre til høyre rekkefølge. For dette kan du bruke trykk og dra klasser.
Stiftelsen dekker alle 960gs evner og mye mer. Se dokumentene for å lære om alt annet det kan gjøre.
Vel, dette er hovedårsaken til at du beveger deg inn i noe som Foundation: responsen. Du vet om stor, medium og liten breakpoints, men det er også XLarge og XXLarge. Her er hva disse breakpointklassene angår:
| Breakpoint | Viewport bredde |
|---|---|
| liten | < 40em (640px) |
| medium | 40.063em (641px) < 64em (1024px) |
| stor | 64.063em (1025px) < 90em (1440px) |
| XLarge | 90.063em (1441px)> 120em (1920px) |
| XXLarge | > 120.063em (1921px) |
Merk at bare liten, medium og stor Breakpoints kan brukes i HTML. Hvis du trenger å bruke XLarge eller XXLarge, eller du vil tilpasse disse bruddpunktene, kan du bruke arbeid med Sass til å skreddersy Foundation for å dekke dine behov.
Stiftelsen er bygd for å jobbe med Compass og Sass. Hvis Sass er noe du er komfortabel med, kan det gjøre utviklingen enklere, les mer om å komme i gang med Sass og Foundation.
Nøkkelprofilen for å bruke Sass er at i stedet for å legge til Foundation-spesifikke klasser i HTML-en din, kan du bare utvide Foundation-attributter basert på eksisterende oppslag. For eksempel, som eksisterer div med klassen nyheter kan gjøres for å etterligne a grid-6 kolonner div.
Her er et fullstendig eksempel på hvordan dette kan se ut, la oss si at du har denne HTML:
For å oppnå en 50/50 deling av .nyheter og .arrangementer, Din Sass ville se slik ut:
.main @include grid-row; .News @ include grid-column (6); .events @include grid-colmn (6);
Dette tilsvarer endringen av merkingen til dette:
Hvis du ønsket å inkludere andre brytepunkter i ditt SCSS, ville du bare bruke denne teknikken:
.main @include grid-row; .News @ include grid-column (8); @media # $ large-up grid-column (6) .events @ include grid-colmn (4); @media # $ large-up grid-column (6)
Som er det samme som:
SCSS-teknikken er fin fordi den holder klassene dine ryddig i HTML, og lar deg være mer semantisk.
Det er enda en viktig ting å forstå om denne metoden. Hvis du samler CSS til et eget, ekstra stilark, men du vil benytte deg av stiftelsen mixins, Du må importere det du trenger, men hindre duplisering av Foundation-stiler. For å unngå at overflødige stiler legges til din CSS-utgang, må du spesifisere $ Inkludere HTML-klasser variabel som falsk, her er hvordan det ser ut:
@import "fundament / settings"; $ include-html-klasser: false; @import "fundament";
Legg merke til at stiene kan variere basert på ditt eget oppsett. Dette vil tillate deg å bruke alle mixins, funksjoner og innstillinger i Foundation, uten å duplisere alle CSS. Dette er nyttig hvis du allerede inkluderer Foundation CSS på siden du jobber med. Denne metoden kan for eksempel brukes som et sted for å lagre alle dine overstyrrelser for en spesiell side eller en del av sider.
Dette er bare toppen av isfjellet: Foundation og Sass har begge mye mer å tilby, og begge har store følger av utviklere som fortsetter å gjøre dem både mer avanserte og bedre.
Accentsconagua