Blueprint este un cadru CSS care vă poate economisi timp și dureri de cap atunci când lucrați la orice proiect care implică HTML și CSS, fie că este vorba cu Rails, PHP, sau doar o pagină HTML. În acest tutorial veți obține o privire la lucrările interioare de Blueprint și vom lua o privire la aplicația demo care utilizează Blueprint pentru a obține o idee mai bună despre modul de utilizare a utiliza de fapt cadru.

1. Ce este CSS Blueprint?

Dacă sunteți ca mine, ca în mai mult un dezvoltator decât un designer, atunci sunteți familiarizat cu procesul de lansare a unui nou proiect și fără să știți ce să faceți cu CSS. Știți că designul dvs. se va schimba probabil odată cu desfășurarea proiectului, dar doriți să aveți un design frumos, de la început. Deci petreceți ceva timp scriind câteva CSS care funcționează în Firefox și Safari, așteptați, nu uitați IE, corect, bine. Apoi scrieți câteva coduri HTML pe care credeți că le veți folosi și lucrați la obținerea tuturor spațiilor care să arate bine. Grozav! Terminat! Acum, trei zile mai târziu, cerințele pentru proiectul dvs. s-au schimbat și vă regăsiți în reproiectarea aspectului din nou. Hmm ...

Acum, chiar dacă ești un designer rockstar care are deja toate chestiile astea create de CSS sau dacă nu ești îngrijorat de modul în care aspectul tău se va schimba în timp, pentru că lucrezi dintr-un șablon PSD sau ceva, asta nu înseamnă că nu este nimic de învățat aici. Blueprint vă poate oferi în continuare unele instrumente, astfel încât să puteți ...

Petreceți-vă timpul să inoveze, să nu replicați.

Acesta este motto-ul anunțat

blueprintcss.org

Și cred că asta este exact ceea ce realizează Blueprint. Blueprint oferă o bază solidă pentru a vă construi proiectul pe lângă. Ea face acest lucru prin furnizarea de defecte implicite în toate browserele, tipografia implicită tipărite, un cadru de rețea, forme frumoase și o foaie de stil imprimată construită cu ajutorul imprimantelor. Să aruncăm o privire la modul în care Blueprint realizează acest lucru:

2. Fișiere sursă Blueprint

1. 
   reset.css
   
   Acest fișier stabilește valori implicite în toate browserele. Sunt sigur că suntem cu toții familiarizați cu începerea unui nou proiect, trecerea la fișierul CSS principal și adăugarea câtorva stiluri implicite selectorului de corp, cum ar fi "marja: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; sau ceva de-a lungul acestor linii. Aceasta este ceea ce reset.css face, și mai mult. Se resetează stilurile implicite pentru spațiere, tabele, fonturi etc., astfel încât să puteți lucra dintr-o artă curată.

2. 
   typography.css
   
   Acest fișier stabilește câteva tipografii implicite. Nu voi explica toate stilurile, dar voi spune că acesta este partea mea preferată din Blueprint, pentru că, pentru mine, nu este nimic mai descurajant decât încercarea de a întocmi o pagină și de a vedea unele texte negre Times New Roman blocate în sus în colțul din stânga sus al unei pagini. Ugh. Modelele tipography.css de la Blueprint mă împiedică să văd asta din nou. Tipografia.css stabilește, de asemenea, unele stiluri foarte frumoase în jurul dimensiunilor fontului, înălțimile de linie, stilul implicit al meselor etc..

3. 
   grid.css
   
   Acest fișier gestionează porțiunea de aspect a rețelei de plan. Vom arunca o privire la clasele pe care le utilizează într-un pic. Un lucru important de notat cu grila, în mod implicit, folosește o lățime de 950 de pixeli, cu 24 de coloane fiecare având o lățime de 30 de pixeli și o margine de 10 pixeli între coloane. Acest lucru poate suna constrâns, dar dacă acest lucru nu este aspectul dorit, puteți folosi întotdeauna un generator CSS Grid Blueprint pentru a genera un aspect personalizat al rețelei. Dacă acest ultim paragraf te-a confundat complet, te rugăm să citești mai departe pe măsură ce vom construi un aspect folosind o grilă într-un pic. Dacă nu sunteți familiarizați cu aspectul rețelei CSS și vreți un fundal, Raj's
   
   Ce CSS Grid Framework ar trebui să utilizați pentru Web Design?
   
   este un bun intro.

4. 
   ie.css
   
   Blueprint acceptă IE, așa că, desigur, are nevoie de propria sa foaie de stil pentru a avea grijă de acele mici detalii care fac IE atât de special :) Lucrul frumos este că Blueprint nu se ocupă de acest lucru pentru tine, astfel încât toate stilurile sale de bază vor funcționa în toate browserele majore (cred că suportă chiar IE 5).

5. 
   print.css
   
   Acest fișier stabilește câteva stiluri de imprimare prestabilite, astfel încât versiunile tipărite ale site-ului dvs. să arate mai bine decât ar fi de obicei. Fișierul print.css are, de asemenea, o opțiune în care puteți completa numele dvs. de domeniu astfel încât linkurile relative să fie afișate în paranteze în spatele legăturii de text din versiunea imprimată a paginii dvs. Fără a completa această secțiune, numai linkurile la distanță vor fi imprimate corect. Consultați partea de jos a fișierului print.css src, legat mai sus.

6. 
   forms.css
   
   Acest fișier oferă forme clare implicite, precum și clase pentru notificări de eroare sau chiar notificări rapide dacă folosiți ceva similar cu Rails. Din moment ce aceasta este singura sectiune pe care nu o voi acoperi mai detaliat, aici sunt cateva dintre stilurile de formular implicite:

   

Acest lucru înseamnă că trebuie să includ șase foi de stil diferite?

Nu. Blueprint vine cu trei foi de stil comprimate pentru paginile dvs. HTML, screen.css care conține # 1-3 și 6 de mai sus, print.css și ie.css. Motivul pentru care am subliniat diferitele părți ale cadrului de mai sus se datorează faptului că cadrul este modular, fiecare dintre aceste piese funcționează independent una de cealaltă. Lucrul frumos este că dacă decideți că un aspect al Blueprint-ului, cum ar fi aspectul unei rețele, nu se potrivește proiectului dvs., dar totuși doriți să beneficiați de reset.css și typography.css, nu trebuie să utilizați grilă, dar celelalte stiluri vor funcționa în continuare.

3. Să construim un aspect cu Blueprint

Acest site este o idee pe care mi-am dat-o în creier, așa că am crezut că o voi aduce la viață aici. Este un site în care oamenii care preferă să scrie romane ca un hobby pot să revadă romane de la alți scriitori de hobby, precum și să încarce propriile lor pentru a fi revizuite.

Îmi dau seama că toți designerii de rockstar care au rămas pe la început sunt acum pe punctul de a pleca după ce au analizat designul meu, dar interesant despre acest design este că nu am scris nici un CSS pentru asta. Acest design utilizează numai stiluri Blueprint și, deși nu este sfârșitul tuturor modelelor, acesta oferă un design flexibil și frumos pentru proiectul meu. Din moment ce designul meu este probabil schimbat, Blueprint îmi face ușor să îmi actualizez aspectul, iar atunci când site-ul meu este pe deplin funcțional, mă pot gândi la adăugarea unor stiluri proprii pentru a face lucrurile să arate mai frumoase.

4. Sparge-o jos

Șeful documentului

Acesta este modul în care este tipic tag-ul ar trebui să arate atunci când utilizați Blueprint. Trebuie să includeți fișierele CSS ale cadrului, care constă din ecran.css, print.css și ie.css.

Un lucru minunat despre Blueprint: este doar CSS, deci poate fi suprasolicitat ca orice alt CSS. Acesta este modul în care pluginurile Blueprint funcționează. În acest exemplu, folosesc pluginul Blueprint de tip fantezie care oferă un stil de tipografie fantezist. Puteți vedea că am conectat la fișierul CSS tip fantezie sub fișierele CSS ale cadrului, astfel încât CSS de tip fantezie are capacitatea de a suprascrie stilurile definite de cadru. În acest scop, există

mai multe pluginuri BP disponibile

care pur și simplu suprascrie aspecte ale cadrului sau adăuga stiluri noi pentru tine de a utiliza.

În cele din urmă, ar trebui să includeți fișierul dvs. CSS unde puteți suprascrie stiluri din cadru și puteți adăuga stilul dvs. pe pagină.

Antetul paginii

  
 
 
 
 
 
 
Obțineți opinii despre ultimul dvs. roman și citiți despre ce scriu ceilalți.
 
 
 

Cel mai important lucru pe care trebuie să-l observați despre acest cod: grilă dvs. trebuie să fie înconjurat de un

cu o clasă de "container", altfel nu se va afișa ca o rețea.

---

etichetele sunt utilizate de către Blueprint pentru a separa secțiunile paginii dvs. vertical. Clasa "alt" vă este adusă de pluginul de tip fantezist și oferă o modalitate frumoasă de a aduce un anumit text (poate fi aplicat oricărui element de text).

Conținut principal

 
 
Cartea recomandată: "Lumea fără noi"
 
  Lorem ipsum dolor stau amet, consectetuer adipiscing elit. 
 
 Cras sagittis. Fusce porttitor felis sed massa. În hac habitasse platea dictumst. 
 
 
 
Încărcați o carte
 
 Nam viatae tortor id ante sodales facilisis. 
 
 
 
Scrie o recenzie
 
 Nam viatae tortor id ante sodales facilisis. Mauris ipsum. 
 
 
 
 
 
Cărți recente
 
 Igienă 
29 noiembrie 2008
 
de Craven
 
 
 
 
Recenzii recente
 
 Thor a revizuit igiena 
Evaluare: 4/5
 Citiți această recenzie 
 
 
 

Există o mulțime de lucruri importante în acest fragment de cod! Să începem cu vârful

. Această etichetă declară cea mai mare div divizată pe acea pagină, cea care conține secțiunea Cartea recomandată, precum și cele două secțiuni mai mici de mai jos. Clasa "span-17" se referă la aspectul grila Blueprint. Se declară că lățimea acestui div ar trebui să cuprindă 17 din cele 24 de coloane de pe pagină. Cealaltă clasă utilizată, "colborder", este scurtă pentru granița coloanei și îi spune Blueprint să pună o margine în dreapta acestui div între ea și bara laterală.

Important: folosirea clasei "colborder" ocupă de fapt o coloană întreagă. Din moment ce principalul nostru div folosește 17 coloane (span-17), te-ai aștepta ca bara laterală să poată ocupa 7 coloane (din 17 + 7 = 24, numărul de coloane pe pagina noastră), dar din moment ce proprietatea "colborder" o coloană la sine, aceasta lasă doar 6 coloane rămase pentru bara laterală div să ocupe (17 + 1 + 6 = 24).

Înainte de a ajunge la bara laterală, trebuie să ne uităm la cele două diviziuni mai mici, cele intitulate "Încărcați o carte" și "Scrieți o recenzie". Aceasta este de fapt o grilă Blueprint imbricată în altă rețea Blueprint. Deoarece grila interioară este imbricată în interiorul unei coloane div divizând 17, lățimea maximă pentru această rețea, în loc de 24, este de 17.

Deci, prima div are clasele "span-8" și "colborder", adică lățimea va cuprinde 8 coloane și va avea o margine spre dreapta. Al doilea div are clase "span-8" și "last". Aceasta este o important parte a cadrului de rețea Blueprint. Cea mai dreaptă coloană dintr-o rețea trebuie să utilizeze clasa "ultimă". Acest lucru îi spune BP că aceasta este ultima coloană din această rețea și nu mai are nevoie de spațiu. Observați cum am avut loc pentru 17 coloane pentru început, fiecare dintre divs a cuprins 8 coloane și proprietatea "colborder" a ocupat ultima coloană (8 + 8 + 1 = 17).

OK, înapoi la bara laterală. Bara laterală div are clase de "span-6" și "last". Sunt sigur că voi ați prins acum modul în care funcționează aceste clase. Această bara laterală completează grila pe care a început-o diviziunea principală-17 div. În cazul în care nu ați observat, clasa "span- #" poate lua orice număr între 1 și 24, cu excepția cazului în care decideți să utilizați o rețea mai mare, caz în care clasa "span- #" poate lua orice număr atât timp cât numărul este mai mic decât numărul total de coloane din grilă.

Este vorba despre cel mai simplu cod HTML pe care l-aș putea găsi pentru a demonstra grilă.

 
 
 Antet 
 
 Bara laterală stângă 
 
 Conținut principal 
 
 Bara laterală dreaptă 
 

Să ne uităm la câteva dintre clasele CSS pe care le-am folosit în aspect.

1. "capace": Această clasă este utilizată în titlurile bara laterală. Acesta este adus la noi prin plugin-ul de tip fantezie și oferă un stil frumos pentru titluri capitalizate.
2. 'box': Aceasta este una excelentă pentru afișarea elementelor din listă. Distinge cu ușurință aceste elemente de restul paginii și oferă o marjă frumoasă între elementele și umplutura plăcută pentru elementele din interior.
3. 'quiet': Aceasta este o clasa CSS care schimba culoarea textului ca fiind acel gri moale pe care il vedeti in textul bara laterala.
4. 'prepend-top': Acesta este folosit în secțiunea 'Recenzii recente' din bara laterală. Pur și simplu aplică o marjă de 1,5 mm la partea superioară a elementului. Există o clasă similară numită "append-bottom" care are același efect în partea de jos a unui element.
5. 'prepend-5': Folosesc această clasă pentru a împinge titlurile în Divul mai mic spre dreapta. În planul Blueprint există mai multe clase de spațiere: prepend, atașați, trageți și împingeți. Prefixați și adăugați adăugați umplutura la stânga și la dreapta, respectiv. Trageți și împingeți adăugați o margine spre dreapta și respectiv spre stânga. Încă o dată, puteți face tot felul de adăugări, prependări, trageri și împingeri după cum doriți, atâta timp cât nu folosiți un număr mai mare decât numărul total de coloane din grilă (cum ar fi prepend-25 într-o rețea cu 24 coloane).

Dacă nu sunteți familiarizat cu modelul casetei CSS și nu știți diferența dintre umplutură și margine, aici este o scurtă lecție. În CSS, umplutura adaugă spațiu în interiorul elementelor și mărește de fapt dimensiunea elementului. De exemplu, dacă aveți o masă cu granițe și adăugați o cearceafă la masa respectivă, aceasta va împinge granițele de la masă. Marginea, pe de altă parte, adaugă spațiu în afara graniței și nu mărește dimensiunea elementului. Acest lucru poate avea ca efect împingerea altor elemente în afara celui curent sau mutarea elementului curent pe pagină. Iată o imagine minunată pentru a demonstra modelul cutiei CSS:

---

5. Rezumat

Acest tutorial v-a propus să vă arătăm modul în care Blueprint CSS poate fi folosit pentru a pune bazele pentru următorul dvs. proiect sau cel puțin pentru a lua o parte din greutatea de pe umeri în jurul resetărilor și tipografiei. De asemenea, dacă utilizați Blueprint cu Rails, verificați depozitul lor de pe Github, deoarece acestea au câteva caracteristici care vă permit să integrați cu ușurință și să configurați Blueprint pentru a lucra cu proiectul Rails.

Cel mai bun lucru despre Blueprint este că este doar CSS. Este tot CSS. Deci, dacă sunteți interesat de Blueprint, verificați sursa și dacă aveți cunoștințe despre CSS, ar trebui să înțelegeți cum funcționează toate. Blueprint, de asemenea, nu este o bază de cod foarte mare, probabil că are mai puțin CSS decât majoritatea dintre noi folosesc pe un proiect tipic. Puteți chiar să citiți sursa în browser-ul dvs. la depozitul Blueprint de pe Github.

Te voi lasa cu cateva resurse pe Blueprint:

• Site-ul Blueprint este la blueprintcss.org. Acesta este cel mai simplu loc pentru a descărca cadrul.
• În mod implicit, Blueprint folosește un aspect fix, dacă sunteți în favoarea structurilor lichide, aici este un plugin pe care îl veți permite Blueprint să funcționeze cu un aspect lichid.
• Mai multe pluginuri Blueprint

• Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.

Cod