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.
Gebou met MINDER
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, mixins vir herbruikbare kodefragmente, bewerkings vir eenvoudige wiskunde, nes en selfs kleurfunksies.
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.
Bootstrap-veranderlikes MINDER veranderlikes, hul waardes en gebruiksriglyne
Hiperskakels
@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
@baseFontSize |
13 px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 px |
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
@primaryButtonBackground |
@linkColor |
Vorms
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40 px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Vorm state en waarskuwings
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap-mengsels
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 vanmargin: auto |
.ie7-inline-block() |
geen | Gebruik bykomend tot gereelde display: inline-blockom IE7-ondersteuning te kry |
.size() |
@height: 5px, @width: 5px |
Stel die hoogte en breedte vinnig op een lyn |
.square() |
@size: 5px |
Bou voort .size()om die breedte en hoogte as dieselfde waarde te stel |
.opacity() |
@opacity: 100 |
Stel, in heelgetalle, die ondeursigtigheid persentasie (bv. "50" of "75") |
Vorms
| Meng | Grense | Gebruik |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Stel die placeholdertekskleur 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 bypassende roosterstelsel met n kolomme en x % wye geut |
CSS3 eienskappe
| Meng | Grense | Gebruik |
|---|---|---|
.border-radius() |
@radius: 5px |
Rond die hoeke van 'n element. Kan 'n enkele waarde of vier spasie-geskeide waardes wees |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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-boxvir 'n volle breedte input) |
.user-select() |
@select |
Beheer wyserkeuse van teks op 'n bladsy |
.resizable() |
@direction: both |
Maak enige element regs en onderaan veranderbaar |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Maak die inhoud van enige element gebruik CSS3 kolomme |
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 |
Stel Bootstrap saam met MINDER
Gereedskap vir samestelling
Node met makefile
Installeer die MINDER opdragreëlsamesteller en uglify-js wêreldwyd met npm deur die volgende opdrag uit te voer:
$ npm installeer -g minder 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 ./lib/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.
Meer Mac-toepassings
Crunch
Crunch is 'n wonderlike MINDER redigeerder en samesteller wat op Adobe Air gebou is.
CodeKit
Geskep deur dieselfde ou as die nie-amptelike Mac-toepassing, CodeKit is 'n Mac-toepassing wat LESS, SASS, Stylus en CoffeeScript saamstel.
Eenvoudig
Mac-, Linux- en PC-toepassing vir sleep-en-los-samestelling van MINDER lêers. Boonop is die bronkode op GitHub .