Bootstrap waliin LESS fayyadamuu

Jijjiiramoota, mixins, fi kanneen biroo CSS Bootstrap ijaaruuf fayyadaman fayyadamuuf LESS , durtii CSS waliin Bootstrap dhuunfachiisi fi dheeressi .

Maaliif SESS?

Bootstrap kan hojjetame LESS hundee isaa irratti, afaan stylesheet daayinamikii hiriyyaa keenya gaarii, Alexis Sellier . CSS sirna irratti hundaa'e hojjechuu saffisaa, salphaa fi bashannansiisaa taasisa.

Maaltu dabalameera?

Akka dheerina CSS, LESS jijjiiramoota, mixins cuquliisa koodii irra deebi'amee fayyadamuu danda'aniif, hojiiwwan herrega salphaa, man'ee, fi illee faankishiniiwwan halluu of keessatti qabata.

Caalaatti baradhaa

CSS XIQQOO

Caalaatti baruuf marsariitii ofiisaa http://lesscss.org/ daawwadhaa.

Jijjiiramoota

Halluuwwanii fi gatiiwwan piikselii CSS keessatti bulchuun xiqqoo dhukkubbii ta'uu danda'a, yeroo baay'ee waraabbii fi maxxansiin guutame. LESS waliin miti haa ta'u malee—halluuwwan ykn gatiiwwan piikselii akka jijjiiramootaatti ramadiitii al tokko jijjiiri.

Mixins jedhaman

Warra sadan daangaa-radius labsii idilee ol' CSS keessatti gochuu qabdu? Amma gargaarsa mixins, snippets koodii bakka barbaaddetti irra deebitee fayyadamuu dandeessuun sarara tokkotti gadi bu'aniiru.

Hojiiwwan

Herrega balali'aa irratti hojiiwwan waliin hojjechuun giiridii kee, dursaa, fi caalaatti super flexible godhi. Karaa kee gara CSS sanity baay'isi, qoodi, ida'i, fi hir'isi.

Iskaafooldii fi walitti hidhamiinsa

@bodyBackground @white Halluu duubbee fuula
@textColor @grayDark Halluu barruu durtii qaama guutuu, mata dureewwanii fi kkf
@linkColor #08c Halluu barruu hidhaa durtii
@linkColorHover darken(@linkColor, 15%) Halluu hover barruu hidhaa durtii

Sirna giiridii

@gridColumns 12.
@gridColumnWidth 60px ta'a
@gridGutterWidth 20px ta'a
@fluidGridColumnWidth 6.382978723% ta'a.
@fluidGridGutterWidth 2.127659574% ta'a.

Taayipoogiraafii

@sansFontFamily "Helvetikaa Neue", Helveetikaa, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Moonaakoo, "Ergaa Haaraa", monospace
@baseFontSize 13px ta'a Piikselii ta'uu qaba
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ta'a Piikselii ta'uu qaba
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Gabateewwan

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

Halluuwwan halluu diimaa qaban

@black #000 ta'a
@grayDarker #222. #222
@grayDark #333 irratti
@gray #555 irratti
@grayLight #999 irratti
@grayLighter #eee
@white #fff

Halluuwwan aksentaa

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

Qaamolee

Qabduulee

@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

Unkaalee

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

Haalawwanii fi akeekkachiisa unkaa

@warningText #c09853 jedhu
@warningBackground #f3edd2 jedhu
@errorText #b94a48 irratti
@errorBackground #f2dede jedhu
@successText #468847 irratti argama
@successBackground #dff0d8 jedhu
@infoText #3a87ad jedhaa
@infoBackground #d9edf7 jedhu

Navbar jedhama

@navbarHeight 40px ta'a
@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 kan jedhu

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

Goota kutaa

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Waa'ee mixins

Miksiinota bu’uuraa

Miksiin bu'uuraa bu'uuraan hammachuu ykn gartokkee citaa CSS tiif. Isaanis akkuma kutaa CSS kan barreeffamanii fi bakka kamittiyyuu waamamuu danda'u.

  1. . elementii { .
  2. . qulqulleessuu ();
  3. } .

Miksiinota paarameetrikii

Miksiin paarameetrikii akkuma makaa bu'uuraati, garuu akkasumas paarameeteroota (kanarraa ka'uun maqaa) gatiiwwan durtii filannoo waliin fudhata.

  1. . elementii { .
  2. . daangaa - raadiyaasii ( 4px );
  3. } .

Salphaatti kan kee itti dabali

Miksiin Bootstrap hundi jechuun ni danda'ama mixins.less keessatti kuufamaniiru, faayilii .less faayidaa ajaa'ibaa kan faayiloota .less meeshaa keessa jiran kamiyyuu keessatti mixin fayyadamuu si dandeessisu.

Kanaafuu, itti fufaatii kanneen jiran fayyadamaa ykn akka barbaaddanitti kan keessan itti dabaluuf bilisa ta'aa.

Miksiinota dabalatee

Faayidaa (Utilities) jedhaman

Mixin jedhama Parameetaroota Fayyadama
.clearfix() homaa Keessatti lola'oo qulqulleessuuf warra kamiyyuutti dabali
.tab-focus() homaa Akkaataa xiyyeeffannoo Webkit fi sarara Firefox geengoo hojii irra oolchi
.center-block() homaa Ofiin giddugaleessa elementii sadarkaa bilookii fayyadamuunmargin: auto
.ie7-inline-block() homaa display: inline-blockDeeggarsa IE7 argachuuf idilee irratti dabalataan fayyadamaa
.size() @height @width Dafii olka'iinsaa fi bal'ina sarara tokko irratti saagi
.square() @size .size()Bal'ina fi olka'iinsa akka gatii walfakkaataatti saaguuf irratti ijaara
.opacity() @opacity Saagi, lakkoofsota guutuu keessatti, dhibbeentaa ifa hin taane (fkn, "50" ykn "75") .

Unkaalee

Mixin jedhama Parameetaroota Fayyadama
.placeholder() @color: @placeholderText placeholderHalluu barruu galteewwaniif saagi

Taayipoogiraafii

Mixin jedhama Parameetaroota Fayyadama
#font > #family > .serif() homaa Qaamni tokko tuullaa qubee serif akka fayyadamu godhi
#font > #family > .sans-serif() homaa Qaamni tokko tuullaa qubee sans-serif akka fayyadamu godhi
#font > #family > .monospace() homaa Qaamni tokko tuullaa qubee iddoo tokkoo akka fayyadamu godhi
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Salphaatti guddina qubee, ulfaatina, fi dursaa saagi
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Maatii qubee gara serif saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Maatii qubee gara sans-serif saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Maatii qubee gara iddoo tokkootti saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu

Sirna giiridii

Mixin jedhama Parameetaroota Fayyadama
.container-fixed() homaa Qabiyyee kee qabachuuf qabduu giddugaleessa qajeelaa uumi
#grid > .core() @gridColumnWidth, @gridGutterWidth Sirna tarjaa piikselii (qabduu, tarree, fi tarjaa) tarjaa n fi x piikselii bal'ina gutter waliin uumi
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Sirna giiridii dhibbeentaa tarjaa n fi x % bal'ina gutter qabu maddisiisi
#grid > .input() @gridColumnWidth, @gridGutterWidth Sirna tarjaa piikselii inputelementootaaf, herrega paadiingii fi daangaawwaniif uumi
.makeColumn @columns: 1, @offset: 0 divKamiyyuu gara tarjaa tarjaa .span*gitawwan malee jijjiiri

Amaloota CSS3

Mixin jedhama Parameetaroota Fayyadama
.border-radius() @radius Goleewwan elementii tokkoo naannessi. Gatii tokko ykn gatiiwwan afur iddoo addaan baafaman ta'uu danda'a
.box-shadow() @shadow Gaaddidduu kufaatii elementii tokkotti dabali
.transition() @transition Bu'aa ce'umsaa CSS3 dabali (fkn, all .2s linear) .
.rotate() @degrees Elementii tokko digrii n naannessi
.scale() @ratio Elementii tokko gara dachaa n guddina isaa isa jalqabaatti iskeelii godhi
.translate() @x, @y Elementii xiyyaarota x fi y irratti sochoosi
.background-clip() @clip Duubbee elementii tokkoo muraa (f faayidaa qaba border-radius) .
.background-size() @size Hammangaa fakkiiwwan duubbee karaa CSS3 to'adhu
.box-sizing() @boxmodel Moodeela saanduqa qaama tokkoof jijjiiri (fkn, border-boxbal'ina guutuuf input) .
.user-select() @select Filannoo qaree barruu fuula irratti to'adhu
.backface-visibility() @visibility: visible Yeroo jijjiirraa CSS 3D fayyadamtu qabiyyee lilmoo ittisuu
.resizable() @direction: both Elementii kamiyyuu mirgaa fi jalaan guddina akka jijjiiramu godhi
.content-columns() @columnCount, @columnGap: @gridGutterWidth Qabiyyeen elementii kamiyyuu tarjaawwan CSS3 akka fayyadamu taasisi
.hyphens() @mode: auto CSS3 hyphenation yeroo barbaaddu (of dabalata word-wrap: break-word) .

Duubbee fi garaagarummaa (gradients).

Mixin jedhama Parameetaroota Fayyadama
#translucent > .background() @color: @white, @alpha: 1 Elementii tokkoof halluu duubbee ifa ta'e kenni
#translucent > .border() @color: @white, @alpha: 1 Elementii tokkoof halluu daangaa ifaa kenni
#gradient > .vertical() @startColor, @endColor Gargalcha duubbee dhaabbataa qaxxaamuraa-browzarii uumi
#gradient > .horizontal() @startColor, @endColor Jijjiirama duubbee qajeelaa qaxxaamuraa-browsarii uumi
#gradient > .directional() @startColor, @endColor, @deg Gargalcha duubbee kallattii qaxxaamuraa-browzarii uumi
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Gargalcha duubbee halluu sadii qaxxaamuraa-browzarii uumi
#gradient > .radial() @innerColor, @outerColor Jijjiirama duubbee raadiyaalii qaxxaamuraa-browzarii uumi
#gradient > .striped() @color, @angle Garaagarummaa duubbee sarara qaxxaamuraa-browzarii uumi
#gradientBar() @primaryColor, @secondaryColor Qabduulee garagalchaa fi daangaa xiqqoo dukkanaa'aa ramaduuf fayyadama
Hubachiisa: Yoo gaaffii harkisaa gara GitHub CSS fooyya'een galchite, CSS karaa malawwan kana keessaa kamiinuu irra deebitee qindeessuu qabda .

Meeshaalee qindeessuuf gargaaran

Noodiin makefile qabu

Ajaja armaan gadii hojjechuudhaan qindeessaa sarara ajajaa LESS, JSHint, Recess, fi uglify-js akka addunyaatti npm waliin fe'i:

$ npm fe'i -g xiqqaa jshint boqonnaa uglify-js

Erga fe'amee booda makehundee galmee bootstrap kee irraa qofa hojjedhu hundi kee qophaa'aa jirta.

Dabalataan, yoo watchr fe'atte, make watchyeroo faayilii bootstrap lib keessatti gulaaltu hunda bootstrap ofumaan akka deebi'ee ijaaramu gochuuf fiiguu dandeessa (kun hin barbaachisu, mala mijataa qofa).

Sarara ajajaa

Meeshaa sarara ajajaa LESS karaa Node fe'iitii ajaja armaan gadii hojjedhu:

$ xiqqaa ./xiqqoo/bootstrap.less > bootstrap.css

--compressYoo baayitii tokko tokko qusachuuf yaaltu ajaja sana keessatti hammachuu kee mirkaneessi !

Jaavascript jedhamuun beekama

Less.js isa haaraa buufadhuutii daandii gara isaatti geessu (fi Bootstrap) <head>.

<link rel = "waraqaa akkaataa/xiqqaa" href = "/karaa/gara/bootstrap.xiqqaa" > <script src = "/karaa/gara/xiqqaa.js" ></script>  
 

Faayilota .less irra deebi'anii qindeessuuf, save gochuu qofaafi fuula kee irra deebi'ii fe'i. Less.js isaan qindeessee kuusaa naannoo keessatti kuufata.

Appii Mac kan ofiisaa hin taane

Appiin Mac hin ofiisaa ta'e galmeewwan faayiloota .less ilaalaa fi koodii gara faayiloota naannootti qindeessa erga faayila .less ilaalame qusachuu hunda booda.

Yoo jaallatte, filannoowwan appii keessa jiran jijjiiruun ofumaan xiqqeessuu fi faayiloota qindaa'an galmee kam keessatti akka xumuraman gochuu dandeessa.

Appii Mac dabalataa

Crunch jedhamuun beekama

Crunch gulaalaa fi qindeessaa LESS guddaa fakkaatu kan Adobe Air irratti ijaarameedha.

KoodiiKiitii

Gurbaa appii Mac hin ofiisaa ta'een kan uumame CodeKit appii Mac kan LESS, SASS, Stylus, fi CoffeeScript qindeessuudha.

Salphaa hin taane

Mac, Linux, fi PC app faayiloota LESS harkisuu fi gadi dhiisuuf qindeessuuf gargaaru. Dabalataan, koodii maddi GitHub irratti argama .