Utilizzando Bootstrap 3 con Sass

Bootstrap viene fornito con le griglie reattive e alcuni componenti Web comuni che possiamo raccogliere per creare rapidamente un sito Web reattivo . Se hai visto i nostri post precedenti su Bootstrap, probabilmente sai che gli stili Bootstrap sono composti usando LESS.

Mentre LESS è diventato più potente con le nuove funzionalità introdotte nella versione 1.5, alcuni di voi potrebbero avere più familiarità con Sass / SCSS. Potrebbero esserci anche alcune funzionalità in Sass che non puoi vivere senza, ma non sono presenti in LESS (ancora). Se vuoi lavorare su Boostrap e con Sass, grazie a Thomas McDonald, puoi farlo perché Bootstrap è stato portato su Sass / SCSS .

Installazione

Ci sono alcuni modi per iniziare a usare Bootstrap + Sass . Innanzitutto, poiché è stato incluso come gemma Ruby, è possibile installarlo tramite Terminal con la seguente riga di comando:

 gem installa bootstrap-sass 

Puoi anche usarlo insieme a Bussola con questo comando qui sotto. È lo stesso metodo con cui installiamo Zurb Foundation. Tuttavia, tieni presente che in questo modo includerai solo _variables.less contenente le variabili Bootstrap e styles.less dove inserisci le tue regole di stile.

 bussola crea il mio nuovo progetto -r bootstrap-sass --utilizzando il bootstrap 

In alternativa, puoi semplicemente scaricarlo dal repository Github.

Novità di Bootstrap 3

Ecco alcune nuove funzionalità trovate in Bootstrap 3.

Design piatto

Il cambiamento che puoi immediatamente vedere dalla nuova versione, Bootstrap 3, è che ora include il design piatto. I gradienti e le ombre che abbiamo trovato nei componenti della versione precedente ora sono spariti.

Grid in Bootstrap 3

Bootstrap introduce anche una serie di nuove classi e nuove costruzioni di griglia. Nella versione 3 sono disponibili griglie grandi, medie, piccole e extra piccole per adattarsi a diverse dimensioni di visualizzazione. Vediamo il seguente esempio HTML:

Colonna sinistra
Colonna centrale
Colonna destra

Abbiamo tre colonne. Ogni colonna ha una larghezza uguale se visualizzata in una dimensione grande della vista (sullo schermo del desktop o sull'orientamento orizzontale sul tablet). La dimensione è applicata con la classe col-md-4 .

Quindi, quando la dimensione dello schermo si col-sm-*, la divisione della larghezza della colonna verrà regolata con la classe col-sm-*, in modo che la larghezza della colonna possa rimanere nella giusta proporzione anziché essere semplicemente sovrapposta, come nella versione precedente di Bootstrap.

Nuovi componenti

Ci sono anche alcuni nuovi componenti aggiunti nella versione 3. Questo include Pager (usato per costruire il tipo di navigazione Next-e-Prev), List Group, Panels e Page Header .

Utilizzando le funzioni di Sass

Tecnicamente, possiamo semplicemente aggiungere le classi Bootstrap agli elementi HTML per rendere il layout del sito Web, come abbiamo fatto nell'esempio sopra. Tuttavia, quando utilizziamo i pre-processori CSS, come Sass, possiamo utilizzare alcune delle funzioni per ottenere una struttura HTML più pulita e semantica anziché essere pieni di nomi di classe privi di significato.

Dato l'esempio precedente, possiamo cambiare la struttura e i nomi delle classi in qualcosa del genere:

Questo è il contenuto.
Questa è la barra laterale.
Questa è la navigazione.

All'interno del foglio di stile, possiamo usare la direttiva Sass @extend per costruire il layout. L'uso di @extend raggrupperà i selettori che condividono le stesse regole di stile.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

In alternativa, puoi usare anche Sass @include che copierà e includerà le regole di stile dei mixins nei nostri selettori di classe.

 .main-area {@include make-row; } .content {@include make-xs-column (6); @include make-sm-column (6); } .sidebar {@include make-xs-column (4); @include make-sm-column (4); } .side-nav {@include make-xs-column (2); @include make-sm-column (2); } .column {@include make-md-column (4); } 

Ora, guardalo sul browser e otterrai il tuo layout reattivo.

Conclusione

Bootstrap e Sass sono sicuramente un'ottima combinazione. Con Bootstrap, puoi creare un sito Web reattivo funzionante in poche ore . E le funzionalità di Sass come @extend e @include possono aiutarci a scrivere CSS più snelli, programmabili e manutenibili . Per ulteriori informazioni su Sass, puoi consultare questo articolo: Come iniziare con Sass: Installazione e Nozioni di base.

Allora, hai provato Bootstrap + Sass?

Generare frammenti di codice WordPress "Magicamente" con WP Hasty

Trattare con frammenti di codice WP può essere un vero dolore. Dalle tassonomie personalizzate ai cicli WP_Query, gli sviluppatori sono sempre frammenti di copia-incolla tra i progetti .Con l' app Web WP Hasty, puoi risparmiare tempo e frustrazione generando snippet con la semplice pressione di un pulsante.

(Consigli tecnici e di design)

Beating Designer's Block: 5 suggerimenti per riprendere la tua creatività

Proprio come i blogger freelance come me si trovano ad affrontare i blocchi dello scrittore, i designer freelance sperimentano anche i loro blocchi creativi di volta in volta. Può essere estremamente frustrante, soprattutto quando il tempo è scaduto per inviare il tuo lavoro al cliente. Eccoti lì, a fissare il tuo progetto, sperando che in qualche modo, o meglio, la tua idea di design originale si insinuasse magicamente nella tua mente.Be

(Consigli tecnici e di design)