Share
Het 960-rastersysteem bestaat al een tijdje? maar het is voornamelijk gebruikt aan de coderende kant van projecten als een HTML / CSS-raamwerk. Vandaag bespreken we de voordelen van het gebruik van rastersystemen zoals 960GS helemaal aan het begin van een project, voordat u Photoshop of Fireworks opent. Als je nog niet eerder een kader hebt gebruikt of als je gewoon een goede opfriscursus wilt, is dit een geweldige plek om te beginnen!
Is de kans groot dat je al hebt gehoord of al een soort CSS-raamwerk hebt gebruikt? maar voor het geval, laten we eens kijken naar de belangrijkste voordelen van het gebruik van een CSS-framework (ook bekend als rastersysteem) in elk webproject:
Uiteindelijk moet een CSS-raamwerk helpen bij het vaststellen van enkele basisrichtlijnen voor inhoudskolommen, terwijl ontwerpers toch volledige controle krijgen over hun ontwerpen.
In dit artikel: Ik ga uitleggen wat een CSS-framework is en waarom ik 960 heb gekozen. Daarna zal ik de basisprincipes van het toepassen van de 960 Grid bespreken. Om onze discussie af te ronden, laat ik je een paar sites zien die het 960-raster gebruiken en hoe ze gestructureerd zijn.
Een CSS Framework is een serie stylesheets die zijn gemaakt om het leven van een webontwikkelaar gemakkelijker te maken. Ze zijn goed voor de verschillende eigenaardigheden van browsers, zijn eenvoudig aan te passen en passen basisontwerpprincipes toe (zoals visueel aantrekkelijke marges tussen elementen maken).
Vaak hebben deze frameworks ook typografische stylesheets, die een geweldige plek kunnen zijn om aan de typografie van uw site te werken (zie dit artikel voor meer informatie over typografie).
Er zijn momenteel twee belangrijke CSS-frameworks: Blueprint en 960. Beide zijn perfect capabele frameworks, met geweldige functies en gebruiksgemak. Het komt eenvoudigweg neer op een kwestie van voorkeur waarvan je Framework het meest comfortabel voelt.
Voordat u met de ontwerpfase van een project begint, is het belangrijk om de selectie van een raamwerk te bespreken met de persoon die de site gaat coderen. Vaak hebben ontwikkelaars voorkeuren voor een bepaald CSS-raamwerk en als een van de belangrijkste redenen waarom we frameworks gebruiken tijdens de ontwerpfase, is het een belangrijke beslissing om de overgang van ontwerp naar codering af te vlakken. Als je het project zelf codeert, zorg er dan voor dat je vertrouwd bent met het gridraamwerk dat je kiest - er is niets erger dan een hele site ontwerpen op basis van een raamwerk waar je uiteindelijk niet van houdt.
Persoonlijk vond ik dat het 960-raster beter aan mijn behoeften voldoet, dus dat is wat ik heb aangenomen en dat bespreken we in dit artikel. De overkoepelende principes die we zullen bespreken, zijn echter van toepassing op elk raamwerk, inclusief Blueprint.
960.gs is gebaseerd op het plaatsen van alle elementen van uw site in een 960px brede (slimme meisjes) container, en die container op te delen in 12, 16 of 24 kolommen van gelijke grootte. Ze bieden een hulpmiddel om alternatieve breedtes te gebruiken, maar 960 is waar het hele systeem voor is ontwikkeld en het ziet er behoorlijk scherp uit.
Waarom 960px? Omdat 960px een breedte is die geschikt is voor het grote aantal platforms waarop we op internet surfen. Het zorgt er in principe voor dat een 1024 px brede monitor de site nauwkeurig en zonder horizontaal scrollen laat zien, rekening houdend met de breedte van het browserchroom, schuifbalken en een beetje opvulling voor de leesbaarheid. Er is altijd een marge van 10 px aan de rechter- en linkerkant van de hoofdcontentkolom, wat betekent dat kleinere browsers altijd de meest linkse inhoud kunnen lezen zonder de tekst maar dan tegen het browservenster in.
Bovendien zijn alle getallen in de 960GS hele getallen op basis van de gulden snede - er zijn geen decimale punten of problemen met de funky spatiëring. Als je ons artikel over wiskunde en webontwerp hebt gelezen, weet je hoe belangrijk het is om deze cijfers goed te krijgen.
Een van de flagrante omissies, of leuke functies, afhankelijk van hoe je ernaar kijkt, is de manier waarop de 960 omgaat met (of niet) typografie. Er is een text.css-bestand opgenomen, maar dit is vooral om ervoor te zorgen dat er ten minste iets op zijn plaats is, zodat u bij het maken van snelle prototypes, gemeenschappelijke elementen zoals kopjes, alinea's en lijsten een basisstijl hebt.
Ik zal hier niet te diep op ingaan, maar laten we kort ingaan op de belangrijkste verschillen tussen 960.gs en Blueprint. Ten eerste is Blueprint een CSS-framework dat is gebaseerd op 950px - het lijkt erg op 960 zoals het de basis lay-out dingen behandelt (BP gebruikt 24 kolommen met vergelijkbare benaderingen van opvulling en verhoudingen)? maar dat is waar Blueprint niet meer hetzelfde is.
Blueprint is een veel complexer, robuuster en veelomvattend raamwerksysteem. Het is gebouwd als een volwaardig stijlblad voor vrijwel elk element dat u kunt bedenken (keuzerondjes, tabellen, enz.). Er zijn dingen die ik leuk vind aan Blueprint, het meest opvallende is de vormgeving voor formulierelementen en de ingebouwde kennisgevingsklassen. Daarnaast bevat het een volledige reeks stijlen voor:
Het probleem dat ik had met Blueprint is dat het gewoon te ingewikkeld is om in de ontwerpfase te gebruiken? Een geheel nieuw ontwerp maken, betekent opnieuw formatteren van alles wat ze bieden, en het is vaak moeilijk om de enorme volledigheid bij te houden die BP biedt. Daarentegen biedt 960.gs slechts een opmaak: perfect om een ontwerper creatief te laten worden binnen realistische grenzen.
De 960 Grid is bijna beangstigend gemakkelijk te gebruiken (je kunt je zelfs afvragen: "Waarom heb ik dit niet eerder gebruikt?"), Met slechts een paar eenvoudige regels waaraan je je moet houden.
Nadat je het hebt gedownload, kijk je in de map die je zojuist hebt uitgepakt. Ik wil uw aandacht vestigen op twee mappen: "sketch_sheets" en "templates". De map "schetsvellen" bevat een PDF van de verschillende rastergroottes in een browservenster en de map "sjabloon" bevat sjablonen voor bijna elk grafisch programma onder de zon (zoals GIMP, Fireworks en Photoshop).
Het doel van een CSS Framework is om uw leven gemakkelijker te maken en u moet altijd op zoek gaan naar manieren om u te helpen de tijd die het kost om een ontwerp te maken te verminderen. Gebruik deze sjablonen bij het maken van een ontwerp in Photoshop, druk kopieën van de "schetsbladen" af wanneer u de details van een project met een klant bespreekt (en zorg ervoor dat u dit bekijkt voordat u begint!).
Sterker nog, ik zou willen voorstellen deze schetsbladen te gebruiken elke keer dat je een project start: ze laten je toe vrij te experimenteren voordat je jezelf afsluit tot een lay-out. Je hoeft maar 5 minuten te schetsen om een ontwerp te realiseren dat wel of niet werkt, in tegenstelling tot 50 minuten + als je het had ontworpen en gecodeerd.
Zodra u een basisovereenkomst hebt bereikt over het concept van de website, is het tijd om de sjabloonbestanden te openen. Dit is waarschijnlijk de belangrijkste reden waarom ik het gebruik van het 960-systeem leuk vind? het komt voorverpakt met sjablonen voor zowat elk programma dat je maar kunt bedenken. Ik gebruik toevallig Photoshop, dus hier is een screenshot van de meegeleverde sjabloon:
Het belangrijkste voordeel is eenvoudig: de sjabloon heeft vooraf ontworpen handleidingen voor alle hoofdinhoudskolommen die direct overeenkomen met het CSS-framework aan de coderingskant van dingen. U kunt snel uw kolommen met hoofdinhoud tekenen en alles in uw ontwerp overzichtelijk en overzichtelijk houden.
Ervaren ontwerpers zien dit misschien als "ontwerp met trainingswielen aan", maar eerlijk gezegd is er niets mis met een eenvoudig overlay-systeem om het kader voor een webontwerp te begeleiden..
Je moet nog steeds alles op de site ontwerpen (natuurlijk!), Maar door je ontwerp in overeenstemming te houden met de gidsen, zal het de ontwikkeling van de dingen veel gemakkelijker maken. Als bijkomend voordeel is een uniforme benadering van opvulling tussen inhoudscellen een uitstekende manier om uw ontwerp er professioneler uit te laten zien. Lees hier meer over waarom "Pixel Perfect Comps".
Nu je een ontwerp hebt vastgespijkerd, wordt het tijd dat we het hebben over de 960-rastersyntaxis. Zoals ik al zei bij de intro, kun je veel meer informatie vinden over het gebruik van en prototyping met CSS-frameworks bij Nettuts, dus ik ga hier alleen de basis behandelen.
Eerst moet u de juiste CSS-bestanden in uw ontwerp vermelden: reset.css (het reset-bestand dat verantwoordelijk is voor browser-eigenaardigheden), text.css (het ingebouwde typografie-stylesheet), en 960.css (of 960_24_col.css als u een rooster met 24 kolommen gebruikt). Meestal plaats ik al mijn site-specifieke styling in een apart bestand (meestal genoemd style.css), om ervoor te zorgen dat ik niets verbreek in het Framework.
Snelle tip: Refereer naar uw eigen stylesheet nadat u naar het Framework verwijst, zodat u specifieke aspecten van het framework kunt aanpassen zonder het Framework zelf te veranderen (en als u een fout maakt, hoeft u de Framework-bestanden niet opnieuw te downloaden en te overschrijven). Met deze 4 bestanden bent u nu klaar om te beginnen met het ontwerpen van uw site.
Hier volgt een kort overzicht van de syntaxis, afkomstig van de site 960.gs:
????
De eerste div is uw container, waarin uw inhoud wordt opgeslagen. Door de klasse te definiëren als "container_12", zegt u: "Ik wil dat deze container een raster van 12 kolommen heeft" (Dezelfde praktijk is van toepassing bij het gebruik van een 16 en 24 kolomraster).
Nu u de container hebt gedefinieerd als een lay-out met 12 kolommen, begint u uw site zodanig te structureren dat deze in de lay-out past. Als u naar de volgende div-elementen in de hiërarchie kijkt (zoals aangegeven door de tabbladen), ziet u de syntaxis voor hun definities. "Grid_7" en "grid_3" zijn eenvoudig genoeg om te begrijpen: je zegt dat dit div-element X-aantal kolommen zal innemen. 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Inmiddels weet ik dat je je afvraagt over de Div-elementen die zijn genest in de divisie "Grid_7". Welnu, je kunt divs nestelen die een gespecificeerd aantal kolommen binnen een andere div opnemen, zolang het de grootte van het bovenliggende raster niet overschrijdt. Bovendien moeten de eerste en laatste elementen "alfa" en "omega" hebben, afhankelijk van hun klassendefinitie. Dus in onze voorbeeldcode: "grid_2 alpha" is de eerste div die genest is binnen "grid_7", het volgende element "grid_3" bevindt zich in het midden (en daarom is er geen "alpha" of "omega" aan toegevoegd), en als laatste is "grid_2_omega" de laatste div genest binnen "grid_7". En aangezien 2 + 3 + 2 = 7, is de definitie correct.
Laten we, om dit hele proces te illustreren, een snel voorbeeld bekijken van het gebruik van het 960 Framework tijdens de ontwerpfase van een persoonlijk project van mij.
Het ontwerp zelf is vrij eenvoudig, maar het is de perfecte manier om je te laten zien hoe het raamwerk kan fungeren als een hulpmiddel tijdens het ontwerpproces.
De Cerberus-website: het voorbeeld dat we zullen gebruiken Mass Effect 2 is een van mijn favoriete games van de afgelopen 5 jaar en ik vond het een uitdaging om een site te maken voor de fictieve organisatie "Cerberus". De belangrijkste aspecten van de organisatie zijn: professionaliteit en technologische bekwaamheid, die ik wilde overbrengen met een strak ontwerp dat hun hele kleurenpalet gebruikte. Om te beginnen schetste ik het ontwerp voor de site (het zou hypocriet zijn als ik anders zou handelen, toch?).
Toen ik de ontwerpschets bekeek, zag ik hoe het ontwerp in het 960-raster kon worden gemaakt. Hieronder staat het HTML-skelet voor mijn site:
LogoCerberus: Kracht voor de mensheid
NavigatieInhoudsidebarsidebarsidebarfooter
Als je het zag, had ik het logo slechts twee kolommen bedekken, terwijl de ondertitel alle 12 velden opnam. Omdat de header div 12 kolommen lang was, kunnen subelementen tot 12 kolommen lang zijn. Met deze truc kon ik de koptekst maken, omdat het logo 2 kolommen in beslag nam en de rest leeg was (de afbeelding is eigenlijk de achtergrondafbeelding voor de header-div). En aangezien de subkop 12 kolommen breed was, vulde deze de volledige breedte onder het logo (omdat deze niet in alle inhoud kon passen binnen de 10 velden links na het logo).
Dit is eigenlijk een belangrijk onderscheid om te maken, en het is een ander ontwerptool dat je zou moeten gebruiken (en om veilig te zijn, zou je "voorvoegsel" of "achtervoegsel" kunnen gebruiken om ervoor te zorgen dat een bepaalde hoeveelheid ruimte wordt gereserveerd). De rest van de site is behoorlijk knip- en droog: 8 kolommen voor de hoofdinhoud en 4 voor de zijbalk. Elk zijbalkelement is een afzonderlijk div-element; ze stapelen op elkaar omdat ze beperkt zijn tot de breedte van 4 kolommen.
Om te illustreren hoe de site is opgezet, heb ik een schermafbeelding van de site gemaakt en duidelijk de kolommen gemarkeerd:
Nu is mijn eigen voorbeeld misschien niet de beste manier om je echt te inspireren om uit te gaan en een aantal moordenaar-webontwerpers te maken, dus hier zijn slechts enkele voorbeelden van het 960-systeem in actie. Je kunt meer vinden op de 960.gs-site.
Een van de meest aansprekende aspecten van een CSS Framework is het gemak dat zij bieden aan ontwerpers. Zoals elk ander hulpmiddel, moet u er echter voor zorgen dat u het op een relevante en waardevolle manier gebruikt. Probeer het niet te gebruiken als het niet in het ontwerp past, en laat het je creativiteit niet beperken. Voor de meeste projecten (vooral die voor complexe op kranten of blog geïnspireerde lay-outs) kan een CSS-framework een geweldig tijdbesparend hulpmiddel zijn, niet alleen voor het uitspugen van snelle HTML / CSS, maar voor het hele ontwerpproces..
Wilt u meer lezen over codering met CSS-frameworks? Bekijk Nettuts-bibliotheek met artikelen over het onderwerp (scroll naar beneden voor meer geavanceerde tuts).
Accentsconagua