Utilizendu LESS cù Bootstrap

Personalizà è estende Bootstrap cù LESS , un preprocessore CSS, per prufittà di e variàbili, mixin, è più utilizati per custruisce CSS di Bootstrap.

Perchè MENU?

Bootstrap hè fattu cù LESS in u so core, una lingua di stile dinamica creata da u nostru bonu amicu, Alexis Sellier . Face u sviluppu di CSS basati in sistemi più veloce, più faciule è più divertente.

Chì ci hè inclusu?

Cum'è una estensione di CSS, LESS include variabili, mixins per snippets di codice reutilizabili, operazioni per matematiche simplici, nesting, è ancu funzioni di culore.

Sapè ne di più

Visita u situ ufficiale à http://lesscss.org/ per sapè di più.

Variabili

A gestione di i culori è i valori di pixel in CSS pò esse un pocu di dolore, di solitu pienu di copia è incolla. Tuttavia, micca cù LESS - assignate culori o valori di pixel cum'è variabili è cambiate una volta.

Mixins

Quelli trè dichjarazioni di u raghju di u cunfini chì avete bisognu di fà in CSS regulare? Avà sò falati à una linea cù l'aiutu di mixins, snippets di codice chì pudete reutilizà in ogni locu.

Operazioni

Fate a vostra griglia, guida, è più super flexible fendu a matematica à a mosca cù operazioni. Multiplicà, dividite, aghjunghje è sottrae u vostru modu à a sanità CSS.

Hyperlinks

`@linkColor`	#08c	Culore di testu di u ligame predeterminatu
`@linkColorHover`	`darken(@linkColor, 15%)`	U testu di u ligame predefinitu passa u culore

Sistema di griglia

`@gridColumns`	12
`@gridColumnWidth`	60 px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Tipografia

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

Culori in scala di grisgiu

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

Accent colors

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

Cumpunenti

Bottoni

`@primaryButtonBackground`	`@linkColor`

Forme

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Forme stati è alerti

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

À propositu di mixins

Mixins basi

Un mixin basicu hè essenzialmente un include o un parziale per un snippet di CSS. Sò scritti cum'è una classa CSS è ponu esse chjamati in ogni locu.

. elementu {
  . clearfix ();
}

Mixins parametrici

Un mixin parametricu hè cum'è un mixin basicu, ma accetta ancu parametri (da quì u nome) cù valori predeterminati opzionali.

. elementu {
  . cunfini - radius ( 4px );
}

Facilmente aghjunghje u vostru propiu

Quasi tutti i mixins di Bootstrap sò almacenati in mixins.less, una maravigliosa utilità .less file chì permette di utilizà un mixin in qualsiasi di i schedari .less in u toolkit.

Allora, vai avanti è utilizate quelli esistenti o sentite liberu di aghjunghje u vostru propiu cum'è avete bisognu.

Inclusi mixins

Utilità

Mixin	Parametri	Usu
`.clearfix()`	nimu	Aghjunghjite à qualsiasi genitore per sbulicà i galleggianti
`.tab-focus()`	nimu	Applicà u stile di focus Webkit è round Firefox outline
`.center-block()`	nimu	Centru auto un elementu à livellu di bloccu utilizendu`margin: auto`
`.ie7-inline-block()`	nimu	Aduprà in più di rigulari `display: inline-block`pè ottene u sustegnu IE7
`.size()`	`@height: 5px, @width: 5px`	Definite rapidamente l'altezza è a larghezza nantu à una linea
`.square()`	`@size: 5px`	Basta nantu `.size()`à stabilisce a larghezza è l'altezza cum'è u stessu valore
`.opacity()`	`@opacity: 100`	Definite, in numeri interi, u percentualità di opacità (per esempiu, "50" o "75")

Forme

Mixin	Parametri	Usu
`.placeholder()`	`@color: @placeholderText`	Definite u `placeholder`culore di testu per l'inputs

Tipografia

Mixin	Parametri	Usu
`#font > #family > .serif()`	nimu	Fate un elementu aduprà una pila di fonti serif
`#font > #family > .sans-serif()`	nimu	Fate un elementu aduprà una pila di font sans-serif
`#font > #family > .monospace()`	nimu	Fate un elementu aduprà una pila di font monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stabilite facilmente a dimensione di u font, u pesu è u principale
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Pone a famiglia di fonti à serif, è cuntrolla a dimensione, u pesu è u principale
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Pone a famiglia di fonti à sans-serif, è cuntrullà a dimensione, u pesu è u principale
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Pone a famiglia di fonti in monospaziu, è cuntrolla a dimensione, u pesu è u principale

Sistema di griglia

Mixin	Parametri	Usu
`.container-fixed()`	nimu	Crea un cuntainer centratu horizontale per mantene u vostru cuntenutu
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generate un sistema di griglia di pixel (contenitore, fila è colonne) cù n colonne è x canale di larghezza di pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generate un sistema di griglia recente cù n culonni è x % di canaletta larga

Proprietà CSS3

Mixin	Parametri	Usu
`.border-radius()`	`@radius: 5px`	Circundendu i cantoni di un elementu. Pò esse un valore unicu o quattru valori separati da u spaziu
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Aghjunghjite una ombra à un elementu
`.transition()`	`@transition`	Aghjunghjite l'effettu di transizione CSS3 (per esempiu, `all .2s linear`)
`.rotate()`	`@degrees`	Girate un elementu n gradi
`.scale()`	`@ratio`	Scala un elementu à n volte a so dimensione originale
`.translate()`	`@x: 0, @y: 0`	Sposta un elementu nantu à i piani x è y
`.background-clip()`	`@clip`	Taglia u fondu di un elementu (utile per `border-radius`)
`.background-size()`	`@size`	Cuntrolla a dimensione di l'imaghjini di fondo via CSS3
`.box-sizing()`	`@boxmodel`	Cambia u mudellu di scatula per un elementu (per esempiu, `border-box`per una larghezza completa `input`)
`.user-select()`	`@select`	Cuntrolla a selezzione di u cursore di testu nantu à una pagina
`.resizable()`	`@direction: both`	Fate qualsiasi elementu resizable à u dirittu è u fondu
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Fate chì u cuntenutu di qualsiasi elementu utilizate colonne CSS3

Sfondi è gradienti

Mixin	Parametri	Usu
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dà un elementu un culore di fondo trasluzente
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dà un elementu un culore di bordu trasluzente
`#gradient > .vertical()`	`@startColor, @endColor`	Crea un gradiente di fondo verticale cross-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Crea un gradiente di fondo horizontale cross-browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Crea un gradiente di fondo direzionale cross-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Crea un gradiente di fondo di trè culori di u navigatore cross-browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Crea un gradiente di fondu radiale cross-browser
`#gradient > .striped()`	`@color, @angle`	Crea un gradiente di fondo à strisce cross-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Adupratu per i buttoni per assignà un gradiente è un bordu ligeramente più scuru

Nota: Se inviate una dumanda di pull à GitHub cù CSS mudificatu, duvete ricompilà u CSS per qualsiasi di sti metudi.

Strumenti per cumpilà

Node cù makefile

Installa u compilatore di linea di cumanda LESS è uglify-js in u mondu cun npm eseguendu u cumandimu seguente:

$ npm install -g less uglify-js

Una volta installatu, basta eseguite makeda a radica di u vostru cartulare di bootstrap è site tuttu.

Inoltre, se avete watchr installatu, pudete eseguisce make watchper avè bootstrap ricustruitu automaticamente ogni volta chì editate un schedariu in a lib bootstrap (questu ùn hè micca necessariu, solu un metudu di comodità).

Linea di cumanda

Installa l'uttellu di linea di cumanda LESS via Node è eseguite u cumandimu seguente:

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

Assicuratevi di include --compressin quellu cumandamentu sè vo circate di salvà qualchì byte!

Javascript

Scaricate l'ultime Less.js è include u percorsu (è Bootstrap) in u <head>.

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

Per recompilà i schedari .less, basta à salvà è ricaricà a vostra pagina. Less.js li compila è li guarda in u almacenamentu locale.

App Mac non ufficiale

L'app Mac non ufficiale guarda cartulari di schedarii .less è compile u codice à i schedarii lucali dopu ogni salvezza di un schedariu .less guardatu.

Se vulete, pudete cambià e preferenze in l'app per a minificazione automatica è in quale cartulare finiscinu i fugliali compilati.

Custruitu cù LESS

Perchè MENU?

Chì ci hè inclusu?

Sapè ne di più

Variabili

Mixins

Operazioni

Variabili Bootstrap LESS variabili, i so valori è e linee di usu

Hyperlinks

Sistema di griglia

Tipografia

Culori in scala di grisgiu

Accent colors

Cumpunenti

Bottoni

Forme

Navbar

Forme stati è alerti

Mixins Bootstrap

À propositu di mixins

Mixins basi

Mixins parametrici

Facilmente aghjunghje u vostru propiu

Inclusi mixins

Utilità

Forme

Tipografia

Sistema di griglia

Proprietà CSS3

Sfondi è gradienti

Cumpilà Bootstrap cù LESS

Strumenti per cumpilà

Node cù makefile

Linea di cumanda

Javascript

App Mac non ufficiale

Più app Mac

Crunch

CodeKit

Semplice