Utilizà 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.
Custruitu cù LESS
Perchè MENU?
Bootstrap hè fattu cù LESS in u 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.
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. Multiple, divide, aghjunghje è sottrae u vostru modu à a sanità CSS.
Variabili Bootstrap LESS variabili, i so valori è e linee di usu
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 |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mixins Bootstrap
À 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 stilu di focus Webkit è round Firefox outline |
.center-block() |
nimu | Centru auto un elementu à livellu di bloccu utilizendumargin: auto |
.ie7-inline-block() |
nimu | Aduprà in più di rigulari display: inline-blockpè ottene u sustegnu IE7 |
.size() |
@height: 5px, @width: 5px |
Definite rapidamente l'altezza è a larghezza nantu à una linea |
.square() |
@size: 5px |
Basta .size()per stabilisce a larghezza è l'altezza cum'è u stessu valore |
.opacity() |
@opacity: 100 |
Definite, in numeri sanu, u percentualità di opacità (per esempiu, "50" o "75") |
Forme
| Mixin | Parametri | Usu |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Definite u placeholderculore 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 carattere, 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 | Fornite un cuntainer di larghezza fissa (con @siteWidth) per mantene u vostru cuntenutu |
.columns() |
@columns: 1 |
Custruite una colonna di griglia chì copre qualsiasi numeru di colonne (predeterminatu à 1 colonna) |
.offset() |
@columns: 1 |
Offset una colonna di griglia cù un margine di manca chì stende ogni numeru di colonne |
.gridColumn() |
nimu | Fate un elementu fluttu cum'è una colonna di griglia |
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 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: 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-boxper 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 |
Cumpilà Bootstrap cù LESS
Strumenti per cumpilà
Node cù makefile
Installa u compilatore di linea di cumanda LESS cù npm eseguendu u cumandimu seguente:
$ npm installate menu
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 almacenamiento 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.
Più app Mac
Crunch
Crunch hè un grande editore LESS è compilatore custruitu nantu à Adobe Air.
CodeKit
Creatu da u stessu tippu cum'è l'app Mac non ufficiale, CodeKit hè una app Mac chì compila LESS, SASS, Stylus è CoffeeScript.
Semplice
App Mac, Linux è PC per drag and drop compilation di LESS files. In più, u codice fonte hè in GitHub .