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?

5 modi per tenersi concentrati sul lavoro

Mantenerti concentrato sul lavoro può essere difficile a volte. Ecco un episodio che vedi troppe volte prima - inizi la tua giornata dicendo a te stesso che riceverai (inserisci la quantità) di attività svolte oggi. Per quanto determinato, potresti finire per avere una conversazione smussata con i tuoi amici, rispondere e inviare e-mail e, naturalmente, essere molto occupato nei social network, proprio come la maggior parte di noi qui .Qu

(Consigli tecnici e di design)

20 tutorial su Adobe Illustrator da apprendere nel 2017

La progettazione e l'arte digitale sono una di quelle competenze che necessitano di un costante aggiornamento man mano che nuovi strumenti e tecnologie continuano a emergere . Allo stesso modo, per Adobe Illustrator vengono creati nuovi trucchi e tecniche. Ma non è necessario unirti a lezioni speciali o partecipare a un corso per migliorare le abilità di Illustrator in quanto i tutorial di Adobe Illustrator possono svolgere il lavoro giusto.I

(Consigli tecnici e di design)