LESS brûke mei Bootstrap
Oanpasse en útwreidzje Bootstrap mei LESS , in CSS-preprocessor, om te profitearjen fan de fariabelen, mixins en mear brûkt om de CSS fan Bootstrap te bouwen.
Boud mei MINDER
Wêrom MINDER?
Bootstrap is makke mei LESS yn har kearn, in dynamyske stylblêdtaal makke troch ús goede freon, Alexis Sellier . It makket it ûntwikkeljen fan systemen-basearre CSS flugger, makliker en leuker.
Wat is ynbegrepen?
As útwreiding fan CSS omfettet LESS fariabelen, mixins foar werbrûkbere snippets fan koade, operaasjes foar ienfâldige wiskunde, nesting, en sels kleurfunksjes.
Fariabelen
It behearen fan kleuren en pikselwearden yn CSS kin in bytsje pynlik wêze, meast fol mei kopiearje en plakke. Net mei LESS lykwols - tawize kleuren as pikselwearden as fariabelen en feroarje se ien kear.
Mixins
Dy trije grins-radius deklaraasjes moatte jo meitsje yn reguliere ol 'CSS? No binne se op ien rigel del mei help fan mixins, snippets fan koade dy't jo oeral kinne opnij brûke.
Operations
Meitsje jo raster, liedend en mear fleksibel troch de wiskunde op 'e flecht te dwaan mei operaasjes. Fermannichfâldigje, diele, tafoegje en subtractearje jo wei nei CSS-sanity.
Bootstrap-fariabelen MINDER fariabelen, har wearden, en gebrûksrjochtlinen
Hyperkeppelings
@linkColor |
#08c | Standert keppeling tekst kleur | |
@linkColorHover |
darken(@linkColor, 15%) |
Standert keppeling tekst hover kleur |
Grid systeem
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Typografy
@baseFontSize |
13 px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Greyscale kleuren
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeeee | |
@white |
#fff |
Aksintkleuren
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Components
Knoppen
@primaryButtonBackground |
@linkColor |
Formulieren
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Formearje steaten en warskôgings
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
Oer mixins
Basic mixins
In basismixin is yn essinsje in ynklusyf of in diel foar in snippet fan CSS. Se binne krekt skreaun as in CSS-klasse en kinne oeral neamd wurde.
- . elemint {
- . clearfix ();
- }
Parametric mixins
In parametryske mixin is krekt as in basismixin, mar it akseptearret ek parameters (dêrfandinne de namme) mei opsjonele standertwearden.
- . elemint {
- . grins - radius ( 4px );
- }
Foegje jo eigen maklik ta
Hast alle Bootstrap's mixins wurde opslein yn mixins.less, in prachtich .less-bestân dat jo in mixin kin brûke yn ien fan 'e .less-bestannen yn 'e toolkit.
Dus, gean fierder en brûk de besteande of fiel jo frij om jo eigen ta te foegjen as jo nedich binne.
Ynbegrepen mixins
Utilities
| Mixin | Parameters | Gebrûk |
|---|---|---|
.clearfix() |
gjin | Foegje oan elke âlder ta om driuwers binnen te wiskjen |
.tab-focus() |
gjin | Tapasse de Webkit-fokusstyl en rûne Firefox-omtrek |
.center-block() |
gjin | Auto sintrum in blok-nivo elemint mei help fanmargin: auto |
.ie7-inline-block() |
gjin | Brûk neist reguliere display: inline-blockom IE7-stipe te krijen |
.size() |
@height: 5px, @width: 5px |
Set fluch de hichte en breedte op ien rigel |
.square() |
@size: 5px |
Bout op .size()om de breedte en hichte as deselde wearde yn te stellen |
.opacity() |
@opacity: 100 |
Stel, yn folsleine getallen, it opaciteitspersintaazje yn (bygelyks "50" of "75") |
Formulieren
| Mixin | Parameters | Gebrûk |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Stel de placeholdertekstkleur yn foar ynfier |
Typografy
| Mixin | Parameters | Gebrûk |
|---|---|---|
#font > #family > .serif() |
gjin | Meitsje in elemint mei in serif-lettertypestapel |
#font > #family > .sans-serif() |
gjin | Meitsje in elemint mei in sans-serif-lettertypestapel |
#font > #family > .monospace() |
gjin | Meitsje in elemint mei in monospace lettertypestapel |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Stel lettertypegrutte, gewicht en liedend maklik yn |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Stel lettertypefamylje yn op serif, en kontrolearje grutte, gewicht en liedend |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Stel lettertypefamylje yn op sans-serif, en kontrolearje grutte, gewicht en liedend |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Stel lettertypefamylje yn op monospace, en kontrolearje grutte, gewicht en liedend |
Grid systeem
| Mixin | Parameters | Gebrûk |
|---|---|---|
.container-fixed() |
gjin | Meitsje in horizontaal sintraal kontener foar it hâlden fan jo ynhâld |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Generearje in pikselrastersysteem (kontainer, rigel en kolommen) mei n kolommen en x pikselbrede goot |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Generearje in presint grid systeem mei n kolommen en x % brede gutter |
CSS3 eigenskippen
| Mixin | Parameters | Gebrûk |
|---|---|---|
.border-radius() |
@radius: 5px |
Rûn de hoeken fan in elemint. Kin in inkele wearde wêze as fjouwer romte-skieden wearden |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Foegje in drop shadow ta oan in elemint |
.transition() |
@transition |
Foegje CSS3-oergongseffekt ta (bgl. all .2s linear) |
.rotate() |
@degrees |
Rotearje in elemint n graden |
.scale() |
@ratio |
Skaalje in elemint nei n kear de oarspronklike grutte |
.translate() |
@x: 0, @y: 0 |
Ferpleats in elemint op de x- en y-fleanen |
.background-clip() |
@clip |
De eftergrûn fan in elemint snije (nuttich foar border-radius) |
.background-size() |
@size |
Kontrolearje de grutte fan eftergrûnôfbyldings fia CSS3 |
.box-sizing() |
@boxmodel |
Feroarje it fakmodel foar in elemint (bygelyks border-boxfoar in folsleine breedte input) |
.user-select() |
@select |
Kontrolearje cursor seleksje fan tekst op in side |
.resizable() |
@direction: both |
Meitsje elk elemint resizable oan de rjochterkant en ûnderkant |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Meitsje de ynhâld fan elk elemint mei CSS3-kolommen |
Eftergrûnen en gradiënten
| Mixin | Parameters | Gebrûk |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Jou in elemint in trochsichtich eftergrûnkleur |
#translucent > .border() |
@color: @white, @alpha: 1 |
Jou in elemint in trochsichtige rânekleur |
#gradient > .vertical() |
@startColor, @endColor |
Meitsje in cross-browser fertikale eftergrûngradient |
#gradient > .horizontal() |
@startColor, @endColor |
Meitsje in cross-browser horizontale eftergrûngradient |
#gradient > .directional() |
@startColor, @endColor, @deg |
Meitsje in cross-browser rjochting eftergrûngradient |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Meitsje in cross-browser eftergrûngradient mei trije kleuren |
#gradient > .radial() |
@innerColor, @outerColor |
Meitsje in cross-browser radiale eftergrûngradient |
#gradient > .striped() |
@color, @angle |
Meitsje in cross-browser gestreepte eftergrûngradient |
#gradientBar() |
@primaryColor, @secondaryColor |
Wurdt brûkt foar knoppen om in gradient en wat tsjusterdere râne ta te jaan |
Bootstrap kompilearje mei MINDER
Tools foar kompilaasje
Knooppunt mei makefile
Ynstallearje de LESS kommandorigelkompiler en uglify-js wrâldwiid mei npm troch it folgjende kommando út te fieren:
$ npm ynstallearje -g minder uglify-js
Ienris ynstalleare, rinne gewoan makefan 'e root fan jo bootstrap-map en jo binne allegear ynsteld.
Derneist, as jo watchr ynstalleare hawwe, kinne jo rinne make watchom bootstrap automatysk opnij te meitsjen elke kear as jo in bestân yn 'e bootstrap lib bewurkje (dit is net fereaske, gewoan in gemaksmetoade).
Kommandorigel
Ynstallearje it LESS kommandorigelark fia Node en fier it folgjende kommando út:
$ lessc ./lib/bootstrap.less > bootstrap.css
Wês wis dat jo --compressyn dat kommando opnimme as jo besykje wat bytes te bewarjen!
Javascript
Download de lêste Less.js en befetsje it paad dernei (en Bootstrap) yn 'e <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Om de .less-bestannen opnij te kompilearjen, bewarje se gewoan en laden jo side opnij. Less.js kompilearret se en bewarret se yn lokale opslach.
Unoffisjele Mac-app
De net-offisjele Mac-app besjocht mappen fan .less-bestannen en kompilearret de koade nei lokale bestannen nei elke opslach fan in besjoen .less-bestân.
As jo wolle, kinne jo foarkar yn 'e app wikselje foar automatysk minifysjen en yn hokker map de kompilearre bestannen einigje.
Mear Mac-apps
Crunch
Crunch is in geweldige útsjocht LESS bewurker en kompilator boud op Adobe Air.
CodeKit
Makke troch deselde man as de net-offisjele Mac-app, CodeKit is in Mac-app dy't LESS, SASS, Stylus en CoffeeScript kompilearret.
Ienfâldich
Mac-, Linux- en PC-applikaasje foar slepen en droppe kompilearjen fan MINDER bestannen. Plus, de boarnekoade is op GitHub .