960 Grid System Toolbox & Resources
Nathan Smith loi 960 Grid -järjestelmän keinoksi tehostaa web-kehitystyötä tarjoamalla yleisesti käytettyjä ulottuvuuksia, jotka perustuvat 960 pikselin leveyteen.
960.gs (tai mikä tahansa CSS-kehys) kehitettiin ensisijaisesti nopeaan prototyyppityöhön, leikkaamalla toistuvia ja tylsiä tehtäviä, mutta se on myös sopiva käytettäväksi mille tahansa web-suunnitteluprojektille.
Se antaa sivustollesi rakenteellisen ja vankan perustan, jonka avulla voit rakentaa ja muotoilla suunnittelusi.
Tässä artikkelissa on opetusohjelmia, 960.gs: n, spin off -toimintojen, 960.g: n ja mahdollisten vaihtoehtoisten kehysten mukaisten WP-teemojen esittely, jos jostain syystä et pidä 960-verkosta järjestelmään.
Latauspaketissa on tulostettavia luonnoslehtiä, suunnitteluasennuksia ja CSS-tiedostoa, joilla on samat mittaukset.
Sinulla on kaksi mallia, 12 sarakan verkko, joka on jaettu osioihin 60px ja 16 pylväsverkko jaettuna 40px. Jokaisella sarakkeella on 10 pikseliä marginaaleja vasemmalla ja oikealla, mikä luo 20 pikselin leveitä kouruja sarakkeiden välillä.
Kotisivu: 960.gs Kotisivu .
Ladata : Lataa 960.gs .
Esittely: Katso 960.gs: n demo-sivu .
960.gs Oppaat
960 CSS Framework - Opi perusteet
Tämä on loistava perusopetus tutuksi, jonka Stefan Vervoort on kirjoittanut divitodesignista. Olette läpäisseet kehyksen perusteet, joten voit aloittaa kehityksen nopeasti 960.gs: lla.
Työskentely 960 g: n kanssa
Toinen opetusohjelma, joka vie sinut läpi 960.gs: n asentamisen perusteet, jotka ovat erityisen hyödyllisiä CSS: n haasteena.
Yksityiskohtainen tarkastelu 960 CSS -kehyksestä
Kun olet käyttänyt tilaisuutta viettää aikaa 960.gs: llä, sinun tulee hämmästymään siitä, kuinka paljon aikaa voi mahdollisesti tallentaa web-projekteitasi kehitettäessä.
Prototyyppaus Grid 960 CSS Frameworkin avulla
Tämä artikkeli kattaa koko prototyyppiprosessin, selittää Grid 960: n perusasiat, suunnitella ristikon mallin suunnittelua ja koodausta varten. Niin pian.
Sanomalehtipohjan rakentaminen WP_Queryn ja 960 CSS Frameworkin avulla
Tämä opetusohjelma opettaa sinulle, miten WP_Querya käytetään tekemään 3 sarakkeen sanomaleemaa, jolla on kaikki tärkeimmät blogiviestit pääsarakkeessa ja vieressä joukko tiettyyn ryhmään kuuluvia viestejä. 960 CSS -kehyksen käyttäminen teeman ulkoasuun ja lepoon näet, kuinka tämä nopeuttaa huomattavasti tuottavuutta.
Suunnittele uusi blogin teema 960-ruudukolla
Tämä opetusohjelma opettaa sinua pilkkelemaan blogin teemaa Photoshopissa, joka on suunniteltu käytettäväksi 960-kehyksen sisällä. Tämä opetusohjelma on suunniteltu enemmän web design teoria kuin Photoshop tekniikka, mutta viettää huomattavasti enemmän aikaa suunnittelu teoria ja soveltaminen.
960 Spin Offs
Typogridphy - Typografinen ja Grid Layout CSS Framework
Typogridphy on CSS-kehys, joka on suunniteltu siten, että web-suunnittelijat ja etupään kehittäjät voivat nopeasti koodata typografisesti miellyttäviä verkkoasetelmia. Sen avulla voit luoda ruutuasetelmia, jotka ovat monipuolisia ja houkuttelevia, se tukee tiukkoja xHTML- ja CSS-muotoja. Siinä käytetään myös typografista menetelmää, joka tunnetaan nimellä "vertikaalisen rytmin luominen" , jolloin kaikki vierekkäiset tekstirivit leviävät vaakasuoraan rivinvaihteluista ja uusista kappaleista riippumatta.
Esittely: Typogridphy Demo
Overture - Fluid 960 Grid System 1.0
Kehittänyt Stephen Bau Design7 , hän on rakentanut yleisesti käytettyjen HTML-elementtien kirjaston, joka yhdistää nämä CSS: n typografian ja ulkoasun kanssa sekä lisätään joitain perusvaikutuksia suosituimmista JavaScript-kirjastoista (lähinnä MooTools). Ladatessasi voit valita kolmesta mallista: 960 px kiinteä leveys , 12-kolonni nesteen leveys tai 16-sarjan nesteen leveys . Nämä mallit ovat hämmästyttäviä, sinun täytyy nähdä yksityiskohta uskovat sen.
Esittely: Overture Demo .
näyteikkuna
Kaikki kauniit allaolevat kohteet on rakennettu 960-verkon avulla:
WordPress-teemat
Aivan kuten varsinainen 960.gs, nämä WP teemat ovat käytännöllisesti katsoen unstyled ja hyvin perustoimintoja, mutta ne on rakennettu käyttäen 960.gs. Erittäin hyödyllinen kaikille WP-kehittäjille.
5 vuotta WordPress-teema
Basic WP teema, joka on rakennettu 960.gs.
960bc WordPress-teema
960bc-teema on olennaisesti tyhjä kangas, jossa on vain vähän muotoilua, eikä kuvia, jotka perustuvat 960-verkkoihin (vain 12 saraketta) WordPress-kehittäjille, jotka haluavat työskennellä perinteisessä ruudukkosuodattimessa.
Mahdolliset vaihtoehdot
CSS-kehyksen valitseminen voi olla vaikeaa, jos 960.gs ei ole sopiva sinulle, voit kokeilla joitain alla olevia kehyksiä.
Blueprint: CSS Framework
Blueprint on CSS-kehys, jonka tarkoituksena on vähentää CSS-kehitysaikaa. Se antaa sinulle vankan CSS-pohjan rakentaa projektisi päälle, helppokäyttöisellä verkolla, järkevällä typografialla ja jopa tulostustyylillä. Se on paljon vähemmän turvonnut kuin YUI-kehys, ja se on mahdollisesti 960 g: n suhteen helppokäyttöisyyden suhteen.
CSS-Vakiotieto
Yksi Blueprintin kirjoittajista. Hän on luonut riisuttu puitteet, jotka tarjoavat paljaat perusteet aloittaa mikä tahansa projekti. Tämä kehys on kevyt ja pyrkii olemaan ehdottamatta ei-semanttisia nimeämiskäytäntöjä.
Elementit - Down to Earth CSS -kehys
Se on rakennettu auttamaan suunnittelijoita kirjoittamaan CSS nopeammin ja tehokkaammin. Elementit ylittävät vain kehyksen, se on oma projektin työnkulku. Siinä on kaikki, mitä tarvitset hankkeen loppuun saattamiseen.
WYMstyle - CSS-kehys - yleiskatsaus
Hankkeen tavoitteena on tarjota joukko hyvin testattuja modulaarisia CSS-tiedostoja, joita voidaan käyttää verkkosivujen nopeaan suunnitteluun.
Vielä yksi monivärimaalaus | YAML
"Toinen monikulmasuunnittelu" (YAML) on (X) HTML / CSS-kehys, jolla luodaan nykyaikaisia ja joustavia kelluvia asetteluja. Rakenne on erittäin monipuolinen ohjelmoinnissaan ja täysin loppukäyttäjien käytettävissä.
CleverCSS
CleverCSS on Pythonin innoittamana CSS: n pieni merkintäkieli, jota voidaan käyttää rakentamaan tyyliarkki puhtaalla ja jäsennellyllä tavalla. Monilla tavoin se on puhtaampi ja tehokkaampi kuin CSS2.
sparkl CSS Framework
Sparkl yhdistää POSH-merkinnän, Bulletproof CSS: n ja Unobtrusive-JavaScriptin yhdeksi helppokäyttöiseksi web-kehityskehykseksi, joka helpottaa luotettavien web-standardien mukaisten luodinkestävien verkkosivustojen luomista. Se käyttää modulaarista kehystä, jonka avulla voit käyttää mitä tarvitset ja jättää mitä et.
JQuery UI CSS Framework
Kyselyn käyttöliittymä sisältää vankan CSS-kehyksen, joka on suunniteltu muokattujen jQuery-widgeteiden luomiseen. Kehys sisältää luokat, jotka kattavat laajan joukon yleisiä käyttöliittymän tarpeita ja joita voidaan manipuloida jQuery UI ThemeRoller -ohjelmalla. Rakentamalla käyttöliittymän komponentteja käyttämällä jQuery UI CSS Framework -ohjelmaa, hyväksyt yhteiset merkintätapoja ja sallivat koodien integroinnin helposti koko pluginyhteisössä.
Paul Andrew on kirjoittanut yksinomaan WDD: lle Speckyboy.com
Käytätkö verkkosivustoillesi 960g: tä? Mitkä ovat tärkeimmät edut? Haluamme kuulla sinusta ...