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, mixin 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.

Scaffolding è ligami

`@bodyBackground`	`@white`	Colore di fondu di a pagina
`@textColor`	`@grayDark`	Culore di testu predefinitu per tuttu u corpu, intestazioni è più
`@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

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Deve esse pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Deve esse pixel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tavule

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

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

`@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`

Forme

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

Forme stati è alerti

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

Navbar

`@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`

Dropdowns

`@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`

À 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.

Mixin inclusi

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 @width`	Definite rapidamente l'altezza è a larghezza nantu à una linea
`.square()`	`@size`	Basta nantu `.size()`à stabilisce a larghezza è l'altezza cum'è u stessu valore
`.opacity()`	`@opacity`	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 per centu cù n colonne è x % di canaletta larga
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generate u sistema di griglia di pixel per l' `input`elementi, cuntendu u padding è e fruntiere
`.makeColumn`	`@columns: 1, @offset: 0`	Trasfurmà qualsiasi `div`in una colonna di griglia senza e `.span*`classi

Proprietà CSS3

Mixin	Parametri	Usu
`.border-radius()`	`@radius`	Circundendu i cantoni di un elementu. Pò esse un valore unicu o quattru valori separati da u spaziu
`.box-shadow()`	`@shadow`	Aghjunghjite una ombra di goccia à 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, @y`	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
`.backface-visibility()`	`@visibility: visible`	Impedisce u sfarfallu di u cuntenutu quandu utilizate trasformazioni CSS 3D
`.resizable()`	`@direction: both`	Fate qualsiasi elementu resizable à u dirittu è u fondu
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fate chì u cuntenutu di qualsiasi elementu utilizate colonne CSS3
`.hyphens()`	`@mode: auto`	Sillabazione CSS3 quandu vulete (include `word-wrap: break-word`)

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, JSHint, Recess, è uglify-js in u mondu cun npm eseguendu u cumandimu seguente:

$ npm install -g less jshint recess 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 ./less/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

Scaffolding è ligami

Sistema di griglia

Tipografia

Tavule

Culori in scala di grisgiu

Accent colors

Cumpunenti

Bottoni

Forme

Forme stati è alerti

Navbar

Dropdowns

Unità eroe

Mixins Bootstrap

À propositu di mixins

Mixins basi

Mixins parametrici

Facilmente aghjunghje u vostru propiu

Mixin inclusi

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