Všichni začínáme někam. Jako nová designérka jsem se nemohl starat o strukturu v mých projektech. Otevřel bych Photoshop a posunul pixely kolem, dokud jsem neudělal něco, o čem jsem myslel, že vypadá skvěle. Jak jsem se naučil kódovat, můj proces byl podobně náhodný.
Nedívám se na staré dny příliš s láskou. Moje práce byla nedůsledná a nezaostřená. Neměl jsem jasné cíle. Jako začátek předpokládám, že to není tak špatné, vzhledem k tomu, že většina mé výtvarné výuky pocházela z webových stránek tutoriálu Photoshopu, moje práce nebyla hrozná.
Ale pak jsem se dozvěděl o mřížkových systémech. Zapomínám přesně, kdy a jak se staly populárně využívány v designu webových stránek, ale najednou se každý internetový web o designu, který jsem šel, rozpadal s články o 960.gs nebo o nějakém jiném síťovém systému. Důležitost zajištění konzistentní vizuální struktury v našich rozloženích byla zdůrazněna všemi velkými jmény a proměnila se v trend.
Stejně rychle se tento trend stal průmyslovým standardem a nyní většina z nás nepřemýšlí o tom, zda budeme zavádět síťový systém či nikoliv. Jedinou otázkou je, který z nich? Půjdeme s jedním z velkých jmen nebo s méně známou variantou, nebo dokonce sami?
V tomto článku bych se rád podíval na druhou možnost: nové a méně známé síťové systémy. Tam je vždy někdo venku s novými způsoby, jak vyřešit různé problémy uspořádání, a myslím, že je důležité znát co nejvíce přístupů, tak se podívejme na některé základní rámce mřížky.
34Grid je všechno o stejném rozdělení sloupců. Může se také přizpůsobit nerovnoměrným rozdělením, ale to není hlavním účelem tohoto rozvodného systému. Pro ty z vás, kteří chtějí rozdělit většinu nebo všechny vaše stránky na vodorovně stejné části, je to váš rámec.
Jak to funguje
Rámec je navržen tak, aby byl přizpůsobitelný vašim potřebám, takže nemusíte jen stahovat a jít. Potřebujete nejdříve nakonfigurovat mřížku na domovské stránce projektu. Rychlý formulář umožňuje zjistit, kolik sloupců se vejde do řádku, jak velké jsou vaše okraje a zda budou nebo nebudou aplikovány přechody CSS3 do vašich sloupců při změně velikosti výřezu.
Samotný kód je rozdělen na dva soubory CSS: jeden se základním kódem a jeden se všemi mediálními dotazy. CSS třídy jsou jednoduché. Použitím položky ".col_1" do sloupce vyplníte řádek na 100%. '.col_2' vytvoří sloupec o šířce 50% a tak dále.
Kromě toho jsou img prvky, objekty a některé další automaticky zmenšeny. K tomu, aby se video objekty mohly chovat, existuje další třída. Webová stránka projektu poskytuje rady ohledně toho, jak získat Facebook a Twitter embedy, aby hrál pěkně.
Nevýhody
Zdá se, že neexistuje žádný způsob, jak hnídat sloupy nebo vytvořit složitější uspořádání sloupců uvnitř jednoho řádku. Na druhou stranu, pokud nepotřebujete složitost, a chcete prostě jednoduchý rámec, který můžete upravit kdykoli budete potřebovat, 34Grid to udělá.
Jednoduchá mřížka je volitelná možnost, která maxes na šířku 1140 pixelů. Jinými slovy, i když je navržen tak, aby hrával slušně s tabletami a telefony, Simple Grid zajistí, že větší obrazovky nebudou vynechány.
Jak to funguje
Jak název naznačuje, tento systém mřížky je poměrně lehký. Celá věc přichází v nekomprimovaném souboru CSS o velikosti čtyř kilobajtů.
Názvy tříd jsou navrženy tak, aby byly snadno srozumitelné: ".col-2-6" rozdělí řádek na šest sloupců a definuje šířku sloupce na dva sloupce. Každý řádek lze rozdělit do jednoho sloupce '.col-1-1' nebo dva, tři, čtyři atd. Až do dvanácti.
Nevýhody
Stejně jako 34Grid se nezdá, že by byla vytvořena žádná ustanovení pro vnoření sloupců. Také způsob, jakým jsou okraje zpracovávány pro první a poslední sloupce, mohou způsobovat potíže při vytváření například fotogalerie.
Toto je pro každého, kdo preferuje jednoduchou mřížku s jednoduchými anglickými názvy tříd. Je citlivý, snadno srozumitelný a rychle implementovaný.
Jak to funguje
Po zavedení vašich obvyklých prvků ".container" a ".grid" jsou sloupce implementovány starým způsobem. Jedna třída (".unit") se používá k definování obecných atributů sloupce a pro určení šířky se používá další třída. Řádky lze rozdělit na 2-5 sloupců a názvy všech tříd vypadají takto: '.one po třech, dvou.
K dispozici jsou také některé základní typografické styly.
Nevýhody
Ještě jednou se jedná o mřížkový rámec určený pro nekomplikované uspořádání, takže není k dispozici žádné vnořené sloupce. Také je zde pouze jeden bod zlomu, který je nastaven na šířku výřezu 650 pixelů, takže některé vaše sloupce mohou předčasně skončit poměrně široce.
Matt (AKA Dobrodiní ) je trochu jako já. Miluje design, ale nemá rád matematiku tolik. Jako výsledek, jeho Proporcionální sítě Zdá se, že ubírají nekonečné výpočty co nejvíce v závislosti na box-sizing vlastnictví. Výsledkem je kompletní, ale přesto velmi lehký, mřížkový systém, který pokrývá vaše základy pro citlivé uspořádání.
Jak to funguje
Když říkám, že tento systém závisí box-sizing , Myslím, že sloupce jsou udávány v procentech šířky bez účtování žlabů. Žlaby s pevnou šířkou jsou definovány pomocí padding ; a box-sizing ujistěte se, že sloupy hrají pěkně dohromady.
Šířky žlabů a většina ostatních měření jsou definovány jako "ems". Je pravda, že název této mřížky, třídy sloupců jsou proporcionální (tj. .col-one-third , .col-two-thirds ) a sloupce jsou víceméně nekonečně nestabilní, což je něco, co se mi moc líbí.
Třídy jsou zahrnuty pro změnu rozměrů sloupců ve třech různých bodech zlomu. Samotné dotazy médií jsou strukturovány "mobilním způsobem" podle standardních postupů.
K dispozici je samostatný stylový list pro aplikaci Internet Explorer 8 a starší. Vidět jako IE8 nepodporuje dotazy médií, a verze starší než to nepodporují box-sizing , jsou opatřeny rozvržením s pevnou šířkou.
Součástí jsou také soubory SASS (oba .sass a .scss) pro rychlé a snadné přizpůsobení systému mřížky.
Nevýhody
Nechtěl bych mít nějaké další šířky sloupců pro práci s (pětiny, šestiny, osminy). V opačném případě jde o velmi bezchybný a dobře zaoblený síťový systém.
Z moderních sítí na tomto seznamu, Jeden% je nejjednodušší, ale v žádném případě neúplné. Je navržen tak, aby vyhovoval poněkud větším obrazovkám a velkým uživatelským prvkům, pokud je jejich domovská stránka nějakým indikátorem.
Název pochází ze skutečnosti, že šířka mřížky a sloupce je vypočtena tak, že se vždy rovná 99% namísto 100%. To eliminuje potřebu některých složitějších opakujících se desetinných míst a zaokrouhlování čísel, které jsou často vyžadovány.
Jak to funguje
Samotná mřížka je rozdělena do klasických dvanácti sloupců. Třídy jsou jednoduché ( .onerow , .col1 , .col6 ) a líbí se mi, že většinou používáte pouze jednu třídu na sloupec.
Dvě body zlomu jsou standardně zahrnuty: 768 pixelů a 1024 pixelů. Pokud jsem upřímný, první se zdá trochu ... velký ... ale vždy můžete přidat další zlomový bod, pokud ho potřebujete. K dispozici jsou také dva příklady šířky rozvržení plochy: 1000 pixelů a 1200 pixelů.
Na domovské stránce projektů můžete stáhnout akční soubory Photoshopu a soubory PSD, které jsou vhodné pro zesměšňování rozvržení pomocí tohoto mřížkového systému.
Nevýhody
Moje dva velké problémy jsou zde obvyklé. Nejprve: žádné hnízdící sloupce. Hnízdní sloupy jsou dobré, lidi! Druhý: Poslední sloupec v každém řádku musí mít .last třídy.
Rámec CSS mřížky s cross-browserovým prohlížečem, který nezakrývá pixely v okrajích! To je slogan pro Flurid, a rychlý pohled do dokumentace vám řekne, proč: tvůrce Flurid opravdu nechce, aby vaše rozložení se zlomilo. Vůbec.
Tady je věc, protože způsob, jakým funguje sub-pixel zaokrouhlení, prohlížeč občas řekne "zkusit" a dal poslední sloupec v řadě někde, kde by neměl jít. Flurid je postaven pro stabilitu, takže vaše uspořádání bude vždy fungovat i na starších verzích IE. (Kompatibilita je uvedena jako IE5 +.)
Jak to funguje
Flurid má všechny funkce, které budete potřebovat: pravidelné sloupce, smíšené sloupce, vnořené sloupce a posunuté sloupce. Seznam možných šířky a tříd sloupců je rozsáhlý a je založen na poměru, takže si budete chtít dát čas, abyste je s nimi seznámili.
Některá přiměřeně kompletní dokumentace je poskytována prostřednictvím GitHubu, stejně jako plugin jQuery, který přidává další funkce - ano, přichází s vlastním pluginem jQuery, který poskytuje stĺpce se stejnou výškou a může sloužit ke střídání tříd ve vašich sloupcích pro vaše stylové potěšení.
Nevýhody
Je to tak otravné .last třídy znovu. Podle dokumentace je však tentokrát dobrý důvod.