Share
Ik zou graag met je willen praten over Lemonade. Niet de verfrissende citrusdrank, maar een rastersysteem dat ik heb gemaakt.
Lemonade is een grid-systeem dat is gebouwd om ontwerpers en ontwikkelaars het vertrouwen te geven om volledig responsieve websites te maken, waardoor de frustratie van flicking tussen browsers die op zoek zijn naar bugs en fouten, wordt geëlimineerd. Laten we eens kijken naar hoe het is samengesteld en hoe u uw eigen responsieve rastersysteem kunt bouwen.
Voordat ik mijn eigen bouwde, gebruikte ik vaak Skeleton.css voor mijn responsieve lay-outs. Naarmate de tijd verstreek, voelde ik dat het een beetje een verloren zaak was, eenvoudig omdat ik het constant aan mijn behoeften aanpaste en onnodige elementen weghaalde waarvan ik vond dat ze niet bruikbaar waren. Het is een heel goed raamwerk, maar ik zou het alleen maar aanraden aan mensen die zich niet comfortabel voelen met front-end werk.
Er zijn zoveel roosters, kaders en bibliotheken, maar het kiezen van de juiste is een moeilijke beslissing. De eenvoudigste manier om te beslissen is door jezelf af te vragen: "Wat probeer ik te maken?" Bijvoorbeeld: ik ben momenteel bezig met het bouwen van een CMS (meestal PHP) en ik wil helemaal niet focussen op de interface (het admin-paneel), dus ik heb gekozen voor Bootstrap. Bootstrap is een ongelooflijk uitgebreid framework en zorgt letterlijk voor je tijdens elk aspect van het ontwerpproces.
Ik wilde echt iets maken dat me volledige controle zou geven, waarbij ik niet het grootste deel van mijn tijd zou hoeven besteden aan het aanpassen van het raster. Om te beginnen dacht ik dat het maken van een grid een wandeling in het park zou worden, ik dacht eigenlijk dat ik het binnen een paar uur zou halen. Op 24 juni 2013 rond 12:30 uur opende ik mijn editor en begon ik met het schrijven van code, veel ervan. Maar verrassing, verrassing, het was buitengewoon moeilijk om op gang te komen; hoe creëer je iets dat honderden keren is gemaakt, maar beter? Ik moest vooruit denken, ik moest het creëren hoe ik het zou willen laten werken, niet hoe ik dacht dat een netwerksysteem zou moeten werken, dus stelde ik mezelf drie doelen (ik schreef ze op plaknotities en plakte ze op mijn muur):
Ik zal u deze doelstellingen op een meer gedetailleerde manier laten doornemen. Ik wilde dat het raster klein zou zijn, zo klein dat als ik het ooit zou moeten bewerken, ik niet met frustratie op het scherm zou vloeken. Het moest werken aan moderne browsers (vergeet IE8 en onder); Ik wilde het scenario weghalen om door browsers te bladeren en me zorgen te maken of alles er goed uitziet. Het uiteindelijke doel was alles om het te gebruiken, ik wilde niets maken en het gewoon op GitHub plakken en het nooit meer gebruiken. Als ik iets zou maken, zou het moeten worden gebruikt in elk project dat ik heb gemaakt.
Laten we eerst de CSS aanpakken. Onthoud het eerste doel: "Wees klein maar krachtig"
*, *: after, *: before margin: 0; opvulling: 0; / * Verwijdert opvulgedrag op breedtes * / -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; / * Kenmerkselector * / [class * = 'bit-'] float: links; opvulling: 10px; / * Drijft als laatste ".bit-" naar rechts * / [class * = 'bit -']: laatste-van-type padding-right: 10px; zweven: rechts; / * Clearfix * / .frame: na content: ""; weergave: tafel; beiden opschonen;
In wezen is dit de ruggengraat van het raster; dit is wat het raster doet functioneren en het geheel bij elkaar houdt.
Door de randbox met een universele selector in te stellen, hoeven we ons geen zorgen te maken over de opvulling van onze elementen die met onze breedten knoeien.
Hoewel we het over selectors hebben, is de attribuutselector de grootste ruimtemoordenaar in ons raster. Je ziet de attribuut selctor in actie waar ik hem heb gebruikt [Class * = 'beetje-']. Dit is gericht op elementen waarvan de klasse kenmerkt bevat "beetje-". We hadden ook kunnen gebruiken [Class ^ = 'beetje-'] die alle elementen target waar de klasse begint met "bit-". Het gebruik van een attribuutselector om al onze verschillende kolomklassen te omvatten, zal ons zoveel tijd besparen bij het schrijven van nieuwe kolombreedten.
Nog een ding om op te merken is het gebruik van een laatste-van-type selector [Class * = 'bit -']: last-of-type. Elke rij "bit" wordt opgenomen in een montuur element:
Met de laatste type selector kunnen we het laatste "bit-" element in de groep targeten, met de instructie om naar rechts te zweven, in plaats van naar links. Dit zorgt ervoor dat alles perfect uitgelijnd is met de rechterrand, in ondersteunende browsers.
Een veelgestelde vraag die ik veel over Limonade hoor is: "Waarom zulke rare klasnamen?" Het is geen spannend verhaal, ik bleef de kolommen gewoon als "bits" in mijn aantekeningen beschouwen, dus het escaleerde van daaruit. Dat gezegd hebbende, ik denk dat ik onbewust wilde dat de klassen anders waren dan de standaard "col-1" die je in veel andere rastersystemen ziet.
Ik heb de breedte van de kolommen gegenereerd met behulp van een rekenmachine (zie, je hoeft geen wiskundige nerd te zijn). Het berekenen van de kolommen was helemaal niet moeilijk, het was eigenlijk heel eenvoudig. In mijn raster is bijvoorbeeld elk bit een fractie van de hele breedte, bit-8 is een achtste. Daarom is 100 ÷ 8 = 12,5, dus we hebben de breedte van elke bit-8 ingesteld op 12,5%.
Ik heb elke kolomsectie grondig getest met echte inhoud en ze werken allemaal perfect op verschillende browsers en apparaten.
/ * Hoofdbreedten * / .bit-1 width: 100%; .bit-2 width: 50%; .bit-3 width: 33.33%; .bit-4 width: 25%; .bit-5 width: 20%; .bit-6 width: 16.6666666667%; .bit-7 width: 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%;
Nu, zoals u kunt zien, zijn de breedten super schoon, leesbaar en dit is wat ik aanvankelijk wilde - u kunt eenvoudig zien wat wat is en indien nodig kunt u knoeien en de maten met gemak bewerken.
Het bewerken van Lemonade is aangenaam eenvoudig. Rastersystemen zijn vaak intimiderend om te bewerken, dus daagde ik mezelf uit om het mijne zo eenvoudig mogelijk te maken. De enige regel voor het aanpassen van Lemonade is: zolang uw kolommen gelijk zijn aan 100%, zal het perfect werken. Het toevoegen van je eigen bits is eenvoudig, omdat de attribuutselectoren zorgen voor het grootste deel van de rasterstructuur:
.bit-25 width: 25%; .bit-75 width: 75%;
Deze twee in combinatie zouden prima zijn.
Het responsief maken was behoorlijk uitdagend, om het perfect te krijgen op elk apparaat en de breekpunten te bepalen, was uiterst frustrerend. Laat me je door de code leiden. Ik heb ervoor gekozen om de desktop eerst neer te zetten in plaats van mobiel, maar het is helemaal aan jou wat voor aanpak je kiest.
We hebben onze basisbreedten al ingesteld, dus richten we ons nu op apparaten tussen 800px en 1100px:
/ * basistablet voor kleine bureaubladstijlen * / @media (min-width: 800px) en (max-width: 1100px) .bit-2, .bit-7 width: 100%; .bit-4, .bit-8, .bit-10, .bit-12 width: 50%;
We kunnen dit losjes beschrijven als liggend bureaublad op desktop (hoewel we ons ervan bewust zijn dat apparaatbreedten in geen geval in steen zijn geplaatst). Dit was net zo belangrijk als de andere mediavragen - waarom? Omdat ik vond dat de meerderheid van de mensen die 13-inch notebooks hebben, zelden over de volledige breedte van de browser beschikt, hebben ze een paar honderd pixels te kort van de volledige breedte, dus wat er goed uitziet op landschapstablet, moet er ook op de desktop goed uitzien..
/ * basistypen stijlen * / @media (max-width: 800px) .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 width: 50%; .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 width: 100%;
Dit bereik dat ik graag bedoel als mobiel naar tablet targeten (hoewel, opnieuw, het definiëren van apparaten op schermresolutie rotsachtig gebied is). Waarom de rare breekpunten? Niets is te gek, het is gewoon wat het beste werkte - rasters zijn erg vervelend als het gaat om hoe strikt de breedtes moeten zijn, en ik vond dat deze breekpunten goed werkten in het wild.
Het unieke van de kolomgroottes was behoorlijk moeilijk om te maken en dit was eigenlijk waar ik het grootste deel van mijn onderzoek aan besteedde; wat zie je meestal op een desktop die drastisch verandert op mobiel? Vooral inline content die gestapelde inhoud wordt - dus ik moest bedenken wat meer dan waarschijnlijk naast elkaar zal worden geplaatst en wat er bovenop elkaar wordt gestapeld.
/ * basis mobiele stijlen - alles 100% * / @media (max. breedte: 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 width: 100%;
Dit breekpunt gaat in op wat de meeste mensen als mobiel zouden herkennen. Ik probeerde creatiever te zijn met het instellen van breedten voor mobiel, maar ik vond dat ik het breed moest houden omdat ik me voorstel dat de meeste mensen niet op zoek zijn naar een soort van metro-indeling of iets dergelijks te gek.
De HTML is supereenvoudig en dat is wat geweldig is aan dit raster. Om verder te gaan met ons voorbeeld, laten we een kolom met drie rasters maken (bijvoorbeeld een galerij).
Daar heb je het, een drie kolommen tellende responsieve en browser-compatibele galerij. Je kunt natuurlijk spelen met de HTML en allerlei soorten lay-outs maken.
Het bouwen van Lemonade was een grote leercurve voor mij, het leerde me dat als ik me ergens niet comfortabel bij voel, ik niet hoef te blijven rondhangen en op alternatieven moet wachten - ik kan mijn eigen creëren!
Ik hoop dat deze tutorial je inzicht heeft gegeven in het maken van een aantal geweldige dingen. Bekijk enkele sites in het wild om te zien hoe anderen het hebben gebruikt:
Als je vragen of problemen hebt, kun je hieronder een reactie achterlaten of je kunt me tweeten.
Accentsconagua
