Share
Jeg vil gjerne snakke med deg om Lemonade. Ikke den forfriskende sitrusdrinken, men et ristsystem jeg opprettet.
Lemonade er et rutenett system som ble bygd for å gi designere og utviklere tillit til å lage fullt mottakelige nettsteder, eliminere frustrasjonen av å bla mellom nettlesere på jakt etter feil og feil. La oss se på hvordan det er satt sammen og hvordan du kan bygge ditt eget reaksjonsnettverk.
Før jeg bygget min egen, brukte jeg ofte Skeleton.css for mine responsive layouter. Men som tiden gikk, følte jeg at det var litt av en tapt sak, ganske enkelt fordi jeg hele tiden tilpasset det til mine behov og fjernet unødvendige elementer som jeg følte ikke var brukbare. Det er et veldig godt rammeverk, men jeg vil bare anbefale det til folk som ikke er komfortable med front-end-arbeid, i det hele tatt.
Det er så mange grids, rammer og biblioteker der ute, men å velge den rette er en tøff beslutning. Den enkleste måten å bestemme er ved å spørre deg selv "Hva prøver jeg å gjøre?" For eksempel: Jeg bygger for øyeblikket et CMS (for det meste PHP), og jeg vil ikke fokusere på grensesnittet (admin panelet) i det hele tatt, så jeg har valgt Bootstrap. Bootstrap er et utrolig omfattende rammeverk og tar bokstavelig talt om deg under alle aspekter av designprosessen.
Jeg ville virkelig gjøre noe som ville gi meg full kontroll, hvor jeg ikke ville måtte bruke mesteparten av tiden min til å tilpasse rutenettet. Til å begynne med trodde jeg at et rutenett skulle gå en tur i parken, jeg trodde faktisk at jeg kunne gjøre det om noen timer. Den 24. juni 2013 klokken 12:30 åpnet jeg redaktøren min og begynte å skrive kode, mye av det. Men overraskelse, overraskelse, det var ekstremt vanskelig å komme i gang; hvordan lager du noe som er opprettet hundrevis av ganger, men bedre? Jeg trengte å tenke fremover, jeg trengte å lage den, hvordan jeg ville ha den til å fungere, ikke hvordan jeg trodde et rutenett system skulle fungere, så jeg satte meg tre mål (jeg skrev dem på klistremerker og pusset dem på veggen min):
La meg løpe deg gjennom disse målene på en mer detaljert måte. Jeg ville at rutenettet skulle være liten, så liten at hvis jeg noen gang måtte redigere det, ville jeg ikke forbanne på skjermen med frustrasjon. Det trengte å jobbe på moderne nettlesere (glem IE8 og under); Jeg ønsket å fjerne scenariet med å bla gjennom nettlesere, for å bekymre deg om alt ser bra ut. Det endelige målet handlet om å bruke det, jeg ville ikke lage noe og bare holde det på GitHub og aldri bruke det igjen. Hvis jeg skulle lage noe, ville det bli brukt i hvert prosjekt jeg laget.
La oss først takle CSS. Husk det første målet: "Vær liten, men kraftig"
*, *: etter, *: før margin: 0; polstring: 0; / * Fjerner polstringsadferd på bredder * / -webkit-boks-størrelse: grenseboks; -moz-box-size: border-box; boks-størrelse: border-box; / * Attributvelger * / [class * = 'bit-'] float: left; polstring: 10px; / * Flyter siste ".bit-" til høyre * / [class * = 'bit -']: siste-of-type polstring-høyre: 10px; flyte: høyre; / * Clearfix * / .frame: etter innhold: ""; skjerm: bord; klare: begge;
I hovedsak er dette rutenettet ryggrad; Dette er hva som gjør nettverksfunksjonen og holder hele greia sammen.
Innstilling av grenseboksen med en universell velger hindrer oss fra å bekymre oss om polstring av elementene våre som brister med bredden.
Mens vi er på gjenstand for selektorer, er den største rommorderen i vårt rutenett attributtvelgeren. Du kan se attributten selctor i handling der jeg har brukt [Klasse * = 'bits-']. Dette retter seg mot eventuelle elementer som klassens attributt inneholder "bit-". Vi kunne også ha brukt [Klasse ^ = 'bits-'] som retter seg mot alle elementene der klassen begynner med "bit-". Ved å bruke en attributtvelger til å omfatte alle våre forskjellige kolonneklasser, sparer vi så mye tid når vi skriver nye kolonnebredder.
En ting å merke seg er bruken av en siste vifte [Klasse * = 'bit -']: siste-of-type. Hver rad av "bit" s vil være inneholdt i a ramme element:
Ved å bruke den siste typen av velgeren kan vi målrette mot det siste "bit" -elementet i gruppen, og instruere det å flyte rett, i stedet for til venstre. Dette sørger for at alt justeres perfekt mot høyre kant, i støttende nettlesere.
Et vanlig spørsmål jeg hører mye om Lemonade er: "Hvorfor så rare klassenavn?" Det er ikke en spennende historie, jeg holdt bare å referere til kolonnene som "biter" i notatene mine, så det var litt eskalert derfra. Å si at jeg tror at jeg ubevisst ville at klassene skulle være annerledes enn standard "col-1" sett i mange andre rutenettsystemer.
Jeg genererte breddene på kolonnene ved hjelp av en kalkulator (se, du trenger ikke å være en mattenerd). Beregning av kolonnene var ikke vanskelig i det hele tatt, faktisk var det veldig enkelt. For eksempel, i mitt rutenett er hver bit en brøkdel av hele bredden, bit-8 er en åttende. Derfor 100 ÷ 8 = 12,5, så vi stiller bredden på hver bit-8 på 12,5%.
Jeg har grundig testet hver kolonneavdeling med ekte innhold, og de fungerer perfekt på forskjellige nettlesere og enheter.
/ * Hovedbredder * / .bit-1 bredde: 100%; .bit-2 bredde: 50%; .bit-3 bredde: 33.33%; .bit-4 bredde: 25%; .bit-5 bredde: 20%; .bit-6 bredde: 16.6666666667%; .bit-7 bredde: 14.2857142857%; .bit-8 width: 12.5%; .bit-9 width : 11.1111111111%; .bit-10 width: 10%; .bit-11 width: 9.09090909091%; .bit-12 width: 8.33%;
Nå, som du ser, er breddene super rene, lesbare, og dette er det jeg først ønsket - du kan lett se hva som er og om nødvendig, kan du rote rundt og redigere størrelsene med letthet.
Redigering Lemonade er hyggelig enkelt. Rutenettsystemer er ofte skremmende å redigere, så jeg utfordret meg selv til å gjøre min så enkel som mulig. Den eneste regelen for å tilpasse Lemonade er: så lenge kolonnene dine er lik 100%, vil det fungere perfekt. Å legge til dine egne biter er rett fremover, da attributtselektorene tar vare på det meste av gridstrukturen:
.bit-25 bredde: 25%; .bit-75 bredde: 75%;
Disse to i kombinasjon ville være bra.
Å gjøre det responsivt var ganske utfordrende, for å få det perfekt på hver enhet og bestemme breakpoints, var ekstremt frustrerende. La meg kjøre deg gjennom koden. Jeg valgte å jobbe på skrivebordet i stedet for mobil først, men det er helt opp til deg hvilken tilnærming du foretrekker.
Vi har allerede satt våre basisbredder, så la oss nå målrette enheter mellom 800px og 1100px:
/ * basertablet til små skrivebordsstiler * / @media (min bredde: 800px) og (maks bredde: 1100px) .bit-2, .bit-7 bredde: 100%; .bit-4, .bit-8, .bit-10, .bit-12 bredde: 50%;
Vi kan løst beskrive dette som å målrette landskapstablet til skrivebordet (skjønt vær oppmerksom på at enhetens bredder ikke er satt i stein). Dette var like viktig som de andre media spørringene - hvorfor? Fordi jeg fant flertallet av folkene som eier 13 "bærbare datamaskiner, sjelden har nettleseren full bredde, vil de få det et par hundre piksler kort for full bredde, så det ser bra ut på landskapstabletter, må også se bra ut på skrivebordet også.
/ * basetablettstiler * / @media (maksimal bredde: 800px) .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 bredde: 50%; .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 bredde: 100%;
Dette intervallet jeg liker å tenke på som målretting mobil til nettbrett (selv om det igjen er å definere enheter ved skjermoppløsning er steinete territorium). Hvorfor de rare breakpoints? Ingenting er for gal, det er bare det som fungerte best - nett er veldig kjedelig når det gjelder hvor streng bredden må være, og jeg fant disse brytpunktene fungerte bra ut i naturen.
Unikhet av kolonnestørrelsene var ganske vanskelig å skape, og dette var faktisk det jeg brukte mesteparten av min forskning på; hva ser du vanligvis på skrivebordet som endres dramatisk på mobilen? Hovedsakelig inline innhold som blir stablet innhold - så jeg måtte tenke på hva som mer enn sannsynlig vil bli plassert side om side, og hva som blir stablet på toppen av hverandre.
/ * base mobile stilarter - alt 100% * / @media (maksimal bredde: 480px) .bit-1, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6 , .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 bredde: 100%;
Dette bruddpunktet adresserer hva folk flest vil gjenkjenne som mobil. Jeg prøvde å være mer kreativ med å sette breddene for mobil, men jeg følte at jeg trengte å holde det grunnleggende som jeg antar at de fleste ikke leter etter en slags metrooppsett eller noe som er så gal som det.
HTML er super enkel og det er det som er bra med dette rutenettet. For å fortsette med vårt eksempel, la oss lage en tre-grid kolonne (kan være et galleri, for eksempel).
Der har du det, et tre-kolonne responsivt og nettleser-kompatibelt galleri. Du kan selvfølgelig leke med HTML og lage alle typer layouter.
Bygning Lemonade var en stor læringskurve for meg, det lærte meg at hvis jeg ikke er komfortabel med noe så trenger jeg ikke å holde fast og vente på alternativer - jeg kan lage min egen!
Jeg håper denne opplæringen har gitt deg et innblikk i å lage noen ganske flotte ting. Ta en titt på noen nettsteder i naturen, for å se hvordan andre har brukt det:
Hvis du har noen spørsmål eller problemer, legg igjen en kommentar nedenfor eller gjerne tweet meg.
Accentsconagua
