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

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. 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`

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.

. elementii { .
  . qulqulleessuu ();
} .

Miksiinota paarameetrikii

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

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

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 fayyadamuun`margin: auto`
`.ie7-inline-block()`	homaa	`display: inline-block`Deeggarsa 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 opacity (fkn, "50" ykn "75") .

Unkaalee

Mixin jedhama	Parameetaroota	Fayyadama
`.placeholder()`	`@color: @placeholderText`	`placeholder`Halluu 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 precent kan tarjaa n fi x % bal'ina gutter qabu uumuu
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Sirna tarjaa piikselii `input`elementootaaf, herrega paadiingii fi daangaawwaniif uumi
`.makeColumn`	`@columns: 1, @offset: 0`	`div`Kamiyyuu 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-box`bal'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

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 fi uglify-js akka addunyaatti npm waliin fe'i:

$ npm fe'i -g xiqqaa 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.

LESS tiin ijaarame

Maaliif SESS?

Maaltu dabalameera?

Caalaatti baradhaa

Jijjiiramoota

Mixins jedhaman

Hojiiwwan

Jijjiiramoota Bootstrap Jijjiiramoota LESS, gatiiwwan isaanii, fi qajeelfama fayyadama

Iskaafooldii fi walitti hidhamiinsa

Sirna giiridii

Taayipoogiraafii

Gabateewwan

Halluuwwan halluu diimaa qaban

Halluuwwan aksentaa

Qaamolee

Qabduulee

Unkaalee

Haalawwanii fi akeekkachiisa unkaa

Navbar jedhama

Dropdowns kan jedhu

Goota kutaa

Miksiin bootstrap jedhamuun beekama

Waa'ee mixins

Miksiinota bu’uuraa

Miksiinota paarameetrikii

Salphaatti kan kee itti dabali

Miksiinota dabalatee

Faayidaa (Utilities) jedhaman

Unkaalee

Taayipoogiraafii

Sirna giiridii

Amaloota CSS3

Duubbee fi garaagarummaa (gradients).

Bootstrap LESS waliin qindeessuu

Meeshaalee qindeessuuf gargaaran

Noodiin makefile qabu

Sarara ajajaa

Jaavascript jedhamuun beekama

Appii Mac kan ofiisaa hin taane

Appii Mac dabalataa

Crunch jedhamuun beekama

KoodiiKiitii

Salphaa hin taane