Share
Någonsin undrat hur alla de smarta "tidskrifts" teman för WordPress och andra plattformar skapades? Många, om inte alla, utformades med hjälp av en CSS Grid Framework - åtminstone i huvudsak om inte i själva verket. Det innebär att du kan använda en befintlig CSS-ram eller bygga din egen från början. Även om det är möjligt att designa komplexa webbsidor utan ramar, är det förmodligen en handling i masochism. I den här artikeln får du en översikt över den aktuella satsen ramverk och som du ska välja att använda.
Layoutnät har använts i tryckpublicering långt före webben. De är en osynlig grund som används för att uppnå visuell sammanhållning i tidningen och tidningssidan design och layout. De utgör i huvudsak en gitter som delar upp horisontellt och vertikalt utrymme i konsekventa enheter där text, rubriker, bilder och reklam kan placeras.
Samma koncept har anpassats för webbdesign av samma orsak, med hjälp av CSS (Cascading StyleSheets) -koden för att placera HTML-element. Faktum är att många redaktionella webbplatser som drivs av stora utgivare av utskriftsmedia tillämpar nät för att få en titt på sina webbplatser som liknar deras utskriftsinnehåll.
Observera att den vertikala axeln inte lika bra är stödd i CSS Grid-system, eftersom en webbsida höjd inte är lika mycket som ett tryck på sidan. (Det är fortfarande en liten fråga i webbdesign, om du inte förväntar dig samma funktioner som Desktop Publishing - aka DTP-system, vilket är svårt att stödja utan ett PostScript-liknande språk för webbläsare att implementera och stödja.)
Inte alla designers stöder användningen av att använda gallerramar över tabeller, eller ens alls. Men låt oss möta det; det finns layouter som du helt enkelt inte kan göra med bara HTML-tabeller utan en stor smärtsam ansträngning - och mycket nestning som är svårt att dechiffrera, borde någonsin behöva göra ändringar.
Visst, om du använder nät, måste du lägga till några nödvändiga HTML-taggar till ditt innehåll, vilket ökar sidfilstorlekarna. Det innebär också att markup och stil inte är helt separerade - en princip som många webbdesigners skulle vilja följa med. (Några känner rätt eller felaktigt att naysayers av CSS-ramar är designers som är oroliga för att behovet av deras tjänster kommer att minska. Även med denna logik är kodarna också i trubbel, särskilt med ökningen av cross-browser-kod bibliotek som jQuery.)
Faktum är att med hjälp av ett CSS-rutnätverk innebär att din webbläsare bara laddar upp CSS-filerna en gång och håller dem cachade "på klientsidan". Dessutom är den extra HTML-markup som behövs för att tillämpa "osynliga" CSS-ramarna sällan så signifikant att bandbreddsproblem för läsare borde vara ett problem. (Intressant nog verkar de flesta naysayers prata om Yahoo UI Grids, inte så mycket Blueprint.)
I de flesta exemplen jag har arbetat med, och i någon av tidskriftens teman som använder grids som jag har inspekterat, pratar vi relativt små filstorleksökningar - speciellt jämfört med den bloggplattformskod som används. En enda stor bild kommer sannolikt att ta upp mer utrymme. Med snabbare Internetanslutningar är det verkligen inte så stor sak.
Design & estetiska fördelar
Oavsett om du använder CSS-nät för prototyp- eller produktionssystem, finns det flera estetiska och designfördelar:
Här är en kort lista över några av de mer populära ramarna:
Det finns andra CSS Grid-ramar som du kan hitta i Google Code, men av de tre eller fyra som jag tittade på var de flesta ofullständiga när det gällde dokumentation eller till och med projektfiler, så jag har lämnat dem. Om du känner till ett ramverk som inte är listat, vänligen meddela oss det i kommentarerna!
Låt mig påpeka att detta inte är en omfattande jämförelse av CSS-ramar. Faktum är att jag inte har använt någonting annat än Blueprint, även om jag har scannat docs för alla de ovan angivna ramarna och spelat lite med YAML och Grid Designer. Blueprint, YUI Grids och YAML är förmodligen de "stora tre" i CSS-ramytan och 960 verkar vara ett solidt fjärde val.
Vid val av ramverk har jag tagit hänsyn till att jag inte är utbildad designer - bortom vad jag själv har studerat i flera år. Jag drar i design när det är nödvändigt, om än i en mycket minimalistisk form. Faktum är att jag, för att jag tillbringade några år, antingen publicerade min egen utskriftstidning eller arbetade med andra, gjorde en skälig bit av (riktigt dålig) sidlayout med principerna för gallerdesign med Adobe PageMaker. Så jag tycker att det är väldigt naturligt att arbeta med CSS Grids för webbdesign. Det verkar som om antalet WordPress-teman där ute - se listan i slutet av den här artikeln - som bygger på en rutnätram (oftast Blueprint), känner sig designers ganska bekväma med nät, även.
Ändå, med tiden alltid begränsad, behöver jag något lätt att lära och använda, men ändå robust. Jag har funnit att Blueprint CSS Grid passar mina behov. Den integrerar snyggt med olika JavaScript-bibliotek - inklusive jQuery, vilket kan leda till några jävla sexiga webbgränssnitt. Det går bra (men inte 100% perfekt) i de flesta webbläsare - men du måste testa för den stora tornet i webbdesigners sidor, IE-webbläsare.
Baserat på min lösa undersökning av CSS Grids det senaste året, verkar Blueprint vara den mest robusta ramen, den minst restriktiva, den mest stödda - i fråga om hur utbredd användningen är - den minsta storleken och ramverket med de flesta verktyg . Faktum är att skönheten i Blueprint är att du snabbt kan producera CSS-koden för en anpassad ram med hjälp av verktyg som Kematys Blueprint Grid CSS Generator. Även om du kan göra det med Grid Designer, tyder en snabb jämförelse på att den inte är lika robust som Blueprint.
På flipsidan, skannar och bläddrar dokumentationen för Yahoo! UI Grids CSS-ramverk leder mig till att tro att om du bara vill göra en enkel webbplatslayout och vill ha en handfull förinställningar att spela med, kanske du vill titta på det här alternativet. Jag känner emellertid att det är lite för restriktivt för min smak. (Du kanske vill läsa Foo Hacks Blueprint CSS Framework vs YUI Grids.)
När det gäller att lära sig något nytt på nätet - som ett programmeringsspråk och kodbibliotek / ramverk - tillämpar jag alltid "rejälarnas axlar". Jag kortslår först de alternativ som verkar lämpade för vad jag behöver, välj sedan baserat på hur mycket det har skrivits om. Det verkar inte rättvist att nya alternativ, men processen är inte så mycket mer godtycklig än hur många människor väljer webbprogram som ska användas. Det finns för mycket där ute för att hålla reda, och att ha ett befintligt stödjande samhälle gör stor skillnad.
Blueprint CSS Grid Framework är vad jag ska använda i alla mina handledning på NETTUTS (när det är relevant). Istället för att kopiera funktionslistan från dokumenten i Google Code, låt mig fokusera på varför jag personligen plockade den. Några av dessa punkter överlappar vad jag har sagt ovan:
Som nämnts ovan går jag in i IE problem - men då gör inte alla? Flera WP-teman som använder Blueprint har löst IE-webbläsarproblem, så jag extrapolerar i min tro att de oftast kan lösas.
Blueprint, enligt detta skrivande, stöder inte flytande layouter - något jag är inte en stor fan av ändå. Men sådant stöd kommer tydligen att komma, om du lutar på det sättet.
Jo det här är en fråga om val, eller hur? Vissa CSS-gridar kommer med en grid.png eller till och med en .psd-fil som du kan använda i transparent läge i Photoshop, Fireworks, GIMP, etc., medan du lägger ner dina designelement. Jag är lite mer gammal skola och utformar alltid mina layouter genom att börja på papper:
Du kommer märka att ingenstans i den processen är användningen av grafikprogram för layoutmockup. Det beror på att jag inte är en formgivare och använder en mycket minimalistisk inställning för det jag designar (endast för mig själv). Men om du planerar att använda, säger Fireworks för din mockup, skulle du göra det mellan steg 3 och 4.
Jag har försökt att vara omfattande i min sökning efter CSS Grid Framework, skanning över 120 artiklar för leads. Det är dock möjligt att jag har missat några alternativ, så gärna erbjuda andra.
Oavsett vilket CSS-ramverk du väljer att använda, gör det eftersom det passar bäst för dina allmänna behov. Om de sidor / mallar du designar kommer att ha reklam, överväga vilken typ av annonser. Tidigt när jag valde teman för mina webbplatser valde jag för AdSense-annonser (vilka är IAB-kompatibel). Nyligen har jag plockat / designat för block med 125x125 annonser, vilket jag föredrar mest över de flesta AdSense-block.
Om du är intresserad finns det en W3C-specifikation med titeln CSS Grid Positioning Module Level 3 (skriven av två Microsoft-anställda) som diskuterar att integrera gridbaserad layout i CSS. Funktionerna som diskuteras i detta utkast kan vara i IE 8.
Här är länkar till några av de många bra artiklarna där ute om CSS Grids.
Om du känner att du inte är redo att ta itu med nät och temat design än men behöver ett nätbaserat tema, är det här förmodligen en av de mest omfattande listorna du hittar. (Det finns faktiskt mer än 46 om du inkluderar varianter.) Det innehåller tidningen, tidningen, galleriet, specialitet och olika premiumteman som använder antingen explicit eller implicit CSS-nät. (Det är möjligt att en eller två inte använder nät, men vid första anblicken ser de ut att.)
Några av dessa teman är gratis eller har en gratis version. De flesta är för WordPress-plattformen. Denna lista innehåller endast teman som är tillgängliga för allmänheten, inte nödvändigtvis anpassade rutnät som används av olika bloggare. (Se valda länkar i föregående lista, inklusive Web Designer Wall och Smashing Magazine för snapshots av sådana webbplatser. Se även Khoi Vinhs subtraktion, som ett exempel på en visuellt effektfull nätbaserad webbplats.)
Varning: Vissa av dessa teman kanske inte fungerar i WP 2.5x+
Ovanstående lista över tidskrifts teman är sammanställd av följande referenser, samt från att söka på Google.com.
Accentsconagua