Blueprint - aceasta este una dintre cele mai populare freymvorkov CSS, care va ajuta să salva o mulțime de timp în timpul scrierii HTML si CSS. Clasele de freymvorka atât de confortabil încât acestea să poată fi ușor de implementat de Rails, PHP sau orice altă limbă care generează o pagină HTML. În această lecție ne vom uita la un exemplu, care este disponibil în arhiva cu freymvorkom Blueprint.
1. Ce este CSS Blueprint?
Daca esti ca mine - mai mult decât un designer de dezvoltator, sunteți probabil familiarizat cu situația, atunci când începe un nou proiect și nu au avut un indiciu în cazul în care pentru a începe o parte referitoare la CSS. De asemenea, știți că designul se va schimba mai mult de multe ori, dar este necesar ca acesta să fie curat și luminos pentru a începe cu. Apoi, va cheltui suma n-lea timp pe CSS, care vor fi afișate în mod egal în Firefox, Safari și, desigur, în IE. Apoi, va nit orice HTML, care credeți că va fi utilizat. Excelent! A terminat! Și acum ... 3 zile cerințele s-au schimbat, și va trebui din nou să înceapă peste tot din nou. Probabil, toate cu care se confruntă cu aceeași problemă ...
Dacă sunteți un coder rece, care stie CSS fente sau o persoană care lucrează cu șablonul PSD, aceasta nu înseamnă că nu ai nimic de a învăța .... Blueprint - un lucru foarte util, oferind un instrument foarte util ... astfel încât să beneficieze de timp foarte mare de cheltuieli.
Cred că Blueprint justifică toate așteptările. Blueprint oferă o bază solidă și de bună pentru a construi proiectul. Acest lucru se realizează prin clase de compatibilitate cross-browser, tipografie foarte frumos, grila, stiluri gata de forme, stiluri speciale pentru imprimare, etc. Să ne aruncăm o privire mai atentă la dosar, pe care îl puteți descărca de pe site-ul Blueprint:
2. Surse Blueprint
Deci, ce? Am nevoie pentru a conecta toate cele 6 foi de stil?
Nu. Blueprint conține o versiune comprimată a foii de stil la paginile HTML - screen.css, care include toate fișierele, inclusiv print.css și ie.css. Motivul pentru care am pictat fiecare dintre dosarele freymvorka, constă în faptul că acesta este format din module, ceea ce înseamnă că fiecare dintre componentele sale (fișiere) pot fi utilizate în mod independent unul de altul. E destul de tare, pentru că dacă vă decideți că un anumit fișier Blueprint nu va convine, de exemplu, pentru un fișier grilă și fișiere reset.css, typography.css contrar, vă puteți servi bine, puteți cu ușurință și de a pierde funcționalitatea acestea se pot conecta, lăsând în urmă stiluri de fișiere inutile.
3. Să ne ceva mantuiala pe Blueprint
Știu că se poate spune despre acest design, bun sau rău, dar, pentru informațiile dvs. Vreau să spun că am creat acest aspect, fără o singură linie de cod CSS. Design-ul este construit exclusiv prin intermediul Blueprint, și îndeplinește toate cerințele proiectului. În cazul în care procesul de dezvoltare am avea nevoie de ceva pentru a schimba, datorită Blueprint mine fara dificultate eu pot face acest lucru, iar atunci când funcționalitatea este gata, gândiți-vă la faptul că pot fi adăugate de tine.
4. debriefing
titlul documentului
Iată cum să se uite secțiunea cap, dacă vom folosi freymvork Blueprint. Trebuie să conectați fișierele CSS, de exemplu, screen.css, print.css și ie.css.
O altă caracteristică Blueprint: Acest cod CSS, așa că dacă aveți ceva nu se potrivește, putem înlocui cu ușurință selectori existente. Este pe acest principiu de lucru plugin-uri Blueprint. În acest exemplu, am folosi plug-in-proiectat pentru textele mele. Plug-in-uri necesare după provocările majore freymvorka fișiere pentru a rescrie valoarea selectori și a intrat în vigoare. Aici este un plugin pe care l-am folosit.
Cel puțin vă puteți conecta foaie de stil propriu, desigur, dacă ai nevoie de ea.
Titlul paginii
conținutul principal
Această mică bucată de cod folosit atât de multe lucruri despre care vorbim acum. Vom începe din partea de sus și ia în considerare
Important: Când utilizați „colborder“ de clasă pentru a afișa cadrul pe care doriți sau nu, dar este necesară o coloană în acest scop. Deoarece lățimea blocului nostru de 17 coloane (17-cuprind), cel mai probabil va presupune că aveți 7 liber (deoarece 17 + 7 = 24), ci ca „colborder“ ocupă o coloană pentru a se potrivi nevoilor dumneavoastră, atunci dumneavoastră eliminare numai 6 coloane pentru panoul lateral stânga (17 + 1 + 6 = 24).
Înainte de a merge la bara laterală, avem nevoie pentru a discuta despre cele 2 antetele bloc mici „Încarcă-o carte“ și „Scrie o opinie“. Deoarece blocul părinte al elementelor de date este format din 17 coloane, această distanță va fi maximizate.
Astfel, primul bloc, clasele atribuite „interval-8“ și „colborder“, ceea ce înseamnă că lățimea elementului va duce de fapt 8 coloane și pe partea dreaptă vor fi separate printr-un cadru subțire. Al doilea bloc ne-am atribuit clase „interval-8“ și „ultima“. Acesta este un moment foarte important în Blueprint freymvorke. Coloana, pe care doriți să se afișeze mai târziu trebuie să specifice clasei „ultima“. Această clasă în conformitate cu BP, că elementul este ultimul și el nu are nevoie pentru a crea orice indentare. Notă modul în care am distribuit celor 17 coloane existente, împărțindu-le între blocuri de opt 8 și 1 pentru „colborder“ cadru (8 + 8 + 1 = 17).
OK, acum putem continua cu o conștiință clară la bara laterală. Acest element ne-am atribuit clase „interval-6“ și „ultima“. Cred că ați înțeles deja cum funcționează aceste clase. Bara laterală complet zapolonyayut tot spațiul rămas. Math aici nu complex + 1 + 17 6 = 24.
Aici este un alt exemplu de cod HTML terță parte pentru tine de a înțelege cum funcționează.
Să ne uităm la unele mai multe clase CSS pe care le puteți utiliza:
- „Caps“: Această clasă este utilizată pentru antetul în bara laterală. Selecțiile sale sunt stocate în fișierul CSS plug-in, pe care le-am spus în mod repetat.
- „Caseta“: această clasă este ideal pentru decorarea dintre elementele din listă. El le separă cu ușurință de întregul conținut al paginii și creează o umplutură proporțională între elementele interne și externe.
- „Quiet“: clasa CSS este responsabil pentru culoarea textului (gri), pe care le puteți vedea în bara laterală.
- „Prepend-top“: această clasă este utilizată în secțiunea „Comentarii recente“ panoul de partea noastră. Este pur și simplu adaugă un vârf extern indentare 1.5em. Există, de asemenea, o clasă cu funcționalitate similară: „Append-jos“, care adaugă un spațiu exterior de dedesubt.
- „Prepend-5“: această clasă Eu folosesc pentru a muta antetele 2 blocuri mici, în colțul din dreapta. În Blueprint, există mai multe clase de astfel de operațiuni: Prepend, anexați, trage și împingeți. Clasele Prepend și adăugați adăuga padding la dreapta și la stânga. Tracțiune și de apăsare clasele adăugate la marginile exterioare. Încă o dată, am act de faptul că trebuie să se calculeze cu atenție fiecare clasă de aplicații pentru a se încadra în dimensiunile de gabarit ale containerului (care este implicit de 24 de coloane).
Dacă nu sunteți familiarizați cu CSS și nu știu diferența dintre margini interioare și exterioare, atunci aici e un indiciu. CSS, padding se adaugă distanța dintre elementul și cadrul acesteia, ceea ce conduce la o creștere a lățimii elementului. De exemplu, dacă aveți un tabel de pe cadrul paginii, adăugarea de umplutură externe, având ca rezultat un spațiu gol între aceste elemente. La rândul său, cu utilizarea capitonat externe tot drumul în jurul valorii, distanța se adaugă în afara cutiei. Pentru a face mai ușor de înțeles ceea ce spun, vă sfătuiesc să vă uitați la această imagine:
Obiectivul principal al lecției a fost de a demonstra tehnicile de bază pentru lucrul cu CSS freymvorkom Blueprint. După ce am citit acest articol, puteți aplica la următorul proiect, în totalitate sau parțial, fără dificultate. De asemenea, dacă utilizați Blueprint pentru scrierea Rails, apoi am sfătui să viziteze magazia pe Github. Acolo veți găsi instrumentele care sunt proiectate pentru a simplifica Blueprint de configurare.
În cele din urmă vă las cu câteva surse:
- Site-ul oficial al blueprintcss.org Blueprint. Cel mai bun lucru aici pentru a rock acest freymvork.
- Implicit Blueprint funcționează cu o lățime fixă. Dacă preferați să creați site-uri de cauciuc, atunci acest plugin este pentru tine.
- O multitudine de plug-in-uri pentru Blueprint
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!