960 Grid-systemet blev oprettet af Nathan Smith som en måde at strømline web-udviklings-arbejdsgange ved at levere almindeligt anvendte dimensioner, baseret på en bredde på 960 pixel.

960.gs (eller en hvilken som helst CSS-ramme) blev primært udviklet til hurtig prototyper, nedskæring på gentagne og kedelige opgaver, men er også mere end egnet til brug for ethvert webdesign projekt.

Det vil give dit websted et struktureret og solidt fundament for dig at bygge og stil dit design på.

I denne artikel finder du vejledninger, et udstillingsvindue af websteder designet ved hjælp af 960.gs, spin offs, grundlæggende WP-temaer bygget på 960.gs og mulige alternative rammer, hvis du af en eller anden grund ikke kan lide 960-nettet system.

I downloadpakken er der udskriftsskitsark, designlayouter og en CSS-fil, der har identiske målinger.

Du har to skabeloner, en 12 kolonne gitter opdelt i portioner på 60px og en 16 kolonne gitter opdelt i 40px. Hver kolonne har 10 pixel af margener til venstre og højre, hvilket skaber 20 pixel brede tagrender mellem kolonner.

Hjemmeside: 960.gs hjemmeside .

Hent : Download 960.gs .

Demo: Se 960.gs Demo Side .

960.gs Tutorials

960 CSS Framework - Lær det grundlæggende
Dette er en fantastisk grundlæggende tutorial for at komme i gang, skrevet af Stefan Vervoort fra divitodesign. Du bliver taget gennem det grundlæggende ved at indlæse rammen, så du kan begynde at udvikle med 960.gs hurtigt.

Arbejder med 960.gs
En anden vejledning, der tager dig gennem det grundlæggende ved at installere 960.gs, især nyttigt for CSS udfordret.

Et detaljeret kig på 960 CSS Framework
Når du benytter lejligheden til at bruge lidt tid med 960.gs, vil du blive forbløffet over, hvor meget tid der potentielt kan gemmes, når du udvikler dine webprojekter.


Prototyping med Grid 960 CSS Framework
Denne artikel dækker hele prototypeprocessen, det forklarer grunduddannelsen til Grid 960, planlægger nettet for et design og kodning af prototypen. Så hurtigt som det.


Byg et avis tema med WP_Query og 960 CSS Framework
Denne vejledning vil lære dig, hvordan du bruger WP_Query til at lave et 3 kolonne avis tema, der har alle dine vigtigste blogindlæg i hovedkolonnen og ud til siden et sæt indlæg fra en valgt kategori. Ved hjælp af 960 CSS rammerne for layout og resten af ​​temaet, vises du, hvordan dette vil øge produktiviteten i høj grad.


Design et nyt blog tema på 960-nettet
Denne vejledning lærer dig at spotte et blogtema i Photoshop, der er designet til at blive brugt inden for 960-rammen. Denne vejledning er designet mere til webdesignteori end Photoshop-teknik, men bruger betydeligt mere tid på designteori og applikation.

960 Spin Offs

Typogridphy - En CSS-ramme for typografisk og gitterlayout

Typogridphy er en CSS-ramme konstrueret til at give webdesignere og front-end-udviklere mulighed for hurtigt at kode typografisk tilfredsstillende gitterlayouter. Det giver dig mulighed for at oprette grid layouts, som er alsidige og attraktive, det validerer strenge xHTML og CSS. Den bruger også en typografisk metode, der kaldes 'skabe vertikal rytme' , hvorved alle tilstødende tekstlinjer rager op vandret, uanset linjeskift og nye afsnit.
Demo: Typogridphy Demo


Overture - Fluid 960 Grid System 1.0

Udviklet af Stephen Bau fra Design7 , han har bygget et bibliotek af almindeligt anvendte HTML-elementer, der kombinerer disse med CSS for typografi og layout og tilføjer nogle grundlæggende effekter fra populære JavaScript-biblioteker (hovedsagelig MooTools). Ved download kan du vælge mellem tre skabeloner: 960 px fast bredde , 12-kolonne væskebredde eller 16-kolonne væskebredde . Disse skabeloner er fantastiske, du skal se detaljerne for at tro på det.
Demo: Overture Demo .

Udstillingsvindue

Alle de smukke steder nedenfor er blevet bygget ved hjælp af 960-nettet:

WordPress Temaer

Ligesom de faktiske 960.gs er disse WP temaer næsten uformet og med meget grundlæggende funktionalitet, men de blev bygget ved hjælp af 960.gs. Meget nyttigt for enhver WP-udvikler.


5 års WordPress Theme
Et grundlæggende WP tema bygget ved hjælp af 960.gs.


960bc WordPress Theme
960bc-temaet er i det væsentlige et blankt lærred med minimal styling og ingen billeder baseret på 960-netværket (kun 12 kolonner) til WordPress-udviklere, der ønsker at arbejde inden for et traditionelt netbaseret layout.

Mulige alternativer

At vælge en CSS Framework kan være svært, hvis 960.gs ikke passer dig, kan du måske prøve nogle af nedenstående rammer.

Blueprint: En CSS Framework
Blueprint er en CSS ramme, der har til formål at skære ned på din CSS udviklingstid. Det giver dig et solidt CSS-fundament til at bygge dit projekt på toppen af, med et brugervenligt net, fornuftig typografi og endda et stylesheet til udskrivning. Det er langt mindre oppustet end YUI-rammen, og er muligvis på niveau med 960.gs med hensyn til brugervenlighed.

CSS-Standardtekst
Fra en af ​​forfatterne til Blueprint. Han har skabt en afskåret ramme, der giver det absolut nødvendige for at starte et projekt. Denne ramme er let og stræber efter at ikke foreslå ikke-semantiske navngivningskonventioner.

Elementer - En CSS Framework til jorden
Det blev bygget for at hjælpe designere med at skrive CSS hurtigere og mere effektivt. Elementer går ud over at være bare en ramme, det er dets eget projekt arbejdsgang. Det har alt hvad du behøver for at fuldføre dit projekt.

WYMstyle - CSS framework - Oversigt
Formålet med dette projekt er at levere et sæt velafprøvede modulære CSS-filer, der kan bruges til hurtig design af websider.

Endnu en anden flerfarvet layout | YAML
"Endnu en anden multikolonne layout" (YAML) er en (X) HTML / CSS ramme for at skabe moderne og fleksible floated layouts. Strukturen er ekstremt alsidig i programmeringen og er helt tilgængelig for slutbrugere.

CleverCSS
CleverCSS er et lille mærkningssprog for CSS inspireret af Python, der kan bruges til at opbygge et stilark på en ren og struktureret måde. På mange måder er det renere og kraftigere end CSS2.

sparkl CSS Framework
Sparkl kombinerer POSH-markup, Bulletproof CSS og Unobtrusive JavaScript i en nem at bruge webudviklingsramme, der gør det nemt at oprette bulletproof hjemmesider, der overholder webstandarder. Det bruger en modulær ramme, som giver dig mulighed for at bruge det, du har brug for, og forlade det, du ikke gør.

JQuery UI CSS Framework
Query UI indeholder et robust CSS Framework designet til at opbygge brugerdefinerede jQuery widgets. Rammen omfatter klasser, der dækker et bredt udvalg af fælles brugergrænsefladebehov, og kan manipuleres ved hjælp af jQuery UI ThemeRoller. Ved at opbygge dine brugerinterface-komponenter ved hjælp af jQuery UI CSS Framework, vedtager du fælles markupkonventioner og giver mulighed for at lette kodintegration på tværs af plugin-fællesskabet som helhed.


Skrevet udelukkende til WDD af Paul Andrew fra Speckyboy.com

Bruger du 960gs til dine hjemmesider? Hvad er de vigtigste fordele? Vi vil gerne høre fra dig ...