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ù

MENU CSS

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.

  1. . elementu {
  2. . clearfix ();
  3. }

Mixins parametrici

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

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

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 utilizendumargin: auto
.ie7-inline-block() nimu Aduprà in più di rigulari display: inline-blockpè 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 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 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' inputelementi, cuntendu u padding è e fruntiere
.makeColumn @columns: 1, @offset: 0 Trasfurmà qualsiasi divin 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-boxper 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.

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 .