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

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`

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.

. þáttur {
  . clearfix ();
}

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.

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

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ð nota`margin: auto`
`.ie7-inline-block()`	enginn	Notaðu til viðbótar við venjulegan `display: inline-block`til 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 `placeholder`textalitinn 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 núverandi ristkerfi 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 `div`sem 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-box`fyrir 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

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 þú að setja saman CSS aftur með einhverjum af þessum aðferðum.

Verkfæri til að safna saman

Hnútur með makefile

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

$ npm setja upp -g minna 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 í.

Byggt með MINNA

Hvers vegna MINNA?

Hvað er innifalið?

Læra meira

Breytur

Mixins

Aðgerðir

Bootstrap breytur MINNAR breytur, gildi þeirra og notkunarleiðbeiningar

Vinnupallar og tenglar

Ratkerfi

Leturfræði

Töflur

Grátóna litir

Hreim litir

Íhlutir

Hnappar

Eyðublöð

Form ríki og tilkynningar

Navbar

Dropdowns

Hetjueining

Bootstrap mixins

Um mixins

Grunnblöndur

Parametric mixins

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

Innifalið blandar

Veitur

Eyðublöð

Leturfræði

Ratkerfi

CSS3 eiginleikar

Bakgrunnur og hallar

Að setja saman Bootstrap með LESS

Verkfæri til að safna saman

Hnútur með makefile

Skipanalína

Javascript

Óopinbert Mac app

Fleiri Mac forrit

Marr

CodeKit

Einfalt