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

MINDER CSS

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.

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

Parametriese mengsels

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

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

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 @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 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 persentasie roosterstelsel met n kolomme en x % wye geut
#grid > .input() @gridColumnWidth, @gridGutterWidth Genereer die piekselroosterstelsel vir inputelemente, rekening hou met opvulling en grense
.makeColumn @columns: 1, @offset: 0 Verander enige divin '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-boxvir '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.

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 .