Konečná kolekce 50+ zdrojů pro milovníky sítě

/2016-02-27 05:50:26/
Myangel
/Pořady/

Pokud máte rádi design založený na mřížce, tento článek je pro vás. Prohledali jsme web a zkompilovali všechny skvělé zdroje mřížky, které jsme našli. Máme všechny nejlepší rámce, stavitele mřížky, návody a další.

Zahajte procházení a záložky!

Hate Grid Frameworks?

Než začneme, chci jen říci, že vím plně dobře, že mnoho lidí, kteří to čtou, už teď vztekají nad zlem rozvržení.

Je pravda, že proti kosterním rámcům se dá hodně říci. Jsou těžkopádní, mají křivku učení a často hodí sémantiku z okna. Kromě toho existuje milion těchto věcí, což ztěžuje zahájení diskusí o standardních postupech.

Pokud spadnete do tábora rámců pro vývojáře CSS, nemusíte se obávat, že stále existuje spousta zdrojů pro návrh mřížky, které nemají nic společného s rámci. Mezitím je zde několik alternativ k mřížkovým rámcům.

Rolling Your Grid Layouts on the Fly

Nedávno jsem publikoval kousek o tom, jak snadno a rychle dosáhnout složitých rozložení ve více sloupcích, a to vše samostatně, bez složitých rámců nebo sémantických názvů tříd. Je to tak snadné, že už nikdy nebudete moci použít rámec pro rozvržení.

Gridless

Gridless je volitelná kotle HTML5 a CSS3 pro vytváření mobilních webových stránek, které rychle reagují na první stránku, s krásnou typografií. Nepřichází s žádnými předdefinovanými mřížkovými systémy nebo sémantickými třídami.

Rozložení zásobníku

Flexibilní systém rozložení CSS založený na komponentách, který umožňuje intenzivní využití prvků vloženého bloku.

Kotle HTML5

HTML5 Boilerplate se rychle stává standardním výchozím bodem pro moderní projekty webdesignu. Nakonec jsem zkontroloval, že má vše, co byste mohli chtít, s vyloučením mřížkového systému.

Rámce staré školy

Jedná se o dědové sítě, které jsou už roky. Několik z nich opravdu začíná ukazovat svůj věk, takže je můžete nebo nechcete používat dnes.

Modrotisk

Blueprint je rámec CSS, jehož cílem je zkrátit dobu vývoje. Poskytuje vám solidní základ pro stavbu vašeho projektu na vrcholu, se snadno použitelnou mřížkou, rozumnou typografií, užitečnými doplňky a dokonce i šablonou pro tisk.

960 tis

960.gs je místo, kde většina lidí začíná, když se dostanou do rámců CSS a gridových systémů. Je to stále docela populární a mnoho novějších rámců je založeno alespoň částečně na práci zde.

Fluid 960 Grid System

Populární varianta 960.gs s rozvržením tekutiny, která automaticky upraví svou šířku v závislosti na velikosti okna prohlížeče.

YAML

„Ještě další rozložení více sloupců“ (YAML) je (X) rámec HTML / CSS pro vytváření moderních a flexibilních rozvržených rozvržení. Struktura je extrémně univerzální ve svém programování a je absolutně přístupná pro koncové uživatele.

Úžasné nové (er) rámce

Perkins

Perkins kombinuje lesklou novost HTML5 a CSS3 s úžasnou mocí LESS.js a vytváří tak konečný rámec CSS. Pokud máte rádi experimentování s futuristickými řešeními CSS, je to skvělý rámec pro vás. Používá variantu mřížky 1 kB.

Méně rámce

Less Framework je responzivní mřížkový systém CSS pro navrhování přizpůsobivých webů. Obsahuje 4 rozvržení a 3 sady předvoleb typografie, vše založené na jediné mřížce. „Méně“ v tomto smyslu by nemělo být zaměňováno s LESS.js shora. Vím, je to matoucí. Potřebují pojmenovat něco jiného!

Columnal

Citlivý mřížkový systém CSS, který pomáhá stolním a mobilním prohlížečům hrát spolu hezky. Columnal používá svůj vlastní hybridní gridový systém, který si půjčuje od několika dalších.

Kostra

Skeleton je úžasný citlivý rámec, o kterém jsem psal několikrát předtím. Pokud si nejste jisti, kolik času a času na učení je součástí responzivního designu, měli byste to zkontrolovat. Kostra je postavena volně na 960.gs.

52 Rámeček

Rámec, který využívá HTML5, CSS3 a JavaScript k maximalizaci kompatibility moderních postupů vývoje webových aplikací ve všech hlavních prohlížečích. Je založen na jednoduché mřížce 16 sloupců.

G5 Framework

(X) HTML5, CSS3, PHP a jQuery Front End Framework. G5 Framework začal jako osobní projekt. Ve snaze o urychlení pracovního postupu, opětovné použití nejlepších postupů kódování a podobných technik kódování slouží rámec jako výchozí soubor pro nové webové stránky.

Mřížka G5 Framework je založena na Easy Grid.

Snadný systém procentuální mřížky s HTML5

Hlavní charakteristikou tohoto mřížkového systému je to, že všechny sloupce mají procentuální šířku, takže se přizpůsobí prvku kontejneru. To znamená, že při použití tohoto systému nebudete muset definovat šířku každého sloupce ručně, můžete ho jednoduše hodit do libovolného kontejneru a automaticky se nastaví šířky sloupců a žlaby sloupců.

Kabina CSS

CSS Frameworks bývají super nafouklé. Kabina řeší tento problém pomocí modulárního rozšiřovacího systému, který vám umožní přidat pouze to, co potřebujete. Jsou podporována různá rozšíření mřížky.

jQuery zednictví

jQuery Masonry není ve skutečnosti CSS Framework vůbec, je to plugin JavaScript, který umožňuje návrhy založené na mřížce, které používají jakýkoli vertikální plovoucí systém. Je to skvělý nástroj, který je v tuto chvíli docela populární.

InuitCSS

Tento rámec má vše: pluginy progresivní flexibilní mobilní tablet rozumné rozšiřitelné dostupné pragmatické funkční užitečné užitečné pro výrobu více. Mřížkový systém je přizpůsoben vašim potřebám.

Rámce malých stop

1 řádek CSS Grid Framework

Myslel jsem, že jedna linka CSS Grid zněla ořechy, ale ten chlap ji stáhl. Nejsem si jistý, jak praktické to ve skutečném světě je, ale jsem ohromen myšlenkou, která do toho šla!

1 KB Grid

Toto je jeden z mých oblíbených favoritů. Je to mřížkový systém připnutý k absolutně holým základům, není potřeba šedesátiminutové průchozí video. Pokud nerozumíte mřížkovým systémům CSS, začněte zde.

Drobná tekutinová mřížka

Stejně jako 1KB mřížka pouze tekutina pro větší zábavu.

Štíhlý CSS

SlimCSS je lehký CSS Framework, který vytváří pevný základ pro více prohlížečů s mnoha základními funkcemi a přitom zůstává co nejmenší.

Další rámce

Gravitace

Gravity je rámec založený na SASS pro vytváření výkonných, snadno udržovatelných webových stránek HTML5. Pomáhá vám rychle prototypovat vaše nápady a obecně vám usnadní život.

1140 mřížka

Mřížka 1140 dokonale zapadá do monitoru 1280. Na menších monitorech se stává tekutým a přizpůsobuje se šířce prohlížeče.

Kromě určitého bodu používá mediální dotazy k obsluhování mobilní verze, která v zásadě na sebe navazuje všechny sloupce, takže tok informací stále dává smysl.

Čtvercová mřížka

Jednoduchý rámec CSS pro designéry a vývojáře založený na 35 sloupcích stejné šířky. Jeho cílem je zkrátit dobu vývoje a pomoci vám vytvořit krásné strukturované webové stránky.

Tekutá mřížka

Fluid Grid je nový gridový systém, který funguje stejně jako Blueprint nebo 960, ale s libovolnou šířkou stránky, dokonce i rozvržením tekutin. Je založen pouze na CSS.

EZ-CSS

EZ CSS je zcela jiný druh mřížkové struktury. Používá jedinečný systém modulů, který umožňuje kopírovat, vkládat a vnořit jednoduchá rozvržení a vytvářet složité stránky. Je trochu těžké obtočit si hlavu, ale opravdu skvělé použití CSS.

FEM CSS Framework

FEM CSS Framework je 960px šířka + 12 sloupců mřížky systém + CSS společné styly, pro snadné a rychlé rozvíjení webových rozvržení.

Je založen na systému Grid 960, ale díky filozofii je flexibilnější a rychlejší hrát si s boxy.

Elastická CSS

Jednoduchý rámec CSS pro rozložení webových rozhraní, založený na technikách tištěného rozvržení 4 sloupců, ale s možností neomezené kombinace sloupců. a schopnost snadno vytvořit elastické, pevné a tekuté uspořádání.

Atatonický CSS

Tento rámec je většinou zaměřen na typografii, ale je zde také velmi lehký mřížkový systém.

Základní hodnota

Baseline usnadňuje vývoj webových stránek s příjemnou mřížkou a dobrou typografií. Mřížka v Baseline se skládá ze 4 základních sloupců, pro větší flexibilitu lze každý sloupec rozdělit do 2 jednotek.

Emastic

Lehká struktura CSS s tekutou mřížkou se zaměřením na typografii.

Golden Grid

Golden Grid je systém webové mřížky. Je to produkt hledání dokonalého moderního gridového systému. Měl to být nástroj CSS pro webové stránky založené na mřížce.

Frak

Frak je rámec CSS pro vytváření tekutinových sítí. Má zajímavý koncept, který zahrnuje použití multiplikátorů jako názvů tříd.

Easy Framework

Easy je framework CSS / HTML / JavaScript, který byl zahájen jako osobní projekt a poté se rozrostl v něco více. Záměrem je snížit množství času stráveného nastavením základní šablony HTML opětovným použitím stejných technik kódování. Zahrnuje jednoduchý procentuální systém sítě.

Mřížka

Grid jednoduchý a minimální systém tekutinové mřížky, který může proudit dovnitř jakékoli tekutiny nebo pevné nádoby, nebo hrát dobře s jiným systémem Grid.

520 mřížka

Mřížkový systém pro navrhování stránek Facebooku, šílený, ale pravdivý.

Stavitelé nástrojů a sítí

Kalkulačka mřížky

Skutečně úžasná síťová kalkulačka s podporou šablony Photoshop a Illustrator.

Grid kalkulačka a generátor

GridCalc je snadno použitelná síťová kalkulačka. Stačí zadat požadovanou šířku stránky a přibližný rozsah pro šířku sloupce a okapu a kalkulačka vám poskytne všechny možné kombinace v rámci zadaných limitů.

Průvodce

GuideGuide je můj nový oblíbený plugin Photoshopu. Tento bezplatný nástroj automaticky umístí průvodce do vašeho dokumentu Photoshopu na základě vašeho zadání.

3 × 4 Grid Builder

Grid Builder umožňuje snadno vytvořit mřížku HTML jednoduchým přetažením
a přetažení rozhraní. Je to opravdu zajímavý nástroj, který vám umožňuje vytvořit vlastní mřížky pro každý projekt.

Gridr Buildrrr

Super jednoduchý a efektivní vlastní stavitel mřížky.

Boks

Opravdu skvělý a podceňovaný nástroj, který vám umožní vytvářet vlastní implementace Blueprint. Podívejte se na můj tutoriál zde.

Systém variabilní sítě

Systém variabilní mřížky je rychlý způsob, jak pro svůj web vygenerovat základní mřížku CSS. Soubor generovaný CSS je založen na systému Grid 960.

ZURB CSS Grid Builder

Skvělý stavitel mřížky, který připravuje opravdu jednoduchou mřížku s malou stopou.

Griddle

Chcete použít návrh založený na mřížce bez rámce? Tento nástroj vytváří vlastní obrázek na pozadí, který usnadňuje dosažení rozvržení mřížky na vlastní pěst.

Stačí vložit vaše rozměry za naši adresu URL a získat obrázek průvodce na pozadí, se kterým budete pracovat v prohlížeči. Mřížky jsou vytvářeny za běhu, takže jakákoli kombinace by měla fungovat.

Gridulátor

Další nástroj pro obrázek na pozadí, jako je Griddle. Hlavní rozdíl spočívá v tom, že Griddle vygeneruje URL, do kterého se můžete zapojit, a tím získáte skutečný obrázek (Griddle se mi líbí lépe).