Defnyddio LLAI gyda Bootstrap

Addaswch ac estyn Bootstrap gyda LESS , rhagbrosesydd CSS, i fanteisio ar y newidynnau, cymysgeddau, a mwy a ddefnyddir i adeiladu CSS Bootstrap.

Pam LLAI?

Gwneir Bootstrap gyda LLAI yn ei graidd, iaith arddull ddeinamig a grëwyd gan ein ffrind da, Alexis Sellier . Mae'n gwneud datblygu CSS sy'n seiliedig ar systemau yn gyflymach, yn haws ac yn fwy o hwyl.

Beth sy'n cael ei gynnwys?

Fel estyniad o CSS, mae LLAI yn cynnwys newidynnau, cymysgeddau ar gyfer pytiau o god y gellir eu hailddefnyddio, gweithrediadau ar gyfer swyddogaethau mathemateg syml, nythu, a hyd yn oed lliw.

Dysgu mwy

LLAI CSS

Ewch i'r wefan swyddogol yn http://lesscss.org/ i ddysgu mwy.

Newidynnau

Gall rheoli lliwiau a gwerthoedd picsel yn CSS fod yn dipyn o boen, fel arfer yn llawn copi a gludo. Ond nid gyda LLAI - aseinio lliwiau neu werthoedd picsel fel newidynnau a'u newid unwaith.

cymysgeddau

Y tri datganiad radiws ffiniau hynny y mae angen i chi eu gwneud mewn CSS rheolaidd? Nawr maen nhw i lawr i un llinell gyda chymorth mixins, pytiau o god y gallwch eu hailddefnyddio yn unrhyw le.

Gweithrediadau

Gwnewch eich grid, yn arwain, ac yn fwy hyblyg iawn trwy wneud y mathemateg ar y hedfan gyda gweithrediadau. Lluosi, rhannu, ychwanegu a thynnu eich ffordd i bwyll CSS.

Sgaffaldiau a chysylltiadau....

@bodyBackground @white Lliw cefndir y dudalen
@textColor @grayDark Lliw testun diofyn ar gyfer y corff cyfan, penawdau, a mwy
@linkColor #08c Lliw testun cyswllt diofyn
@linkColorHover darken(@linkColor, 15%) Dolen ddiofyn lliw hofran testun

System grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2. 127659574%

Teipograffeg

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier Newydd", monospace
@baseFontSize 13px Rhaid bod yn bicseli
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Rhaid bod yn bicseli
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Byrddau

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

Lliwiau graddlwyd

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

Lliwiau acen

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

Cydrannau

Botymau

@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

Ffurflenni

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

Cyflyrau ffurflen a rhybuddion

@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

Cwympiadau

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

Uned arwr

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Am mixins

Cymysgedd sylfaenol

Mae mixin sylfaenol yn ei hanfod yn gynnwys neu'n rhannol ar gyfer pyt o CSS. Maent wedi'u hysgrifennu yn union fel dosbarth CSS a gellir eu galw yn unrhyw le.

  1. . elfen {
  2. . clirfix ();
  3. }

Cymysgeddau parametrig

Mae mixin parametrig yn union fel mixin sylfaenol, ond mae hefyd yn derbyn paramedrau (felly yr enw) gyda gwerthoedd rhagosodedig dewisol.

  1. . elfen {
  2. . border - radiws ( 4px );
  3. }

Ychwanegwch eich un chi yn hawdd

Mae bron pob un o gymysgeddau Bootstrap yn cael eu storio mewn mixins.less, ffeil ddefnyddioldeb wych .less sy'n eich galluogi i ddefnyddio mixin yn unrhyw un o'r ffeiliau .less yn y pecyn cymorth.

Felly, ewch ymlaen a defnyddiwch y rhai presennol neu mae croeso i chi ychwanegu eich rhai eich hun yn ôl yr angen.

Cymysgeddau wedi'u cynnwys

Cyfleustodau

Cymysgu Paramedrau Defnydd
.clearfix() dim Ychwanegu at unrhyw riant i glirio fflotiau oddi mewn
.tab-focus() dim Cymhwyswch arddull ffocws Webkit a rownd amlinelliad Firefox
.center-block() dim Canolbwyntio elfen lefel bloc yn awtomatig gan ddefnyddiomargin: auto
.ie7-inline-block() dim Defnyddiwch yn ogystal â rheolaidd display: inline-blocki gael cymorth IE7
.size() @height @width Gosodwch yr uchder a'r lled yn gyflym ar un llinell
.square() @size Yn adeiladu ymlaen .size()i osod y lled a'r uchder fel yr un gwerth
.opacity() @opacity Gosod, mewn rhifau cyfan, y ganran didreiddedd (ee, "50" neu "75")

Ffurflenni

Cymysgu Paramedrau Defnydd
.placeholder() @color: @placeholderText Gosodwch y placeholderlliw testun ar gyfer mewnbynnau

Teipograffeg

Cymysgu Paramedrau Defnydd
#font > #family > .serif() dim Gwneud elfen defnyddiwch stac ffontiau serif
#font > #family > .sans-serif() dim Defnyddiwch bentwr ffontiau sans-serif i wneud elfen
#font > #family > .monospace() dim Gwneud elfen defnyddiwch stac ffontiau monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Gosod maint ffont, pwysau ac arwain yn hawdd
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Gosod teulu ffont i serif, a rheoli maint, pwysau, ac arwain
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Gosod teulu ffont i sans-serif, a rheoli maint, pwysau, ac arwain
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Gosod teulu ffont i monospace, a rheoli maint, pwysau, ac yn arwain

System grid

Cymysgu Paramedrau Defnydd
.container-fixed() dim Creu cynhwysydd llorweddol wedi'i ganoli ar gyfer dal eich cynnwys
#grid > .core() @gridColumnWidth, @gridGutterWidth Cynhyrchu system grid picsel (cynhwysydd, rhes, a cholofnau) gyda n colofn a gwter x picsel llydan
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Cynhyrchu system grid canran gyda n colofn a gwter x % o led
#grid > .input() @gridColumnWidth, @gridGutterWidth Cynhyrchu'r system grid picsel ar gyfer inputelfennau, gan gyfrif am padin a ffiniau
.makeColumn @columns: 1, @offset: 0 Trowch unrhyw un divyn golofn grid heb y .span*dosbarthiadau

priodweddau CSS3

Cymysgu Paramedrau Defnydd
.border-radius() @radius Rownd corneli elfen. Gall fod yn werth sengl neu'n bedwar gwerth gofod wedi'u gwahanu
.box-shadow() @shadow Ychwanegu cysgod gollwng i elfen
.transition() @transition Ychwanegu effaith trawsnewid CSS3 (ee, all .2s linear)
.rotate() @degrees Cylchdroi elfen n graddau
.scale() @ratio Graddio elfen i n gwaith ei maint gwreiddiol
.translate() @x, @y Symudwch elfen ar y planau x ac y
.background-clip() @clip Tocio cefndir elfen (defnyddiol ar gyfer border-radius)
.background-size() @size Rheoli maint delweddau cefndir trwy CSS3
.box-sizing() @boxmodel Newidiwch y model blwch ar gyfer elfen (ee, border-boxar gyfer lled llawn input)
.user-select() @select Rheoli dewis testun cyrchwr ar dudalen
.backface-visibility() @visibility: visible Atal rhag fflachio cynnwys wrth ddefnyddio trawsnewidiadau CSS 3D
.resizable() @direction: both Gwnewch unrhyw elfen y gellir ei newid maint ar y dde a'r gwaelod
.content-columns() @columnCount, @columnGap: @gridGutterWidth Defnyddiwch golofnau CSS3 i gynnwys unrhyw elfen
.hyphens() @mode: auto Cysylltnod CSS3 pan fyddwch ei eisiau ( yn cynnwys word-wrap: break-word)

Cefndiroedd a graddiannau

Cymysgu Paramedrau Defnydd
#translucent > .background() @color: @white, @alpha: 1 Rhowch liw cefndir tryloyw i elfen
#translucent > .border() @color: @white, @alpha: 1 Rhowch liw ymyl tryloyw i elfen
#gradient > .vertical() @startColor, @endColor Creu graddiant cefndir fertigol traws-borwr
#gradient > .horizontal() @startColor, @endColor Creu graddiant cefndir llorweddol traws-borwr
#gradient > .directional() @startColor, @endColor, @deg Creu graddiant cefndir cyfeiriadol traws-borwr
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Creu graddiant cefndir tri lliw traws-borwr
#gradient > .radial() @innerColor, @outerColor Creu graddiant cefndir rheiddiol traws-borwr
#gradient > .striped() @color, @angle Creu graddiant cefndir streipiog traws-borwr
#gradientBar() @primaryColor, @secondaryColor Defnyddir ar gyfer botymau i aseinio graddiant a border ychydig yn dywyllach
Nodyn: Os ydych chi'n cyflwyno cais tynnu i GitHub gyda CSS wedi'i addasu, rhaid i chi ail-grynhoi'r CSS trwy unrhyw un o'r dulliau hyn.

Offer ar gyfer llunio

Nod gyda makefile

Gosodwch y casglwr llinell orchymyn LESS, JSHint, Recess, ac uglify-js yn fyd-eang gydag npm trwy redeg y gorchymyn canlynol:

$npm gosod -g llai toriad jshint uglify-js

Ar ôl ei osod, rhedwch makeo wraidd eich cyfeiriadur bootstrap ac rydych chi'n barod.

Yn ogystal, os ydych wedi gosod gwyliwr , efallai y byddwch yn rhedeg make watchi gael bootstrap wedi'i ailadeiladu'n awtomatig bob tro y byddwch yn golygu ffeil yn y lib bootstrap (nid oes angen hyn, dim ond dull cyfleustra).

Llinell orchymyn

Gosodwch yr offeryn llinell orchymyn LESS trwy Node a rhedeg y gorchymyn canlynol:

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

Gwnewch yn siŵr eich bod yn cynnwys --compressyn y gorchymyn hwnnw os ydych chi'n ceisio arbed rhai bytes!

Javascript

Lawrlwythwch y Less.js diweddaraf a chynnwys y llwybr ato (a Bootstrap) yn y ffeil <head>.

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

I ail-grynhoi'r ffeiliau .less, arbedwch nhw ac ail-lwythwch eich tudalen. Mae Less.js yn eu llunio ac yn eu storio mewn storfa leol.

Ap Mac answyddogol

Mae ap Mac answyddogol yn gwylio cyfeiriaduron o ffeiliau .less ac yn llunio'r cod i ffeiliau lleol ar ôl pob arbediad o ffeil .less a wylir.

Os dymunwch, gallwch newid dewisiadau yn yr ap ar gyfer miniogi awtomatig a pha gyfeiriadur y mae'r ffeiliau a luniwyd yn y pen draw ynddo.

Mwy o apiau Mac

Gwasgfa

Mae Crunch yn olygydd a chrynhoydd LLAI sy'n edrych yn wych wedi'i adeiladu ar Adobe Air.

CodeKit

Wedi'i greu gan yr un dyn â'r app Mac answyddogol, mae CodeKit yn app Mac sy'n llunio LLAI, SASS, Stylus, a CoffeeScript.

Syml

Ap Mac, Linux, a PC ar gyfer casglu a gollwng ffeiliau LLAI. Hefyd, mae'r cod ffynhonnell ar GitHub .