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.
Adeiladwyd gyda LLAI
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.
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.
Newidynnau Bootstrap LLAI o newidynnau, eu gwerthoedd, a chanllawiau defnydd
Hypergysylltiadau
@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
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Ffurflenni
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Cyflyrau ffurflen a rhybuddion
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Cymysgeddau Bootstrap
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.
- . elfen {
- . clirfix ();
- }
Cymysgeddau parametrig
Mae mixin parametrig yn union fel mixin sylfaenol, ond mae hefyd yn derbyn paramedrau (felly yr enw) gyda gwerthoedd rhagosodedig dewisol.
- . elfen {
- . border - radiws ( 4px );
- }
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: 5px, @width: 5px |
Gosodwch yr uchder a'r lled yn gyflym ar un llinell |
.square() |
@size: 5px |
Yn adeiladu ymlaen .size()i osod y lled a'r uchder fel yr un gwerth |
.opacity() |
@opacity: 100 |
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 precent gydag n colofn a gwter x % o led |
priodweddau CSS3
| Cymysgu | Paramedrau | Defnydd |
|---|---|---|
.border-radius() |
@radius: 5px |
Rownd corneli elfen. Gall fod yn werth sengl neu'n bedwar gwerth gofod wedi'u gwahanu |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Gwnewch unrhyw elfen y gellir ei newid maint ar y dde a'r gwaelod |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Defnyddiwch golofnau CSS3 i gynnwys unrhyw elfen |
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 |
Llunio Bootstrap gyda LLAI
Offer ar gyfer llunio
Nod gyda makefile
Gosodwch y casglwr llinell orchymyn LESS ac uglify-js yn fyd-eang gydag npm trwy redeg y gorchymyn canlynol:
$npm gosod -g llai 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 gorchymyn LLAI trwy Node a rhedeg y gorchymyn canlynol:
$lessc ./lib/bootstrap.less > bootstrap.css
Gwnewch yn siŵr eich bod yn cynnwys --compressyn y gorchymyn hwnnw os ydych chi'n ceisio arbed rhai beit!
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>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Unofficial Mac app
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on 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 llusgo a gollwng casglu ffeiliau LLAI. Hefyd, mae'r cod ffynhonnell ar GitHub .