960 Grid System Toolbox & Resources
960 Grid-systemet skapades av Nathan Smith som ett sätt att effektivisera arbetsflödet för webbutveckling genom att tillhandahålla vanliga dimensioner, baserat på en bredd på 960 pixlar.
960.gs (eller något CSS-ramverk) utvecklades huvudsakligen för snabb prototypning, skära ner på repetitiva och tråkiga uppgifter, men är också mer än lämpad att användas för alla webbdesignprojekt.
Det ger din webbplats en strukturerad och solid grund för dig att bygga och utforma din design på.
I den här artikeln hittar du tutorials, en showcase av webbplatser utformade med hjälp av 960.gs, spin-offs, grundläggande WP-teman som byggdes på 960.gs och möjliga alternativa ramar, om du av någon anledning inte gillar 960-nätet systemet.
Inom nedladdningspaketet finns utskrivbara skissark, designlayouter och en CSS-fil som har identiska mätningar.
Du har två mallar, en 12 kolonn galler delad i delar av 60px och en 16 kolonn rutnät uppdelad i 40px. Varje kolumn har 10 pixlar av marginaler till vänster och höger, vilket skapar 20 pixlar breda rännor mellan kolumnerna.
Hemsida: 960.gs hemsida .
Ladda ner : Ladda ner 960.gs .
Demo: Se 960.gs Demo-sida .
960.gs handledning
960 CSS Framework - Lär dig grunderna
Detta är en bra grundläggande handledning för att komma igång, skrivet av Stefan Vervoort från divitodesign. Du tas genom grunderna för att ladda ramarna, så du kan börja utvecklas med 960.gs snabbt.
Arbetar med 960.gs
En annan handledning som tar dig igenom grunderna för att installera 960.gs, särskilt användbar för CSS utmanade.
En detaljerad titt på 960 CSS Framework
När du tar tillfället i akt att spendera tid med 960.gs kommer du att bli förvånad över hur mycket tid som kan sparas när du utvecklar dina webbprojekt.
Prototyper med grid 960 CSS Framework
Denna artikel täcker hela prototypprocessen, det förklarar grunderna i Grid 960, planerar nätet för en design och kodning av prototypen. Så fort som det.
Bygg ett tidnings tema med WP_Query och 960 CSS Framework
Denna handledning kommer att lära dig hur du använder WP_Query för att skapa ett tema med 3 kolumner, som har alla dina huvudinlägg i huvudkolumnen och bort till sidan en uppsättning inlägg från en vald kategori. Med hjälp av 960 CSS-ramverket för layout och resten av temat visas du hur det kommer att påskynda produktiviteten i hög grad.
Skapa en ny bloggtema på 960-nätet
Denna handledning lär dig att mocka ett bloggtema i Photoshop som är utformat för att användas inom 960-ramverket. Denna handledning designades mer för webbdesignteori än Photoshop-teknik, men spenderar avsevärt mer tid på designteori och tillämpning.
960 Spin Offs
Typogridphy - En typografisk och Grid Layout CSS Framework
Typogridphy är en CSS-ram konstruerad för att tillåta webbdesigners och front-end-utvecklare att snabbt koda typografiskt tillfredsställande galler layout. Det låter dig skapa gridlayouter som är mångsidiga och attraktiva, det validerar strikt xHTML och CSS. Det använder också en typografisk metod som kallas "skapa vertikal rytm" , där alla angränsande textlinjer raderas horisontellt, oavsett rader och nya stycken.
Demo: Typogridphy Demo
Overture - Fluid 960 Grid System 1.0
Utvecklad av Stephen Bau från Design7 , har han byggt ett bibliotek med vanliga HTML-element, som kombinerar dessa med CSS för typografi och layout, och lägger till några grundläggande effekter från populära JavaScript-bibliotek (främst MooTools). Vid nedladdning kan du välja mellan tre mallar: 960 px fast bredd , 12 kolonnvätskebredd eller 16-kolonn vätskebredd . Dessa mallar är fantastiska, du måste se detaljerna för att tro på det.
Demo: Overture Demo .
Monter
Alla de vackra ställena nedan har byggts med hjälp av 960-nätverket:
WordPress-teman
Precis som de faktiska 960.gs är dessa WP-teman nästan ostylade och med mycket grundläggande funktionalitet, men de byggdes med 960.g. Mycket användbar för någon WP-utvecklare.
5 år WordPress Theme
Ett grundläggande WP-tema byggt med 960.g.
960bc WordPress Theme
960bc-temat är i huvudsak en tom duk med minimal styling och inga bilder baserade på 960-nätverket (endast 12 kolumner) för WordPress-utvecklare som vill arbeta inom en traditionell rutnätbaserad layout.
Möjliga alternativ
Att välja en CSS Framework kan vara svårt, om 960.gs inte är rätt för dig kanske du kan prova några av ramarna nedan.
Blueprint: En CSS Framework
Blueprint är en CSS-ram, som syftar till att minska din CSS-utvecklingstid. Det ger dig en solid CSS-grund för att bygga ditt projekt ovanpå, med ett lättanvänt rutnät, förnuftig typografi och till och med ett stilark för utskrift. Det är mycket mindre uppblåst än YUI-ramen, och är möjligen på nivå med 960.gs när det gäller användarvänlighet.
CSS-Boilerplate
Från en av författarna till Blueprint. Han har skapat en avskalad ram som ger det absolut nödvändiga att starta ett projekt. Denna ram är lätt och strävar efter att inte föreslå icke-semantiska namngivningskonventioner.
Element - En CSS-ram till jorden
Det var byggt för att hjälpa designers att skriva CSS snabbare och effektivare. Element går utöver att vara bara en ram, det är ett eget projekt arbetsflöde. Den har allt du behöver för att slutföra ditt projekt.
WYMstyle - CSS Framework - Översikt
Syftet med detta projekt är att tillhandahålla en uppsättning väl testade modulära CSS-filer, som kan användas för snabb design av webbplatser.
Ännu en multicolumn Layout | YAML
"Yet Another Multicolumn Layout" (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.
CleverCSS
CleverCSS är ett litet märkningsspråk för CSS inspirerad av Python som kan användas för att bygga ett stilark på ett rent och strukturerat sätt. På många sätt är det renare och kraftfullare än CSS2.
sparkl CSS Framework
Sparkl kombinerar POSH-markup, Bulletproof CSS och Unobtrusive JavaScript i en lättanvänd webbutvecklingsram som gör det enkelt att skapa bulletäta webbplatser som överensstämmer med webbstandarder. Den använder en modulär ram, så att du kan använda vad du behöver och lämna ut vad du inte gör.
JQuery UI CSS Framework
Query-användargränssnittet innehåller en robust CSS-ram som är utformad för att bygga anpassade jQuery-widgets. Ramverket innehåller klasser som täcker ett brett utbud av vanliga användargränssnitt, och kan manipuleras med jQuery UI ThemeRoller. Genom att bygga dina användargränssnittskomponenter med jQuery UI CSS Framework, kommer du att anta gemensamma markupkonventioner och möjliggöra enkel kodintegration över hela plugin-communityen.
Skriven uteslutande för WDD av Paul Andrew från Speckyboy.com
Användar du 960gs för dina webbplatser? Vilka är de viktigaste fördelarna? Vi skulle älska att höra från dig…