Hvilket passer for meg? 22 Responsive CSS Frameworks and Boilerplates Explained
CSS-rammer har eksistert i mange år nå, men ankomsten av responsiv designpraksis har gjort mange av våre gamle favoritter ubrukelige. Heldigvis har mange virkelig talentfulle utviklere hoppet inn for å fylle hullet med neste generasjon CSS-rammer og kjeleplater.
Det er allerede massevis av disse tingene som flyter rundt. Alle har en liste, men ingen leder deg virkelig gjennom hvordan hver ramme og kjelplate skiller seg fra den neste, slik at du kan ta en informert beslutning. Det er målet vårt i dag. Følg med når vi tar en titt på hva som gjør hver av disse 22 responsive CSS-rammene og kjelplatene unike.
Gumby
Gumby-rammeverket tar 960-rutenettet som vi alle klipper tennene på for mange år siden, og bringer det inn i moderne tidsalder for webdesign med et responsivt preg. Den har også forhåndsbygde stiler for ting som skjemaer, knapper, veksler, rullegardin, faner og mer.
Det semantiske rutenettet
Hvis du hater ridesystemer og deres oppsvulmede, ikke-semantiske markering, er dette noe for deg. Semantic Grid System utnytter kraften til CSS-forbehandlere (LESS, Sass og Stylus) for å lage tilpassbare variabler for ting som rennestein og kolonnebredde. Alt du trenger å gjøre er å bruke noen få forhåndsbygde blandinger i CSS, ingen ekstra markering er nødvendig!
Gridless
Gridless er en kraftig kjeleplate som bruker mobil første responsive webdesign for å tilpasse seg til enhetens bredde. Det er også fullpakket med flotte funksjoner som CSS-normalisering, IE-feilrettinger og typografistiler.
rammeløs
Rammeløs er vanskelig å klassifisere fordi det teknisk sett er mer en anbefalt måte å nærme responsivt design på enn et faktisk sett med filer du kan laste ned. Det er tre trinn: Først lager du et vanlig rutenett med fast bredde, så gjentar det uendelig, og avslutt med å sentrere det i visningsområdet.
Nettstedet sier spesifikt at Frameless ikke er et rammeverk og at det ikke er noen filer som lastes ned, men til tross for denne påstanden er det faktisk noen grunnleggende maler som kan hjelpe deg i gang.
Proporsjonale nett
Proporsjonale nettverk takler noen store problemer som oppstår når du prøver responsiv CSS-layout, nemlig hekkende rutenett og bryting med prosentbaserte verdier på tvers av vidt forskjellige utsiktsporter.
Proportional Grids bruker CSS-boksstørrelse for å lage en løsning som gir mulighet for faste takrenner (ems / rems) blandet med væskesøyler. Avstanden mellom kolonnene vil forbli lik ved hvert bruddpunkt, i forhold til grunnstørrelsen på basen. Kolonner er definert av proporsjoner, f.eks. Halvparten, en tredjedel, to tredjedeler og kan lett brukes om igjen så mange ganger du vil, selv når du hekker det.
Goldilocks-tilnærmingen
Goldilocks-metoden er rettet mot å redusere tendensen til responsive design til å lene seg mot støtte av spesifikke enheter. I stedet skyter den etter en universell utforming som ikke er avhengig av noen enhet.
Goldilocks Approach bruker en kombinasjon av ems, maks bredde, mediesøk og mønsteroversettelser for å vurdere tre tilstander som gjør at designene dine kan være uavhengige av oppløsningen.
Twitter Bootstrap
Twitter Bootstrap trenger ingen introduksjon. Det er en av de største, dårligste CSS-kjeleplatene på nettet, og er utgangspunktet for utallige profesjonelle og personlige nettsteder fra utviklere over hele verden.
Twitter Bootstrap inneholder et responsivt rutenett-system i tillegg til mange stjerners forstilte elementer som former, knapper, navigasjonsmenyer og mer. Sjekk ut vår fulle introduksjon her.
Stiftelse fra ZURB
Foundation er den viktigste konkurrenten til Twitter Bootstrap, ettersom de to prosjektene er veldig like. I likhet med Bootstrap, gir Foundation deg et responsivt rutenett i tillegg til forskjellige stiliserte brukergrensesnittelementer.
Foundation 3 har nettopp lansert nylig, så hvis du ikke har sett på prosjektet på en stund, er det på tide å komme innom og sjekke det ut. Det er en av de mest nyttige og grundige rammene du finner hvor som helst.
Skjelett
Skjelett var en av de tidligste responsive kjeleplatene for å få et utseende, og det er fremdeles en av de beste. I konseptet er det litt som Foundation bare det føles mer lett (type, knapper og former er de eneste brukergrensesnittet som er inkludert).
Ta en titt på skjelettopplæringen for å se hvor utrolig enkelt dette verktøyet gjør det for å få et responsivt design opp og gå på få minutter.
Amazium
Amazium er mye som Gumby ovenfor ved at det er et responsivt rutenett bygget på toppen av 960 rutenettteknikker fra gammelt av. Nylig, selv om rammene er oppdatert for å strekke seg helt til 1200px, slik at du kan dra nytte av store skjermer. Det inkluderer til og med støtte for netthinneskjermer!
Golden Grid System
Golden Grid System kaller seg et “sammenleggbart rutenett”, som egentlig bare er en fin måte å si at mediesøk blir brukt for å kollapse den opprinnelige seksten kolonnelayouten i åtte og deretter fire kolonner når visningsområdet smalere.
Som noen av de andre rutenettet vi har sett så langt, bruker Golden Grid System takrenner basert på ems slik at rennene alltid holder seg i forhold til innholdet.
1140px CSS-rutenettet
Dette er et ganske standard gittersystem uten noe fancy. Det starter med et 12 kolonners fluidnett som bruker prosentbaserte takrenner og fungerer utmerket på 1 280 og 1, 140 px skjermer. Etter hvert som visningsområdet blir mindre, brukes et par enkle mediesøk for å gjenspeile innholdet.
StackLayout
StackLayout er for opprørerne, det kommer til å være veldig forskjellig fra andre rammer du har prøvd. Faktisk oppstod det av en motvilje fra typiske CSS-utformingsrammer.
Det grunnleggende prinsippet på jobben her er at StackLayout bruker inline-block som hjørnesteinen i et unikt layoutsystem. Systemet er litt finurlig, men det er ganske imponerende likevel. Ta en titt på gjennomgangen her.
SimpleGrid
SimpleGrid er et annet unikt layoutsystem som du vil like hvis du liker å leke med disse tingene så mye som jeg gjør. Rutenettet her er basert på fire forskjellige skjermområder: skjermer mindre enn 720px brede, skjermer større enn 720px brede, skjermer større enn 985px brede og skjermer større enn 1235px brede.
For å implementere systemet bruker du “spor” -klasser fra både en fire- og seks-kolonneoppsett. Det høres komplisert ut, men det er faktisk sitt navn og ganske enkelt å implementere.
Væskebaselinjenett
Fluid Baseline Grid er bygget med stor vekt på sterk typografi som fester seg til et baseline rutenett. Det inneholder også et tre-kolonne sammenleggbart rutenett som er ment å være et nyttig utgangspunkt, ikke en standard som skal følges.
Columnal
Columnal er et slags hybridnett-system som låner de beste elementene fra forskjellige andre rammer. Den har det elastiske DNAet fra 1140px CSS Grid System med noen 960.gs også kastet inn. Det er ganske vanlige ting, men hvis de andre ikke virker som en god passform, kan du prøve det.
Inuit.css
Inuit.css er en flott ramme som faktisk er bygget med utvidbarhet i tankene. Bruk den tilpassede rutenettbyggeren til å lage ditt eget responsive rutenett, og last deretter ned noen igloos (plugins) for å utvide rammen på nyttige måter.
320 og oppover
320 og Up er som en samling med buzz-ord for webdesign (på en god måte). Den inneholder et responsivt layoutsystem som bruker den "mobile first" mentaliteten, sammen med Bootstrap visuelle stiler, Font Awesome ikoner, Modernizr, Selectivizr, LESS og Sass. Det er en imponerende liten verktøykasse med godsaker som jeg tror du vil like.
Susy: Responsive grids for Compass
Denne er for supernerdene som meg som elsker layout-systemer så vel som Sass og Compass. Bygg layoutene dine på få minutter med magien med mikser og variabler.
Gitt at Compass nylig har droppet innfødt støtte for nett, bør Susy komme godt med for dem som savner dem.
Initializr - Responsiv HTML5-mal
Initializr er et verktøy som hjelper deg å starte HTML5-prosjektene dine raskt og enkelt ved hjelp av HTML5 Boilerplate, Bootstrap eller en ny responsiv kjeleplate.
Å velge den responsive malen er bare begynnelsen, derfra tilpasser du nedlastingen ved å velge fra alle ressursene du vanligvis vil ha, for eksempel Modernizr og MINDRE.
Nok en mobil kjeleplate
YAMB er et flott utgangspunkt for dine responsive nettprosjekter, bygd på noen få viktige funksjoner: et responsivt væskenett, rullegardinmenyer som automatisk blir til utvalgte bokser på små skjermer og responsive bilder / lysbildefremvisning.
Jeg synes nettstedet er ganske stygt, men selve verktøysettet er ganske nyttig!
Wirefy
Wirefy er bygget spesielt med tanke på hurtig responsiv wireframing-eksperimentering. Den bruker en modifisert versjon av seksten kolonne 960-rutenettet sammen med noen Bootstrap-lignende UI-elementer (menyer, skjemaer, lysbildefremvisning, knapper, bilder, etc.).
Hvilken er din favoritt?
Uunngåelig vil disse typer innlegg tiltrekke seg kommentatorer som føler behov for å forsøke å diskreditere hele forestillingen om å bruke noen form for mal eller rutenett for nettdesign. De er rett og slett ikke for alle, og jeg respekterer din mening hvis du ikke tåler dem.
Hvis du er i nett-systemer, vil jeg gjerne høre dine tilbakemeldinger om alternativene ovenfor. Hvilke har du prøvd, og hva syntes du om dem? Hvilken er din favoritt?
