Gratis 960.GS CSS-fotografiesjabloon en zelfstudie
Houd ervan of haat het, de 960.gs zorgt voor ongelooflijk snelle prototyping. Door vooraf ingestelde klassen te gebruiken, kunt u met weinig tot geen moeite vrij complexe lay-outs realiseren.
Vandaag brengen we u een gratis sjabloon van één pagina, volledig gecodeerd met de 960.gs. De sjabloon heeft een paar handige CSS3-effecten en gebruikt @ font-face om een aantal prachtige aangepaste typografie te implementeren. Hieronder vindt u de download en een eenvoudige stapsgewijze zelfstudie voor het bouwen van uw eigen.
U kunt de sjabloon volledig gratis downloaden en gebruiken zoals u wilt zonder attributie.
Download de sjabloon
- Voorbeeld in browser
- .ZIP downloaden
Hier is een korte preview van hoe de sjabloon eruit ziet:
Download de bronnen voor 960.GS
Het eerste dat u wilt doen, is naar de 960 Grid System-website gaan en op de downloadknop linksboven op de pagina klikken.
De download bevat heel veel dingen, maar eigenlijk hebben we alleen drie CSS-bestanden nodig: reset.css, text.css en 960.css. Dit zijn de standaard componenten waarop het rastersysteem is gebouwd. De reset- en tekststijlbladen zijn volledig optioneel, maar we zullen ze gebruiken om ervoor te zorgen dat alles mooi en consistent blijft in verschillende browsers.
De onderstaande tutorial gaat ervan uit dat je redelijk bekend bent met zowel CSS als 960.gs. Als je een spoedcursus op rastersystemen nodig hebt, bekijk dan mijn 960-gids bij Six Revisions.
Stap 1: Start uw HTML- en CSS-bestanden
Naast de CSS-bestanden die bij de 960.gs worden geleverd, hebben we onze eigen bestanden nodig. Maak een map op uw computer, voeg de gedownloade bestanden toe en maak een index.html-bestand en een style.css-bestand.
Plak de volgende code in je HTML om te beginnen:
We hebben in feite zojuist een koppeling gemaakt naar onze verschillende CSS-bestanden (waarschijnlijk veel te veel voor een enkele webpagina, maar dit is gebouwd om uit te breiden) en de body-HTML gestart.
Het ontwerp heeft dunne grijze balken bovenaan en onderaan de pagina. We willen dat deze zich helemaal over de pagina uitstrekken, dus plaatsen we ze buiten de 960-div.
Vervolgens bevindt zich tussen de kop- en voettekst een div met een klasse van "container_12". Aangezien we de 12-koloms versie van het 960-systeem gebruiken, zal dit een div creëren die het grootste deel van de pagina beslaat en automatisch horizontaal wordt gecentreerd.
Stap 2: de lettertypen
We gebruiken voor dit project twee aangepaste niet-weblettertypen: Lobster en Caviar Dreams. Beide zijn te vinden in de FontSquirrel @ Font-Face Kit-bibliotheek.
Download de kits voor elk lettertype en plaats de verschillende lettertypebestanden in uw projectbestand. In de CSS die bij elke kit wordt geleverd, moet u de @ font-face-code vinden om dat lettertype in te sluiten. Pak het fragment voor elk lettertype en plak het in je stye.css-bestand.
Met deze code kunnen we deze lettertypen nu opnemen in onze lettertypestapels door simpelweg 'Lobster13Regular' of 'CaviarDreamsRegular' te typen.
Stap 3: Koptekst
Omdat we de koptekst al aan onze HTML hebben toegevoegd, hoeven we alleen maar een eenvoudige styling toe te voegen.
Alles wat we hier hebben gedaan, krijgt de koptekst een hoogte en achtergrondkleur.
Stap 4: Navigatie-HTML
Het eerste dat na de koptekst verschijnt, is de navigatie. Dit is een beetje lastig omdat het aan de rechterkant van de pagina zweeft. We zouden een 960-klasse kunnen instellen en vervolgens het push-commando kunnen gebruiken, maar het is een stuk eenvoudiger om gewoon geen enkele klasse toe te passen op de div en deze goed te laten zweven met CSS.
Voor de HTML hebben we alleen een standaard ongeordende lijst met enkele links nodig. Ik heb hier enkele tijdelijke aanduidingen geplaatst, maar u wilt dit natuurlijk aanpassen voor uw eigen site.
Stap 5: Navigatie-CSS
Vervolgens moeten we een hele reeks stijlen instellen voor de navigatie. Links, ongeordende lijsten, lijstitems en zweefeffecten moeten allemaal worden uitgewerkt.
Merk op dat we het lettertype hebben ingesteld op Caviar Dreams zoals we hierboven hebben geleerd en ervoor hebben gezorgd dat er een paar back-ups zijn gemaakt voor het geval de browser niet het juiste lettertype laadt.
Het vreemdste hier is dat we zowel een drijver links als een drijver rechts hebben gebruikt. Om ervoor te zorgen dat de lijstitems in een regel verschijnen in plaats van gestapeld, moeten we de "ul li" naar links laten zweven. Om de set als geheel aan de rechterkant van onze container-div te laten hechten, hebben we de #nav naar rechts gedreven.
Al het andere is gewoon een heleboel basisstijlen, zoals kleur, lettergrootte, enz. Om de link bij zweven te onderscheiden, heb ik een eenvoudige onderstreping toegepast.
Op dit punt zou uw pagina vorm moeten krijgen. Zorg ervoor dat het lijkt op het onderstaande voorbeeld.
Stap 6: Headline HTML
Voeg na de navigatie een div toe met een id van "headline" en een klasse van "grid_12". De klasse grid_12 maakt de breedte van de div gelijk aan die van de hele container. In die div plaats je een h2-tag en een alinatag met wat inhoud.
Merk op dat er na de navigatie en headline divs een div is met een klasse van "clear". Zo wist het 960 Grid System eerder geïmplementeerde drijvers. Zorg ervoor dat je dit erin gooit wanneer je een nieuwe rij met inhoud wilt beginnen.
Stap 7: Kop CSS
Voeg vervolgens stijlen toe voor de kop, de kop h2-tag en de kop alineatag. Ik heb de h2 ingesteld op 50px Lobster en de alinea op 25px Caviar Dreams.
Daarmee zou je pagina nu een bovenbalk, een navigatiegebied en een mooie grote kop moeten hebben.
Stap 8: The Big Photo HTML
Om de foto toe te voegen, gebruiken we een lege div met de klasse grid_12 en stellen we de achtergrond in met CSS.
Stap 9: The Big Photo CSS
Voor de CSS hebben we een achtergrondafbeelding voor de div ingesteld, deze een 3px-rand gegeven en een CSS3-box-schaduw toegepast. De witte rand zou niet op een witte achtergrond verschijnen, dus de schaduw geeft het beeld enige diepte.
Stap 10: HTML van regelitem
Het laatste stukje HTML dat we nodig hebben, zijn de vakjes en de tekst onderaan de pagina. We zullen deze met een klasse stylen om het later gemakkelijk te maken om er meer toe te voegen.
Om deze sectie te bouwen willen we twee kolommen: een voor de afbeelding en een voor de tekst ernaast. Dit is waar de 960.gs het ons gemakkelijk maakt. Aangezien we de 12-koloms versie gebruiken, willen we dat ons aantal in totaal twaalf zich helemaal over de container uitstrekt.
Door de klasse "grid_4" toe te passen gevolgd door de klasse "grid_8" krijgen we twee kolommen, waarvan de eerste de helft van de breedte van de tweede is (8 + 4 = 12).
Merk op dat we onze code hebben verdubbeld en verschillende afbeeldingen hebben ingevoegd. Dit geeft ons twee van de "lineItem" -gebieden. Voeg gewoon nog een duplicaat toe om een derde of vierde toe te voegen.
Stap 11: CSS voor regelitems
Vervolgens voegen we een heleboel styling toe aan dit gebied om het er mooi uit te laten zien. Geef de afbeeldingen een schaduw en omtrek en pas de juiste lettertypen toe.
Merk op dat we hier "outline" hebben gebruikt in plaats van "border". Dit is een handige CSS-truc waarmee je in wezen een afbeeldingsrand hebt die je lay-out niet verpest.
Als u klaar bent, zien uw regelitems er geweldig uit en worden ze onderverdeeld in duidelijk gedefinieerde kolommen.
Stap 12: CSS van voettekst
De laatste stap is om dezelfde stijlen op de voettekst toe te passen als op de koptekst. Dit geeft de site een mooi zwaar contrast aan de onder- en bovenkant.
Eindresultaat
Dat zou u een werkend afgewerkt product moeten opleveren! Merk op dat het meeste van ons werk echt bestond uit het stylen van de objecten die we op de pagina plaatsten. We hebben ons bijna geen zorgen gemaakt over positionering. Dit is de hoofdtabel van rastersystemen zoals 960 en Blueprint.
We kunnen de hele dag over semantiek discussiëren, maar uiteindelijk helpen deze tools je om je meer op design te concentreren en minder op lay-out ellende. Het is waarschijnlijk dat hoe meer ervaren u wordt met CSS, hoe minder u de noodzaak zult zien om een rastersysteem te gebruiken om de lay-out voor u uit te voeren, maar tot die tijd is het fijn om uw problemen op te lossen voordat ze zich voordoen.
Gevolgtrekking
Zoals onvermijdelijk is in dit soort berichten, zullen verschillende mensen ongetwijfeld reacties achterlaten op basissystemen. De waarheid is dat ik ze zelden gebruik. Ik zie echter wel hun waarde in en ik vind het leuk om met ze te spelen om te zien wat ik kan bedenken. Kortom, als je 960.gs niet leuk vindt, download de sjabloon dan niet!
Als je echter vertrouwd bent met rastersystemen en van gratis dingen houdt, download dan het bestand en pas het aan! Als je het in een project gebruikt, gooi dan een link hieronder (optioneel), zodat ik kan controleren hoe je het hebt geïmplementeerd en het ontwerp hebt uitgebreid. Als je een suggestie nodig hebt, schreeuwt die grote foto om te worden veranderd in een jQuery-schuifregelaar.
