Share
Ce veți creaÎn timp ce Bootstrap a preluat o mare parte a web-ului, poate pune o povară de performanță pe site-uri care ar putea să nu fie necesare pentru următorul proiect. Pure.css este cadrul reactiv al Yahoo; oferă o alternativă minimalistă, bine documentată și flexibilă.
În acest tutorial, vă voi prezenta Pure ", un set de module CSS mici și receptive pe care le puteți utiliza în fiecare proiect web." Vom analiza setul de caracteristici și avantajele utilizării Pure și apoi vom trece prin câteva exemple de utilizare.
Dacă aveți orice solicitări pentru tutoriale viitoare sau întrebări și comentarii despre ziua de astăzi, vă rugăm să le postați mai jos. Puteți să mă contactați și pe Twitter @reifman direct.
Pure oferă toate caracteristicile comune de care aveți nevoie într-un cadru standard de web design. Deci, dacă construiți o temă pentru WordPress sau un site web personalizat, ar putea fi o opțiune bună.
Pentru managerii de proiecte, este, de obicei, esențial ca proiectele clientului să fie construite cu ajutorul unor instrumente standard care să poată fi ușor înțelese și menținute, și cel mai important, că este ușor să recrutați talente care vin cu experiență în platforma dvs. Bootstrap este perfect pentru acest lucru. Pure mi se pare destul de simplu încât poate fi de asemenea un bun punct de plecare.
Iată un rezumat al beneficiilor și funcțiilor Pure. Oferă:
Accentsconagua
Cu toate acestea, cel mai impresionant, Pure.css este foarte mic, doar 4.5KB minified + gzipped. Iată cât de mult spațiu compun diferitele componente ale Pure în mediul dvs. de producție:
Pure este de asemenea bine testat și funcționează în IE 8+, Firefox, Chrome, Safari, iOS 6-8 și Android 4.x.
Și, puteți să-l utilizați cu elementele Bootstrap, adăugându-le acolo unde aveți nevoie. Voi arăta un exemplu de mai jos.
Pure este construit pe Normalize.css, care standardizează performanța cadrului în cadrul browserelor. Normalize oferă o resetare CSS implicită care:
Site-ul Pure este construit cu cadrul său, astfel încât codul său minimalist și bine dezvoltat duce la un ghid simplu de navigat și ușor de utilizat. Iată un exemplu de meniu al lui Pure în acțiune:
Puteți adăuga Pure la pagina dvs. prin intermediul CDN-ului gratuit Yahoo. Doar adăugați următoarele element în pagina dvs. de pagini , înainte de foile de stil ale proiectului:
Pentru a inițializa lățimea de răspuns a site-ului dvs. web, setați o etichetă meta pentru portul de vizualizare la lățimea dispozitivului dvs.:
În pagina Layouts, Pure oferă o mostră de descărcări pentru diferite pagini de exemplu pentru nevoi comune de aplicații:
Puteți căuta și descărca oricare dintre ele cu care doriți să experimentați sau să adăugați aplicația. Acestea includ:
Pagina de bază oferă un fundal scurt pe fundația din cadrul Pure, în special Normalize.css:
Normalize.css este un mic fișier CSS care oferă o consistență mai bună a browserului în stilul implicit al elementelor HTML. Este o alternativă modernă, compatibilă cu HTML5, față de reinițializarea CSS tradițională.
De asemenea, puteți încărca separat Normalize utilizând CDN-ul Yahoo pentru utilizare independentă:
Există și alte caracteristici de fundație mici, cum ar fi clasele care să-i spună lui Pure să încarce imagini în mod corespunzător prin ferestrele de vizualizare:
Dar acum, să aruncăm o privire la unele dintre exemplele pe care le oferă Pure.
Grilele sunt un aspect cheie al aspectului site-ului pe care Pure îl face destul de simplu. Iată un exemplu rapid de grilă Pure cu patru coloane pe un ecran desktop:
Iată cum se reduce la un port de vizualizare cu dimensiunea tabletei în jumătate:
Și în final, o singură coloană pe un smartphone:
Grilele pure sunt formate din două tipuri de clase: grile și unități. Elementele copil ale rețelelor trebuie să fie divizate. Conținutul dvs. intră în diviziile de unități. Clasele de unități sunt denumite pentru a reprezenta lățimile lor. De exemplu, pur-u-1-4 are o lățime de 25%.
Iată codul pentru răspunsul patra de mai sus:
Lorem Ipsum
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam.
Dolor Sit Amet
Exercițiul fizic ultima lucrătoare este un alicuș ex-commodo consec. Duis aute irure dolor în republicarea în voluptate velit esse.
Proed laborum
În culpa qui officia deserunt moll anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercițiu ullamco.
Consecință
Integer vitae lectus cumsan, egestas dui eget, ullamcorper urn. În tortorul feugiat la turpis rhoncus tincidunt. Duis sed portitor ante, eget venenatis lectus.
După cum puteți vedea mai sus,
Puteți afla mai multe despre rețelele pure aici.
Formulare
Pure are suport pentru alinierea câmpurilor de intrare în formulare și pentru modelarea câmpurilor specializate, cum ar fi:
- Formulare inline
- Formulare stivuite
- Forme cu două coloane
- Forme multi-coloană (prezentat mai sus)
- Intrări grupate
- Intrări necesare
- Intrări dezactivate
- Citiți numai intrările
- Intrări rotunjite
- Casetele de control și radiourile
Puteți vedea toate acestea descrise aici. Să explorăm un formular cu două coloane, la care Pure se referă ca pe o formă aliniată:
Prin utilizarea funcției
pur-form-aliniatclasa cuControl pur-grup (uri), Pure asigură că fiecare set de câmpuri este poziționat corect, după cum se arată mai sus.form>Este o modalitate destul de simplă de a construi o formă foarte utilă, bine pusă la punct.
Mese
Pure face și construcția și mesele de formatare destul de ușor. Iată un exemplu de tabelă cu dungi orizontale:
Puteți vedea tabelul de mai sus codat prin simpla adăugare
pur-table-nuiclasa rânduri alternativ prin codul dvs. pentru a schimba striping-ul:
# Face Model An 1 Honda Acord 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 Vad concentra 2008 5 Nissan Sentra 2011 6 BMW M3 2009 7 Honda Civic 2010 8 Kia Suflet 2010 Există o serie de exemple de tabelă prezentate aici.
Meniuri
Meniurile din Pure sunt ușor de facilitat, inclusiv:
- Meniul vertical
- Meniul orizontal
- Elemente selectate și dezactivate
- dROPDOWNS
- Meniul vertical cu submeniuri
- Meniul orizontal derulant
- Meniul vertical vertical derulant
- Meniul vertical verbal
- Meniul responsabil cu meniurile orizontale
- Meniul de răspuns orizontal-vertical
Vedeți toate meniurile ilustrate aici. Iată cum ați codifica un meniu derulant:
Practic, este doar un lucru
pur-meniu orizontal„s-Meniu pur-listșimeniu pur-meniu pur-meniu-are-copii curat-meniu-permite-hoverși apoi o listă de elemente de meniu pentru copii:
- Acasă
- a lua legatura
- Stare de nervozitate
- Tumblr Blog
Pure oferă un exemplu de JavaScript pentru implementarea funcțiilor suplimentare de accesibilitate din meniuri.
Mergând mai departe
Site-ul Pure oferă câteva ghiduri excelente pentru construirea pe cadru:
- Utilizând instrumente cu Pure, cum ar fi Bower și Grunt
- Personalizarea Pure și folosind felii de codebase pe cont propriu
- Extindeți caracteristicile și clasele pure
Și puteți explora combinații de bucăți de Pure cu Bootstrap și JavaScript. Dacă doriți să începeți cu amprenta mică și stilul minimalist al Pure, puteți totuși să utilizați diferite funcții Bootstrap, încărcând doar ceea ce aveți nevoie.
Iată un exemplu de dialog modal Bootstrap pe partea de sus a Pure, pe care îl puteți vedea pe pagina extensie a lui Pure:
În încheiere
Bootstrap devine IBM de cadre web. Este receptiv, este un standard și nu poți fi concediat pentru că ai ales-o (pe un contract recent, de fapt am avut de a trage un dezvoltator de tema pentru ca nu a implementat corect Bootstrap). Dar, dacă doriți ceva mai mic, mai rapid și mai simplu, verificați Pure.css.
Dacă încercați, vă rog să-mi spuneți despre experiența dvs. în comentariile de mai jos. Puteți să mă contactați și pe Twitter @reifman direct. Și, de asemenea, puteți răsfoi pagina de instructor Envato Tuts + pentru a citi alte tutoriale.
Link-uri conexe
- Blogul Pure
- Pur pe GitHub
- Pur: Ce, de ce și cum? (Envato Tuts +)
- Comparați cu Bootstrap
