fundație este un cadru complet receptiv front-end pentru dezvoltatori, facut de zurbei. It provides many tools for making mobile friendly websites and allows developer to create front end code faster and better. Este un proiect open-source. fundația este MIT Licentiat și libertatea de a folosi pe orice doriti.
Fundația constă în primul rând din HTML, CSS si jQuery bazate pe șabloane de proiectare care utilizează tehnologii moderne și practici și compatibile cu toate browserele majore. A vorbi despre versiunea fundației, cea mai recentă versiune stabilă este fundație 5 lansat Decembrie 12, 2014 creat de zurbei.
Să ne aruncăm o privire la diferite puncte menționate mai jos.
- Versiunea anterioară fundație 2 a fost o sursă deschisă și design receptiv și lansat în October 2011.
- The fundație 3 prevede stiluri pentru elemente de formatare și permite dezvoltarea de aspect receptiv și a fost lansat în Februarie 2013.
- The fundație 4 a fost de aproximativ de codificare mai inteligent și este o primă abordare mobilă pentru dispozitive mobile și îmbunătățită a paginilor web pentru ecrane mai mari și a fost lansat în Noiembrie 2013.
Introducere în Fundația 5:
The fundație 5 este numit ca "Fundația pentru site-uri"Care include trei versiuni ale fundației cum ar fi Fundația pentru aplicații, Fundația pentru site-uri și Fundația pentru e-mail. Este numit ca "cel mai avansat cadru de front-end din lume", folosit de milioane de dezvoltatori și site-uri.
Cel mai recent v5 de eliberare aduce unele actualizări mari și o mulțime de remedieri-cheie. Este destul de similar cu versiunea 4, dar cu îmbunătățiri de performanță și instrumente pentru dezvoltatori.
- fundație 5 conține jQuery 2 și a eliminat sprijinul zepto care a fost în versiunea 4 prin o mai bună performanță atât pentru utilizatorii de desktop și mobile.
- Cele v5is acum compatibile cu Sass 3.4. Îmbunătățirile în dropdowns care se închide automat atunci când un link este apasat.
- Butoanele Split pot sprijini acum 2 diferite evenimente.
- Acordeoane pot folosi acum <ul> elemente în loc de <dl> element.
- Noile template-uri sunt disponibile cu v5 pentru realizarea de prototipuri mai rapid.
- zurbei adăugat Libsass (Limba de pre-procesare pentru CSS) ceea ce îmbunătățește performanța de compilare.
Fundația descărcare 5:
Pentru a începe să lucreze cu Fundația, în primul rând trebuie să descărcați tot codul sursă pachet din link-ul: <un titlu =”http://foundation.zurb.com/develop/download.html” = href”http://foundation.zurb.com/develop/download.html"” target =”_gol”> Fundația descărcare </o>
Când faceți clic pe butonul Download Foundation, veți fi redirecționat la pagina de descărcare oficială așa cum se arată în imaginea de mai jos:
Figure 1: Pagina de descărcare Fundației
Odată ce vă aflați pe această pagină, puteți vedea, există patru tipuri de opțiuni, descărcarea.
- Complet:Acesta vă permite să descărcați totul în cadrul în simplu, CSS vanilie și JS că Fundația 5 are de oferit.
- Esenţial:Această opțiune vă va oferi caracteristici importante, cum ar fi tipografie, butoane grilă, dezvăluie și interbancare.
- Personalizat: Acesta permite generarea personalizat construi ca pe cerințele dumneavoastră. Acesta permite CSS culori implicite personalizate și dimensiuni cheie, cum ar fi de max-lățime. Acesta vă va duce la formularul de personalizare în cazul în care aveți posibilitatea să modificați setările implicite înainte de a descărca cadrul.
- Sass:Este construit folosind Sass CSS preprocessor și puteți lucra cu ea în același mod.
Pentru acest articol, vom descărca prima opțiune adică. “Complet"Opțiune care permite descărcarea totul în cadrul. Acesta va descărca în format zip, despacheta zip și veți vedea dosarele și fișierele menționate mai jos:
- dosar Stil Sheet: Contine foundation.css, foundation.min și normaliza fișiere.
- JavaScript dosar: Acesta conține mai multe plug-in-uri pentru a face munca de fundație în mod corespunzător. Include fundație dosar, care este dotat cu toate plug-in-uri în format JS, furnizor dosar și foundation.min fișier JS.
- dosar de imagini: Acesta include imagini, care sunt necesare în paginile care sunt stocate în acest dosar.
- index.html: Este o structură de probă care poate fi folosit ca structură de bază a paginilor în proiect.
Componentele din Fundația 5:
Grilă
Este 12 coloane de sistem grilă în care fiecare rând este împărțit în 12 coloane care suportă aproape toate ecranul dispozitivului de dimensiuni. Oferă 3 tipuri de clase specifice pentru crearea unor clase receptive și anume .mare-x, .mediu x și .mici-x.
- .mare-x pentru dispozitive de dimensiuni mari, cum ar fi desktop-uri
- .mediu x pentru dispozitive de dimensiuni medii, cum ar fi tablete
- .mici-x pentru dispozitive mai mici, cum ar fi telefoane mobile
Navigation
Navigare este utilizat pentru a crea formulare pentru mai multe dispozitive, cum ar fi bara de sus cu dropdowns, button, bara de căutare, nav laterale, Sub nav, paginație și off-pânză de navigare.
formulare
Formele sunt construite cu combinație de stiluri de formă și sistem grilă. Fundația a adus sistem puternic pentru forma de aspect în care vă puteți crea formulare rapid și ușor cu acest cadru.
Butoane
Butoanele sunt elemente interactive de site-ul sau aplicația dvs. și ușor de utilizat și de a personaliza. Fundatia ofera diferite tipuri de stiluri de butoane pentru interacțiunea cu utilizatorul. Trebuie să adăugați "buton" de clasă pentru a ancora, Elemente de intrare sau div pentru a vedea-l transforme în glorios buton stiluri de fundație. Cu ajutorul butoanelor, puteți realiza diferite stiluri pentru a satisface nevoile dumneavoastra. Acesta oferă forme diferite, cum ar fi pătrat, ușor rotunjite, complet rotunjite, mare, etc mediu.
Tipografie
Acesta oferă curat, stiluri atractive simple și implicite pentru toate elementele de bază tipografice. Acesta folosește scara modulara pentru coafare antet și sub elementele de antet. Este ușor de a schimba dimensiunea textului din paginile noastre de web. Listele sunt utile pentru definirea listei de lucruri în care Fundația 5 oferă diferite stiluri de listă neordonate și ordonate pentru a efectua această sarcină.
dezvăluie Modal
Aveți posibilitatea să creați modal sau pop-up fereastra folosind Reveal jQuery modal plug-in care o face foarte ușor pentru realizarea de prototipuri și de producție.
Orbită
Este puternic și receptiv slider imagine, care permite crearea imaginii și a conținutului slider cu ușurință.
Structura de bază a fundației:
Acum, să ne aruncăm o privire la structura de bază a fundație în fragmentul de cod de mai jos.
[cod]
<!DOCTYPE HTML>
<html>
<cap>
<meta charset = "utf-8" >
<meta name = "portul de vizualizare" content = "width = dispozitiv lățime, Scara inițială = "1.0">
<titlu>fundație 5 Structura</titlu>
<link-ul rel = "stylesheet" href = "css / normalize.css">
<link-ul rel = "stylesheet" href = "css / foundation.css">
<link-ul rel = "stylesheet" href = "css / app.css">
<script src = "js / furnizor / modernizr.js"></scenariu>
</cap>
<corp>
// codul merge aici
<script src = "js / furnizor / jquery.js"></scenariu>
<script src = "js / foundation.min.js"></scenariu>
<scenariu>
$(document).fundație ();
</scenariu>
</corp>
</html>
[/cod]
Hai să vedem ce conține această structură:
meta Tag-uri
Meta tag-uri sunt incluse în interiorul tag-ul capului, așa cum se arată în structura.
[cod]
<meta charset = "utf-8" >
<meta name = "portul de vizualizare" content = "width = dispozitiv lățime, Scara inițială = "1.0">
[/cod]
In prima meta tag-ul utf-8este utilizat pentru a defini setul de caractere în site-ul. Cea de a doua tag-ul este folosit pentru a scala lățimea paginii web cu lățimea dispozitivului este vizualizat în.
CSS Fișiere
Pentru a lucra cu Fundația 5, trebuie să includă următoarele fișiere CSS în fișierul HTML.
[cod]
<link-ul rel = "stylesheet" href = "css / normalize.css">
<link-ul rel = "stylesheet" href = "css / foundation.css">
[/cod]
Ar trebui să includă fișiere CSS așa cum se arată în ordinea de mai sus. In caz contrar, fișier normalize.css resetează stiluri CSS fundației. Fișierul de foundation.css servește ca bază de bază. În cazul în care doriți să includeți fișierul CSS personalizat, apoi scrie după cum se arată mai jos:
[cod]
<link-ul rel = "stylesheet" href = "css / app.css">
[/cod]
Fișiere JavaScript
Trebuie să includeți 3 diferite fișiere JavaScript în fișierul HTML: modernizer.js, jquery.js și foundation.js. Prima dintre ele poate fi inclusă în tag-ul cap și ultimele două pot fi incluse în tag-ul body.
The modernizr.js detectează HTML5 și CSS3 în browser-ul utilizatorului. The modernizator este necesară înainte ca organismul devine, prin urmare, este inclusă în tag-ul cap. Trebuie să includem jquery.js înainte de fișierul JavaScript al fundației. The foundation.js Fundația încarcă JavaScript Biblioteca care încarcă automat nucleul fundației și toate JavaScript plug-in-uri.
Exemplu de bază:
Să vedem un exemplu de bază, prin utilizarea acestei structuri, care creează rânduri și coloane, care fac parte din fundație 5 grilă sistem.
[cod]
<!dOCTYPE HTML>
<html>
<cap>
<meta charset =”utf-8″ />
<meta name =”port de vizualizare” content =”width = dispozitiv lățime, Scară inițială = 1,0″ />
<titlu>5 fundație</titlu>
<link-ul rel =”stylesheet” = href”css / foundation.css” />
<script src =”js / furnizor / modernizr.js”></scenariu>
</cap>
<corp>
<div>
<div>
<h4>Acesta este exemplul dumneavoastră grila de bază</h4>
<div>
<div>
<div>
<p>Salut Lume!!! Aceasta este o secțiune douăsprezece coloană</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>şase coloane</p>
</div>
</div>
<div>
<div>
<p>şase coloane</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>patru coloane</p>
</div>
</div>
<div>
<div>
<p>patru coloane</p>
</div>
</div>
<div>
<div>
<p>patru coloane</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>trei coloane</p>
</div>
</div>
<div>
<div>
<p>trei coloane</p>
</div>
</div>
<div>
<div>
<p>trei coloane</p>
</div>
</div>
<div>
<div>
<p>trei coloane</p>
</div>
</div>
</div>
</div>
</div>
<script src =”js / furnizor / jquery.js”></scenariu>
<script src =”js / foundation.min.js”></scenariu>
<scenariu>
$(document).fundație();
</scenariu>
</corp>
</html>
[/cod]
Deschide fișierul HTML de mai sus în browser-ul dvs., veți vedea de ieșire așa cum se arată în imaginea de mai jos:
Summary:
În acest articol am discutat o prezentare generală a Fundației 5 Cadrul utilizat pentru UI development.Foundation 5 este un foarte popular receptiv cadru de front-end pentru a construi site-uri și aplicații rapid. De asemenea, are caracteristici avansate pentru crearea rapidă de prototipuri. Versiunea mai nouă a acestui cadru este cel mai stabil și mai confortabil de utilizat.
Sper că ați luat o înțelegere clară pentru a începe să lucreze cu acest cadru
