Uzante LESS kun Bootstrap

Agordu kaj etendi Bootstrap per LESS , CSS-antaŭprocesoro, por utiligi la variablojn, miksaĵojn kaj pli uzatajn por konstrui CSS de Bootstrap.

Kial MALPLOPE?

Bootstrap estas farita kun LESS ĉe ĝia kerno, dinamika stilfoliolingvo kreita de nia bona amiko, Alexis Sellier . Ĝi igas disvolvi CSS-bazitan sistemon pli rapida, pli facila kaj pli amuza.

Kio estas inkluzivita?

Kiel etendaĵo de CSS, LESS inkluzivas variablojn, miksaĵojn por reuzeblaj fragmentoj de kodo, operaciojn por simpla matematiko, nestumado kaj eĉ kolorfunkcioj.

Lernu pli

Malpli CSS

Vizitu la oficialan retejon ĉe http://lesscss.org/ por lerni pli.

Variabloj

Administrado de koloroj kaj pikselaj valoroj en CSS povas esti iom doloro, kutime plena de kopio kaj algluo. Tamen ne kun MALPLOP — asignu kolorojn aŭ pikselojn kiel variablojn kaj ŝanĝu ilin unufoje.

Miksinoj

Tiujn tri limradiajn deklarojn, kiujn vi devas fari en regula malnova CSS? Nun ili estas malsupren al unu linio kun la helpo de miksinoj, fragmentoj de kodo vi povas reuzi ie ajn.

Operacioj

Faru vian kradon, gvidantan kaj pli flekseblan farante la matematikon sur la flugo per operacioj. Multipliku, dividu, aldonu kaj subtrahi vian vojon al CSS prudento.

Eŝafodo kaj ligiloj

@bodyBackground @white Paĝa fonkoloro
@textColor @grayDark Defaŭlta tekstkoloro por tuta korpo, titoloj kaj pli
@linkColor #08c Defaŭlta ligilo tekstokoloro
@linkColorHover darken(@linkColor, 15%) Defaŭlta ligteksto ŝveba koloro

Kradsistemo

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

Tipografio

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospaco
@baseFontSize 13px Devas esti pikseloj
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Devas esti pikseloj
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabeloj

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

Grizskalaj koloroj

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

Akcentkoloroj

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

Komponentoj

Butonoj

@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

Formoj

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

Formu ŝtatojn kaj atentigojn

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

Navbaro

@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

Hero-unuo

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Pri miksinoj

Bazaj miksaĵoj

Baza miksaĵo estas esence inkluzivo aŭ parta por fragmento de CSS. Ili estas skribitaj same kiel CSS-klaso kaj povas esti nomitaj ie ajn.

  1. . elemento {
  2. . clearfix ();
  3. }

Parametrikaj miksaĵoj

Parametrika miksaĵo estas same kiel baza miksaĵo, sed ĝi ankaŭ akceptas parametrojn (tial la nomo) kun laŭvolaj defaŭltaj valoroj.

  1. . elemento {
  2. . limo - radiuso ( 4px );
  3. }

Facile aldonu vian propran

Preskaŭ ĉiuj miksaĵoj de Bootstrap estas konservitaj en mixins.less, mirinda utileco .less dosiero kiu ebligas al vi uzi miksaĵon en iu ajn el la .less dosieroj en la ilaro.

Do, daŭrigu kaj uzu la ekzistantajn aŭ bonvolu aldoni viajn proprajn laŭ via bezono.

Inkluditaj miksaĵoj

Utilaĵoj

Mixin Parametroj Uzado
.clearfix() neniu Aldonu al iu ajn gepatro por forigi flotojn ene
.tab-focus() neniu Apliku la Webkit-fokusstilon kaj rondan Firefox-kontuzon
.center-block() neniu Aŭtomate centri blok-nivelan elementon uzantemargin: auto
.ie7-inline-block() neniu Uzu krom regula display: inline-blockpor akiri IE7-subtenon
.size() @height @width Rapide starigu la altecon kaj larĝon sur unu linio
.square() @size Konstruas .size()por agordi la larĝon kaj altecon kiel saman valoron
.opacity() @opacity Agordu, en tutaj nombroj, la opakecprocenton (ekz., "50" aŭ "75")

Formoj

Mixin Parametroj Uzado
.placeholder() @color: @placeholderText Agordu la placeholdertekstokoloron por enigaĵoj

Tipografio

Mixin Parametroj Uzado
#font > #family > .serif() neniu Faru elementon uzi serif-tiparan stakon
#font > #family > .sans-serif() neniu Faru elementon uzi sans-serif-tiparan stakon
#font > #family > .monospace() neniu Faru elementon uzi unuspacan tiparon
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Facile agordu tipargrandecon, pezon kaj gvidadon
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Agordu tiparfamilion al serifo, kaj kontrolu grandecon, pezon kaj gvidadon
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Agordu tiparfamilion al sans-serif, kaj kontrolu grandecon, pezon kaj gvidadon
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Agordu tiparfamilion al monospaco, kaj kontrolu grandecon, pezon kaj gvidadon

Kradsistemo

Mixin Parametroj Uzado
.container-fixed() neniu Kreu horizontale centritan ujon por teni vian enhavon
#grid > .core() @gridColumnWidth, @gridGutterWidth Generu pikselan kradsistemon (ujo, vico kaj kolumnoj) kun n kolumnoj kaj x piksela larĝa defluilo
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Generu procentan kradsistemon kun n kolumnoj kaj x % larĝa defluilo
#grid > .input() @gridColumnWidth, @gridGutterWidth Generu la pikselan kradsistemon por inputelementoj, respondecante pri kompletigo kaj randoj
.makeColumn @columns: 1, @offset: 0 Turnu iun ajn diven kradan kolumnon sen la .span*klasoj

CSS3 propraĵoj

Mixin Parametroj Uzado
.border-radius() @radius Rondigu la angulojn de elemento. Povas esti unuopa valoro aŭ kvar spac-separitaj valoroj
.box-shadow() @shadow Aldonu gutan ombron al elemento
.transition() @transition Aldonu CSS3-transiran efikon (ekz., all .2s linear)
.rotate() @degrees Turnu elementon n gradojn
.scale() @ratio Skali elementon al n- oble ĝia originala grandeco
.translate() @x, @y Movu elementon sur la x kaj y ebenoj
.background-clip() @clip Tondi la fonon de elemento (utila por border-radius)
.background-size() @size Kontrolu la grandecon de fonbildoj per CSS3
.box-sizing() @boxmodel Ŝanĝu la kestmodelon por elemento (ekz., border-boxpor plenlarĝa input)
.user-select() @select Kontrolu kursoran elekton de teksto sur paĝo
.backface-visibility() @visibility: visible Malhelpu flagradon de enhavo kiam vi uzas CSS 3D-transformojn
.resizable() @direction: both Faru ajnan elementon regrandigebla dekstre kaj malsupre
.content-columns() @columnCount, @columnGap: @gridGutterWidth Faru la enhavon de iu ajn elemento uzi CSS3-kolumnojn
.hyphens() @mode: auto CSS3-dividodivido kiam vi volas ĝin (inkludas word-wrap: break-word)

Fonoj kaj gradientoj

Mixin Parametroj Uzado
#translucent > .background() @color: @white, @alpha: 1 Donu al elemento diafanan fonkoloron
#translucent > .border() @color: @white, @alpha: 1 Donu al elemento diafanan randkoloron
#gradient > .vertical() @startColor, @endColor Kreu kruc-retumilon vertikalan fonan gradienton
#gradient > .horizontal() @startColor, @endColor Kreu trans-retumilon horizontalan fonan gradienton
#gradient > .directional() @startColor, @endColor, @deg Kreu trans-retumilon unudirektan fonan gradienton
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Kreu trans-retumilon trikoloran fonan gradienton
#gradient > .radial() @innerColor, @outerColor Kreu trans-retumilon radialan fonan gradienton
#gradient > .striped() @color, @angle Kreu trans-retumilon striitan fonan gradienton
#gradientBar() @primaryColor, @secondaryColor Uzita por butonoj por atribui gradienton kaj iomete pli malhelan randon
Noto: Se vi sendas tiri peton al GitHub kun modifita CSS, vi devas rekompili la CSS per iu el ĉi tiuj metodoj.

Iloj por kompili

Nodo kun makefile

Instalu la LESS komandlinian kompililon, JSHint, Recess kaj uglify-js tutmonde kun npm per la sekva komando:

$ npm instali -g malpli jshint receso uglify-js

Unufoje instalita nur rulu makede la radiko de via bootstrap dosierujo kaj vi estas tute preta.

Aldone, se vi havas watchr instalitan, vi povas kuri make watchpor ke bootstrap aŭtomate rekonstruu ĉiun fojon kiam vi redaktas dosieron en la bootstrap lib (ĉi tio ne estas bezonata, nur oportuna metodo).

Komandlinio

Instalu la LESS komandlinian ilon per Nodo kaj rulu la sekvan komandon:

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

Nepre inkluzivu --compressen tiu komando se vi provas ŝpari kelkajn bajtojn!

Javaskripto

Elŝutu la plej novan Less.js kaj inkludu la vojon al ĝi (kaj Bootstrap) en la <head>.

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

Por rekompili la .malpli dosierojn, simple konservu ilin kaj reŝargu vian paĝon. Less.js kompilas ilin kaj konservas ilin en loka stokado.

Neoficiala Mac-apliko

La neoficiala Mac-aplikaĵo rigardas dosierujojn de .less dosieroj kaj kompilas la kodon al lokaj dosieroj post ĉiu konservado de rigardita .less dosiero.

Se vi ŝatas, vi povas ŝanĝi preferojn en la aplikaĵo por aŭtomata minigo kaj en kiu dosierujo la kompilitaj dosieroj finiĝas.

Pli da Mac-aplikoj

Crunch

Crunch estas bonega LESS redaktilo kaj kompililo konstruita sur Adobe Air.

CodeKit

Kreita de la sama ulo kiel la neoficiala Mac-aplikaĵo, CodeKit estas Mac-apo kiu kompilas LESS, SASS, Stylus kaj CoffeeScript.

Simpla

Mac, Linukso kaj komputila aplikaĵo por treni kaj faligi kompiladon de MALPLANIS dosierojn. Krome, la fontkodo estas sur GitHub .