960 Grid System Toolbox & Resources
960-grid-systemet ble opprettet av Nathan Smith som en måte å strømlinjeforme arbeidsflyt for webutvikling ved å gi vanlige dimensjoner, basert på en bredde på 960 piksler.
960.gs (eller et hvilket som helst CSS-rammeverk) ble først og fremst utviklet for rask prototyping, kutte ned på repeterende og kjedelige oppgaver, men er også mer enn egnet til bruk for ethvert webdesign prosjekt.
Det vil gi nettstedet et strukturert og solid grunnlag for å bygge og utforme designet ditt på.
I denne artikkelen finner du opplæringsprogrammer, et utstillingsvindu av nettsteder utformet ved hjelp av 960.gs, spin-offs, grunnleggende WP-temaer bygget på 960.gs og mulige alternative rammer, hvis du av en eller annen grunn ikke liker 960-nettet system.
Innen nedlastingspakken finnes utskriftsskisseark, designoppsett og en CSS-fil som har identiske målinger.
Du har to maler, en 12 kolonne grid delt inn i porsjoner på 60px og en 16 kolonne grid delt inn i 40px. Hver kolonne har 10 piksler marginer til venstre og høyre, noe som skaper 20 piksler brede takrenner mellom kolonner.
Hjemmeside: 960.gs hjemmeside .
Nedlasting : Last ned 960.gs .
Demo : Se 960.gs Demo Page .
960.gs opplæringsprogrammer
960 CSS Framework - Lær det grunnleggende
Dette er en flott grunnleggende veiledning for å komme i gang, skrevet av Stefan Vervoort fra divitodesign. Du blir tatt gjennom det grunnleggende ved å laste rammen, slik at du kan begynne å utvikle med 960.gs raskt.
Arbeider med 960.gs
En annen opplæring som tar deg gjennom grunnleggende om å installere 960.gs, spesielt nyttig for CSS utfordret.
En detaljert titt på 960 CSS Framework
Når du benytter anledningen til å tilbringe litt tid med 960.gs, vil du bli overrasket over hvor mye tid potensielt kan bli lagret når du utvikler webprosjektene dine.
Prototyping med grid 960 CSS Framework
Denne artikkelen dekker hele prototypeprosessen, den forklarer grunnlinjen til Grid 960, planlegger gridet for et design og koding av prototypen. Så fort som det.
Bygg et avis tema med WP_Query og 960 CSS Framework
Denne opplæringen vil lære deg hvordan du bruker WP_Query til å lage et 3-kolonne avis-tema som har alle dine hovedblogger i hovedkolonnen, og av til siden et sett med innlegg fra en valgt kategori. Ved hjelp av 960 CSS-rammene for utformingen og resten av temaet, blir du vist hvordan dette vil øke produktiviteten i stor grad.
Design et nytt blogg tema på 960-nettverket
Denne opplæringen lærer deg å spotte et bloggtema i Photoshop som er designet for å bli brukt i 960-rammen. Denne opplæringen ble utformet mer for webdesignteori enn Photoshop-teknikk, men bruker betydelig mer tid på designteori og applikasjon.
960 Spin Offs
Typogridphy - En CSS-ramme for typografisk og gridoppsett
Typogridphy er et CSS rammeverk laget for å tillate webdesignere og front-end utviklere å raskt kode typografisk tiltalende grid layouts. Det lar deg lage gridoppsett som er allsidige og attraktive, det validerer strenge xHTML og CSS. Den bruker også en typografisk metode kjent som 'å skape vertikal rytme' , hvor alle tilstøtende tekstlinjer strekker seg horisontalt, uavhengig av linjeskift og nye avsnitt.
Demo : Typogridphy Demo
Overture - Fluid 960 Grid System 1.0
Utviklet av Stephen Bau fra Design7 , har han bygget et bibliotek med vanlige HTML-elementer, kombinert disse med CSS for typografi og layout, og legger til noen grunnleggende effekter fra populære JavaScript-biblioteker (hovedsakelig MooTools). Ved nedlasting kan du velge mellom tre maler: 960 px fast bredde , 12-kolonne væskebredde eller 16-kolonne væskebredde . Disse malene er fantastiske, du må se detaljene for å tro det.
Demo : Overture Demo .
Vise frem
Alle de vakre stedene nedenfor har blitt bygget ved hjelp av 960-nettverket:
WordPress Temaer
På samme måte som de faktiske 960.gs, er disse WP-temaene nesten ustylte og med svært grunnleggende funksjonalitet, men de ble bygget ved hjelp av 960.gs. Veldig nyttig for enhver WP-utvikler.
5 år WordPress Theme
Et grunnleggende WP tema bygget ved hjelp av 960.gs.
960bc WordPress Theme
960bc-temaet er i hovedsak et tomt lerret med minimal styling og ingen bilder basert på 960-nettverket (kun 12 kolonner) for WordPress-utviklere som ønsker å jobbe innenfor et tradisjonelt nettbasert layout.
Mulige alternativer
Å velge en CSS Framework kan være vanskelig, hvis 960.gs ikke passer deg, kanskje du kan prøve noen av rammene nedenfor.
Blueprint: En CSS Framework
Blueprint er et CSS-rammeverk, som tar sikte på å kutte ned på CSS-utviklingstiden. Det gir deg et solid CSS grunnlag for å bygge prosjektet ditt på toppen av, med et brukervennlig rutenett, fornuftig typografi, og til og med et stilark for utskrift. Det er langt mindre oppblåst enn YUI-rammen, og er muligens på nivå med 960.gs når det gjelder brukervennlighet.
CSS-Boilerplate
Fra en av forfatterne til Blueprint. Han har opprettet et avskåret rammebilde som gir det nødvendige for å starte et prosjekt. Denne rammen er lett og streber for ikke å foreslå ikke-semantiske navngivningskonvensjoner.
Elementer - En CSS-ramme ned til jorden
Det ble bygget for å hjelpe designere skrive CSS raskere og mer effektivt. Elementer går utover å være bare et rammeverk, det er sitt eget prosjekt arbeidsflyt. Den har alt du trenger for å fullføre prosjektet.
WYMstyle - CSS rammeverk - Oversikt
Målet med dette prosjektet er å gi et sett med velprøvde modulære CSS-filer, som kan brukes til rask design av nettsider.
Enda en annen multikolumnlayout | YAML
"Yet Another Multicolumn Layout" (YAML) er et (X) HTML / CSS rammeverk for å skape moderne og fleksible flytende layouter. Strukturen er ekstremt allsidig i programmeringen og er helt tilgjengelig for sluttbrukere.
CleverCSS
CleverCSS er et lite oppslagsspråk for CSS inspirert av Python som kan brukes til å bygge et stilark på en ren og strukturert måte. På mange måter er det renere og kraftigere enn CSS2.
sparkl CSS Framework
Sparkl kombinerer POSH-markering, Bulletproof CSS og Unobtrusive JavaScript i et enkelt å bruke webutviklingsramme som gjør det enkelt å lage bulletproof nettsteder som samsvarer med webstandarder. Den bruker en modulær rammeverk, slik at du kan bruke det du trenger og utelate det du ikke gjør.
JQuery UI CSS Framework
Query UI inkluderer et robust CSS Framework designet for å bygge egendefinerte jQuery-widgets. Rammen omfatter klasser som dekker et bredt spekter av vanlige brukergrensesnittbehov, og kan manipuleres ved hjelp av jQuery UI ThemeRoller. Ved å bygge din brukergrensesnittkomponenter ved hjelp av jQuery UI CSS Framework, vil du vedta felles oppgraderingskonvensjoner og muliggjøre enkel kodetegning på tvers av plugin-fellesskapet som helhet.
Skrevet utelukkende for WDD av Paul Andrew fra Speckyboy.com
Bruker du 960gs for nettstedene dine? Hva er de viktigste fordelene? Vi vil gjerne høre fra deg ...