3 Esempi di layout del sito Web di Rock Solid codificati

Di recente su Design Shack abbiamo presentato un articolo intitolato "10 esempi di layout del sito Web di Rock Solid", che ha suddiviso alcuni layout comuni in semplici wireframe di silhouette in modo da poterli applicare facilmente nel tuo lavoro.

Oggi ho scelto tre di questi layout e li ho convertiti in pagine web reattive dal vivo con HTML e CSS. Sono tutti super semplici e abbastanza facili da essere utilizzati da molti principianti, inoltre useremo un fantastico framework per fare il sollevamento pesi.

Scheletro: Un Boilerplate per Responsive Web Design

In un altro articolo recente, ho esaminato come utilizzare Skeleton Framework per creare pagine web che siano "responsive", ovvero che rispondano bene a una finestra del browser di qualsiasi dimensione. Le pagine web reattive sono perfette su enormi monitor a schermo piatto, piccoli schermi per smartphone e tutto il resto.

Dato che mi è piaciuto utilizzarlo, utilizzeremo ancora oggi Skeleton per trasformare questi layout semplici in pagine web completamente reattive. Sarà così facile che possiamo coprire tre in un singolo post, iniziamo!

Se stai seguendo, assicurati di scaricare prima Skeleton Boilerplate!

Tre scatole

Il primo è un modo incredibilmente semplice ma efficace per rendere le immagini il vero eroe della tua home page. La maggior parte della pagina è occupata da tre foto di grandi dimensioni che potrebbero essere immagini statiche o presentazioni dinamiche.

L'HTML

L'immagine qui sopra ha cinque elementi ovvi che dovremo creare: il logo (in alto a sinistra), la navigazione (in alto a destra), l'immagine grande e due immagini più piccole. La prima cosa che dobbiamo fare è creare un div per ognuno e decidere su alcune larghezze.

Lo Skeleton Boilerplate usa un sistema a sedici colonne per dividere l'area in due sezioni, usiamo le classi? Otto? e? colonne ?. Allo stesso modo, se vogliamo che il contenuto si allunghi completamente, usiamo? Sedici? anziché.

Ora dobbiamo popolare i nostri div con contenuti. Useremo semplicemente il testo per l'area del logo e lanciamo in una lista non ordinata per la navigazione che possiamo spostare a sinistra per forzare gli elementi in un layout orizzontale. Infine, per gli altri abbiamo solo bisogno di alcune immagini segnaposto.

<h2>Design Shack</h2> <ul> <li>Casa</li> <li>Di</li> <li>Contatto</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_3.jpg"> <h2>Schermate 3D</h2> <p>Questo utilizza un effetto molto comune in cui si crea un blocco di alcuni screenshot dal proprio sito Web e li si organizza per dare l'aspetto di uno spazio 3D. Il mockup per gli screenshot è fatto in Photoshop, quindi hai solo bisogno di una grande immagine e del testo. Non potrebbe essere più facile!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_4.jpg"> <h3>HTML</h3> <p>Questo è molto simile all'ultimo, quindi ho intenzione di variare un po 'le cose dal contorno originale. Alla fine avremo una pagina dall'aspetto abbastanza diverso dall'ultima. </p> <textarea wrap="soft" readonly="">

Come puoi vedere, c'è una curva qui sotto forma di un involucro extra, questo ci permetterà di inserire quella barra scura dietro il contenuto nella parte superiore della pagina. Dopodiché, tutto è bello e semplice e abbiamo solo bisogno di due div fulle.

<h3>DS</h3> <ul> <li>Casa</li> <li>Di</li> <li>Contatto</li> </ul> <h1>Lorem Ipsum Doller Set</h1> <p>Lorem ipsum dolor sit amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_5.jpg"> <h2>Grafica in primo piano</h2> <p>Questo è ottimo per mostrare icone, schermate, loghi o qualsiasi altra cosa che sembra grande in un grande cerchio. Ancora una volta scopriremo che il lavoro di impaginazione è quasi senza sforzo e il risultato è unico e interessante.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_6.jpg"> <h3>HTML</h3> <p>Andiamo in giro mettendo il logo e la navigazione su linee diverse, quindi dividendo la larghezza della riga successiva tra l'immagine del cerchio grande e il testo.</p> <p>Si noti che invece di suddividere il contenuto con due? Otto colonne? classi, ho usato e otto e un sette. Quindi ho inserito un punto vuoto con un "offset-by-one"? classe.</p> <textarea wrap="soft" readonly="">

Il contenuto qui è tutto ciò che abbiamo visto prima, un tag di intestazione per il logo, ul per la navigazione, un paio di tag di paragrafo e un'immagine. È tutto ciò che serve, un po 'di stile e questo post sarà completato!

<h3>Design Shack</h3> <ul> <li>Casa</li> <li>Di</li> <li>Portafoglio</li> <li>Contatto</li> </ul> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_7.jpg"> <h2>Conclusione</h2> <p>Come puoi vedere, i nostri esempi di layout pieni di roccia possono essere convertiti in HTML e CSS con uno sforzo minimo. Grazie all'uso di Skeleton, siamo stati persino in grado di rendere i layout reattivi a diverse dimensioni del browser utilizzando solo poche righe di codice aggiuntive.</p> <p>Spero che questo tutorial ti sia piaciuto e lo trovi utile per i progetti futuri. Sentiti libero di rubare il mio codice e usarlo come meglio credi!</p>