Gebruik MINDER met Bootstrap

Pasmaak en brei Bootstrap uit met LESS , 'n CSS-voorverwerker, om voordeel te trek uit die veranderlikes, mixins en meer wat gebruik word om Bootstrap se CSS te bou.

Hoekom MINDER?

Bootstrap is gemaak met MINDER in sy kern, 'n dinamiese stylbladtaal wat deur ons goeie vriend, Alexis Sellier , geskep is . Dit maak die ontwikkeling van stelselgebaseerde CSS vinniger, makliker en lekkerder.

Wat is ingesluit?

As 'n uitbreiding van CSS, bevat MINDER veranderlikes, mengsels vir herbruikbare kodefragmente, bewerkings vir eenvoudige wiskunde, nes en selfs kleurfunksies.

Leer meer

Besoek die amptelike webwerf by http://lesscss.org/ om meer te wete te kom.

Veranderlikes

Die bestuur van kleure en pixelwaardes in CSS kan 'n bietjie van 'n pyn wees, gewoonlik vol kopieer en plak. Maar nie met MINDER nie—ken kleure of pixelwaardes toe as veranderlikes en verander dit een keer.

Mengsels

Daardie drie grensradius-verklarings wat jy in gewone ou CSS moet maak? Nou is hulle op een lyn met die hulp van mixins, stukkies kode wat jy enige plek kan hergebruik.

Bedrywighede

Maak jou rooster, toonaangewende en meer super buigsaam deur die wiskunde op die vlieg met bewerkings te doen. Vermenigvuldig, deel, tel en trek jou pad na CSS-sans af.

Steierwerk en skakels

`@bodyBackground`	`@white`	Bladsy agtergrondkleur
`@textColor`	`@grayDark`	Verstek tekskleur vir die hele liggaam, opskrifte en meer
`@linkColor`	`#08c`	Verstek skakel teks kleur
`@linkColorHover`	`darken(@linkColor, 15%)`	Verstek skakel teks sweef kleur

Rooster stelsel

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

Tipografie

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

Tabelle

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

Grysskaal kleure

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

Aksentkleure

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

Komponente

Knoppies

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

Vorms

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

Vorm state en waarskuwings

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

Navbar

`@navbarHeight`	40 px
`@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`

Aftrekkies

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Helde eenheid

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

Oor mixins

Basiese mengsels

'N Basiese mengsel is in wese 'n insluit of 'n gedeelte vir 'n brokkie CSS. Hulle is net soos 'n CSS-klas geskryf en kan enige plek genoem word.

. element {
  . clearfix ();
}

Parametriese mengsels

'n Parametriese vermenging is net soos 'n basiese vermenging, maar dit aanvaar ook parameters (vandaar die naam) met opsionele verstekwaardes.

. element {
  . grens - radius ( 4px );
}

Voeg maklik jou eie by

Byna al Bootstrap se mixins word in mixins.less gestoor, 'n wonderlike .less-lêer wat jou in staat stel om 'n mixin in enige van die .less-lêers in die toolkit te gebruik.

So, gaan voort en gebruik die bestaandes of voeg gerus jou eie by soos jy nodig het.

Mengsels ingesluit

Nutsprogramme

Meng	Grense	Gebruik
`.clearfix()`	geen	Voeg by enige ouer om vlotte binne skoon te maak
`.tab-focus()`	geen	Pas die Webkit-fokusstyl en ronde Firefox-omtrek toe
`.center-block()`	geen	Sentreer outomaties 'n blokvlakelement deur gebruik te maak van`margin: auto`
`.ie7-inline-block()`	geen	Gebruik bykomend tot gereelde `display: inline-block`om IE7-ondersteuning te kry
`.size()`	`@height @width`	Stel die hoogte en breedte vinnig op een lyn
`.square()`	`@size`	Bou voort `.size()`om die breedte en hoogte as dieselfde waarde te stel
`.opacity()`	`@opacity`	Stel, in heelgetalle, die ondeursigtigheid persentasie (bv. "50" of "75")

Vorms

Meng	Grense	Gebruik
`.placeholder()`	`@color: @placeholderText`	Stel die `placeholder`tekskleur vir invoere

Tipografie

Meng	Grense	Gebruik
`#font > #family > .serif()`	geen	Maak 'n element gebruik 'n serif font stapel
`#font > #family > .sans-serif()`	geen	Maak 'n element gebruik 'n sans-serif fontstapel
`#font > #family > .monospace()`	geen	Maak 'n element gebruik 'n monospace font stapel
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel maklik lettergrootte, gewig en voorste in
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel lettertipefamilie op serif, en beheer grootte, gewig en voorsprong
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel fontfamilie op sans-serif, en beheer grootte, gewig en voorsprong
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel fontfamilie op monospace, en beheer grootte, gewig en leiding

Rooster stelsel

Meng	Grense	Gebruik
`.container-fixed()`	geen	Skep 'n horisontaal gesentreerde houer om jou inhoud te hou
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Genereer 'n piekselroosterstelsel (houer, ry en kolomme) met n kolomme en x piekselwye geut
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Genereer 'n persentasie roosterstelsel met n kolomme en x % wye geut
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Genereer die piekselroosterstelsel vir `input`elemente, rekening hou met opvulling en grense
`.makeColumn`	`@columns: 1, @offset: 0`	Verander enige `div`in 'n roosterkolom sonder die `.span*`klasse

CSS3 eienskappe

Meng	Grense	Gebruik
`.border-radius()`	`@radius`	Rond die hoeke van 'n element. Kan 'n enkele waarde of vier spasie-geskeide waardes wees
`.box-shadow()`	`@shadow`	Voeg 'n druppelskadu by 'n element
`.transition()`	`@transition`	Voeg CSS3-oorgangseffek by (bv. `all .2s linear`)
`.rotate()`	`@degrees`	Draai 'n element n grade
`.scale()`	`@ratio`	Skaal 'n element tot n keer sy oorspronklike grootte
`.translate()`	`@x, @y`	Beweeg 'n element op die x- en y-vlakke
`.background-clip()`	`@clip`	Sny die agtergrond van 'n element (nuttig vir `border-radius`)
`.background-size()`	`@size`	Beheer die grootte van agtergrondprente via CSS3
`.box-sizing()`	`@boxmodel`	Verander die boksmodel vir 'n element (bv. `border-box`vir 'n volle breedte `input`)
`.user-select()`	`@select`	Beheer wyserkeuse van teks op 'n bladsy
`.backface-visibility()`	`@visibility: visible`	Voorkom flikkering van inhoud wanneer CSS 3D-transformasies gebruik word
`.resizable()`	`@direction: both`	Maak enige element regs en onderaan veranderbaar
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Maak die inhoud van enige element gebruik CSS3 kolomme
`.hyphens()`	`@mode: auto`	CSS3 koppelteken wanneer jy dit wil hê (sluit in `word-wrap: break-word`)

Agtergronde en gradiënte

Meng	Grense	Gebruik
`#translucent > .background()`	`@color: @white, @alpha: 1`	Gee 'n element 'n deurskynende agtergrondkleur
`#translucent > .border()`	`@color: @white, @alpha: 1`	Gee 'n element 'n deurskynende randkleur
`#gradient > .vertical()`	`@startColor, @endColor`	Skep 'n dwarsblaaier vertikale agtergrondgradiënt
`#gradient > .horizontal()`	`@startColor, @endColor`	Skep 'n kruisblaaier horisontale agtergrondgradiënt
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Skep 'n kruisblaaier-rigting-agtergrondgradiënt
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Skep 'n kruis-blaaier drie-kleur agtergrond gradiënt
`#gradient > .radial()`	`@innerColor, @outerColor`	Skep 'n kruisblaaier radiale agtergrondgradiënt
`#gradient > .striped()`	`@color, @angle`	Skep 'n kruisblaaier-gestreepte agtergrondgradiënt
`#gradientBar()`	`@primaryColor, @secondaryColor`	Word gebruik vir knoppies om 'n gradiënt en effens donkerder rand toe te ken

Let wel: As jy 'n trekversoek aan GitHub met gewysigde CSS indien, moet jy die CSS hersaamstel via enige van hierdie metodes.

Gereedskap vir samestelling

Node met makefile

Installeer die MINDER opdragreëlsamesteller, JSHint, Recess en uglify-js wêreldwyd met npm deur die volgende opdrag uit te voer:

$ npm installeer -g minder jshint reses uglify-js

Sodra dit geïnstalleer is, hardloop net makevanaf die wortel van jou bootstrap-gids en jy is gereed.

Daarbenewens, as jy watchr geïnstalleer het, kan jy hardloop make watchom bootstrap outomaties te laat herbou elke keer as jy 'n lêer in die bootstrap lib wysig (dit is nie nodig nie, net 'n geriefsmetode).

Bevelreël

Installeer die MINDER opdragreëlinstrument via Node en voer die volgende opdrag uit:

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

Maak seker --compressdat jy daardie opdrag insluit as jy 'n paar grepe probeer stoor!

Javascript

Laai die nuutste Less.js af en sluit die pad daarheen (en Bootstrap) in die <head>.

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

Om die .less lêers te hersaamstel, stoor hulle net en herlaai jou bladsy. Less.js stel dit saam en stoor dit in plaaslike berging.

Nie-amptelike Mac-toepassing

Die nie-amptelike Mac-toepassing kyk na gidse van .less-lêers en stel die kode saam na plaaslike lêers na elke stoor van 'n gekykte .less-lêer.

As jy wil, kan jy voorkeure in die toepassing wissel vir outomatiese verkleining en in watter gids die saamgestelde lêers beland.

Gebou met MINDER

Hoekom MINDER?

Wat is ingesluit?

Leer meer

Veranderlikes

Mengsels

Bedrywighede

Bootstrap-veranderlikes MINDER veranderlikes, hul waardes en gebruiksriglyne

Steierwerk en skakels

Rooster stelsel

Tipografie

Tabelle

Grysskaal kleure

Aksentkleure

Komponente

Knoppies

Vorms

Vorm state en waarskuwings

Navbar

Aftrekkies

Helde eenheid

Bootstrap-mengsels

Oor mixins

Basiese mengsels

Parametriese mengsels

Voeg maklik jou eie by

Mengsels ingesluit

Nutsprogramme

Vorms

Tipografie

Rooster stelsel

CSS3 eienskappe

Agtergronde en gradiënte

Stel Bootstrap saam met MINDER

Gereedskap vir samestelling

Node met makefile

Bevelreël

Javascript

Nie-amptelike Mac-toepassing

Meer Mac-toepassings

Crunch

CodeKit

Eenvoudig