Om du älskar nätverksbaserad design, är den här artikeln för dig. Vi har skurat på nätet och sammanställt alla stora nätresurser vi kunde hitta. Vi har alla de bästa ramarna, gridbyggare, guideböcker och mer.
Börja bläddra och bokmärke!
Hate Grid Framework?
Innan vi börjar, vill jag bara säga att jag vet fullt ut att många av de som läser detta redan spricker med ilska om ondska i layoutramar.
I själva verket finns det mycket att säga mot gridramar. De är besvärliga, har en inlärningskurva och ofta kasta semantik ut genom fönstret. Vidare finns det en miljon av dessa saker, vilket gör det svårt för diskussioner om standardpraxis att ens börja.
Om du faller in i CSS-ramhattarnas läger, oroa dig inte att det fortfarande finns gott om rutnätresurser under det som inte har något med ramverk att göra. Under tiden är det några alternativ till gridramar.
Rulla dina egna rutnät Layouts On the Fly
Jag har nyligen publicerat en del om hur du enkelt kan uppnå komplexa flerspelets layouter snabbt och enkelt utan komplicerade ramar eller icke-semantiska klassnamn. Det är så enkelt att du aldrig kan använda en ram för layout igen.
Gridless
Gridless är en valfri HTML5 och CSS3 boilerplate för att skapa mobila första mottagliga webbläsares webbplatser med vacker typografi. Det kommer inte med några fördefinierade rutnät eller icke-semantiska klasser.
Stack Layout
Ett flexibelt breddat, komponentbaserat CSS-layoutsystem som gör stora användningar av inline-blockelement.
HTML5 Boilerplate
HTML5 Boilerplate blir snabbt den vanliga startpunkten för moderna webbdesignprojekt. Senast jag kollade det har allt du kan önska med, med undantag av ett nät system.
Gamla skolans ramar
Det här är morfaren som har funnits i flera år. Några av dem börjar verkligen visa sin ålder så att du kanske vill använda dem idag.
Plan
Blueprint är en CSS-ram, som syftar till att minska din utvecklingstid. Det ger dig en solid grund för att bygga ditt projekt ovanpå, med ett lättanvänt rutnät, förnuftig typografi, användbara plugins och till och med ett stilark för utskrift.
960.gs
960.gs är där de flesta börjar när de kommer in i CSS-ramar och nätsystem. Det är fortfarande ganska populärt och många av de nyare ramarna bygger åtminstone delvis på arbetet här.
Fluid 960 Grid System
En populär variant av 960.gs med en fluid layout som automatiskt anpassar bredden beroende på webbläsarfönster storlek.
YAML
? Ännu en multikolumnlayout? (YAML) är en (X) HTML / CSS-ram för att skapa moderna och flexibla flytande layouter. Strukturen är extremt mångsidig i programmeringen och är helt tillgänglig för slutanvändare.
Fantastiska nya (er) ramar
Perkins
Perkins kombinerar den glänsande nyheten av HTML5 och CSS3 med den underbara kraften i LESS.js för att skapa en ultimata CSS-ram. Om du älskar att experimentera med futuristiska CSS-lösningar är det här en bra ram för dig. Den använder en variant av 1KB-nätet.
Mindre ramverk
Mindre Ramar är ett lyhörd CSS-nätsystem för att utforma adaptiva webbplatser. Den innehåller 4 layouter och 3 uppsättningar typografi förinställningar, alla baserade på ett enda rutnät. ?Mindre? i den meningen bör inte förväxlas med LESS.js ovanifrån. Jag vet att det är förvirrande. De måste nämna den här något annat!
Columnal
Ett lyhörd CSS-system som hjälper skrivbord och mobila webbläsare att leka snyggt tillsammans. Columnal använder sitt eget hybridnätsystem som lånar från några andra.
Skelett
Skelett är en fantastisk responsiv ram som jag har skrivit om ett par gånger tidigare. Om du inte är säker på den extra tid och inlärningskurvan som är inblandad i lyhörd design, bör du kolla här. Skelett är byggt löst på 960.g.
52Framework
En ram som använder HTML5, CSS3 och JavaScript för att maximera kompatibiliteten hos moderna webbutvecklingspraxis i alla större webbläsare. Den baseras på ett enkelt 16 kolumngrid.
G5 Framework
(X) HTML5, CSS3, PHP och jQuery Front End Framework. G5 Framework startade som ett personligt projekt. I ett försök att påskynda arbetsflödet, återanvända de bästa kodningsförfarandena och liknande kodningstekniker, fungerar ramen som en startfil för nya webbplatser.
G5 Framework grid bygger på Easy Grid.
Easy Procent Grid System med HTML5
Huvudegenskaperna hos detta nätsystem är att alla kolumnerna har procentbaserad bredd så att de anpassar sig till behållarelementet. Det betyder att du med hjälp av detta system inte behöver definiera en bredd av varje kolumn för hand, du kan helt enkelt kasta den in i någon behållare och kolumnbredderna och kolonnrännorna ställs in automatiskt.
Cabin CSS
CSS-ramar tenderar att vara superuppblåsta. Kabinen löser detta problem med ett modulärt förlängningssystem som gör att du bara kan lägga till vad du behöver. Olika nätförlängningar stöds.
jQuery Masonry
jQuery Masonry är inte riktigt en CSS Framework alls, det är ett JavaScript-plugin som tillåter rutnätbaserade mönster som använder ett slags vertikal floatsystem. Det är ett fantastiskt verktyg som är ganska populärt just nu.
InuitCSS
Denna ram har allt: plugins progressiv flexibel mobil tablett förnuftig extensible tillgänglig pragmatisk funktionell användbar produktionsklar mer. Nätverket anpassas efter dina behov.
Små fotavtrycksramar
1 linje CSS Grid Framework
Jag trodde att en enstaka CSS-grid lät nötter, men den här killen drog av den. Jag är inte säker på hur praktiskt det är i den verkliga världen men jag är imponerad av tanken som gick in i det!
1 KB Grid
Detta är en av mina gamla favoriter.Det är ett rutnät som avlägsnas till det absolut nödvändiga, det behövs ingen sextio minuters genomgång av video. Om du inte förstår CSS-nätsystem startar du här.
Tiny Fluid Grid
Precis som 1KB-nätet är bara flytande för extra kul.
Slim CSS
SlimCSS är en lätt CSS Framework som sätter en solid cross-browser foundation med många viktiga funktioner samtidigt som man håller så liten som möjligt.
Övriga ramverk
Allvar
Gravity är en SASS-baserad ram för att skapa kraftfulla, lättanvändbara HTML5-webbplatser. Det hjälper dig att snabbt prototyper dina idéer och kommer i allmänhet att göra ditt liv mycket enklare.
1140 rutnät
1140-nätet passar perfekt in i en 1280-bildskärm. På mindre bildskärmar blir det flytande och anpassar sig till webbläsarens bredd.
Utan en viss punkt använder den mediefrågor för att betjäna en mobilversion, som i huvudsak staplar alla kolumner ovanpå varandra så att informationsflödet fortfarande är meningsfullt.
Kvadratnätet
En enkel CSS-ram för designers och utvecklare, baserat på 35 lika breda kolumner. Det syftar till att skära ner på utvecklingstiden och hjälpa dig att skapa vackert strukturerade webbplatser.
Vätskegrid
Fluid Grid är ett nytt nätverkssystem som fungerar på samma sätt som Blueprint eller 960, men med sidovidd, jämn vätskeformat. Den är baserad endast på CSS.
EZ-CSS
EZ CSS är en helt annan typ av rutnätverk. Den använder ett unikt modulsystem som låter dig kopiera, klistra in och bygga upp enkla layouter för att skapa komplexa sidor. Det är lite svårt att sätta på huvudet men en riktigt strålande användning av CSS.
FEM CSS Framework
FEM CSS Framework är ett 960px bredd + 12 kolonnnät system + CSS gemensamma stilar, för att enkelt och snabbt utveckla webblayouter.
Den är baserad i 960 Grid System, men med en vridning i filosofin för att göra det mer flexibelt och snabbare att spela med lådor.
Elastisk CSS
En enkel css-ram för att layouta webbaserade gränssnitt, baserat på de tryckta layoutteknikerna med 4 kolumner men med möjligheter till obegränsade kolumnkombinationer. och kapacitet att enkelt göra elastisk, fast och flytande layout.
Atatonic CSS
Denna ram är huvudsakligen inriktad på typografi, men det finns också ett väldigt lätt nätverkssystem.
Baseline
Baslinje gör det enkelt att utveckla en webbplats med ett tillfredsställande rutnät och bra typografi. Rutnätet i baslinjen består av 4 grundläggande kolumner. För mer flexibilitet kan varje kolumn delas upp i 2 enheter.
Emastic
Ett lättviktigt fluidgrid CSS-ramverk med fokus på typografi.
Golden Grid
The Golden Grid är ett webbnät system. Det är en produkt av sökandet efter det perfekta moderna nätverket. Det är tänkt att vara ett CSS-verktyg för nätbaserade webbplatser.
Frak
Frak är ett CSS-ramverk för att skapa fluidnät. Det har ett intressant koncept som involverade multiplikatorer som klassnamn.
Enkel ram
Enkelt är ett CSS / HTML / JavaScript-ramverk startat som ett personligt projekt och växte sedan till något mer. Tanken bakom det är att minska den tid som spenderas på att konfigurera HTML-mallen för grundmastern genom att återanvända samma kodningsteknik. Innehåller ett enkelt procentbaserat nätsystem.
Rutnät
Roster ett enkelt och minimalt vätskegridsystem som kan strömma in i någon vätska eller fast behållare eller spela bra med ett annat Grid-system.
520 rutnät
Ett nät system för att designa Facebook-sidor, galen men sant.
Verktyg och gallerbyggare
Grid Calculator
En riktigt fantastisk räknare med Photoshop och Illustrator mall stöd.
Grid Calculator och Generator
GridCalc är en lättanvänd gridräknare. Ange bara önskad bredd på din sida och ett prognosområde för din kolumn och rännbredd och räknaren ger dig alla möjliga kombinationer inom de gränser du angav.
GuideGuide
GuideGuide är mitt nya favoritprogram för Photoshop. Detta kostnadsfria verktyg placerar automatiskt guider i ditt Photoshop-dokument baserat på din inmatning.
3? 4 Grid Builder
Grid Builder gör att du enkelt kan bygga ett HTML-galler med ett enkelt drag
och släpp gränssnittet. Det är ett riktigt intressant verktyg som låter dig skapa anpassade rutor för varje projekt.
Gridr Buildrrr
En super enkel och effektiv anpassad rutnätbyggare.
boks
Ett riktigt bra och uppskattat verktyg som låter dig bygga anpassade implementeringar av Blueprint. Kolla in min handledning här.
Variabelt nät system
Det rörliga nätverket är ett snabbt sätt att skapa ett underliggande CSS-nät för din webbplats. Den CSS genererade filen är baserad på 960 Grid System.
ZURB CSS Grid Builder
En stor gallerbyggare som rätter ut ett riktigt enkelt galler med ett litet fotavtryck.
Griddle
Vill du använda en nätbaserad design utan ram? Det här verktyget skapar en anpassad bakgrundsbild som gör det enkelt att uppnå gridlayout på egen hand.
Ange bara dina mått efter vår URL för att få en bakgrundsguiden bild att arbeta med i din webbläsare. Grids skapas på flugan, så en kombination ska fungera.
Gridulator
Ett annat bakgrundsbildverktyg som Griddle. Den största skillnaden är att Griddle genererar en URL för att du ska släppa in och det här ger dig en verklig bild (jag gillar Griddle bättre).
Grid Lover Sites och Must-Read Articles
Nätbaserad
Ett webbdesign galleri fullt av fantastiska exempel på nätbaserad design.
Design genom rutnät
En annan bra webbplats dedikerad till nätbaserade verktyg, artiklar och andra resurser.
Grid-systemet
En one-stop-butik för alla nätverksrelaterade. Det är en gammal källa men det ser ut att det fortfarande uppdateras regelbundet.
Grid-baserad design förenklad
En oslagbar primer på gridbaserade designgrunder. Detta borde vara steg ett i din grid design quest.
960 Grid System Made Easy
En komplett nybörjars introduktion till 960-nätverket av din sanning.
Utformning med gridbaserad strategi
En äldre Smashing Mag artikel, men det har fortfarande massor av bra resurser och information att kolla in.
Rethinking CSS Grids
Mark Boulton diskuterar hur inbyggt CSS-stöd för nät ska fungera. En bra läsning!
Slutsats
Jag hoppas att du haft den här massiva samlingen och har tillräckligt med nätverksbaserade designresurser för att hålla dig upptagen i flera månader.
Lämna en kommentar nedan och låt oss veta vad du tycker om verktygen och resurserna ovan. Använder du några rutnätverk? Vilka och varför?