Isticmaalka YAR oo leh Bootstrap

Ku beddel oo ku kordhi Bootstrap YAR , horudhac CSS, si aad uga faa'iidaysato doorsoomayaasha, isku darka, iyo inbadan oo loo isticmaalo in lagu dhiso Bootstrap's CSS.

Waa maxay sababta YAR?

Bootstrap waxaa lagu sameeyay LESS asalkeeda, luqad qaabaysan oo firfircoon oo uu abuuray saaxiibkeena wanaagsan, Alexis Sellier . Waxay ka dhigtaa horumarinta nidaamyada ku salaysan CSS mid dhakhso badan, fudud oo xiiso badan.

Maxaa ka mid ah?

Sida kordhinta CSS, YAR waxaa ku jira doorsoomayaal, iskudhafyada dib loo isticmaali karo qaybo kood ah, hawlgallada xisaabta fudud, buul, iyo xitaa shaqooyinka midabka.

Wax dheeri ah baro

CSS YAR

Booqo degelka rasmiga ah ee http://lesscss.org/ si aad wax badan uga barato.

Kala duwanaansho

Maareynta midabada iyo qiimayaasha pixel ee CSS waxay noqon kartaa xoogaa xanuun ah, badanaa waxaa ka buuxa nuqul iyo dhejis. Ma aha mid YAR in kastoo — u qoondee midabada ama qiimayaasha pixel doorsoomayaasha oo hal mar beddel.

Isku qas

Saddexdaas bayaan-xuduudeed ee aad u baahan tahay inaad si joogto ah u samayso ol' CSS? Hadda waxay hoos ugu soo jeedaan hal sadar iyadoo la kaashanayo mixins, qaybo kood ah oo aad dib u isticmaali karto meel kasta.

Hawlgallada

Samee shabaqlahaaga, hogaamin, oo aad u dabacsan adoo samaynaya xisaabta duulista oo wata hawlo. Ku dhufo, qaybi, ku dar, oo ka jar jidkaaga fayoobida CSS.

Isku-xidhka iyo isku xidhka

@bodyBackground @white midabka asalka bogga
@textColor @grayDark Midabka qoraalka caadiga ah ee jirka oo dhan, ciwaanka, iyo in ka badan
@linkColor #08c Midabka qoraalka asalka ah
@linkColorHover darken(@linkColor, 15%) Isku xirka asalka ah ee qoraalka midabka

Nidaamka grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Qoraalka qoraalka

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Waa inuu ahaadaa pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Waa inuu ahaadaa pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Miisaska

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

Midabada cawl

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #ee
@white #ff

Midabada lahjadda

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

Qaybaha

Badhamada

@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

Foomamka

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

Samee dawlado iyo digniino

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87aad
@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

Hoos u dhac

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

Halyeyga unugga

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Ku saabsan mixins

Isku darka aasaasiga ah

Isku darka aasaasiga ah ayaa asal ahaan ka mid ah ama qayb ka mid ah qayb ka mid ah CSS. Waxay u qoran yihiin sida fasalka CSS oo meel kasta waa loogu yeedhi karaa.

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

Isku darka Parametric

Isku-darka parametric-ga waa sida isku-dhafka aasaasiga ah, laakiin sidoo kale waxay aqbashaa cabbirrada (markaa magaca) oo leh qiimeyaal aan ikhtiyaar ahayn.

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

Si fudud ugu dar kaaga

Ku dhawaad ​​​​dhammaan isku-darka Bootstrap waxaa lagu kaydiyaa mixins.less, fayl aan fiicneyn oo utility ah oo awood kuu siinaya inaad isticmaasho isku-dhafka mid ka mid ah faylalka yar-yar ee xirmada qalabka.

Sidaa darteed, sii wad oo isticmaal kuwa jira ama waxaad xor u tahay inaad ku darto kaaga markaad u baahan tahay.

Isku darka ku jira

Utility

Mixin Halbeegyada Isticmaalka
.clearfix() midna Ku dar waalid kasta si aad u nadiifiso sabbeeyaha gudaha
.tab-focus() midna Codso qaabka diirada Webkit iyo wareega dulsaarka Firefox
.center-block() midna Si otomaatig ah u dhexeeya curiyaha heerka xannibaadda adoo isticmaalayamargin: auto
.ie7-inline-block() midna Isticmaal marka lagu daro kuwa caadiga ah display: inline-blocksi aad u hesho taageerada IE7
.size() @height @width Si degdeg ah u dhig dhererka iyo ballaca hal xariiq
.square() @size Waxay ku dhistaa .size()si uu ballaca iyo dhererka u dejiyo qiime isku mid ah
.opacity() @opacity Deji, tirooyinka oo dhan, boqolleyda mugdiga (tusaale, "50" ama "75")

Foomamka

Mixin Halbeegyada Isticmaalka
.placeholder() @color: @placeholderText U deji placeholdermidabka qoraalka wax gelinta

Qoraalka qoraalka

Mixin Halbeegyada Isticmaalka
#font > #family > .serif() midna Samee curiye isticmaal xarfo xarfo oo serif ah
#font > #family > .sans-serif() midna Samee curiye isticmaal xarfo xarfo sans-serif ah
#font > #family > .monospace() midna Samee curiye isticmaal xarfo xarfo monospace ah
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Si fudud u deji cabbirka font, miisaanka, iyo hogaaminta
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight U deji farta qoyska serif, oo xakameey cabbirka, miisaanka, iyo hoggaaminta
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight U deji farta qoyska sans-serif, oo xakameey cabbirka, miisaanka, iyo hoggaaminta
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight U deji font qoyska monospace, oo xakamee cabbirka, miisaanka, iyo hogaaminta

Nidaamka grid

Mixin Halbeegyada Isticmaalka
.container-fixed() midna U samee weel toosan oo xuddun u ah haynta macluumaadkaaga
#grid > .core() @gridColumnWidth, @gridGutterWidth Samee nidaamka grid pixel (konteenada, safka, iyo tiirarka) oo leh tiirar n iyo x pixel xuubka ballaaran
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Samee nidaamka shabaqlaha boqolleyda oo leh tiirar n iyo x % godad ballaaran
#grid > .input() @gridColumnWidth, @gridGutterWidth U samee nidaamka grid pixel ee inputwalxaha, xisaabinta suufka iyo xuduudaha
.makeColumn @columns: 1, @offset: 0 U rog mid kasta divoo u rogo tiir shabaq ah oo aan lahayn .span*fasallo

CSS3 guryaha

Mixin Halbeegyada Isticmaalka
.border-radius() @radius Ku wareeg geesaha curiyaha. Wuxuu noqon karaa hal qiime ama afar qiime oo meel bannaan
.box-shadow() @shadow Ku dar hooska hoos u dhaca curiye
.transition() @transition Ku dar saamaynta kala guurka ee CSS3 (tusaale, all .2s linear)
.rotate() @degrees Isku rog curiyaha n darajooyinka
.scale() @ratio Cabbir curiye ilaa n laabta cabbirkiisa asalka ah
.translate() @x, @y Dhaqaaq cunsur dushiisa x iyo diyaaradaha y
.background-clip() @clip Dalag asalka curiyaha (waxtar u leh border-radius)
.background-size() @size Ku xakamee cabbirka sawirada dambe ee CSS3
.box-sizing() @boxmodel U beddel qaabka sanduuqa curiye (tusaale, border-boxballac buuxa input)
.user-select() @select Xakamee xulashada cursorka qoraalka bogga
.backface-visibility() @visibility: visible Kahortagga boodboodka nuxurka marka la isticmaalayo isbeddellada CSS 3D
.resizable() @direction: both Samee shay kasta oo lagu cabbiri karo midig iyo hoose
.content-columns() @columnCount, @columnGap: @gridGutterWidth Ka dhig waxa ku jira shay kasta isticmaal tiirarka CSS3
.hyphens() @mode: auto Calaamadaynta CSS3 markaad rabto (waxaa ku jira word-wrap: break-word)

Asalkii hore iyo gradients

Mixin Halbeegyada Isticmaalka
#translucent > .background() @color: @white, @alpha: 1 Sii shay midab asal oo hufan
#translucent > .border() @color: @white, @alpha: 1 Sii shay midab xudduud hufan
#gradient > .vertical() @startColor, @endColor Samee browser-ka-tallaalida jaan-goynta dambe ee toosan
#gradient > .horizontal() @startColor, @endColor Samee biraawsarre isdhaafsi toosan oo gadaal ah
#gradient > .directional() @startColor, @endColor, @deg Abuur jaangooyooyin xaga dambe ee biraawsarkaaga
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Samee browser-ka-tallaalid xagal saddex-midab leh
#gradient > .radial() @innerColor, @outerColor Samee daalacashada dabaylaha-browser-ka
#gradient > .striped() @color, @angle Samee browser-ka-tallaalida xagal-xariifeedka dambe
#gradientBar() @primaryColor, @secondaryColor Loo isticmaalo badhamada si loogu meeleeyo soohdin gradient iyo xoogaa madow ah
Fiiro gaar ah: Haddii aad u gudbinayso codsiga jiidista GitHub oo wata CSS wax laga beddelay, waa inaad dib u soo ururisaa CSS iyada oo loo marayo mid ka mid ah hababkan.

Qalabka lagu ururiyo

Node leh makefile

Ku rakib khadka taliska LESS, JSHint, Recess, iyo ugify-js caalami ahaan npm adoo socodsiinaya amarka soo socda:

$ npm ku rakib -g yar nasasho jshint ugify-js

Marka la rakibo kaliya ka orod makexididka buugga bootstrap-kaaga oo waad wada diyaarsan tahay.

Intaa waxaa dheer, haddii aad ku rakibtay ilaaliye , waxaa laga yaabaa inaad u ordo make watchin bootstrap si toos ah dib loogu dhiso mar kasta oo aad wax ka beddesho faylka bootstrap lib (tani looma baahna, kaliya hab ku habboon).

Khadka taliska

Ku rakib qalabka khadka taliska LESS adoo adeegsanaya Node oo socodsii amarka soo socda:

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

U hubso inaad ku darto --compressamarkaas haddii aad isku dayayso inaad kaydiso xoogaa bytes ah!

Javascript

Soo deji Less.js kii ugu dambeeyay oo ku dar dariiqa loo marayo (iyo Bootstrap) gudaha <head>.

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

Si aad dib ugu soo ururiso faylasha .kayar, kaliya kaydi oo dib u soo geli boggaaga. Less.js ayaa ururisa oo ku kaydisa kaydinta deegaanka.

Mac App-ka aan rasmiga ahayn

App-ka aan rasmiga ahayn ee Mac waxa uu daawadaa tusaha faylalka .less oo waxa uu ku ururiyaa koodka faylalka maxaliga ah ka dib kayd kasta oo faylka .yar ee la daawado.

Haddii aad rabto, waxaad bedeli kartaa dookhyada abka si si toos ah loo yareeyo iyo tusaha faylalka la soo ururiyey ay ku dambeeyaan.

Barnaamijyo badan oo Mac ah

Burburid

Crunch waa tifaftire YAR oo muuqaal ah oo lagu dhisay Adobe Air.

CodeKit

Waxaa sameeyay isla nin ka mid ah abka Mac ee aan rasmiga ahayn, CodeKit waa Mac App kaas oo uruuriya LESS, SASS, Stylus, iyo CoffeeScript.

Fudud

Mac, Linux, iyo App-ka PC ee jiidida iyo tuurista ururinta faylasha YAR. Intaa waxaa dheer, koodhka isha ayaa ku yaal GitHub .