Notar MINNA með Bootstrap

Sérsníddu og framlengdu Bootstrap með LESS , CSS forgjörva, til að nýta breyturnar, mixin og fleira sem notað er til að byggja upp CSS Bootstrap.

Hvers vegna MINNA?

Bootstrap er búið til með MESS í kjarnanum, kraftmiklu stílblaðsmáli búið til af góðum vini okkar, Alexis Sellier . Það gerir þróun kerfisbundins CSS hraðari, auðveldari og skemmtilegri.

Hvað er innifalið?

Sem framlenging á CSS inniheldur LESS breytur, blöndun fyrir endurnotanlega kóðabúta, aðgerðir fyrir einfalda stærðfræði, hreiður og jafnvel litaaðgerðir.

Læra meira

MINNA CSS

Farðu á opinberu vefsíðuna á http://lesscss.org/ til að læra meira.

Breytur

Að hafa umsjón með litum og pixlagildum í CSS getur verið svolítið sársaukafullt, venjulega fullt af copy og paste. Ekki með MINNA þó - úthlutaðu litum eða pixlagildum sem breytum og breyttu þeim einu sinni.

Mixins

Þessar þrjár landamæraradíus yfirlýsingar sem þú þarft að gera í venjulegu CSS? Nú eru þeir komnir í eina línu með hjálp mixins, kóðabúta sem þú getur endurnotað hvar sem er.

Aðgerðir

Gerðu ristina þína, leiðandi og ofur sveigjanlegri með því að reikna út á flugi með aðgerðum. Margfalda, deila, bæta við og draga frá leið þinni til CSS geðheilsunnar.

Vinnupallar og tenglar

@bodyBackground @white Bakgrunnslitur síðu
@textColor @grayDark Sjálfgefinn textalitur fyrir allan meginmálið, fyrirsagnir og fleira
@linkColor #08c Sjálfgefinn textalitur á tengli
@linkColorHover darken(@linkColor, 15%) Sjálfgefinn tengilitur fyrir sveima

Ratkerfi

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

Leturfræði

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Mónakó, "Courier New", monospace
@baseFontSize 13px Verður að vera pixlar
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Verður að vera pixlar
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Töflur

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

Grátóna litir

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

Hreim litir

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

Íhlutir

Hnappar

@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

Eyðublöð

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

Form ríki og tilkynningar

@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

Hetjueining

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Um mixins

Grunnblöndur

Grunnblöndun er í rauninni innihald eða hluti fyrir brot af CSS. Þeir eru skrifaðir alveg eins og CSS flokkur og hægt er að hringja í þá hvar sem er.

  1. . þáttur {
  2. . clearfix ();
  3. }

Parametric mixins

Parametric mixin er alveg eins og grunn mixin, en það tekur einnig við breytum (þar af leiðandi nafnið) með valfrjálsum sjálfgefnum gildum.

  1. . þáttur {
  2. . landamæri - radíus ( 4px );
  3. }

Bættu auðveldlega við þínu eigin

Næstum öll mixin frá Bootstrap eru geymd í mixins.less, frábærri .less skrá sem gerir þér kleift að nota mixin í hvaða .less skrá sem er í verkfærakistunni.

Svo, farðu á undan og notaðu þau sem fyrir eru eða ekki hika við að bæta við þínum eigin eins og þú þarft.

Innifalið blandar

Veitur

Mixin Færibreytur Notkun
.clearfix() enginn Bættu við hvaða foreldri sem er til að hreinsa flot innan
.tab-focus() enginn Notaðu Webkit fókusstílinn og hringlaga Firefox útlínur
.center-block() enginn Sjálfvirk miðja blokk-stigi þáttur með því að notamargin: auto
.ie7-inline-block() enginn Notaðu til viðbótar við venjulegan display: inline-blocktil að fá IE7 stuðning
.size() @height @width Stilltu hæð og breidd fljótt á einni línu
.square() @size Byggir á .size()til að stilla breidd og hæð sem sama gildi
.opacity() @opacity Stilltu, í heilum tölum, hlutfall ógagnsæis (td "50" eða "75")

Eyðublöð

Mixin Færibreytur Notkun
.placeholder() @color: @placeholderText Stilltu placeholdertextalitinn fyrir inntak

Leturfræði

Mixin Færibreytur Notkun
#font > #family > .serif() enginn Láttu frumefni nota serif leturstafla
#font > #family > .sans-serif() enginn Láttu frumefni nota sans-serif leturstafla
#font > #family > .monospace() enginn Láttu frumefni nota monospace leturstafla
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stilltu auðveldlega leturstærð, þyngd og leið
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stilltu leturfjölskyldu á serif og stjórnaðu stærð, þyngd og leið
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stilltu leturfjölskyldu á sans-serif og stjórnaðu stærð, þyngd og leiðarljósi
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stilltu leturfjölskyldu á monospace og stjórnaðu stærð, þyngd og leið

Ratkerfi

Mixin Færibreytur Notkun
.container-fixed() enginn Búðu til láréttan ílát til að geyma efnið þitt
#grid > .core() @gridColumnWidth, @gridGutterWidth Búðu til pixla kerfi (gámur, röð og dálkar) með n dálkum og x pixla breiðri rennu
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Búðu til prósentukerfi með n dálkum og x % breiðri rennu
#grid > .input() @gridColumnWidth, @gridGutterWidth Búðu til pixlakerfi fyrir inputþætti, gerðu grein fyrir fyllingu og landamærum
.makeColumn @columns: 1, @offset: 0 Breyttu hvaða divsem er í töfludálk án .span*flokkanna

CSS3 eiginleikar

Mixin Færibreytur Notkun
.border-radius() @radius Snúið hornin á frumefni. Getur verið eitt gildi eða fjögur gildi aðskilin með bilum
.box-shadow() @shadow Bættu fallskugga við frumefni
.transition() @transition Bættu við CSS3 umbreytingaráhrifum (td all .2s linear)
.rotate() @degrees Snúðu frumefni n gráðum
.scale() @ratio Skala stak í n sinnum upprunalega stærð þess
.translate() @x, @y Færðu stak á x og y planinu
.background-clip() @clip Skera bakgrunn frumefnis (gagnlegt fyrir border-radius)
.background-size() @size Stjórnaðu stærð bakgrunnsmynda með CSS3
.box-sizing() @boxmodel Breyttu kassalíkaninu fyrir þátt (td border-boxfyrir fulla breidd input)
.user-select() @select Stjórna vali bendils á texta á síðu
.backface-visibility() @visibility: visible Komið í veg fyrir flökt á efni þegar CSS 3D umbreytingar eru notaðar
.resizable() @direction: both Gerðu hvaða frumefni sem er hægt að breyta stærð hægra megin og neðst
.content-columns() @columnCount, @columnGap: @gridGutterWidth Láttu innihald hvers þáttar nota CSS3 dálka
.hyphens() @mode: auto CSS3 bandstrik þegar þú vilt það (innifalið word-wrap: break-word)

Bakgrunnur og hallar

Mixin Færibreytur Notkun
#translucent > .background() @color: @white, @alpha: 1 Gefðu frumefni hálfgagnsæran bakgrunnslit
#translucent > .border() @color: @white, @alpha: 1 Gefðu frumefni hálfgagnsæran rammalit
#gradient > .vertical() @startColor, @endColor Búðu til lóðréttan bakgrunnshalla í gegnum vafra
#gradient > .horizontal() @startColor, @endColor Búðu til láréttan bakgrunnshalla í gegnum vafra
#gradient > .directional() @startColor, @endColor, @deg Búðu til stefnubundinn bakgrunnshalla í gegnum vafra
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Búðu til þriggja lita bakgrunnshalla í gegnum vafra
#gradient > .radial() @innerColor, @outerColor Búðu til geislamyndaðan bakgrunnshalla yfir vafra
#gradient > .striped() @color, @angle Búðu til röndóttan bakgrunnshalla í gegnum vafra
#gradientBar() @primaryColor, @secondaryColor Notað fyrir hnappa til að úthluta halla og aðeins dekkri ramma
Athugið: Ef þú ert að senda inn dráttarbeiðni til GitHub með breyttum CSS, verður þú setja saman CSS aftur með einhverjum af þessum aðferðum.

Verkfæri til að safna saman

Hnútur með makefile

Settu upp MESS skipanalínuþýðandann, JSHint, Recess og uglify-js á heimsvísu með npm með því að keyra eftirfarandi skipun:

$ npm setja upp -g minna jshint recess uglify-js

Þegar það hefur verið sett upp skaltu bara keyra makefrá rót ræsiskrárinnar og þú ert tilbúinn.

Að auki, ef þú ert með watchr uppsett, gætirðu keyrt make watchtil að láta bootstrap endurbyggja sjálfkrafa í hvert skipti sem þú breytir skrá í bootstrap lib (þetta er ekki nauðsynlegt, bara þægindaaðferð).

Skipanalína

Settu upp MESS skipanalínutólið í gegnum Node og keyrðu eftirfarandi skipun:

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

Vertu viss um að --compresshafa í þeirri skipun ef þú ert að reyna að vista nokkur bæti!

Javascript

Sæktu nýjasta Less.js og taktu leiðina að því (og Bootstrap) inn í <head>.

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

Til að setja saman .less skrárnar aftur skaltu bara vista þær og endurhlaða síðuna þína. Less.js safnar þeim saman og geymir í staðbundinni geymslu.

Óopinbert Mac app

Óopinbera Mac appið horfir á möppur yfir .less skrár og safnar kóðanum saman í staðbundnar skrár eftir hverja vistun á .less skrá sem horft er á.

Ef þú vilt geturðu skipt um kjörstillingar í appinu fyrir sjálfvirka minnkun og í hvaða möppu söfnuðu skrárnar enda í.

Fleiri Mac forrit

Marr

Marr er frábær útlítandi MINNA ritstjóri og þýðandi byggður á Adobe Air.

CodeKit

Búið til af sama gaur og óopinbera Mac appið, CodeKit er Mac app sem setur saman LESS, SASS, Stylus og CoffeeScript.

Einfalt

Mac-, Linux- og PC-forrit til að draga og sleppa samantekt á MÆRI skrám. Auk þess er frumkóði á GitHub .