Share
Pentru mulți oameni de pe web, dezvoltarea unui proiect de la zero de fiecare dată face parte din loc de muncă; este adesea dificil să se construiască o bază de cod reutilizabilă atunci când fiecare proiect este diferit. Dezvoltatorii mai experimentați au avut timp să construiască o formă de cadru front-end, dar acest lucru poate fi un lucru serios, ca să nu mai vorbim de necesitatea de a menține lucrurile actualizate și în concordanță cu cele mai bune practici.
Privind la nevoile și nevoile fiecărui coder, este clar că dezvoltatorii doresc ceva care este deschis, stabil, flexibil și (cel mai important) bine documentat. În funcție de dimensiunea proiectului, poate fi suficient un sistem de grilă CSS, dar nu ar fi grozav dacă ați avea opțiunea de a adăuga și elimina funcționalitatea așa cum ați considerat potrivită? Ei bine, în această sesiune vom analiza un cadru personalizabil de front-end numit Foundation.
Acoperirea unui cadru ca Fundația trebuie făcută în mod corespunzător și în detaliu, așa că în următoarele câteva săptămâni voi acoperi totul, de la început, de la construcții personalizate, până la inserții și ieșiri ale știfturilor care guvernează acest cadru particular. Cel mai important, voi ilustra modul în care vă poate fi de folos în viitoarea dvs. inițiativă web.
Fundația este un cadru front-end alcătuit din multe instrumente utile pentru realizarea unor site-uri responsabile, mobile mobile. Construită în primul rând cu HTML, CSS și jQuery, Fundația utilizează tehnologii și practici moderne, dar se degradează cu grație încă din IE8. Deși cadrul este cel mai frecvent utilizat de dezvoltatorii HTML și CSS, aveți opțiunea de a lua mai multe lucruri folosind Fundația împreună cu Sass și Rails.
Compania din spatele Fundației, ZURB, a creat un set de unelte pentru dezvoltatori și designeri. Fiecare modul are rolul de a juca în cadru ca un întreg, dar în același timp poate lucra complet independent de conducerea centrală. Ce inseamna atunci, este ca poti mixa si potrivi caracteristicile in proiectul tau curent, sau poti lua o singura caracteristica si o adaugi intr-un proiect mai vechi. Puteți chiar să o adăugați ca o caracteristică într-un cadru diferit.
Așadar, în rezumat, acesta este un cadru modern care a fost bine construit și care îngrijește o mare varietate de utilizatori. Acesta oferă un set bun de caracteristici, este gratuit, și există o comunitate tot mai mare de oameni care te ajută dacă nu te blochezi.
În prezent, este obișnuit ca dezvoltatorii să folosească cadre (de ce să reinventăm roata?) Deseori, multe dintre aceste cadre s-au umflat de creatorii care încearcă să acopere fiecare eventualitate pe o bază adhoc. Ce poate să fi început viața ca instrument sclipitor, ușor, poate crește într-o sută de cereri http și un cor de dezasamblat în funcție de nevoile dvs..
Fundația include o serie de funcții și caracteristici. Este construit pe un sistem bazat pe un procent pe bază de lichid, este echipat cu un slider jQuery, un plug-in lightbox, are toate elementele HTML imaginabile plăcut și este construit în primul rând în minte. Puteți crea formulare personalizate care utilizează jQuery pentru a re-imagina elementele de intrare dificile, dropdown-urile și căsuțele de bifare, ceea ce înseamnă că puteți personaliza acestea cu ușurință. Cadrul are, de asemenea, opțiuni pentru a stabili dispozitive personalizate mobile utilizând grilă mobilă, oferind flexibilitatea de a personaliza cu adevărat proiectul dvs. pentru utilizatorii de dispozitive mobile și desktop.
Zurb au reconstruit o mulțime de funcționalități de bază în versiunea 4 pentru a acoperi cazuri destul de largi de utilizare. Codul pare să fi fost păstrat curat și a comentat unde trebuie să fie. Adăugarea și eliminarea funcțiilor este directă și permite adaptarea construcției dvs. astfel încât să corespundă cerințelor dumneavoastră.
Utilizatorii care rulează versiunea 3 pot, de asemenea, să urmeze un document de migrare pentru a-și actualiza instalările existente sau, dacă doresc, pot continua să folosească versiunea 3 ca gazdă ZURB versiunea anterioară pentru cei care nu sunt pregătiți să facă saltul la v4.
Zurb au o pagină de descărcare care vă permite să modificați un formular pre-umplut pentru a genera o construcție personalizată perfectă pentru cerințele dvs. Să presupunem că doriți doar o rețea CSS? Terminat. Deconectați totul, cu excepția "grila" și introduceți măsurătorile proiectului. Poate doriți elemente de bază ale UI? Terminat. Încă o dată, verificați doar elementele UI pe care le solicitați, cum ar fi etichetele și butoanele, și asta este exact ceea ce veți obține. Puteți chiar să apucați tot ce oferă (numit chiuveta de bucătărie) cu un singur clic. Permite culorile implicite CSS personalizate și chiar dimensiunile cheie, cum ar fi max-width.
Deși acest lucru este la îndemână, este totuși doar o formă și cred că ar putea fi îmbunătățită. În mod ideal, aș dori să văd un proces etapizat, probabil cu o reprezentare vizuală a șablonului HTML. De asemenea, deoarece v4 utilizează em ca unitate de măsură și em se bazează pe mărimea fontului principal, ar părea intuitiv să includeți un calculator px-to-em, doar pentru a face acest lucru mai ușor.
Faceți clic pe http://foundation.zurb.com și faceți clic pe butonul de descărcare mare. Veți fi prezentat numeroase opțiuni pentru personalizarea cadrului dvs. Debifați toate funcțiile de care nu aveți nevoie, puneți culorile primare, secundare, de alertă, de succes și de fonturi. Combinați acest lucru cu lățimi de rupere, lățimi maxime, jgheaburi și chiar o varietate de câte coloane doriți.
După ce vă uitați la avantajele cheie pe care le oferă Fundația și care rulează prin descărcarea personalizată, ar trebui să aveți o construcție personalizată care se află în dosarul descărcărilor. Redați-vă cu ea, încercați lucrurile și, dacă rămâneți blocați, aruncați o privire la docs sau aruncați întrebările în subiectul de comentariu de mai jos.
În următoarea parte a acestei sesiuni vom folosi sistemul de grilă, scufundând în navigație, tab-uri, butoane și câteva elemente UI cheie. De asemenea, vom vorbi despre unele instrumente care vă pot ajuta în continuare dezvoltarea atunci când utilizați Fundația ca bază pentru proiectele dvs..
Accentsconagua