LESS brûke mei Bootstrap

Oanpasse en útwreidzje Bootstrap mei LESS , in CSS-preprocessor, om te profitearjen fan de fariabelen, mixins en mear brûkt om de CSS fan Bootstrap te bouwen.

Wêrom MINDER?

Bootstrap is makke mei LESS yn har kearn, in dynamyske stylblêdtaal makke troch ús goede freon, Alexis Sellier . It makket it ûntwikkeljen fan systemen-basearre CSS rapper, makliker en leuker.

Wat is ynbegrepen?

As útwreiding fan CSS omfettet LESS fariabelen, mixins foar werbrûkbere snippets fan koade, operaasjes foar ienfâldige wiskunde, nesting, en sels kleurfunksjes.

Lear mear

Besykje de offisjele webside op http://lesscss.org/ om mear te learen.

Fariabelen

It behearen fan kleuren en pikselwearden yn CSS kin in bytsje pynlik wêze, meast fol mei kopiearje en plakke. Net mei LESS lykwols - tawize kleuren as pikselwearden as fariabelen en feroarje se ien kear.

Mixins

Dy trije grins-radius deklaraasjes moatte jo meitsje yn reguliere ol 'CSS? No binne se op ien rigel del mei help fan mixins, snippets fan koade dy't jo oeral kinne opnij brûke.

Operations

Meitsje jo raster, liedend en mear fleksibel troch de wiskunde op 'e flecht te dwaan mei operaasjes. Fermannichfâldigje, diele, tafoegje en subtractearje jo wei nei CSS-sanity.

Steigers en keppelings

`@bodyBackground`	`@white`	Side eftergrûn kleur
`@textColor`	`@grayDark`	Standert tekstkleur foar it hiele lichem, kopteksten en mear
`@linkColor`	`#08c`	Standert keppeling tekst kleur
`@linkColorHover`	`darken(@linkColor, 15%)`	Standert keppeling tekst hover kleur

Grid systeem

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

Typografy

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13 px	Moatte piksels wêze
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Moatte piksels wêze
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabellen

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

Greyscale kleuren

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

Aksintkleuren

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

Components

Knoppen

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

Formulieren

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

Formearje steaten en warskôgings

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

Held ienheid

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

Oer mixins

Basic mixins

In basismixin is yn essinsje in ynklusyf of in diel foar in snippet fan CSS. Se binne krekt skreaun as in CSS-klasse en kinne oeral neamd wurde.

. elemint {
  . clearfix ();
}

Parametric mixins

In parametryske mixin is krekt as in basismixin, mar it akseptearret ek parameters (dêrfandinne de namme) mei opsjonele standertwearden.

. elemint {
  . grins - radius ( 4px );
}

Foegje jo eigen maklik ta

Hast alle Bootstrap's mixins wurde opslein yn mixins.less, in prachtich .less-bestân dat jo in mixin kin brûke yn ien fan 'e .less-bestannen yn 'e toolkit.

Dus, gean fierder en brûk de besteande of fiel jo frij om jo eigen ta te foegjen as jo nedich binne.

Ynbegrepen mixins

Utilities

Mixin	Parameters	Gebrûk
`.clearfix()`	gjin	Foegje oan elke âlder ta om driuwers binnen te wiskjen
`.tab-focus()`	gjin	Tapasse de Webkit-fokusstyl en rûne Firefox-omtrek
`.center-block()`	gjin	Auto sintrum in blok-nivo elemint mei help fan`margin: auto`
`.ie7-inline-block()`	gjin	Brûk neist reguliere `display: inline-block`om IE7-stipe te krijen
`.size()`	`@height @width`	Set fluch de hichte en breedte op ien rigel
`.square()`	`@size`	Bout op `.size()`om de breedte en hichte as deselde wearde yn te stellen
`.opacity()`	`@opacity`	Stel, yn folsleine getallen, it opaciteitspersintaazje yn (bygelyks "50" of "75")

Formulieren

Mixin	Parameters	Gebrûk
`.placeholder()`	`@color: @placeholderText`	Stel de `placeholder`tekstkleur yn foar ynfier

Typografy

Mixin	Parameters	Gebrûk
`#font > #family > .serif()`	gjin	Meitsje in elemint mei in serif-lettertypestapel
`#font > #family > .sans-serif()`	gjin	Meitsje in elemint mei in sans-serif-lettertypestapel
`#font > #family > .monospace()`	gjin	Meitsje in elemint mei in monospace lettertypestapel
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel lettertypegrutte, gewicht en liedend maklik yn
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel lettertypefamylje yn op serif, en kontrolearje grutte, gewicht en liedend
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel lettertypefamylje yn op sans-serif, en kontrolearje grutte, gewicht en liedend
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel lettertypefamylje yn op monospace, en kontrolearje grutte, gewicht en liedend

Grid systeem

Mixin	Parameters	Gebrûk
`.container-fixed()`	gjin	Meitsje in horizontaal sintraal kontener foar it hâlden fan jo ynhâld
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generearje in pikselrastersysteem (kontainer, rigel en kolommen) mei n kolommen en x pikselbrede goot
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generearje in presint grid systeem mei n kolommen en x % brede gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generearje it pikselrastersysteem foar `input`eleminten, rekken hâldend mei padding en grinzen
`.makeColumn`	`@columns: 1, @offset: 0`	Feroarje elk `div`yn in rasterkolom sûnder de `.span*`klassen

CSS3 eigenskippen

Mixin	Parameters	Gebrûk
`.border-radius()`	`@radius`	Rûn de hoeken fan in elemint. Kin in inkele wearde wêze as fjouwer romte-skieden wearden
`.box-shadow()`	`@shadow`	Foegje in drop shadow ta oan in elemint
`.transition()`	`@transition`	Foegje CSS3-oergongseffekt ta (bgl. `all .2s linear`)
`.rotate()`	`@degrees`	Rotearje in elemint n graden
`.scale()`	`@ratio`	Skaalje in elemint nei n kear de oarspronklike grutte
`.translate()`	`@x, @y`	Ferpleats in elemint op de x- en y-fleanen
`.background-clip()`	`@clip`	De eftergrûn fan in elemint snije (nuttich foar `border-radius`)
`.background-size()`	`@size`	Kontrolearje de grutte fan eftergrûnôfbyldings fia CSS3
`.box-sizing()`	`@boxmodel`	Feroarje it fakmodel foar in elemint (bygelyks `border-box`foar in folsleine breedte `input`)
`.user-select()`	`@select`	Kontrolearje cursor seleksje fan tekst op in side
`.backface-visibility()`	`@visibility: visible`	Foarkom flikkerjen fan ynhâld by it brûken fan CSS 3D-transformaasjes
`.resizable()`	`@direction: both`	Meitsje elk elemint resizable oan de rjochterkant en ûnderkant
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Meitsje de ynhâld fan elk elemint mei CSS3-kolommen

Eftergrûnen en gradiënten

Mixin	Parameters	Gebrûk
`#translucent > .background()`	`@color: @white, @alpha: 1`	Jou in elemint in trochsichtige eftergrûnkleur
`#translucent > .border()`	`@color: @white, @alpha: 1`	Jou in elemint in trochsichtige rânekleur
`#gradient > .vertical()`	`@startColor, @endColor`	Meitsje in cross-browser fertikale eftergrûngradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Meitsje in cross-browser horizontale eftergrûngradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Meitsje in cross-browser rjochting eftergrûngradient
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Meitsje in cross-browser eftergrûngradient mei trije kleuren
`#gradient > .radial()`	`@innerColor, @outerColor`	Meitsje in cross-browser radiale eftergrûngradient
`#gradient > .striped()`	`@color, @angle`	Meitsje in cross-browser gestreepte eftergrûngradient
`#gradientBar()`	`@primaryColor, @secondaryColor`	Wurdt brûkt foar knoppen om in gradient en wat donkerdere râne ta te jaan

Opmerking: as jo in pull-fersyk yntsjinje by GitHub mei wizige CSS, moatte jo de CSS opnij kompilearje fia ien fan dizze metoaden.

Tools foar kompilaasje

Node mei makefile

Ynstallearje de LESS kommandorigelkompiler en uglify-js wrâldwiid mei npm troch it folgjende kommando út te fieren:

$ npm ynstallearje -g minder uglify-js

Ienris ynstalleare, rinne gewoan makefan 'e root fan jo bootstrap-map en jo binne allegear ynsteld.

Derneist, as jo watchr ynstalleare hawwe, kinne jo rinne make watchom bootstrap automatysk opnij te meitsjen elke kear as jo in bestân yn 'e bootstrap lib bewurkje (dit is net fereaske, gewoan in gemaksmetoade).

Kommandorigel

Ynstallearje it LESS kommandorigelark fia Node en fier it folgjende kommando út:

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

Wês wis dat --compressjo dit kommando opnimme as jo besykje wat bytes te bewarjen!

Javascript

Download de lêste Less.js en befetsje it paad dernei (en Bootstrap) yn 'e <head>.

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

Om de .less-bestannen opnij te kompilearjen, bewarje se gewoan en laden jo side opnij. Less.js kompilearret se en bewarret se yn lokale opslach.

Unoffisjele Mac-app

De net-offisjele Mac-app besjocht mappen fan .less-bestannen en kompilearret de koade nei lokale bestannen nei elke opslach fan in besjoen .less-bestân.

As jo wolle, kinne jo foarkar yn 'e app wikselje foar automatysk minifysjen en yn hokker map de kompilearre bestannen einigje.

Boud mei MINDER

Wêrom MINDER?

Wat is ynbegrepen?

Lear mear

Fariabelen

Mixins

Operations

Bootstrap-fariabelen MINDER fariabelen, har wearden, en gebrûksrjochtlinen

Steigers en keppelings

Grid systeem

Typografy

Tabellen

Greyscale kleuren

Aksintkleuren

Components

Knoppen

Formulieren

Formearje steaten en warskôgings

Navbar

Dropdowns

Held ienheid

Bootstrap mixins

Oer mixins

Basic mixins

Parametric mixins

Foegje jo eigen maklik ta

Ynbegrepen mixins

Utilities

Formulieren

Typografy

Grid systeem

CSS3 eigenskippen

Eftergrûnen en gradiënten

Bootstrap kompilearje mei MINDER

Tools foar kompilaasje

Node mei makefile

Kommandorigel

Javascript

Unoffisjele Mac-app

Mear Mac-apps

Crunch

CodeKit

Ienfâldich