Costruisci una pagina Web reattiva, mobile-friendly con scheletro

Recentemente abbiamo pubblicato un articolo in cui sono illustrati 20 esempi stupefacenti di utilizzo di query multimediali per il responsive web design. Queste pagine Web rispondono molto bene alle diverse dimensioni della finestra del browser, dagli enormi schermi HD agli smartphone.

Oggi vi mostreremo come utilizzare uno standard di riscaldamento chiamato Skeleton per eliminare i mal di testa dalla progettazione e dalla creazione di una pagina Web reattiva. Sarai sbalordito da quanto sia facile!

Cos'è lo scheletro?

The Skeleton Home Page descrive il progetto come una piccola raccolta di file CSS e JS che può aiutarti a sviluppare rapidamente siti che sembrano belli a qualsiasi dimensione, sia che si tratti di uno schermo da 17 "o di un iPhone.

In sostanza, ciò che ha fatto Dave Gamache, creatore di Skeleton, è la riforma dell'invecchiamento della struttura 960 per affrontare meglio le sfide moderne presentate dalla ricchezza di dispositivi che accedono regolarmente al web. Sebbene il progetto includa anche alcuni extra extra come jQuery, oggi ci concentreremo principalmente sull'aspetto del layout. Tieni presente che, poiché questa struttura è organizzata così bene, è abbastanza semplice rimuovere tutto ciò che non usiamo. L'autore pone una forte enfasi sulla personalizzazione: conserva ciò che ti piace, cambia ciò che non fai!

Sbirciata

Demo dal vivo: fare clic per avviare

Iniziare

Il primo passo è scaricare il progetto. Dopo aver scaricato e decompresso tutto, apri il file HTML incluso e scarica tutto all'interno del contenitore.

Prima di iniziare a costruire la pagina, è importante capire come funziona. Skeleton è costruito su una griglia, quindi se odi i quadri di griglia, non ti conquisterà. Sentiti libero di smettere di leggere ora, lascia un brutto commento sullo sviluppo del web semantico e vai avanti.

Per quelli di voi ancora interessati, ci sono sedici colonne, ognuna delle quali ha un margine sinistro di 10px e un margine destro di 10px. Con una larghezza totale di 960 px per il container, ecco le dimensioni per ogni colonna:

/ * Base Grid * / .container .one.column {width: 40px; } .container .two.columns {width: 100px; } .container .three.columns {width: 160px; } .container .four.columns {width: 220px; } .container .five.columns {width: 280px; } .container .six.columns {width: 340px; } .container .seven.columns {width: 400px; } .container .eight.columns {width: 460px; } .container .nine.columns {width: 520px; } .container .ten.columns {width: 580px; } .container .eleven.columns {width: 640px; } .container .twelve.columns {width: 700px; } .container .thirteen.columns {width: 760px; } .container .fourteen.columns {width: 820px; } .container .fifteen.columns {width: 880px; } .container .sixteen.columns {width: 940px; }

Come con la maggior parte dei sistemi di colonne, il tuo obiettivo è sommare il numero totale: 16. Quindi se vuoi dividere la pagina tra due colonne, crei due div separate e applichi le classi? Otto colonne? a ogni.

Vi sono altre utili funzionalità che dovresti conoscere, ad esempio la possibilità di dividere la larghezza di terzi. Basta applicare il? Un terzo? o? due terzi? classi, che sono rispettivamente pari a 300px e 620px.

.container .one-third.column {width: 300px; } .container .two-thirds.column {width: 620px; }

Inoltre, per creare spazi vuoti o colonne vuote, aggiungi le classi di offset: offset-per-uno, offset-per-dueecc. Ognuno di questi aggiunge sostanzialmente altri sessanta pixel di riempimento per tenere conto delle lacune nel contenuto.

Fogli di stile

Il codice sopra viene dal incluso? Skeleton.css? file. Ci sono anche altri due importanti file CSS: base e layout. Il? Base.css? il file include stili preimpostati per la tipografia, pulsanti, moduli, schede, ecc. La maggior parte di ciò che è qui è completamente opzionale e deve essere sovrascritta dall'utente. Se pensi che questo piatto sia troppo pesante per quello che vuoi fare o ha troppo controllo, metti da parte questo file.

Il? Layout.css? il file è un foglio di stile molto organizzato ma ancora per lo più vuoto incluso per la vostra convenienza. Qui è dove metti qualsiasi CSS personalizzato che vuoi aggiungere per la tua pagina. Questo file CSS contiene anche eventuali query @media extra che potresti voler implementare. Le query di default sono in? Skeleton.css? e fondamentalmente basta applicare una nuova larghezza a tutte le classi di colonne quando la finestra viene ridotta a certe dimensioni.

Pagina Web Passaggio 1: Navigazione

Ora che conosciamo le basi di Skeleton, saltiamo dentro e costruiamo una pagina web con esso! Manterremo il design piacevole e minimale per concentrarci su come tutto è pulito e organizzato, senza quasi nessuno sforzo da parte tua.

La prima cosa che vogliamo aggiungere alla nostra pagina è un semplice elemento logo e alcuni link di navigazione. Ognuno di questi ottiene il proprio div e daremo il primo a una larghezza di due colonne e il secondo a una larghezza di quattordici (2 + 14 = 16).

Quindi, metteremo un semplice? DS? per Design Shack nel primo div e un elenco di link nel secondo div. Ci atteniamo a gran parte dello stile predefinito per il testo solo per farti un'idea degli stili di Skeleton.

<h1>DS</h1> <ul> <li>Casa</li> <li>Di</li> <li>Portafoglio</li> <li>Contatto</li> </ul>

Navigazione CSS

Skeleton si prenderà cura del nostro layout e della maggior parte del nostro stile di testo. Tutto quello che dobbiamo fare è aggiungere dei margini verticali per mettere tutto dove lo vogliamo. Ho anche deciso di cancellare alcuni degli stili di collegamento predefiniti a mio favore.

Quello che ho fatto è applicare una spaziatura superiore all'intero contenitore solo per abbatterlo un po '. Ho anche spostato alcuni link perché di default si allineavano con il top del grande? DS? e li volevo vicino alla metà.

.container {margin-top: 50px; } #nav {margin: 13px 0 0 0; } #nav ul li {display: inline; margine: 0 20px 0 0; margin-bottom: 130px; } #nav a {text-decoration: none; } #nav a: hover {text-decoration: underline; }

Con ciò, stiamo andando bene. Lo stile del testo di Skeleton sta venendo fuori alla grande e si presta decisamente al classico, minimal look che stiamo andando qui.

Passaggio 2: Immagine intestazione

Quando si progetta una pagina Web reattiva, è importante capire come funzionano le immagini. Certo, tutto ciò che il browser rende può essere ridimensionato, ma cosa succede quando un'immagine è troppo grande per il suo contenitore contraente?

Per rispondere a questa domanda, gettiamo in una grande immagine nella parte superiore della nostra pagina. Per fare ciò, aggiungiamo un altro div come prima. Sarà l'intera larghezza del nostro contenitore, quindi dobbiamo applicare le? Sedici colonne? classi.

<h1>DS</h1> <ul> <li>Casa</li> <li>Di</li> <li>Portafoglio</li> <li>Contatto</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_4.jpg"> <h2>Passaggio 3: Messaggio di benvenuto</h2> <p>Chiamerò questa prossima sezione il? Benvenuto? sezione semplicemente perché non ho un altro buon nome per questo. Ora che abbiamo provato un'area di navigazione e un'immagine, abbiamo ancora bisogno di testare un paragrafo di testo puro e uno contenente immagini mescolate con il testo. Questo sarà il primo.</p> <p>Costruendo lo stesso codice HTML che abbiamo già creato, avvia un nuovo div di sedici colonne e lancia un header e un paragrafo come mostrato di seguito.</p> <textarea wrap="soft" readonly=""> <h1>DS</h1> <ul> <li>Casa</li> <li>Di</li> <li>Portafoglio</li> <li>Contatto</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_5.jpg"> <h2>Passaggio 4: tre colonne</h2> <p>Ora abbiamo fatto una sezione di navigazione, un'immagine da sola e un paragrafo a parte. È ora di creare alcune colonne che integrino testo e immagini insieme. Per realizzare questo, useremo il "un terzo"? classe che abbiamo imparato sopra. Questo ci consentirà di suddividere rapidamente la larghezza in tre colonne di contenuto senza quasi alcun lavoro da parte nostra. </p> <p>Inizieremo con il blocco di HTML qui sotto. Per prima cosa inseriamo un tag h2, quindi un'immagine e infine un paragrafo di testo.</p> <textarea wrap="soft" readonly=""> <h2>Uno</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_6.jpg"> <p>Se ridimensioniamo un po 'la finestra, vediamo dei cambiamenti drammatici. Il layout si reinventa completamente, e la parte sorprendente è che sembra ancora bello! Non ho nemmeno avuto il tempo di immaginare come sarebbe stato tutto quando è stato riformattato, ma qui è tutto bello e in una pila verticale.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_7.jpg"> <p>Per finire, è possibile personalizzare gli elementi nella cartella delle immagini per i propri scopi. Skeleton include varie risorse visive come l'Apple Touch Icon per dispositivi iOS e una favicon.</p> <h2>Conclusione</h2> <p>Quando ho iniziato a leggere sul responsive web design, ho apprezzato gli ovvi benefici, ma non ero troppo entusiasta del lavoro extra necessario per pianificare un sito web adatto a qualsiasi dispositivo di dimensioni. </p> <p>Tuttavia, con uno strumento come Skeleton, lo sforzo necessario per rendere una pagina web reattiva è davvero minimo. Se non altro, è un buon esempio da esaminare e fare a pezzi per vedere alcune buone pratiche per implementare il proprio sistema reattivo. </p> <p>Lascia un commento qui sotto e facci sapere cosa ne pensi di Skeleton. Pensi che le pagine web reattive valgano lo sforzo extra? Hai iniziato a rendere i tuoi progetti compatibili con una vasta gamma di dispositivi?</p>