Který je pro mě to pravé? 22 Vysvětlení odpovědných rámců CSS a boilerplates
Rámce CSS jsou již po léta, ale příchod reaktivních návrhových postupů způsobil, že mnoho našich oblíbených oblíbených bylo zbytečných. Naštěstí mnoho skutečně talentovaných vývojářů skočilo, aby zaplnilo mezeru novou generací rámců CSS a vývojových diagramů.
Tam už je spousta těchto věcí. Každý má seznam, ale nikdo vás ve skutečnosti neprovádí, jak se každý rámec a základní deska liší od dalšího, takže můžete učinit informované rozhodnutí. To je náš cíl dnes. Postupujte dále, když se podíváme na to, co dělá každý z těchto 22 responzivních rámců CSS a schémat jedinečnosti.
Gumby
Rámec Gumby vezme mřížku 960, kterou jsme všichni před několika lety prořízli zuby, a uvede ji do moderního věku webového designu s citlivým dotykem. Má také předdefinované styly pro věci, jako jsou formuláře, tlačítka, přepínače, rozevírací seznamy, karty a další.
Sémantický gridový systém
Pokud nenávidíte mřížkové systémy a jejich nafouklé, nesémantické značení, tohle je pro vás. Systém Semantic Grid využívá sílu preprocesorů CSS (LESS, Sass a Stylus) a vytváří přizpůsobitelné proměnné pro věci jako je okap a šířka sloupce. Jediné, co musíte udělat, je použít několik předdefinovaných mixů ve vašem CSS, bez nutnosti dalšího značkování!
Gridless
Gridless je výkonná platforma, která využívá mobilní první responzivní webový design pro přizpůsobení se šířce zařízení. Je také nabitý skvělými funkcemi, jako je normalizace CSS, opravy chyb IE a typografické styly.
Bezrámové
Bezrámové je obtížné klasifikovat, protože je to technicky více doporučovaný způsob přístupu k responzivnímu designu než skutečná sada souborů, které si můžete stáhnout. Existují tři kroky: Nejprve vytvořte pravidelnou mřížku s pevnou šířkou, pak ji donekonečna opakujte a zakončete vystředěním ve výřezu.
Web konkrétně uvádí, že bezrámový není rámec a že neexistují žádné soubory ke stažení, ale i přes toto tvrzení existují ve skutečnosti některé základní šablony, které vám pomohou začít.
Proporcionální sítě
Proporcionální sítě řeší některé velké problémy, které se objevují při pokusu o responzivní rozvržení CSS, jmenovitě vnoření sítí a zápas s procentuálními hodnotami v různých pohledech.
Proporcionální mřížky používají CSS box-kizing k vytvoření řešení, které umožňuje pevné žlaby (ems / rems) smíchané s kapalinovými sloupci. Vzdálenost mezi sloupci zůstane stejná v každém bodě zlomu ve vztahu k základní velikosti písma. Sloupce jsou definovány podle poměru např. Jedna polovina, jedna třetina, dvě třetiny a lze je snadno znovu použít, kolikrát chcete, i když jsou vnořeny.
Goldilocks přístup
Cílem přístupu Goldilocks je snížit tendenci responzivních návrhů naklonit se podpoře konkrétních zařízení. Místo toho střílí pro univerzální design, který není závislý na žádném zařízení.
Přístup Goldilocks používá kombinaci ems, max-width, mediálních dotazů a překladů vzorů, aby zvážil tři stavy, které umožňují, aby vaše návrhy byly nezávislé na rozlišení.
Twitter Bootstrap
Twitter Bootstrap nepotřebuje úvod. Je to jeden z největších, nejhorších CSS kotlů na webu a je výchozím bodem pro nespočet profesionálních a osobních webů od vývojářů z celého světa.
Twitter Bootstrap zahrnuje citlivý gridový systém kromě tun hvězdných předpřipravených prvků, jako jsou formuláře, tlačítka, navigační nabídky a další. Podívejte se na náš úplný úvod zde.
Nadace ZURB
Nadace je nejvýznamnějším konkurentem Twitter Bootstrap, protože oba projekty jsou velmi podobné. Stejně jako Bootstrap, Foundation vám poskytne responzivní mřížku a různé stylové prvky uživatelského rozhraní.
Nadace 3 byla nedávno spuštěna, takže pokud jste se na projekt ještě chvíli nepodívali, je čas se zastavit a zkontrolovat. Je to ruce dolů jeden z nejužitečnějších a nejúplnějších rámců, které najdete kdekoli.
Kostra
Skeleton byl jedním z prvních responzivních kotlů, které vypadaly, a je to stále jeden z nejlepších. V konceptu je to trochu jako nadace, pouze se cítí lehčí (typ, tlačítka a formy jsou jedinými zahrnutými prvky uživatelského rozhraní).
Podívejte se na náš výukový program Skeleton, abyste zjistili, jak neuvěřitelně snadné tento nástroj způsobuje, že se responzivní návrh rozběhne a běží během několika minut.
Amazium
Amazium je hodně podobné Gumby výše v tom, že je to citlivý grid postavený na vrcholu 960 gridových technik starých. Nedávno byl rámec aktualizován tak, aby se rozkládal až na 1200 pixelů, takže můžete využít výhod velkých displejů. Zahrnuje dokonce podporu zobrazení sítnice!
Systém Golden Grid
Systém Golden Grid se nazývá „skládací mřížka“, což je opravdu jen fantastický způsob, jak říci, že mediální dotazy se používají k rozbalení původního rozložení šestnácti sloupců na osm a poté čtyři sloupce, jak se výřez zužuje.
Stejně jako některé další sítě, které jsme dosud viděli, Golden Grid System používá okapové žlaby založené na ems, takže žlaby zůstávají vždy úměrné obsahu.
Gridový systém CSS o velikosti 1140 pixelů
Tohle je docela standardní mřížkový systém bez jakýchkoli fantazií. Začíná tekutinovou mřížkou s 12 sloupci, která používá procento založené žlaby a funguje skvěle na monitorech 1 280 a 1 140 pixelů. Jak se výřez zmenšuje, používá se k přeformátování obsahu několik jednoduchých mediálních dotazů.
StackLayout
StackLayout je pro rebely, bude se velmi lišit od ostatních frameworků, které jste vyzkoušeli. Ve skutečnosti to vyplynulo z nechuti typických rámců rozvržení CSS.
Základním principem v této práci je, že StackLayout používá inline-block jako základní kámen jedinečného systému rozvržení. Systém je trochu nepředvídatelný, ale přesto je docela působivý. Podívejte se na návod zde.
SimpleGrid
SimpleGrid je další jedinečný systém rozvržení, který vás bude bavit, pokud si rádi hrajete s těmito věcmi stejně jako já. Mřížka je zde založena na čtyřech různých rozsazích obrazovky: obrazovky menší než 720px široké, obrazovky větší než 720px široké, obrazovky větší než 985px široké a obrazovky větší než 1235px široké.
K implementaci systému využíváte „sloty“ třídy ze čtyř a šesti sloupců. Zní to komplikovaně, ale ve skutečnosti je věrné svému jménu a je celkem jednoduché jej implementovat.
Mřížka základní tekutiny
Fluid Baseline Grid je postaven s velkým důrazem na silnou typografii, která se drží základní mřížky. Obsahuje také skládací mřížku se třemi sloupci, která má být užitečným výchozím bodem, nikoli standardem, který je třeba dodržovat.
Columnal
Columnal je druh hybridního gridového systému, který si půjčuje ty nejlepší prvky z různých jiných rámců. Má elastickou DNA mřížkového systému CSS 1140px s vhozením asi 960.gs. Jsou to docela standardní věci, ale pokud se ostatním nezdají být dobré, můžete to vyzkoušet.
Inuit.css
Inuit.css je skvělý rámec, který je ve skutečnosti postaven s ohledem na rozšiřitelnost. Pomocí vlastního nástroje pro tvorbu mřížky vytvořte svůj vlastní responzivní mřížku a poté stáhněte několik iglú (pluginy), abyste rámec rozšířili užitečným způsobem.
320 a nahoru
320 and Up je jako sbírka buzzových slov webového designu (dobrým způsobem). Obsahuje responzivní systém rozvržení, který využívá mentalitu „mobile first“, spolu s vizuálními styly Bootstrap, ikonami Font Awesome, Modernizr, Selectivizr, LESS a Sass. Je to působivý malý balíček dobrot, který si myslím, že se vám bude líbit.
Susy: Citlivé sítě pro kompas
Toto je pro super pitomce, jako jsem já, kteří milují systémy rozložení, stejně jako Sass a Compass. Vytvořte si rozvržení během několika minut pomocí magie mixinů a proměnných.
Vzhledem k tomu, že společnost Compass nedávno zcela zrušila nativní podporu sítí, měl by být Susy vhodný pro ty, kteří jim chybí.
Initializr - responzivní šablona HTML5
Initializr je nástroj, který vám pomůže rychle a snadno spouštět vaše projekty HTML5 pomocí kotle HTML5, Bootstrap nebo nové reagující kotle.
Výběr responzivní šablony je pouze začátek, odtud si můžete sami sestavit stahování výběrem ze všech zdrojů, které byste obvykle chtěli, například Modernizr a LESS.
Ještě další mobilní varná deska
YAMB je skvělým výchozím bodem pro vaše responzivní webové projekty, postavené na několika klíčových funkcích: pohotová mřížka s tekutinami, rozbalovací nabídky navigace, které se automaticky promění ve vybraná pole na malých obrazovkách a citlivé obrázky / prezentace.
Myslím, že web je docela ošklivý, ale samotná sada nástrojů je docela užitečná!
Wirefy
Wirefy je postaven speciálně s ohledem na rychlé experimentování s wireframing experimentováním. Používá upravenou verzi mřížky 16 sloupců 960 spolu s některými prvky uživatelského rozhraní typu Bootstrap (nabídky, formuláře, prezentace, tlačítka, obrázky atd.).
Který je tvůj oblíbený?
Tyto typy příspěvků nevyhnutelně přilákají komentátory, kteří cítí potřebu pokusit se zdiskreditovat celou představu o použití jakéhokoli typu šablony nebo mřížkového systému pro web design. Jednoduše nejsou pro všechny a respektuji váš názor, pokud je nemůžete vydržet.
Pokud jste však do distribučních systémů, rád bych slyšel vaši zpětnou vazbu ohledně výše uvedených možností. Které z nich jste vyzkoušeli a co si o nich myslíte? Který je tvůj oblíbený?
