Share
Grid 960 is een CSS Framework waarmee ontwikkelaars snel prototypes kunnen ontwerpen. Het zijn uitstekende hulpmiddelen voor het maken van mock-ups. Waarom? Omdat ze al het zware werk doen waardoor je snellere resultaten behaalt.
Dat klinkt leuk, maar hoe doen we dat? Er zijn veel artikelen op het internet die CSS-kaders opblazen of ondersteunen, maar geen enkele heeft inhoud die onervaren lezers kan helpen beslissen. Deze is anders. Dit artikel behandelt het hele prototypingproces. Stel je voor dat je een ontwerp krijgt en dat je een mock-up voor de klant nodig hebt. Dit artikel legt de basisprincipes van Grid 960 uit, plant het raster voor een ontwerp en codeert het prototype. Het voorbeeldontwerp maakt gebruik van de meeste mogelijkheden van Grid 960, waardoor u over een stevige kennisbasis beschikt om aan te werken. Nadat je het onderstaande ontwerp hebt gezien, is het tijd om te leren hoe Grid 960 werkt.
Grid 960 werkt door lessen via overerving te gebruiken. Grid 960 biedt twee rasters: 12 en 16 kolommen. De hoofdcontainer is altijd 960px breed. Het gebruik van 960 maakt de meeste kolomcombinaties mogelijk terwijl het gemakkelijk is om mee te werken. We gebruiken het raster met 12 kolommen om dit ontwerp te coderen, maar we zullen niet alle 12 kolommen gebruiken. Elke rastercel heeft een marge: 0 10px. Dit creëert een rugmarge van 20px. Bij het maken van een rij wordt de totale breedte van alle elementen opgeteld tot 960. Bekijk de demo-pagina van Grid 960. Je ziet een mooi raster met allerlei combinaties. Elke rastercel heeft een klasse die aangeeft welke breedte het zal zijn. Dit is het afbreken van kolombreedten voor een raster met 12 kolommen.
Elke breedte komt overeen met een klassennaam die op deze manier is gevormd: grid_X waarbij X een nummer is uit de bovenstaande lijst. Als je een blok met breedte 940 wilt, gebruik dan klasse grid_12. Hoe weet Grid 960 welke breedte het moet zijn? Elke grid_x is een selector container_Y .grid_X waarbij Y voor kolommen 12 of 16 is. Laten we in een code duiken. U kunt als volgt een raster van twee rijen maken in een container met 12 kolommen. Laat de eerste rij 940 px zijn en de tweede rij twee gelijke kolommen.
940px
460px
460px
Zorg er bij het maken van een rij in het raster voor dat alle onderliggende grid_X-nummers gelijk zijn aan het aantal kolommen dat u gebruikt. Dit zorgt voor de juiste breedte. Twee grid_6 div's optellen tot 12. Je bent niet beperkt tot dezelfde nummers. Je kunt ook 6, 4 en 2 gebruiken. Daar heb je het, een snel raster klaar voor inhoud. Nu je weet hoe Grid 960 werkt, kun je zien hoe je de mockup maakt.
Het visualiseren van het raster van het ontwerp is eenvoudig. Er is één rij voor de headerafbeelding, een rij voor de navigatiebalk, een rij met twee kolommen voor de titel en poster, een spatie, 4 kolommen, een spatie, dan een voettekst met 3 kolommen. Klik op de afbeelding voor de code.
Na het bekijken van de visual, zou je moeten begrijpen hoe je het grid van de mockup kunt maken. Gebruik de breedtes om de klassen # uit de lijst te halen en laat een code samengooien. Vergeet niet om de clearing-div aan het einde van elke rij toe te voegen. Vergeet niet de stilbladen in het Grid 960-pakket op te nemen.
Het skelet is klaar. Tijd om over het ontwerp te gaan overlappen. De groene balken zijn alleen divs met een achtergrondkleur en hoogte. De navigatiebalk heeft geen ingestelde hoogte. In plaats daarvan wordt het beheerst door de grootte van de links binnenin. Vergeet niet om ook de header afbeelding toe te voegen.
div.spacer background-colour: # 8FC73E; hoogte: 1em; div # navbar background-color: # 8FC73E; opvulling: 10px 0;
Pas de klasse toe om correcte grid_12 divs te corrigeren en stel de ID in.
De middelste kolommen hebben geen effecten nodig. Voeg wat tekst voor de plaatshouder toe om het ontwerp in te vullen. Je kunt hier wat maken. Voordat je het bovenste gedeelte aanraakt, ga je naar het voetgedeelte. In de schermafbeelding is de voettekst een effen kleur. Je kunt dit niet bereiken met de huidige code. Een wrapper div rond de onderste drie kolommen lost het probleem op. Dus je denkt, geen grote deal, plaats gewoon een div. Dat breekt het raster omdat Grid 960 vertrouwt op ouders en kinderen om de stijlen toe te passen (onthoud de selector container_12 .grid_4?) Een subgrid lost het probleem op. Grid 960 staat geneste rasters toe. Maak een subgrid door een grid_12 div toe te voegen en plaats dan de grid_4's erin. Bij het gebruik van geneste roosters hebben de kinderen-elementen speciale klassen nodig. Het eerste kind heeft een klasse "alfa" nodig en het laatste kind een klas &qout;omega "Bewerk de markering om de wijzigingen weer te geven en stilistische wijzigingen toe te passen in het voettekst.
div # footer background-colour: # e5e5e6;
Uitstekend! De voettekst heeft nu een effen achtergrondkleur en u kunt de grootte van de kolommen indien nodig aanpassen. Voeg wat dummy-tekst toe aan de voettekstkolommen voor nu en laat je verplaatsen naar navbar. De navigatiebalk is een eenvoudige ongeordende lijst. Voeg enkele links en de juiste styling toe.
div # navbar ul lijststijl: geen; weergave: blok; marge: 0 10px; div # navbar ul li float: left; marge: 0 1,5em; lettertype: vet 1em Arial;
Zoet. De pagina komt echt samen. Het enige dat overblijft is het creëren van de blokeffecten op het bovenste gedeelte. Dit is sinister dan het lijkt. Voordat we duiken, moet je enkele dingen over Grid 960 en CSS-raamwerken in het algemeen realiseren.
Zekere lezers hebben misschien iets gerealiseerd. De pagina is extreem stijf. Alles heeft een gedefinieerde grootte en het wijzigen van de grootte levert problemen op of breekt mogelijk het ontwerp. Ontwerpers offeren ook enkele van onze ontwerpdoelen op, omdat wat Grid 960 toestaat. Het voorbeeldontwerp was bijvoorbeeld 1000 px breed. Grid 960 maakt alleen rasters 960px breed, zodat de extra maat verloren gaat. Wat als je je pagina 1000px wilt maken in plaats van 960? Kortom, je kunt niet zonder enige zware aanpassing aan de code doen. Het raamwerk blokkeert ontwerpers in een reeks beperkingen. Stel dat de klant een ontwerp wenst dat breder of dunner is. De ontwerper moet waarschijnlijk de code die ze hebben geschreven verwijderen om de nieuwe doelen te bereiken. Er is nog een probleem dat nog niet is onthuld - kolommen met gelijke hoogte. Omdat de middelste kolommen allemaal dezelfde achtergrond hebben, lijken ze op gelijke hoogte te zijn. In de voettekst plaatst een wrapper div een achtergrond achter de 3 kolommen. Grid 960 geeft je geen kolommen met dezelfde hoogte. Er is natuurlijk een manier om dit alleen te bereiken. Aangezien we een prototype van een ontwerp maken, hoef je je geen zorgen te maken over de fijnere details over hoe het ontwerp zal functioneren tijdens de productie. Je probeert alleen de ideeën in dit stadium over te brengen. Er is ook nog een ander aspect van Grid 960 waarmee rekening moet worden gehouden voordat het bovenste deel wordt aangepakt. Raster 960 is gebaseerd op bemeten elementen en marges om een rij met de juiste grootte te maken. Als u opvulling of randen toepast, breekt het ontwerp. Als u dat doet, moet u de grootte van de div aanpassen om de wijzigingen weer te geven. Wees moe van dit. Het aanpassen van de afmetingen van elementen op twee plaatsen leidt altijd tot verwarring en maakt het ontwerp moeilijker te onderhouden. Dat gezegd hebbende. Laten we het bovenste gedeelte afwerken.
Gelukkig kun je rond gelijke kolommen in het bovenste gedeelte manoeuvreren. Aangezien de afbeelding aan de rechterkant als een ingestelde hoogte en breedte is, weten we de grootte van de andere kolom. Maak het blokeffect door een nieuwe div toe te voegen met een rand binnen de bestaande divs. Vergeet niet om de hoogtes in te stellen. Plaats geen vulling op de divs omdat dat de breedte van het blok zal veranderen en het raster zal breken. Geef in plaats daarvan een marge op een onderliggende element op. Dit zal de breedte van het blok niet veranderen. Een marge toepassen op een inline-element. Dit creëert het gewenste effect en de tekst past zich aan.
Gebruik een klasse in plaats van ID omdat de klasse topSection wordt toegepast op twee divs. Dit stelt ons ook in staat om de hoogtes gemakkelijker te veranderen. Kies een hoogte (dit nummer is helemaal aan jou) en maak een klasse.
div.topSection div border: solid 10px # e5e5e6; hoogte: 280 px; div.topSection div p margin: 10px;
Stoer! Laten we de voortgang bekijken.
Klaar om de twee dozen te vullen? Ga je gang en vul de linker een aantal met een voorbeeldtekst. Maak niet te veel of het zal de doos overstromen. Dit creëert een potentieel probleem in het uiteindelijke ontwerp. Hoe weet je hoeveel tekst te veel is? Voor het productieontwerp moet de ontwerper een functie maken om het X-aantal woorden alleen toe te staan de overflow te stoppen. Tijd om de posterafbeelding klaar te maken. Voordat u een afbeelding invoegt, moet u de afmetingen bepalen. Als je een goede wiskunde bent en het doosmodel begrijpt, weet je waarschijnlijk al hoe groot het zou moeten zijn. Als je dat niet doet, start FireBug dan op en neem een kijkje in de DOM. Klik op Inspecteren. Ga naar de div in kwestie en klik erop. Open het tabblad Layout. FireBug geeft een handige boxmodelreferentie weer. Bekijk de afbeelding voor hulp. Klik op de afbeelding voor volledige grootte.
De schermafbeelding toont de poster div is 360x280. Zoek een afbeelding en maak een stijl. Ik besloot om de afbeelding de gehele div te laten vullen (in tegenstelling tot het voorbeeldontwerp). Als je een 10px-marge wilt maken, zorg dan dat de dimensies met 20 px aan elke zijde worden verkleind.
img # poster width: 360px; hoogte: 280 px;
Je zou dit moeten krijgen. De mockup is voltooid. Voel je vrij om wat echte tekst in te voeren en het beeld te veranderen.
Nu het prototype klaar is, om te inventariseren wat er is gedaan. Je bent erin geslaagd om snel een ontwerp te prototypen. Grid 960 creëerde eenvoudig het raster voor ons. Waar gaan we naartoe vanaf hier? Natuurlijk zouden we de klant laten zien en zien wat ze denken. Er zijn echter een paar kanttekeningen. Heb je dit ontwerp getest in IE6 of IE7? Nee. Moeten we? Nee. Dit is een prototype. Dit is hoe het eruit zou zien in de productie. Het is normaal dat eventuele browser-quirks vóór de productie worden uitgewerkt. Wat als de klanten een complexer ontwerp willen maken? In dit geval zult u snel de limieten van het framework beginnen te zien. Wat als het ontwerp vloeibaar of elastisch moet zijn? Het kader zal dat niet doen. Je zou helemaal opnieuw moeten beginnen. Vergeet niet dat CSS-frameworks niet al uw problemen oplossen, maar ze helpen wel bij sommigen. Grid 960 en anderen zijn geweldig voor het samenbrengen van prototypen. Je kunt net zo goed de concepten van Grid 960 gebruiken in de productiecode, maar het is niet aan te raden om gedurende de hele productie met een raamwerk te blijven werken. CSS-kaders zijn net als elk ander gereedschap, ze hebben hun toepassingen. Met dat in gedachten, ga je verder en prototype!
Accentsconagua