We beginnen allemaal ergens. Als nieuwe ontwerper had ik niet minder om structuur in mijn ontwerpen kunnen geven. Ik zou Photoshop openen en pixels rond duwen totdat ik iets zou maken waarvan ik dacht dat het er cool uitzag. Toen ik leerde coderen, was mijn proces even lukraak.
Ik kijk niet terug op de oude dag met te veel genegenheid. Mijn werk was slordig en ongericht. Ik had geen duidelijke doelen. Als een begin, denk ik dat dat niet zo erg is, aangezien het grootste deel van mijn ontwerponderwijs afkomstig was uit de tutorials van Photoshop, was mijn werk niet verschrikkelijk.
Maar toen leerde ik over roostersystemen. Ik ben vergeten wanneer en hoe ze in de volksmond werden gebruikt in webdesign, maar ineens barstte elke web-design-gerelateerde site waar ik naartoe ging over artikelen over 960.gs of een ander rastersysteem. Het belang van een consistente visuele structuur in onze lay-outs werd benadrukt door alle grote namen en werd een trend.
Net zo snel werd de trend een industriestandaard en nu denken de meesten van ons niet twee keer na over het al dan niet implementeren van een netwerksysteem. De enige vraag is, welke? Zullen we gaan met een van de grote namen of een minder bekende variant, of zelfs onze eigen variant maken?
In dit artikel wil ik graag de tweede optie bekijken: nieuwe en minder bekende roostersystemen. Er is altijd wel iemand die nieuwe manieren bedenkt om de verschillende lay-outproblemen op te lossen, en ik denk dat het belangrijk is om zoveel mogelijk benaderingen te kennen, dus laten we eens kijken naar enkele basisrasterwerken.
34Grid gaat alles over gelijke kolomverdeling. Het is ook geschikt voor ongelijke distributies, maar dat is niet het primaire doel van dit rastersysteem. Voor degenen onder u die de meeste of alle pagina's in horizontale gelijke delen willen verdelen, is dit uw kader.
Hoe het werkt
Het framework is ontworpen om aan uw behoeften te kunnen voldoen, zodat u niet alleen kunt downloaden en vertrekken. U moet eerst uw grid configureren op de startpagina van het project. Met een snel formulier kunt u bepalen hoeveel kolommen in een rij passen, hoe groot uw marges zullen zijn en of u CSS3-overgangen op uw kolommen wilt toepassen wanneer uw viewport van grootte verandert.
De code zelf is verdeeld in twee CSS-bestanden: een met de basiscode en een met alle mediaquery's. De CSS-klassen zijn eenvoudig. Als u '.col_1' op een kolom toepast, wordt de rij tot 100% gevuld. '.col_2' maakt een kolom met een breedte van 50%, enzovoort.
Bovendien worden img-elementen, objecten en enkele andere automatisch van grootte veranderd. Er is een extra klasse om video-objecten te helpen zich te gedragen. De website van het project geeft advies over hoe Facebook en Twitter ingesloten kunnen worden om leuk te spelen.
nadelen
Er lijkt geen manier te zijn om kolommen te nesten of om complexere kolomafspraken binnen één rij te maken. Aan de andere kant, als u geen complexiteit nodig heeft en u wilt gewoon een eenvoudig raamwerk dat u kunt aanpassen wanneer dat nodig is, 34Grid zal het werk doen.
Eenvoudig raster is een responsieve optie die maximaal uitkomt op een breedte van 1140 pixels. Met andere woorden, hoewel het ontworpen is om leuk te spelen met tablets en telefoons, zorgt Simple Grid ervoor dat grotere schermen niet worden weggelaten.
Hoe het werkt
Zoals de naam zou impliceren, is dit rastersysteem vrij lichtgewicht. Het geheel komt in een ongecomprimeerd CSS-bestand van vier kilobytes.
Klassenamen zijn ontworpen om gemakkelijk te worden begrepen: '.col-2-6' verdeelt de rij in zes kolommen en definieert de kolombreedte tot twee kolommen breed. Elke rij kan worden verdeeld in één kolom, '.col-1-1', of twee, drie, vier, enzovoort, helemaal tot twaalf.
nadelen
Net als 34Grid lijkt er geen voorziening gemaakt te zijn voor nesten kolommen. Ook de manier waarop marges worden behandeld voor de eerste en de laatste kolom, kan problemen veroorzaken bij het maken van bijvoorbeeld een fotogalerij.
Deze is voor iedereen die de voorkeur geeft aan een eenvoudig raster met gewoon Engelse lesnamen. Het is responsief, gemakkelijk te begrijpen en snel geïmplementeerd.
Hoe het werkt
Nadat uw gebruikelijke '.container'- en' .grid'-elementen zijn geplaatst, worden de kolommen op de ouderwetse manier geïmplementeerd. Eén klasse ('.unit') wordt gebruikt om de algemene kenmerken van een kolom te definiëren en een andere klasse wordt gebruikt om de breedte te definiëren. Rijen kunnen worden opgesplitst in 2-5 kolommen en de klassenamen zien er allemaal ongeveer zo uit: '.een-van-drie, .two-of-three'.
Ook inbegrepen zijn enkele standaard typografische stijlen.
nadelen
Nogmaals, dit is een rasterframe bedoeld voor ongecompliceerde lay-outs, dus geen voorziening voor geneste kolommen. Er is ook slechts één breekpunt, ingesteld op een viewport-breedte van 650 pixels, dus sommige kolommen kunnen voortijdig vroegtijdig breed worden.
Matt (AKA Zegen ) is een beetje zoals ik. Hij houdt van design, maar houdt niet zo van wiskunde. Dientengevolge, zijn Proportionele roosters lijken zoveel mogelijk eindeloze berekeningen weg te doen door afhankelijk van de box-sizing eigendom. Het resultaat is een compleet, maar nog steeds vrij lichtgewicht rastersysteem dat uw bases voor een responsieve lay-out dekt.
Hoe het werkt
Wanneer ik zeg dat dit systeem afhankelijk is van box-sizing , Ik bedoel dat kolommen een percentage breedte krijgen zonder rekening te houden met dakgoten. Goten met vaste breedte worden gedefinieerd door padding ; en box-sizing zorgt ervoor dat de kolommen mooi samen spelen.
Gootbreedten en de meeste andere metingen worden gedefinieerd met "ems". Trouw aan de naam van dit raster, zijn kolomklassen proportioneel (d.w.z. .col-one-third , .col-two-thirds ) en kolommen zijn min of meer oneindig nestbaar, wat ik erg leuk vind.
Klassen zijn inbegrepen voor het wijzigen van kolomdimensies op drie verschillende breekpunten. De mediaquery's zelf zijn gestructureerd op de "mobile-first" -manier, in overeenstemming met standaardpraktijken.
Er is een afzonderlijke stylesheet voor Internet Explorer 8 en ouder. Aangezien IE8 mediaquery's niet ondersteunt, ondersteunen oudere versies dan dat niet box-sizing , ze zijn voorzien van een lay-out met een vaste breedte.
Ook inbegrepen zijn SASS-bestanden (zowel .ssass als .scss) voor snel en eenvoudig aanpassen van het rastersysteem.
nadelen
Ik zou het niet erg vinden om wat meer kolombreedtes te hebben om mee te werken (kwinten, zesden, achtsten). Anders is dit een grotendeels foutloos en goed afgerond rastersysteem.
Van de geavanceerde rastersystemen op deze lijst, Een% is de eenvoudigste, maar het is zeker niet onvolledig. Het is ontworpen om enigszins grotere schermen en grote UI-elementen te accommoderen, als de startpagina een indicatie is.
De naam komt van het feit dat het raster en de kolombreedte zo worden berekend dat deze altijd 99% is, in plaats van 100%. Dit elimineert de noodzaak voor enkele van de meer complexe herhalende decimalen en numerieke ronden die browsers vaak moeten doen.
Hoe het werkt
Het raster zelf is verdeeld in de klassieke twaalf kolommen. De lessen zijn eenvoudig ( .onerow , .col1 , .col6 ) en ik vind dat je meestal maar één klas per kolom gebruikt.
Twee breekpunten zijn standaard inbegrepen: 768 pixels en 1024 pixels. Als ik eerlijk ben, lijkt die eerste een beetje ... groot ... maar je kunt altijd nog een breekpunt toevoegen als je er een nodig hebt. Er zijn ook twee voorbeelden van breedte van de bureaubladindeling beschikbaar: 1000 pixels en 1200 pixels.
Op de startpagina van het project kunt u Photoshop-actiebestanden en PSD's downloaden die geschikt zijn om uw lay-outs met dit rastersysteem te bespotten.
nadelen
Mijn twee grote problemen hier zijn de gebruikelijke. Ten eerste: geen nesten kolommen. Nesten van kolommen zijn goed, mensen! Ten tweede: de laatste kolom in elke rij moet de .last klasse toegepast.
Een cross-browser CSS-rasterframe dat pixels in marges niet verbergt! Dat is de slogan voor Flurid, en een snel overzicht van de documentatie zal u vertellen waarom: de maker van Flurid wil echt niet dat uw lay-out breekt. Ooit.
Hier is het ding, vanwege de manier waarop afronding van subpixels werkt, zal een browser af en toe zeggen "schroef het" en zet de laatste kolom in de rij ergens waar het niet zou moeten gaan. Flurid is gebouwd voor stabiliteit, zodat uw lay-out altijd zal werken, zelfs in oudere versies van IE. (Compatibiliteit wordt weergegeven als IE5 +.)
Hoe het werkt
Flurid heeft alle functies die u nodig hebt: normale kolommen, gemengde kolommen, geneste kolommen en verschoven kolommen. De lijst met mogelijke kolombreedten en -klassen is uitgebreid en gebaseerd op verhoudingen, dus u wilt uzelf tijd gunnen om er vertrouwd mee te raken.
Sommige redelijk complete documentatie wordt geleverd via GitHub, evenals een jQuery-plug-in die extra functies toevoegt-ja, deze wordt geleverd met een eigen jQuery-plug-in, die kolommen met gelijke hoogte biedt, en kan afwisselende klassen op uw kolommen plaatsen, voor uw stylingplezier.
nadelen
Het is dat vervelend .last klasse opnieuw. Toch is er volgens de documentatie een goede reden voor deze keer.