Share
Cosa starai creandoIn questo tutorial ci concentreremo sulla codifica di un layout PSD, utilizzando il reattivo Skeletonplate. Ci sono un sacco di tutorial su come codificare un design usando HTML e CSS, spesso con un trattino in più di JavaScript, ma lo scopo principale di questo tutorial è quello di creare le cose usando l'ultima versione del framework Skeleton (2.0.4). Ci sono stati dei grandi miglioramenti da quando l'abbiamo coperto l'ultima volta!
Prima di tutto, permettimi di introdurre Skeleton, quindi salteremo in qualche codice.
Skeleton nasce da un'idea di Dave Gamache. È una colonna di dodici colonne, fluida, con una larghezza massima predefinita di 960px, tipografia di base e stili minimi per elementi HTML comuni come pulsanti, collegamenti, input e textareas.
La sua forza sta nel fatto che è un luce Quadro CSS. Arrivando solo a meno di 400 righe di codice, Skeleton è progettato per essere un punto di partenza, non una struttura completa piena di design dell'interfaccia utente come Bootstrap, Foundation o SemanticUI.
Perché è semplice da usare, ed è un ottimo inizio per costruire i tuoi quadri reattivi.
Dave Gamache ha introdotto e aggiornato diverse funzionalità in Skeleton v2.0:
Accentsconagua
u-full-width, .u-max-full-width che è perfetto per contenitori di larghezza del 100%Durante questo tutorial andremo a codificare il disegno sopra mostrato, realizzato da Samir Timezguida. Lungo la strada avremo:
Iniziamo scaricando il framework Skeleton da www.getskeleton.com e afferrando il PSD dai file sorgente.
Potresti preferire un approccio diverso, ma mi piace iniziare disegnando il layout per visualizzare ogni sezione. Ci sono molte sezioni sul layout:
Questo è il mio risultato abbozzato per la struttura HTML desiderata:
Per ogni sezione creeremo un contenitore wrapper (o banda) che riempirà l'intera larghezza della finestra, con il nome della sezione come nome della classe. Al suo interno stiamo sfruttando Skeleton costruendo la griglia per creare un involucro per contenitori e righe. L'HTML per ogni sezione sarà una variante di questo:
Ora è il momento di prendere ogni sezione e aggiungere il markup. Non preoccuparti di stili, immagini, caratteri e così via, per ora ci stiamo concentrando esclusivamente sulla struttura HTML.
Per il menu, dobbiamo aggiungere l'icona "hamburger" e una lista non ordinata piena di collegamenti interni. Ogni link punterà ad una sezione specifica.
Nota: gli occhi acuti tra di voi potrebbero riconoscere il fa fa-bar lezioni sul elemento per l'icona di navigazione. Questi sono tipici delle icone Font Awesome, che implementeremo più avanti nel processo.
La sezione dell'eroe, come si vede nel PSD, comprende un'immagine allungata, un titolo e un sottotitolo. Per l'immagine di sfondo aggiungeremo un contenitore diverso, per il titolo che useremo h1 e per il sottotitolo a h2. Qui, vedi, sto usando u-full-width, la nuova classe di utilità scheletro.
Abbiamo talento
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Commode ligula eeno dolente. Massa eneana.
L'introduzione contiene due elementi; un titolo e un sottotitolo. Prepariamo l'html per supportare il bordo del titolo, aggiungendo un separatore classe, che aggiungerà border-bottom e qualche spaziatura.
introduzione
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
La creatività ha uno sfondo a tutta larghezza e un pulsante. Puoi anche vedere il centrato classe sul h4; una classe di utilità che creeremo nel prossimo tutorial per aiutarci a centrare gli elementi su entrambi gli assi verticale e orizzontale.
Questa è la sezione più grande del sito Web e contiene altre due righe; uno per i collegamenti dei filtri di lavoro e uno per gli articoli di lavoro.
Alcuni dei nostri lavori
I filtri di lavoro contengono una lista non ordinata piena di collegamenti che filtrano gli elementi di lavoro.
Gli oggetti di lavoro stessi saranno di quattro colonne, contenenti l'immagine del lavoro, il titolo del lavoro e la descrizione del lavoro.
Puoi anche vedere che sto usando un'altra classe di utilità, verticale centrato, che centrerà l'oggetto sull'asse verticale. La descrizione per ogni oggetto di lavoro ha anche un bordo nella parte inferiore. Per ottenere questo riutilizzeremo il separatore classe vista prima, aggiungendo una classe in più per stili, colori e dimensioni aggiuntivi.
Logo MTV AMA
Riprogettazione Dribbble
Google Mail
Icone piatte
Posta in arrivo da Google
La skin scheletrica ha una nuova interfaccia utente
La sezione di aiuto ha la stessa struttura html della sezione creatività, ma li stiamo differenziando aggiungendo nomi di classi diversi.
Questa sezione contiene un elenco non ordinato con le immagini del client. Sto usando placehold.it per generare immagini segnaposto.
I nostri clienti
Qui abbiamo due righe diverse, una per il testo introduttivo e una per le persone.
La riga di introduzione contiene un titolo e un sottotitolo, proprio come abbiamo visto in precedenza nella sezione introduttiva.
Riguardo a noi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
La lista delle persone è una lista non ordinata contenente quattro elementi, l'ultimo è a scopo di assunzione. Ogni elemento della lista è largo tre colonne e contiene un'immagine, un collegamento, il nome e la posizione dell'individuo.
CEO e fondatore
CTO / Fondatore
progettista
La sezione video contiene solo un pulsante e l'immagine di sfondo allungata. Nei prossimi tutorial, creeremo una finestra modale che punta a un video di Youtube.
Andando avanti, la sezione "why us" è composta da due sezioni individuali; uno per una breve introduzione e l'altro per i servizi correnti.
La sezione introduttiva è larga dodici colonne e contiene il titolo racchiuso in un e il testo per una breve descrizione avvolto in un . Come vedrai in seguito, il titolo ha anche separatore classe per creare l'effetto di confine menzionato in precedenza.
Perché sceglierci
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Nella sezione servizi, ogni elemento dell'elenco contiene un'immagine e una descrizione.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Questa sezione eredita la stessa struttura html della sezione creatività, ma con testo diverso per il pulsante centrato.
Ancora un altro paio da fare! Questa sezione offre una breve trama per il modulo. È costruito con una struttura html che probabilmente ora sarà abbastanza familiare, con un titolo e una descrizione che ha un separatore tra di loro.
Mettiti in contatto
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animi unde doloremque iste, incidunt nihil, est vero aliquam, nemo id ab totam.
La sezione del modulo di contatto comprende due colonne, una per i meta di posizione e i collegamenti di profilo sociale e una contenente il modulo che aiuta l'utente a contattare l'azienda.
Ancora una volta sto usando markup per supportare Font Awesome, che integreremo nel prossimo tutorial.
La prima colonna è larga quattro colonne e la seconda è larga otto colonne. Qui puoi davvero vedere la potenza della caldaia di Skeleton, perché stiamo usando colonne e righe annidate. La forma ha diverse dimensioni al suo interno; i primi due input sono sei colonne in un wrapper largo otto colonne.
Nostra posizione
174 Mimosa ST. NW
Casablanca, MA 20370
(212) 123 456 7
Samir Timezguida
Il nostro piè di pagina contiene del testo avvolto in un contenitore di dodici colonne.
& copy 2015 Tuts di WebDesign+.
Questo tutorial ha dimostrato esattamente a cosa serve Skeleton: abbiamo utilizzato il suo markup per arricchire la struttura di una pagina web. Nel prossimo tutorial prenderemo quella struttura e aggiungeremo uno stile per dargli un aspetto completamente unico. Ci vediamo lì!
