Usare MENO con Bootstrap

Personalizza ed estendi Bootstrap con LESS , un preprocessore CSS, per sfruttare le variabili, i mixin e altro usato per costruire il CSS di Bootstrap.

Perché MENO?

Bootstrap è realizzato con LESS al suo interno, un linguaggio di fogli di stile dinamico creato dal nostro buon amico, Alexis Sellier . Rende lo sviluppo di CSS basati su sistemi più veloce, più facile e più divertente.

Cosa è incluso?

Come estensione di CSS, LESS include variabili, mixin per frammenti di codice riutilizzabili, operazioni per semplici funzioni matematiche, annidamento e persino funzioni di colore.

Scopri di più

Visita il sito ufficiale all'indirizzo http://lesscss.org/ per saperne di più.

Variabili

La gestione dei colori e dei valori dei pixel nei CSS può essere un po' una seccatura, di solito piena di copia e incolla. Non con LESS però: assegna colori o valori di pixel come variabili e modificali una volta.

Miscele

Quelle tre dichiarazioni del raggio di confine che devi fare nel normale vecchio CSS? Ora sono ridotti a una riga con l'aiuto di mixin, frammenti di codice che puoi riutilizzare ovunque.

Operazioni

Rendi la tua griglia, leader e più super flessibile facendo i calcoli al volo con le operazioni. Moltiplica, dividi, aggiungi e sottrai per raggiungere la sanità mentale CSS.

Ponteggi e collegamenti

`@bodyBackground`	`@white`	Colore di sfondo della pagina
`@textColor`	`@grayDark`	Colore del testo predefinito per tutto il corpo, i titoli e altro
`@linkColor`	`#08c`	Colore del testo del collegamento predefinito
`@linkColorHover`	`darken(@linkColor, 15%)`	Colore predefinito al passaggio del mouse per il testo del collegamento

Sistema a griglia

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Tipografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Corriere Nuovo", monospazio
`@baseFontSize`	13px	Devono essere pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Devono essere pixel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabelle

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Colori in scala di grigi

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#F F F

Accenti i colori

`@blue`	#049cd
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Componenti

Bottoni

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

Le forme

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Stati del modulo e avvisi

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87annuncio
`@infoBackground`	#d9edf7

barra di navigazione

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

Dropdown

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Unità Eroe

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

A proposito di mixin

Mix di base

Un mixin di base è essenzialmente un include o un partial per uno snippet di CSS. Sono scritti proprio come una classe CSS e possono essere chiamati ovunque.

. elemento {
  . clearfix ();
}

Mixin parametrici

Un mixin parametrico è proprio come un mixin di base, ma accetta anche parametri (da cui il nome) con valori predefiniti opzionali.

. elemento {
  . bordo - raggio ( 4px );
}

Aggiungi facilmente il tuo

Quasi tutti i mixin di Bootstrap sono archiviati in mixins.less, un meraviglioso file di utilità .less che ti consente di utilizzare un mixin in uno qualsiasi dei file .less nel toolkit.

Quindi, vai avanti e usa quelli esistenti o sentiti libero di aggiungerne uno di cui hai bisogno.

Mixin inclusi

Utilità

Mescolare	Parametri	Utilizzo
`.clearfix()`	nessuno	Aggiungi a qualsiasi genitore per cancellare i float all'interno
`.tab-focus()`	nessuno	Applicare lo stile di messa a fuoco Webkit e il contorno arrotondato di Firefox
`.center-block()`	nessuno	Centrare automaticamente un elemento a livello di blocco utilizzando`margin: auto`
`.ie7-inline-block()`	nessuno	Utilizzare in aggiunta al normale `display: inline-block`per ottenere il supporto di IE7
`.size()`	`@height @width`	Imposta rapidamente l'altezza e la larghezza su una riga
`.square()`	`@size`	Si basa `.size()`per impostare la larghezza e l'altezza sullo stesso valore
`.opacity()`	`@opacity`	Imposta, in numeri interi, la percentuale di opacità (es. "50" o "75")

Le forme

Mescolare	Parametri	Utilizzo
`.placeholder()`	`@color: @placeholderText`	Imposta il `placeholder`colore del testo per gli input

Tipografia

Mescolare	Parametri	Utilizzo
`#font > #family > .serif()`	nessuno	Fai in modo che un elemento utilizzi una pila di caratteri serif
`#font > #family > .sans-serif()`	nessuno	Fai in modo che un elemento utilizzi una pila di caratteri sans-serif
`#font > #family > .monospace()`	nessuno	Fai in modo che un elemento utilizzi una pila di caratteri a spaziatura fissa
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Imposta facilmente la dimensione del carattere, il peso e l'interlinea
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Imposta la famiglia di caratteri su serif e controlla la dimensione, lo spessore e l'interlinea
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Imposta la famiglia di caratteri su sans-serif e controlla la dimensione, il peso e l'interlinea
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Imposta la famiglia di caratteri su spazio vuoto e controlla la dimensione, lo spessore e l'interlinea

Sistema a griglia

Mescolare	Parametri	Utilizzo
`.container-fixed()`	nessuno	Crea un contenitore centrato orizzontalmente per contenere i tuoi contenuti
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Genera un sistema di griglia di pixel (contenitore, riga e colonne) con n colonne e x pixel di ampiezza
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Genera un sistema di griglia percentuale con n colonne e x % di larghezza della grondaia
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Genera il sistema di griglia di pixel per `input`gli elementi, tenendo conto del riempimento e dei bordi
`.makeColumn`	`@columns: 1, @offset: 0`	Trasforma qualsiasi `div`in una colonna della griglia senza le `.span*`classi

proprietà CSS3

Mescolare	Parametri	Utilizzo
`.border-radius()`	`@radius`	Arrotondare gli angoli di un elemento. Può essere un valore singolo o quattro valori separati da spazi
`.box-shadow()`	`@shadow`	Aggiungi un'ombra esterna a un elemento
`.transition()`	`@transition`	Aggiungi l'effetto di transizione CSS3 (ad es. `all .2s linear`)
`.rotate()`	`@degrees`	Ruota un elemento di n gradi
`.scale()`	`@ratio`	Ridimensiona un elemento n volte la sua dimensione originale
`.translate()`	`@x, @y`	Sposta un elemento sui piani xey
`.background-clip()`	`@clip`	Ritaglia lo sfondo di un elemento (utile per `border-radius`)
`.background-size()`	`@size`	Controlla la dimensione delle immagini di sfondo tramite CSS3
`.box-sizing()`	`@boxmodel`	Modificare il modello box per un elemento (ad es. `border-box`per un full-width `input`)
`.user-select()`	`@select`	Controlla la selezione del testo del cursore su una pagina
`.backface-visibility()`	`@visibility: visible`	Impedisci lo sfarfallio del contenuto quando utilizzi le trasformazioni CSS 3D
`.resizable()`	`@direction: both`	Rendi ridimensionabile qualsiasi elemento a destra e in basso
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fai in modo che il contenuto di qualsiasi elemento utilizzi le colonne CSS3
`.hyphens()`	`@mode: auto`	Sillabazione CSS3 quando vuoi (include `word-wrap: break-word`)

Sfondi e sfumature

Mescolare	Parametri	Utilizzo
`#translucent > .background()`	`@color: @white, @alpha: 1`	Assegna a un elemento un colore di sfondo traslucido
`#translucent > .border()`	`@color: @white, @alpha: 1`	Assegna a un elemento un colore del bordo traslucido
`#gradient > .vertical()`	`@startColor, @endColor`	Crea un gradiente di sfondo verticale su più browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Crea un gradiente di sfondo orizzontale su più browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Crea un gradiente di sfondo direzionale cross-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Crea una sfumatura di sfondo a tre colori per più browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Crea un gradiente di sfondo radiale cross-browser
`#gradient > .striped()`	`@color, @angle`	Crea un gradiente di sfondo a strisce su più browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Utilizzato per i pulsanti per assegnare una sfumatura e un bordo leggermente più scuro

Nota: se stai inviando una richiesta pull a GitHub con CSS modificato, devi ricompilare il CSS tramite uno di questi metodi.

Strumenti per la compilazione

Nodo con makefile

Installa il compilatore della riga di comando LESS, JSHint, Recess e uglify-js a livello globale con npm eseguendo il comando seguente:

$ npm install -g less jshint recess uglify-js

Una volta installato, esegui semplicemente makedalla radice della tua directory di bootstrap e sei pronto.

Inoltre, se hai installato watchr , potresti correre make watchper ricostruire automaticamente bootstrap ogni volta che modifichi un file nella libreria bootstrap (questo non è richiesto, solo un metodo pratico).

Riga di comando

Installa lo strumento da riga di comando LESS tramite Node ed esegui il comando seguente:

$ lessc ./less/bootstrap.less > bootstrap.css

Assicurati di includere --compressin quel comando se stai cercando di salvare alcuni byte!

Javascript

Scarica l'ultimo Less.js e includi il percorso (e Bootstrap) nel file <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Per ricompilare i file .less, salvali e ricarica la pagina. Less.js li compila e li archivia nella memoria locale.

App per Mac non ufficiale

L'app per Mac non ufficiale controlla le directory dei file .less e compila il codice in file locali dopo ogni salvataggio di un file .less visualizzato.

Se lo desideri, puoi attivare le preferenze nell'app per minimizzare automaticamente e in quale directory finiscono i file compilati.

Costruito con MENO

Perché MENO?

Cosa è incluso?

Scopri di più

Variabili

Miscele

Operazioni

Variabili Bootstrap LESS variabili, i loro valori e le linee guida per l'utilizzo

Ponteggi e collegamenti

Sistema a griglia

Tipografia

Tabelle

Colori in scala di grigi

Accenti i colori

Componenti

Bottoni

Le forme

Stati del modulo e avvisi

barra di navigazione

Dropdown

Unità Eroe

Mixin Bootstrap

A proposito di mixin

Mix di base

Mixin parametrici

Aggiungi facilmente il tuo

Mixin inclusi

Utilità

Le forme

Tipografia

Sistema a griglia

proprietà CSS3

Sfondi e sfumature

Compilare Bootstrap con LESS

Strumenti per la compilazione

Nodo con makefile

Riga di comando

Javascript

App per Mac non ufficiale

Altre app per Mac

Croccante

CodeKit

Semplice