Share
Noen gang lurt på hvordan alle de slanke "magasin" -temaene for WordPress og andre plattformer ble opprettet? Mange, om ikke alle, ble utformet ved hjelp av et CSS Grid Framework - i det minste i det hele tatt hvis ikke i virkeligheten. Det vil si, du kan bruke et eksisterende CSS-rammeverk eller bygge din egen fra grunnen av. Mens det er mulig å designe komplekse nettsideoppsett uten rammebetingelser, er det uten tvil en handling i masochisme. I denne artikkelen får du en oversikt over dagens sats av rammer og som du bør velge å bruke.
Layoutrammer har blitt brukt i trykt publisering lenge før Internett. De er et usynlig fundament som brukes til å oppnå visuell kohesjon i tidsskrift og avisdesign og layout. De utgjør i hovedsak en gitter som deler horisontal og vertikal plass i konsekvente enheter der tekst, overskrifter, bilder og reklame kan plasseres.
Det samme konseptet har blitt tilpasset for websidedesign for mye av samme grunn, ved hjelp av CSS (Cascading StyleSheets) -kode for å plassere HTML-elementer. Faktisk bruker mange redaksjonelle nettsteder som drives av store utskriftsmedier utgivere grensesnitt for å få et kikk på deres nettsteder som ligner på deres utskriftsinnhold.
Vær oppmerksom på at den vertikale aksen ikke er like godt støttet i CSS Grid-systemer, siden en nettside høyde ikke er like mye av et problem som for en utskrevet side. (Likevel, det er et mindre problem i webdesign, med mindre du forventer de samme funksjonene som med Desktop Publishing - aka DTP-systemer, som er vanskelig å støtte uten et PostScript-lignende språk for nettlesere å implementere og støtte.)
Ikke alle designere støtter bruken av å bruke rutenettverk over bord, eller til og med i det hele tatt. Men la oss innse det; det er oppsett du bare ikke kan gjøre med bare HTML-tabeller uten mye smertefull innsats - og mange hekker som er vanskelig å dechiffrere, burde noensinne måtte gjøre endringer.
Visst, hvis du bruker nett, må du legge til noen nødvendig HTML-merker for innholdet ditt, og dermed øke sidestørrelsen. Dette betyr også at oppslag og stil ikke er virkelig skilt - en tenet som mange webdesignere ønsker å følge med. (Noen mennesker føler, med rette eller feil, at naysayers av CSS-rammer er designere som er bekymret for at behovet for deres tjenester vil avta. Selv om kodene med denne logikken også er i trøbbel, spesielt med økningen i kryss-nettleserkoden biblioteker som jQuery.)
Faktum er at ved hjelp av et CSS-gridramme betyr at nettleseren din bare laster CSS-filen (ene) en gang og holder dem bufret "på klientsiden". I tillegg er den ekstra HTML-oppgraderingen som trengs for å bruke det "usynlige" CSS-rammeverket, sjelden så signifikant at båndbreddeproblemer for lesere bør være et problem. (Interessant, de fleste naysayers synes å snakke om Yahoo UI Grids, ikke så mye Blueprint.)
I de fleste eksemplene jeg har jobbet med, og i noen av magasinet temaer ved hjelp av grids som jeg har inspisert, snakker vi relativt små filstørrelsesøkninger - spesielt i forhold til bloggplattformskoden som brukes. Et enkelt stort bilde vil trolig ta opp mer plass. Med raskere Internett-tilkoblinger er det egentlig ikke så stor avtale.
Design og estetiske fordeler
Uansett om du bruker CSS-nett for prototyping eller produksjonssystemer, er det flere estetiske og design fordeler:
Her er en kort liste over noen av de mer populære rammene:
Det finnes andre CSS-gridrammer du kan finne oppført i Google Code, men av de tre eller fire som jeg så på, var de fleste ufullstendige når det gjaldt dokumentasjon eller til og med prosjektfiler, så jeg har slått dem av. Hvis du vet om et rammeverk som ikke er oppført, vennligst gi oss beskjed i kommentarene!
La meg påpeke at dette ikke er en omfattende sammenligning av CSS-rammer. Faktisk har jeg ikke brukt noe annet enn Blueprint, selv om jeg har skannet doks for alle rammene ovenfor og spilte litt med YAML og Grid Designer. Blueprint, YUI Grids og YAML er uten tvil de "store tre" i CSS-rammeplassen, og 960 ser ut til å være et solidt fjerde valg.
Ved å velge et rammeverk har jeg tatt i betraktning at jeg ikke er utdannet designer - utover det jeg har studert alene i årevis. Jeg dobler i design når det er nødvendig, om enn i en veldig minimalistisk form. Faktisk, fordi jeg brukte ganske mange år enten å publisere mitt eget trykte magasin eller jobbe med andre, gjorde jeg en god del (veldig dårlig) sidelayout ved hjelp av prinsippene for rutenettdesign med Adobe PageMaker. Så jeg synes det er veldig naturlig å jobbe med CSS Grids for webdesign. Det ser ut til at gitt antall WordPress-temaer der ute - se listen i slutten av denne artikkelen - som er basert på et gridramme (for det meste Blueprint), føler designerne seg ganske komfortabel med grids, også.
Likevel, med tiden alltid begrenset, trenger jeg noe lett å lære og bruke, men likevel robust. Jeg har funnet ut at Blueprint CSS Grid passer til mine behov. Den integrerer pent med ulike JavaScript-biblioteker - inkludert jQuery, som kan resultere i noen jævla sexy webgrensesnitt. Det går bra (men ikke 100% perfekt) i de fleste nettlesere - selv om du må teste for den store tornen i webdesigners sider, kan IE-nettleseren.
Basert på min løse undersøkelse av CSS Grids dette året, ser Blueprint ut til å være det mest robuste rammeverket, den minst restriktive, den mest støttede - i forhold til hvor utbredt bruken er - den minste i størrelse og rammen med de fleste verktøyene . Faktisk er skjønnheten i Blueprint at du raskt kan produsere CSS-koden for et tilpasset rammeverk ved hjelp av verktøy som Kematys Blueprint Grid CSS Generator. Selv om du kan gjøre dette med Grid Designer, vil en rask sammenligning tyde på at den ikke er like robust som Blueprint.
På flipsiden skanner og leser du dokumentasjonen for Yahoo! UI Grids CSS-rammeverk fører meg til å tro at hvis du bare vil gjøre noen enkle websider og ønsker en håndfull forhåndsinnstillinger å spille med, vil du kanskje se på dette alternativet. Men jeg føler at det er litt for begrensende etter min smak. (Du vil kanskje lese Foo Hacks Blueprint CSS Framework vs YUI Grids.)
Til slutt, når det gjelder å lære noe nytt på nettet - for eksempel et programmeringsspråk og kodebibliotek / rammeverk - bruker jeg alltid "regjeringens skuldre". Jeg forkorter først de alternativene som synes å passe til det jeg trenger, og velg deretter basert på hvor mye det er skrevet om. Kan ikke virke rettferdig til nyere alternativer, men prosessen er ikke så mye mer vilkårlig enn hvor mange som velger webprogrammer å bruke. Det er for mye der ute for å holde styr på, og å ha et eksisterende støttende fellesskap gjør en stor forskjell.
Blueprint CSS Grid Framework er det jeg skal bruke i alle mine opplæringsprogrammer på NETTUTS (når det er relevant). I stedet for å kopiere funksjonslisten fra dokumentene i Google Code, la meg fokusere på hvorfor jeg personlig valgte den. Noen av disse punktene overlapper med det jeg har sagt ovenfor:
Som nevnt ovenfor kjører jeg inn i IE-problemer - men så gjør ikke alle? Flere WP-temaer ved hjelp av Blueprint har løst IE-nettleserproblemer, så jeg ekstrapolerer i min tro at de for det meste kan løses.
Blueprint, som av denne skrivingen, støtter ikke flytende layouter - noe jeg ikke er en stor fan av uansett. Men slik støtte kommer tilsynelatende fram, hvis du leter slik.
Vel, dette er et spørsmål om valg, ikke sant? Noen CSS Grids kommer med en grid.png eller en .psd-fil som du kan bruke i gjennomsiktig modus i Photoshop, Fireworks, GIMP, etc., mens du legger ned designelementene dine. Jeg er litt mer gammel skole og design alltid mine layouter ved å starte på papir:
Du vil legge merke til at ingen steder i den prosessen er bruk av grafikk programvare for layout mockup. Det er fordi jeg ikke er designer og bruker en veldig minimalistisk tilnærming til det jeg designer (for meg selv). Men hvis du planlegger å bruke, si, fyrverkeri for din mockup, ville du gjøre det mellom trinn 3 og 4.
Jeg har forsøkt å være omfattende i søket etter CSS Grid Framework, skanning over 120 artikler for kundeemner. Imidlertid er det mulig at jeg har savnet noen alternativer, så gjerne tilby andre.
Uansett hvilket CSS-rammeverk du bestemmer deg for å bruke, gjør det fordi det passer best til dine generelle behov. Hvis sidene / maler du designer, vil annonsere, vurder hvilken type annonser. Tidlig da jeg valgte temaer for nettstedene mine, valgte jeg for AdSense-annonser (hvilke er IAB-kompatibel). Mer nylig har jeg plukket / designet for blokker med 125x125 annonser, som jeg foretrekker mest over de fleste AdSense-blokkene.
Hvis du er interessert, er det en W3C-utkastspesifikasjon med tittelen CSS Grid Positioning Module Level 3 (skrevet av to Microsoft-ansatte) som diskuterer integrering av gridbasert layout i CSS. Funksjonene som diskuteres i dette utkastet, kan være i IE 8.
Her er lenker til noen av de mange gode artiklene der ute om CSS Grids.
Hvis du føler at du ikke er klar til å takle grids og tema design ennå, men trenger et nettbasert tema, er det sannsynligvis en av de mest omfattende listene du finner. (Det er faktisk mer enn 46, hvis du inkluderer variasjoner.) Det inkluderer magasin, magasinlignende, galleri, spesialitet og ulike premium-temaer som enten bruker eksplisitt eller implisitt CSS-nett. (Det er mulig at en eller to ikke bruker nett, men ved første øyekast ser de ut til det.)
Noen av disse temaene er gratis eller har en gratis versjon. De fleste er for WordPress-plattformen. Denne listen inneholder bare temaer tilgjengelig for allmennheten, ikke nødvendigvis tilpassede rutenett temaer som brukes av ulike bloggere. (Se utvalgte lenker i forrige liste, inkludert Web Designer Wall og Smashing Magazine for øyeblikksbilder av slike nettsteder. Se også Khoi Vinhs Subtraksjon, som et eksempel på et visuelt påvirket nettbasert nettsted.)
Advarsel: Noen av disse temaene fungerer kanskje ikke i WP 2.5x+
Ovenstående liste over magasintemaer er utarbeidet av følgende referanser, samt fra å søke på Google.com.
Accentsconagua