Share
Durante la parte precedente di questa serie, abbiamo imparato a conoscere l'API di Behance, utilizzandola per acquisire i pezzi del portfolio di un utente e visualizzarli su una pagina Web. In questa parte modificheremo la pagina web, presentando i pezzi del portfolio in un modo opportunamente attraente.
Per iniziare, prepareremo il nostro kit di strumenti:
Useremo Normalize per rendere gli stili degli elementi di base più coerenti tra i diversi browser e ridurre al minimo la possibilità di risultati imprevisti.
Useremo anche MENO per lo styling del nostro sito web. Indipendentemente dal pre-processore che preferisci, è decisamente consigliabile utilizzarli nel tuo flusso di lavoro. Sono un grande fan di, invece di dover trascinare il colore desiderato nel selettore di colori da un'applicazione separata, semplicemente usando le funzioni di controllo di LESS come alleggerire() e scurire() per darci una gamma di varianti di colore.
Per aiutarci ulteriormente, useremo LESSHat per aiutarci a scrivere Di meno codice con la sua collezione Mixins. Useremo anche Remixins sviluppati da Christopher Ramírez. Remixins è una raccolta di Mixin da convertire px in rem unità in. La raccolta include i Mixin per specificare dimensione del font, margine, imbottitura, larghezza e altezza, e posizione CSS (sinistra, destra, parte inferiore, e superiore).
Inoltre, avremo anche bisogno di uno strumento per compilare LESS nei normali CSS. In questo tutorial, useremo un'app chiamata Koala, che è disponibile in Windows, OSX e Ubuntu. Ovviamente puoi usare qualsiasi compilatore che preferisci, ma con un po 'di fortuna, sarai in grado di seguire questo tutorial indipendentemente dalla piattaforma che stai utilizzando.
Per ulteriori informazioni su LESS, fai riferimento a questi tutorial:
I font di sistema predefiniti come Arial non lo fanno per me oggi. In questo tutorial userò invece Google Fonts. Ho scelto Cantata One per l'intestazione e Open Sans per il testo del corpo predefinito. Questa è una preferenza personale, sei libero di escludere Google Fonts o di utilizzare alternative se lo desideri.
Useremo anche le icone dei font per un po 'di decorazione sul nostro sito web. In questi giorni abbiamo un sacco di opzioni per le icone dei font. Tuttavia, durante la mia ricerca sono stato abbastanza sorpreso dal fatto che solo pochi di questi tipi di carattere includono l'icona di Behance nella loro collezione. In ogni caso, per questo tutorial useremo Foundation Icon Fonts 3, dato che include l'icona di Behance ed è anche disponibile attraverso un CDN.
Nella nostra directory root del progetto, creiamo alcune nuove cartelle denominate Di meno e css (che sarà la cartella di output del file LESS). Crea un nuovo file chiamato style.less e prendi Remixins e LESShat. Metti questi tre fogli di stile MENO nel Di meno cartella. In questa fase, l'elenco di file e cartelle nella nostra directory del progetto dovrebbe essere simile a questo:
| - css | - index.html '- less | - lesshat.less | - remixins.less' - style.less
Quindi aggiungi Normalize, i Foundation Icon Fonts e il nostro foglio di stile Google Font all'interno di capo tag, insieme a style.css, quale sarà il file di output di style.less.
Inoltre, apri l'app Koala (o qualsiasi forma di compilazione tu preferisci) e aggiungi la nostra directory di progetto.
La directory del progetto in KoalaPrima di scrivere qualsiasi stile, aggiungiamo alcune icone al nostro sito web. Per prima cosa aggiungeremo il segno di posizione della mappa accanto all'elemento di posizione dell'utente con il fi-marcatore classe. Aggiungi questa classe accanto a profilo-location classe in questo modo:
...user.city, user.country...
Questo aggiungerà a :prima pseudo elemento al div, iniettare l'icona del marker attraverso le nostre icone di base. Successivamente, aggiungeremo il logo Behance nella sezione footer con fi-social-Behance classe.
...Behance
...
Apriamo il nostro style.less e importiamo lesshat.less e remixins.less usando il (riferimento) marchio.
@import (reference) 'lesshat.less'; @import (reference) 'remixins.less';
Il (riferimento) il marchio è stato introdotto in LESS 1.5. Significa che MENO utilizzerà il file solo come riferimento, non compilerà e produrrà il contenuto nel file. È una funzionalità molto potente che riduce al minimo gli stili duplicati e non necessari.
All'interno di style.less, aggiungeremo le seguenti variabili che memorizzano la tavolozza dei colori e la famiglia di font del nostro sito web.
@ bg-body: #fafafa; @ bg-header: # 303746; @ color-base: # 353537; @ nome-colore: # e0e0e0; @ color-title: # 6b919f; @ font-body: 'Open Sans', Arial, sans-serif; @ nome-carattere: 'Cantata One', Georgia, Times, serif;
Collocare queste variabili in un unico punto funge da guida per lo stile, ma ci aiuta anche a mantenere i nostri stili in un modo più conveniente. Per esempio, se c'è qualcosa nel sito che vogliamo cambiare, possiamo semplicemente cambiare il valore all'interno di queste variabili. È un modo molto più sicuro di modificare gli stili, invece di eseguire "Cerca e sostituisci".
Anche se abbiamo aggiunto Normalize che ha standardizzato i nostri stili di elementi, abbiamo ancora alcuni stili da modificare per soddisfare la nostra particolare esigenza. Per iniziare, modificheremo il dimensionamento della scatola, impostando tutti gli elementi (compresi gli pseudo-elementi) per border-box. Questo darà alle nostre dimensioni una base molto più controllabile da cui lavorare.
Possiamo applicare questo con il .box-sizing Mixin dalla libreria LESSHat, come segue:
*, *: before, *: dopo .box-sizing (border-box);
Quindi, imposteremo il html dimensione del carattere a 62,5%, che è un approccio per rendere le unità relative più gestibili.
html font-size: 62,5%;
Il 62,5% qui è misurato rispetto allo standard del browser di 1em che è 16px; quindi il 62,5% di 16px è uguale a 10. In questo modo, saremo facilmente in grado di capire la conversione di rem nel px moltiplicandolo per 10. 1.2rem, per esempio, sarà uguale a 12px e così via. In aggiunta a questo, se diamo un'occhiata al sorgente remixins.less, troveremo la dimensione del carattere di base in @ Base-font-size-px la variabile è impostata a 10.
È possibile fare riferimento a questi articoli per ulteriori informazioni sull'unità relativa CSS:
Noi usiamo a figura elemento per contenere la copertina dell'immagine del portfolio. Ma il nostro figura l'elemento ha ereditato i valori di margine da Normalize che causa uno spazio bianco non intenzionale tra le immagini del portfolio. Quindi, qui rimuoveremo il margine dal figura elemento.
figura margine: 0; / * sovrascrive lo stile di default di Normalize.css * /
L'uso di un hack di clearfix è un metodo popolare come un ricorso ad alcuni problemi di layout causati da elementi mobili che non riescono a cancellare i loro elementi figli. Quindi qui aggiungeremo il suggerimento sulla clearfix di Nicolas Gallagher che abbiamo trasformato in LESS.
.clearfix * zoom: 1; &: before, &: after content: ""; display: tabella; &: after clear: both;
Se dai un'occhiata alla nostra struttura HTML, abbiamo aggiunto clearfix classe per alcuni elementi.
Per il corpo, imposteremo gli stili di carattere che si applicano attraverso l'intera pagina. Questi stili includono la dimensione del carattere, il colore del carattere, il peso del carattere, la famiglia di caratteri e il colore di sfondo. Qui, useremo il .dimensione del font() mixin dalla libreria Remixins per generare la dimensione del carattere. Tutti i Mixin inclusi nella libreria Remixins generano a px fallback di unità, utile per i browser che non supportano il rem unità.
body .font-size (16px); colore di sfondo: @ bg-body; colore: @ color-base; famiglia di caratteri: @ font-base; font-weight: 300;
Dopo aver salvato il file, Koala compilerà automaticamente l'output. E il codice sopra dovrebbe apparire come questo in un normale CSS.
body font-size: 16px; font-size: 1.6rem; background-color: #fafafa; colore: # 353537; font-family: 'Open Sans', Arial, sans-serif; font-weight: 300;
Successivamente, aggiungeremo gli stili per l'intestazione del sito Web, come segue.
.portfolio-header . padding (50px, 0); background-color: @ bg-header; allineamento del testo: centro; .profile-avatar img .size (80px); raggio-limite: 50%; .profile-name .font-size (24px); .margin-basso (10px); colore: @ nome-colore; famiglia di caratteri: @ nome-font; font-weight: 400; .profile-fields .max-width (320px); .font-size (14px); color: lighten (@ bg-header, 50%); margin-left: auto; margin-right: auto; .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: "; .profile-location .font-size (14px); color: lighten (@ bg-header, 30%); &: before .margin-right (10px); .font-size (18px);
Questo è un bel pezzo di sintassi, quindi scomporlo in pezzi ed esaminare cosa sta facendo. In primo luogo, abbiamo aggiunto il colore di sfondo nell'intestazione con il colore memorizzato nel nostro @ Bg-header variabile. Noi usiamo .imbottitura() Mixin di Remixins per aggiungere imbottiture sul lato superiore e inferiore dell'intestazione, offrendo così uno spazio bianco verticale maggiore. Abbiamo anche aggiunto text-align: center quindi il nostro contenuto sembra più in ordine.
.portfolio-header . padding (50px, 0); background-color: @ bg-header; text-align: center; ...
Abbiamo impostato la dimensione dell'immagine dell'avatar dell'utente con .taglia() Mixin e fatto circolare circlular impostando il raggio-bordo al 50%. Puoi vedere questi stili dichiarati in .profilo-avatar img.
.profile-avatar img .size (80px); raggio-limite: 50%;
Di seguito sono riportate le regole per il nome dell'utente. Qui impostiamo la dimensione del carattere con a .dimensione del font() mixin. Abbiamo schierato il @ Colore-nome variabile per il colore del carattere e ha passato la famiglia di caratteri con il @famiglia di font variabile. E infine, abbiamo aggiunto font-weight: 400; per rendere il carattere più audace rispetto al resto.
.nome-profilo .font-size (24px); .margin-basso (10px); colore: @ nome-colore; famiglia di caratteri: @ nome-font; font-weight: 400;
Successivamente, esamineremo le regole per l'area dei campi delle creatività utente, con le quali miriamo .profilo campi. In Behance, puoi aggiungere tutte le abilità o specialità sul campo che desideri. Ciò significa che ogni utente può avere descrizioni di abilità corte o molto lunghe. Ho quindi deciso di impostare la larghezza con a larghezza massima. Abbiamo impostato il colore del carattere per il 50% più leggero dallo sfondo dell'intestazione con schiarire (@ bg-header, 50%).
Inoltre, ciascuno degli elementi del campo è separato da una virgola che abbiamo fornito attraverso un :dopo pseudo-elemento. Tuttavia, logicamente, l'ultimo elemento non dovrebbe avere una virgola, quindi abbiamo selezionato l'ultimo elemento con :ultimo bambino e impostare il soddisfare proprietà da essere vuota soddisfare:".
.campi profilo .max-width (320px); .font-size (14px); color: lighten (@ bg-header, 50%); margin-left: auto; margin-right: auto; .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: ";
Di seguito sono riportate le regole di stile per lo styling della posizione dell'utente. Qui impostiamo il colore leggermente più chiaro del colore di sfondo, il 30% per l'esattezza. E abbiamo anche leggermente ampliato il divario tra il testo e l'icona del marker di Foundation Icon Fonts aggiungendo margin-right al :prima pseudo-elemento.
.profile-location .font-size (14px); color: lighten (@ bg-header, 30%); &: before .margin-right (10px); .font-size (18px);
Dopo aver aggiunto questi stili, l'intestazione dovrebbe ora assomigliare a questo:
Il seguente frammento contiene tutti gli stili per il nostro portafoglio.
.portfolio-area .margin (50px, auto); .max larghezza (960px); larghezza: 100%; .portfolio-list padding-left: 0; .portfolio-item .margin-bottom (30px); .Height (320px); .padding (0, 15px); fluttuare: a sinistra; list-style-type: none; larghezza: 33,33333333333333%; . portfolio-content text-align: center; .portfolio-cover width: 100%; .portfolio-image border: 8px solid #fff; larghezza massima: 100%; .portfolio-title .font-size (14px); colore: scurisci (@ color-title, 10%); text-transform: capitalize; allineamento verticale: medio; larghezza: 100%; .portfolio-fields .font-size (12px); colore: scurire (@ bg-body, 30%); .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: ";
Molti degli stili sopra sono decorativi. Ma qui ci sono alcune cose chiave che vale la pena notare:
Per prima cosa, impostiamo il .portafoglio-zona larghezza al 100%, ma conserva la larghezza massima a 960 px. Ciò consentirà alla larghezza di adattarsi con grazia in dimensioni viewport più piccole. Inoltre, come puoi vedere sopra, abbiamo impostato il .portafoglio-item larghezza a 33,33333333333333%. Questo perché mostreremo tre elementi per ogni riga. Il 33,33333333333333% è derivato dalla divisione del 100% per 3.
Il .portafoglio-cover la larghezza è impostata al 100%, quindi riempirà la larghezza del suo genitore. Il .portafoglio-image è impostato con max-width: 100% quindi l'immagine non supererà la larghezza genitore indipendentemente dalla dimensione. Tutte queste impostazioni di larghezza ci aiuteranno a rendere fluido il nostro sito web.
Ora, la sezione portfolio dovrebbe essere simile a questa.
Successivamente, aggiungeremo gli stili per il piè di pagina. Il Footer è semplice e semplice; è composto solo da testo "Powered by" e da un'icona Behance di Foundation Icon Fonts. Di seguito sono riportate tutte le regole di stile per il piè di pagina.
.portfolio-footer .margin (30px, auto); .max larghezza (960px); allineamento del testo: centro; larghezza: 100%; .power-by .font-size (12px); colore: scurire (@ bg-body, 30%); text-transform: maiuscolo; .power-logo .width (36px); .Height (36px); colore: # 1769ff; display: blocco in linea; margine: 0 auto; overflow: nascosto; posizione: relativa; decorazione del testo: nessuna; text-indent: 100%; white-space: nowrap; &: before .line-height (38px); .font-size (36px); display: blocco in linea; altezza: 100%; a sinistra: 0; posizione: assoluta; text-indent: 0; inizio: 0; larghezza: 100%;
Analogamente alla sezione portfolio, impostiamo la larghezza del piè di pagina al 100% e lo allineiamo al centro della finestra del browser margine: 0 auto;. Allineamo anche tutti i contenuti al centro per renderlo ordinato. Quindi nascondiamo il testo all'interno .power-logo utilizzando il metodo Kellum e visualizza solo il logo Behance con il suo colore del marchio, blu # 1769ff.
Nota: Se vuoi dare un'occhiata, Behance ha una sezione completa per gli sviluppatori sulle loro linee guida per il branding.
Ora il Footer dovrebbe apparire abbastanza completo, in questo modo.
Abbiamo un layout fluido, ma ora renderemo la nostra pagina web reattiva. Fortunatamente, il nostro sito Web è solo un sito web a pagina singola con un layout molto semplice. Quindi non richiederà alcun codice lungo per renderlo reattivo. Per cominciare, aggiungeremo il meta viewport (cruciale) in capo etichetta.
Successivamente aggiungiamo alcune Media Query, come segue.
@media solo schermo e (min-width: 768px) e (max-width: 959px) .portfolio-area .portfolio-item width: 50%; @media only screen e (max-width: 767px) .portfolio-area .portfolio-item height: auto; larghezza: 100%;
Queste query multimediali visualizzeranno due elementi in una riga tra la larghezza della vista di 959 px e 768 px e un elemento quando la larghezza della finestra di visualizzazione è 767px e inferiore.
Il nostro sito web di portfolio in diverse dimensioni di viewportDopo aver disegnato l'estetica della nostra pagina, tutto ciò che resta da fare è aggiungere un tocco in più. Nella prossima e ultima parte di questa serie, consentiremo ai visitatori di fare clic su ogni miniatura e vedere una versione più grande, inoltre aggiungeremo alcune animazioni CSS3 per migliorare l'esperienza.
Accentsconagua