În acest tutorial ne vom concentra pe codarea unui aspect PSD, folosind scheletul de răspuns schelet. Există o mulțime de tutoriale despre cum să codificați un design folosind HTML și CSS, adesea cu o extra cratime JavaScript, dar scopul principal al acestui tutorial este de a obține lucrurile construite folosind ultima versiune a cadrului Skeleton (2.0.4). Au existat câteva îmbunătățiri importante de când am acoperit-o ultima dată!

Mai întâi de toate, permiteți-mi să introduc scheletul, apoi vom trece într-o codificare.

Ce este boilerplate de schelet?

Scheletul este creatura lui Dave Gamache. Este o coloană cu douăsprezece coloane, cu o lățime implicită maximă de 960 pixeli, o tipografie de bază și stiluri minime pentru elemente HTML comune, cum ar fi butoane, linkuri, intrări și textare.

Forța lui constă în faptul că este a ușoară CSS framework. Venind doar la 400 de linii de timiditate, Skeleton este conceput să fie un punct de plecare, nu un cadru complet plin de design UI, cum ar fi Bootstrap, Foundation sau SemanticUI.

De ce folosiți scheletul?

Deoarece este simplu de utilizat și este un început excelent pentru construirea propriilor cadre de răspuns.

Deci ce este nou?

Dave Gamache a introdus și actualizat câteva caracteristici în Skeleton v2.0:

• clase de utilitate cum ar fi .u-full-lățime, .u-max-lățime completă care este perfect pentru containere de lățime de 100%
• tipografie
• butoane
• formulare
• liste
• Mese

Noțiuni de bază

În timpul acestui tutorial vom codifica designul prezentat mai sus, realizat de Samir Timezguida. Pe parcurs vom:

1. Descărcați scheletul și scrieți propriul nostru marcaj HTML
2. Trageți imaginile din PSD și scrieți CSS
3. Adăugați o aromă JavaScript pe partea de sus, care va adăuga o anumită interactivitate

Să începem prin descărcarea scheletului de la www.getskeleton.com și printarea PSD din fișierele sursă.

Schițarea și planificarea

Puteți prefera o abordare diferită, dar îmi place să încep prin a schița aspectul pentru a vizualiza fiecare secțiune. Există o mulțime de secțiuni în planul:

• Erou
• Introducere
• Creativitate
• Muncă
• Ajutor
• Clienți
• Despre
• Video
• De ce noi
• Citat
• Intrați în legătură
• a lua legatura
• Subsol

Acesta este rezultatul meu schițat pentru structura HTML dorită:

secţiuni

Pentru fiecare secțiune vom face un container înfășurat (sau banda) care va umple întreaga lățime a ferestrei, cu numele secțiunii ca nume de clasă. În interiorul acestuia, profităm de Skeleton construind grila pentru a face un container și un rând. HTML pentru fiecare secțiune va fi o variantă a acestui:

Acum este timpul să luați fiecare secțiune și să adăugați marcajul. Nu vă faceți griji cu privire la stiluri, imagini, fonturi și așa mai departe, căci acum ne concentrăm exclusiv asupra structurii HTML.

Meniul

Pentru meniu, trebuie să adăugăm pictograma "hamburger" și o listă neordonată umplută cu legături interne. Fiecare link va indica o anumită secțiune.

Notă: ochii cu ochii închiși din mijlocul vostru pot recunoaște fa fa-baruri clase pe element pentru pictograma de navigare. Acestea sunt tipice pentru icoanele Font Awesome, pe care le vom implementa mai târziu în acest proces.

Erou

Secțiunea de eroi, așa cum se vede în PSD, cuprinde o imagine întinsă, un titlu și o subtitrare. Pentru imaginea de fundal vom adăuga un container diferit, pentru titlul pe care îl vom folosi h1 și pentru subtitlul a h2. Aici vedeți, eu folosesc u-full-lățime, noua clasă utilitară schelet.

 
 
 
 
Avem talent
 
Lorem ipsum dolor stau amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 
 
 

Introducere

Introducerea conține două elemente; un titlu și o subtitrare. Pregătim html-ul pentru a susține granița titlului, adăugând a separator clasa, care va adăuga border-bottom și unele distanțe.

 
 
 
 
Introducere
 
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, quis exerciții ullamco laboris.
 
 
 
 

Creativitate

Creativitatea are un fundal cu lățime întreagă și un buton. De asemenea, puteți vedea centrat clasa pe h4; o clasă de utilități pe care o vom crea în tutorialul următor, pentru a ne ajuta să centralizăm elemente atât pe axele verticale, cât și pe cele orizontale.

 
 Creativitate pură 
 

Muncă

Aceasta este cea mai mare secțiune de pe site și conține încă două rânduri; unul pentru link-uri de filtrare de lucru și unul pentru articole de lucru.

 
 
 
 
O parte din munca noastră
 
 
 
  
 
  
 
 

Filtrele de lucru conțin o listă neordonată umplută cu link-uri care vor filtra elementele de lucru.

 
 Toate 
 
 Branding 
 
 web design 
 
 Mobil 
 
 UI 
 
 ilustraţii 
 

Elementele de lucru vor avea patru coloane, conținând imaginea de lucru, titlul lucrării și descrierea lucrării.

De asemenea, puteți vedea că folosesc o altă clasă de utilități, verticală centrată, care va centra elementul pe axa verticală. Descrierea pentru fiecare articol de lucru are, de asemenea, o margine în partea de jos. Pentru a realiza acest lucru, vom reuși să folosim separator clasa văzută mai devreme, adăugând în același timp o clasă suplimentară pentru stilul, culoarea și dimensiunile suplimentare.

 
  
 
 
Branding
 
Sigla MTV AMA
 
 
 
 
  
 
 
Web design
 
Renunțați la reproiectare
 
 
 
 
  
 
 
IO mobil
 
mail Google
 
 
 
 
  
 
 
ilustraţii
 
Icoane plate
 
 
 
 
  
 
 
web design
 
Inbox de către Google
 
 
 
 
  
 
 
UI
 
Pielea de schelet a primit un nou interfață utilizator
 
 
 
 

Ajutor

Secțiunea de ajutor are aceeași structură html ca și secțiunea creativitate, dar le diferențiem prin adăugarea unor nume de clasă diferite.

 
 Suntem aici pentru a vă ajuta! 
 

Clienți

Această secțiune conține o listă neordonată cu imaginile clientului. Folosesc placehold.it pentru a genera imagini de tip placeholder.

 
 
 
Clienții noștrii