Vi börjar alla någonstans. Som ny designer kunde jag inte bry mig mindre om strukturen i mina mönster. Jag skulle öppna Photoshop och trycka pixlar runt tills jag gjorde något som jag tyckte var coolt. När jag lärde mig att koda, var min process likaledes slumpmässig.
Jag ser inte tillbaka på gamla dagar med för mycket kärlek. Mitt arbete var slarvigt och ofokuserat. Jag hade inga tydliga mål. Som en början antar jag att det inte är så dåligt, med tanke på att det mesta av min designutbildning kom från Photoshop-tutorials, var mitt arbete inte hemskt.
Men då lärde jag mig om nätsystem. Jag glömde exakt när och hur de blev populärt använda i webbdesign, men helt plötsligt gick varje webbdesignrelaterad webbplats till att spränga med artiklar om 960.gs eller något annat nätsystem. Betydelsen av att tillhandahålla en konsekvent visuell struktur i våra layouter betonades av alla de stora namnen och blev en trend.
Precis så snabbt blev trenden en industristandard, och nu tänker de flesta av oss inte två gånger om vi ska implementera ett nätsystem. Den enda frågan är vilken? Kommer vi att gå med ett av de stora namnen eller en mindre känd variant, eller ens göra vår egen?
I den här artikeln skulle jag vilja titta på det andra alternativet: nya och mindre kända nätsystem. Det finns alltid någon där ute som börjar med nya sätt att lösa de olika problemen med layouten, och jag tycker att det är viktigt att vara bekant med så många tillvägagångssätt som möjligt, så låt oss titta på några grundläggande gridramar.
34Grid handlar om lika kolonnfördelning. Det kan rymma ojämna fördelningar också, men det är inte det primära syftet med detta nätsystem. För de av er som vill dela de flesta eller alla dina sidor i horisontellt lika delar är detta ditt ramverk.
Hur det fungerar
Ramverket är utformat för att kunna anpassas till dina behov, så du behöver inte bara ladda ner och gå. Du måste konfigurera ditt rutnät på projektets hemsida först. En snabb formulär gör det möjligt att bestämma hur många kolumner som passar i rad, hur stora marginalerna kommer att vara, och huruvida CSS3-övergångar ska tillämpas i kolumnerna när ditt visningsport ändrar storlek.
Koden i sig är uppdelad i två CSS-filer: en med baskoden och en med alla mediefrågor. CSS klasserna är enkla. Om du använder '.col_1' i en kolumn fylls raden till 100%. '. col_2' skapar en kolumn med en bredd på 50% och så vidare.
Dessutom ändras img-element, objekt och några andra automatiskt. Det finns en extra klass för att hjälpa videobjektuppförande. Projektets webbplats ger råd om hur du får Facebook och Twitter-tjänsten att spela bra.
nackdelar
Det verkar inte vara något sätt att bo på kolumner, eller skapa mer komplexa kolumnarrangemang i en enda rad. Å andra sidan, om du inte behöver komplexitet, och du bara vill ha en enkel ram som du kan justera när du behöver, kommer 34Grid att göra jobbet.
Enkel rutnät är ett lyhörd alternativ som maxes ut vid en bredd av 1140 pixlar. Med andra ord, medan det är utformat för att fungera bra med tabletter och telefoner, säkerställer Simple Grid att större skärmar inte är utelämnade.
Hur det fungerar
Som namnet skulle innebära är detta nätsystem ganska lätt. Hela saken kommer i en fyra kilobyte okomprimerad CSS-fil.
Klassnamn är utformade för att lätt kunna förstås: '.col-2-6' delar raden i sex kolumner och definierar kolumnbredd till två kolumner bred. Varje rad kan delas in i en kolumn, ".col-1-1" eller två, tre, fyra etc. hela vägen upp till tolv.
nackdelar
Liksom 34Grid verkar det inte finnas någon bestämmelse gjord för att bygga upp kolonner. Dessutom hanteras hur marginaler hanteras för första och sista kolumnerna, vilket kan orsaka svårigheter när man till exempel skapar ett fotogalleri.
Den här är för alla som föredrar ett enkelt rutnät med rena engelska klassnamn. Det är lyhörd, lättförståeligt och snabbt implementerat.
Hur det fungerar
Efter att dina vanliga ".container" och "grid" -element har införts, är kolumnerna genomförda på gammaldags sätt. En klass ('.unit') används för att definiera de allmänna attributen för en kolumn och en annan klass används för att definiera bredden. Raderna kan delas in i 2-5 kolumner, och klassnamnen ser alla ut så här: '.on-of-three, .two-of-three'.
Dessutom ingår några grundläggande typografiska stilar.
nackdelar
Återigen är detta ett rutnätverk som är menat för okomplicerade layouter, så ingen bestämmelse för kapslade kolumner. Dessutom finns det bara en brytpunkt, inställd på en visningsbredd på 650 pixlar, så några kolumner kan för tidigt hamna ganska breda.
Matt (AKA Välsignelse ) är lite som jag. Han älskar design, men älskar inte matematik lika mycket. Som ett resultat hans Proportional Grids verkar göra bort med oändliga beräkningar så mycket som möjligt beroende på box-sizing fast egendom. Resultatet är ett komplett, men ändå ganska lätt, gridsystem som täcker dina baser för responsiv layout.
Hur det fungerar
När jag säger att detta system beror på box-sizing , Menar jag att kolumnerna får procentuella bredder utan att räkna med rännor. Fixerade rännor är definierade av padding ; och box-sizing Se till att kolumnerna spelar bra tillsammans.
Rännbredd och de flesta andra mätningar definieras med "ems". Sannt mot namnet på detta rutnät är kolumnklasserna proportionella (dvs. .col-one-third , .col-two-thirds ), och kolumnerna är mer eller mindre oändligt nestbara, vilket är något jag gillar väldigt mycket.
Klasser ingår för att ändra kolumnmått vid tre olika brytpunkter. Mediasökningarna själva är strukturerad i "mobila första" mode, i enlighet med standardpraxis.
Det finns ett separat stilark för Internet Explorer 8 och äldre. Att se som IE8 stöder inte mediefrågor, och versioner som är äldre än det stöder inte box-sizing , de är försedda med en layout med fast bredd.
Dessutom ingår SASS (både .sass och .scss) -filer för snabb och enkel anpassning av nätsystemet.
nackdelar
Jag skulle inte ha något emot att ha några mer kolumnbredder att arbeta med (femte, sjätte, åttonde). Annars är detta ett stort och felaktigt och väl avrundat nät system.
Av de avancerade nätsystemen i denna lista, Ett% är det enklaste, men det är inte alls ofullständigt. Den är utformad för att rymma lite större skärmar och stora UI-element, om dess hemsida är någon indikation.
Namnet kommer från det faktum att rutnätet och kolumnbredden beräknas så att den alltid motsvarar 99%, istället för 100%. Detta eliminerar behovet av några av de mer komplexa upprepade decimalerna och numrering som webbläsare ofta tvingas göra.
Hur det fungerar
Gitteret är uppdelat i de klassiska tolv kolumnerna. Klasserna är enkla ( .onerow , .col1 , .col6 ), och jag gillar att du, mestadels, bara använder en klass per kolumn.
Två brytpunkter ingår som standard: 768 pixlar och 1024 pixlar. Om jag är ärlig ser den första ut lite ... stor ... men du kan alltid lägga till en annan brytpunkt om du behöver en. Två exempel på skrivbordslayoutbredd finns också: 1000 pixlar och 1200 pixlar.
På projektets hemsida kan du ladda ner Photoshop-actionfiler och PSD-enheter som passar för att mocka upp dina layouter med detta nätverkssystem.
nackdelar
Mina två stora problem här är de vanliga. Första: inga nesting kolumner. Uppstödda kolumner är bra, människor! För det andra: Den sista kolumnen i varje rad måste ha .last klass tillämpas på den.
Ett CSS-gridramverk med kors-webbläsare som inte döljer pixlar i marginaler! Det är tagline för Flurid, och en snabb titt till dokumentationen kommer att berätta varför: Flurids skapare vill verkligen inte att din layout bryts. Någonsin.
Här är saken, på grund av hur subpixelrundningen fungerar, kommer en webbläsare ibland att säga "skruva den" och sätta den sista kolumnen i raden någonstans den ska inte gå. Flurid är byggt för stabilitet, så att din layout alltid kommer att fungera, även på äldre versioner av IE. (Kompatibilitet är listad som IE5 +.)
Hur det fungerar
Flurid har alla funktioner som du behöver: vanliga kolumner, blandade kolumner, kapslingar och skiftad kolumner. Listan över möjliga kolumnbredder och klasser är omfattande och förhållandebaserad, så du vill ge dig tid att bli bekant med dem.
Något rimligt fullständigt dokumentation tillhandahålls via GitHub, liksom ett jQuery-plugin som lägger till extrafunktioner-ja, det kommer med sin egen jQuery-plugin, som ger lika höga kolumner i höjden och kan placera alternerande klasser på dina kolumner, för ditt stilbehov.
nackdelar
Det är så irriterande .last klass igen. Enligt dokumentationen finns det fortfarande en bra anledning till den här gången.