Besplatno 960.GS CSS predložak za fotografije i poduke
Voljeli ili mrzili, 960.gs stvara nevjerojatno brzo prototipiranje. Korištenjem unaprijed postavljenih predavanja možete izvesti prilično složene rasporede s malo i bez napora.
Danas vam donosimo besplatni predložak od jedne stranice, u potpunosti šifriran korištenjem 960.gs. Predložak ima nekoliko sjajnih CSS3 efekata i koristi @ font-face za implementaciju neke prekrasne prilagođene tipografije. Ispod ćete pronaći preuzimanje i osnovni detaljni vodič za izradu vlastitog.
Predložak možete u potpunosti preuzeti besplatno i koristiti ga koliko god želite s atribucijom nula.
Preuzmite predložak
- Pregled u pregledniku
- Preuzmite .ZIP
Evo kratkog pregleda kako izgleda predložak:
Preuzmite resurse 960.GS
Prvo što želite učiniti je da prijeđete na web mjesto 960 Grid System i kliknete gumb za preuzimanje u gornjem lijevom dijelu stranice.
U njemu se nalazi mnoštvo stvari, ali doista su nam potrebne tri CSS datoteke: reset.css, text.css i 960.css. Ovo su standardne komponente na kojima je izgrađen mrežni sustav. Poništite i tablice stilova teksta potpuno su neobvezni, ali mi ćemo ih koristiti kako bismo osigurali da sve ostane lijepo i dosljedno u raznim preglednicima.
U vodiču ispod pretpostavit ćete da ste prilično upoznati i sa CSS-om i sa 960.gs. Ako vam treba tečaj pad sustava na mrežnim sustavima, pogledajte moj 960 vodič u Šest revizija.
Korak 1: Pokrenite svoje HTML i CSS datoteke
Uz CSS datoteke koje dolaze s 960.gs, trebat će nam i svoje. Na svom računalu stvorite direktorij, ubacite preuzete datoteke i stvorite indeks.html datoteku i datoteku style.css.
Zalijepite sljedeći kôd u svoj HTML da biste započeli:
Mi smo u osnovi upravo povezani s našim različitim CSS datotekama (vjerojatno je previše za jednu web stranicu, ali ova je stvorena da bi se proširio) i pokrenuli smo body HTML.
Dizajn sadrži tanke sive trake na vrhu i na dnu stranice. Želimo da se ovi protežu cijelom stranom, tako da ih postavljamo izvan 960 diva.
Dalje, između zaglavlja i podnožja nalazi se div s klasom „container_12“. Budući da koristimo verziju sustava 960 sa 12 stupaca, to će stvoriti div koji se proteže većim dijelom preko stranice i automatski je centriran vodoravno.
2. korak: Fontovi
Za ovaj projekt koristit ćemo dva prilagođena ne-web fontova: Lobster i Caviar Dreams. Oba se mogu naći u FontSquirrel @ Font-Face Kit knjižnici.
Preuzmite komplete za svaki font i stavite razne datoteke fontova u datoteku projekta. U CSS-u koji se isporučuje sa svakim kitom trebali biste pronaći @ font-face kod za umetanje tog fonta. Uzmite isječak za svaki font i zalijepite ga u datoteku stye.css.
Pomoću ovog koda sada možemo uključiti te fontove u naše skupove fontova tako što ćemo jednostavno upisati "Lobster13Regular" ili "CaviarDreamsRegular".
3. korak: zaglavlje
Budući da smo u HTML već dodali zaglavlje, sve što trebamo učiniti je pojaviti se dodati neki osnovni stil.
U osnovi, sve što smo ovdje napravili daje zaglavlju visinu i boju pozadine.
4. korak: HTML za navigaciju
Prvo što se pojavi nakon zaglavlja je navigacija. Ovo je malo škakljivo jer se pluta na desnoj strani stranice. Mogli bismo postaviti klasu 960, a zatim koristiti naredbu push, ali puno je lakše jednostavno ne primijeniti nijednu klasu na div i pomicati je točno sa CSS-om.
Za HTML nam treba samo standardni popis bez narudžbe s nekim vezama. Ovdje sam ubacio neke veze rezerviranja mjesta, ali očito ćete to željeti prilagoditi za svoju web lokaciju.
5. korak: Navigacija CSS
Zatim moramo postaviti čitav niz stilova za navigaciju. Veze, neuređene liste, stavke popisa i lebdeće efekte sve je potrebno razraditi.
Primijetite da smo font postavili Caviar Dreams kao što smo saznali gore i pobrinuli se da bude popisano nekoliko sigurnosnih kopija u slučaju da preglednik ne učita odgovarajući font.
Najčudnije je što smo koristili i plutajući lijevi i plutajući desni. Da bi se stavke popisa pojavile u retku umjesto naslaganih, moramo pomicati lijevo "ul li". Da bi se komplet kao cjelina pridržavao desnoj strani našeg kontejnera div, plutali smo #nav desno.
Sve ostalo je samo gomila osnovnih stilova kao što su boja, veličina fonta itd. Da bih razlikovao vezu od kursora, primijenio sam jednostavno podvlačenje.
U ovom bi trenutku vaša stranica trebala početi dobivati oblik. Pazite da izgleda blizu pregleda u nastavku.
6. korak: naslov HTML-a
Nakon navigacije, dodajte div s idom "naslov" i klasom "grid_12". Grid_12 klasa će učiniti širinu div jednaka onoj za cijeli spremnik. Unutar tog diva stavite oznaku h2 i oznaku stavka s nekim sadržajem.
Imajte na umu da nakon navigacije i naslova div nalazi se div s klasom „jasno“. Ovako 960 Grid System čisti prethodno implementirane plove. Obavezno to uključite kad god želite pokrenuti novi niz sadržaja.
7. korak: naslov CSS-a
Zatim dodajte stilove za naslov, oznaku h2 naslova i oznaku stavka za naslov. Postavio sam h2 na 50px jastoga, a odlomak na 25px Caviar Dreams.
Uz to, vaša bi stranica sada trebala imati gornju traku, područje za navigaciju i lijep veliki naslov.
8. korak: HTML velike fotografije
Da bismo dodali fotografiju, upotrijebit ćemo prazan div s klasom grid_12 i pozadinu ćemo postaviti pomoću CSS-a.
9. korak: Big Photo CSS
Za CSS smo postavili pozadinsku sliku za div, dali mu 3px obrub i primijenili CSS3-box sjenu. Bijela obrub ne bi se pojavila na bijeloj pozadini, tako da sjena daje malo dubine slici.
10. korak: HTML stavke retka
Posljednji komad HTML-a koji nam treba jesu okviri i tekst na dnu stranice. Stilizirati ćemo ih s klasom kako bismo kasnije lakše dodali više.
Za izgradnju ovog odjeljka želimo dva stupca: jedan za sliku i jedan za tekst pored njega. Ovdje nam 960.gs olakšava posao. Budući da koristimo verziju sa 12 stupaca, želimo da se njihov broj od ukupno dvanaest proteže sve do kontejnera.
Primjenjujući klasu „grid_4“ nakon koje slijedi klasa „grid_8“, dobivamo dva stupca, od kojih je prvi polovica širine drugog (8 + 4 = 12).
Obratite pažnju da smo udvostručili svoj kôd i umetnuli različite slike. To nam daje dva područja "lineItem". Jednostavno dodajte još jedan duplikat da biste dodali treći ili četvrti.
11. korak: stavka CSS stavke
Dalje dodamo hrpu stylinga u ovo područje kako bi izgledalo lijepo. Dajte slikama sjenu i obris te primijenite odgovarajuće fontove.
Napominjemo da smo ovdje koristili "obris" umjesto "granica". Ovo je uredan CSS trik koji vam u osnovi omogućava obrub slike koja ne usisava vaš izgled.
Kada završite, stavke retka trebala bi izgledati fenomenalno i podijelit će se u jasno definirane stupce.
12. korak: CSS podnožja
Posljednji korak je primjena istih stilova na podnožje kao i na zaglavlje. To daje mjestu lijep teški kontrast na dnu i vrhu.
Konačni rezultat
To bi vam trebalo dati gotov proizvod! Primijetite da je većina našeg rada zaista bila u stiliziranju predmeta koje smo postavili na stranicu. Nismo se trošili skoro na brigu oko pozicioniranja. Ovo je glavni izvlačenje mrežnih sustava poput 960 i Blueprint.
Svakodnevno se možemo svađati sa semantikom, ali na kraju, ovi alati pomažu vam da se više fokusirate na dizajn, a manje na probleme s izgledom. Vjerojatno je da što ste iskusniji s CSS-om, manje ćete ukazivati na potrebu korištenja mrežnog sustava za izvršavanje izgleda za vas, ali do tada je lijepo rešavati svoje probleme prije nego što se uopće pojave.
Zaključak
Kako je to neizbježno u ovakvim vrstama postova, nekoliko će ljudi bez sumnje ostaviti komentare koji su temeljni mrežni sustavi. Istina je da ih rijetko koristim. Međutim, vidim njihovu vrijednost i uživam s njima razgovarati da vidim što mogu smisliti. Dno crta, ako vam se ne sviđa 960.gs, ne preuzimajte predložak!
Međutim, ako vam je ugodno sa mrežnim sustavima i volite besplatne stvari, preuzmite datoteku i uklonite je! Ako ga koristite u projektu, bacite vezu ispod (izborno) kako bih mogao provjeriti kako ste ga implementirali i produžili dizajn. Ako vam treba prijedlog, ta velika fotografija vrišti da bi se pretvorila u jQuery klizač.
