Yuz LESS wit Bootstrap
Kastamayz ɛn ɛkstɛnd Bootstrap wit LESS , wan CSS prɛprosɛsɔ, fɔ tek advantej pan di vɛriɔbul dɛn, miksin dɛn, ɛn mɔ we dɛn yuz fɔ bil Bootstrap in CSS.
Dɛn bil am wit LƐS
Wetin mek LƐS?
Bootstrap na LESS na in kɔr, wan dinamik staylshit langwej we wi gud padi, Alexis Sellier , mek . I de mek fɔ divɛlɔp sistem-based CSS fast, izi, ɛn fayn.
Wetin de insay?
As ɛkstenshɔn fɔ CSS, LESS inklud vɛriɔbul dɛn, miksin fɔ riyuz snipɛt dɛn fɔ kɔd, ɔpreshɔn fɔ simpul mats, nɛst, ɛn ivin kɔlɔ fɛnshɔn dɛn.
Di tin dɛn we kin chenj
Fɔ manej kɔlɔ ɛn piksɛl valyu dɛn na CSS kin mek yu fil pen smɔl, bɔku tɛm i kin ful-ɔp wit kɔpi ɛn pas. Nɔto wit LƐS pan ɔl we—asayn kɔlɔ ɔ piksɛl valyu dɛn as vɛriɔbul ɛn chenj dɛn wan tɛm.
Mixin dɛn
Dɛn tri bɔda-rɛdius diklareshɔn dɛn de we yu nid fɔ mek na rɛgyula ol' CSS? Naw dɛn dɔn go dɔŋ to wan layn wit di ɛp fɔ miksin dɛn, snipɛt dɛn fɔ kɔd we yu kin yuz bak ɛnisay.
Di opareshɔn dɛn
Mek yu grid, lida, ɛn mɔ supa fleksibul bay we yu de du di mats pan di flay wit ɔpreshɔn dɛn. Multiply, divayd, ad, ɛn pul yu we fɔ CSS sanity.
Bootstrap vεriεbul dεm LεS vεriεbul dεm, dεn valyu dεm, εn yus gaydlayn dεm
Skɔf ɛn link dɛn
@bodyBackground |
@white |
Pej bakgrɔn kɔlɔ | |
@textColor |
@grayDark |
Difɔlt tɛks kɔlɔ fɔ wan ol bɔdi, edlayn dɛn, ɛn ɔda tin dɛn | |
@linkColor |
#08c |
Difɔlt link tɛks kɔlɔ | |
@linkColorHover |
darken(@linkColor, 15%) |
Difɔlt link tɛks hova kɔlɔ |
Grid sistem
@gridColumns |
12 we de tɔk bɔt |
@gridColumnWidth |
60px na di pikchɔ |
@gridGutterWidth |
20px we gɛt |
@fluidGridColumnWidth |
6,382978723% ɛn di ɔda wan dɛn. |
@fluidGridGutterWidth |
2,127659574% ɛn di ɔda wan dɛn. |
Taypografi
@sansFontFamily |
"Hɛlvɛtika Nyu", Ɛlvɛtika, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monako, "Kɔriɔ Nyu", wan ples | |
@baseFontSize |
13px na di pikchɔ | I fɔ bi piksɛl dɛn |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px na di pikchɔ | I fɔ bi piksɛl dɛn |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Tebul dɛn
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Greyskayl kɔlɔ dɛn
@black |
#000 fɔ di wan dɛn we de | |
@grayDarker |
#222 fɔ di wan dɛn we de | |
@grayDark |
#333 fɔ di wan dɛn we de | |
@gray |
#555 fɔ di wan dɛn we de | |
@grayLight |
#999 na di pikchɔ | |
@grayLighter |
#eee | |
@white |
#fff fɔ di wan dɛn we de |
Aksɛn kɔlɔ dɛn
@blue |
#049cdb na di pikchɔ | |
@green |
#46a546 na di pikchɔ | |
@red |
#9d261d fɔ di wan dɛn we de | |
@yellow |
#ffc40d fɔ di wan dɛn we de | |
@orange |
#f89406 na di pikchɔ | |
@pink |
#c3325f fɔ di wan dɛn we de | |
@purple |
#7a43b6 na di pikchɔ |
Di tin dɛn we de insay di bɔdi
Bɔtin dɛn
@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 |
Fɔm dɛn
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Fɔm stet ɛn alɛt dɛn
@warningText |
#c09853 na di pikchɔ | |
@warningBackground |
#f3ɛd2 | |
@errorText |
#b94a48 na di pikchɔ | |
@errorBackground |
#f2dede fɔ di wan dɛn we de | |
@successText |
#468847 na di pikchɔ | |
@successBackground |
#dff0d8 fɔ di wan dɛn | |
@infoText |
#3a87ad fɔ di wan dɛn we de | |
@infoBackground |
#d9edf7 fɔ di wan dɛn we de |
Navbar fɔ di wan dɛn we de
@navbarHeight |
40px na di pikchɔ | |
@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 |
Drɔpdɔwn dɛn
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Hiro yunit
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Miksin dɛn we de na di bootstrap
Na bɔt miksin dɛn
Besik miksin dɛn
Wan besik mixin na essentially wan inklud ɔ wan pat fɔ wan snipɛt fɔ CSS. Dɛn rayt dɛn jɔs lɛk CSS klas ɛn dɛn kin kɔl dɛn ɛnisay.
- . elemɛnt { .
- . kliafiks ();
- } .
Paramɛtrik miksin dɛn
Wan paramɛtrik miksin jɔs tan lɛk wan besik miksin, bɔt i de aksept paramita dɛn bak (na dat mek dɛn gi am di nem) wit opshɔnal difɔlt valyu dɛn.
- . elemɛnt { .
- . bɔda - rayus ( 4px );
- } .
I izi fɔ ad yu yon
Klose to ɔl di mixin dɛn na Bootstrap de na mixins.less, we na wan fayn fayn yutiliti .less fayl we de mek yu ebul fɔ yuz wan mixin na ɛni wan pan di .less fayl dɛn na di tulkit.
So, go bifo ɛn yuz di wan dɛn we dɔn de ɔ fil fri fɔ ad yu yon as yu nid.
Inklud miksin dɛn
Yutiliti dɛn
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
.clearfix() |
nɔn | Ad to ɛni mama ɔ papa fɔ klia flot dɛn insay |
.tab-focus() |
nɔn | Aplay di Wɛbkit fɔs stayl ɛn rawnd Fayafaks ɔtlayn |
.center-block() |
nɔn | Oto senta wan blɔk-lɛvɛl ɛlimɛnt we de yuzmargin: auto |
.ie7-inline-block() |
nɔn | Yuz in ad pan rɛgyula display: inline-blockfɔ gɛt IE7 sɔpɔt |
.size() |
@height @width |
Sɛt di ayt ɛn di wit kwik kwik wan na wan layn |
.square() |
@size |
Bil pan .size()fɔ sɛt di wit ɛn ayt as di sem valyu |
.opacity() |
@opacity |
Sɛt, insay ɔl nɔmba dɛn, di opasiti pasɛnt (ɛgz., "50" ɔ "75") |
Fɔm dɛn
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Set di placeholdertɛks kɔlɔ fɔ input dɛn |
Taypografi
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
#font > #family > .serif() |
nɔn | Mek wan elemɛnt yuz wan serif font stak |
#font > #family > .sans-serif() |
nɔn | Mek wan elemɛnt yuz wan sans-serif font stak |
#font > #family > .monospace() |
nɔn | Mek wan elemɛnt yuz wan monospɛs font stak |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
I izi fɔ sɛt di font saiz, di wet, ɛn di lida |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Set font famili to serif, ɛn kɔntrol saiz, wet, ɛn lida |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Set font famili to sans-serif, ɛn kɔntrol saiz, wet, ɛn lida |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Set font famili to monospace, ɛn kɔntrol saiz, wet, ɛn lida |
Grid sistem
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
.container-fixed() |
nɔn | Krio wan kɔntena we gɛt ɔrizɔntal sɛnt fɔ ol yu kɔntinyu |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Jɛnɛret wan piksɛl grid sistem (kɔntena, rɔw, ɛn kɔlɔm) wit n kɔlɔm ɛn x piksɛl waid gɔta |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Jɛnɛret wan pasɛnt grid sistem wit n kɔlɔm ɛn x % wayd gɔta |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Jɛnɛret di piksɛl grid sistem fɔ inputɛlimɛnt dɛn, akɔntin fɔ pad ɛn bɔda dɛn |
.makeColumn |
@columns: 1, @offset: 0 |
Tɔn ɛni divwan to grid kɔlɔm we nɔ gɛt di .span*klas dɛn |
CSS3 prɔpati dɛn
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
.border-radius() |
@radius |
Raun di kɔna dɛn fɔ wan ɛlimɛnt. I kin bi wan valyu ɔ 4 valyu dɛn we dɛn separet wit spɛshal ples |
.box-shadow() |
@shadow |
Ad wan drɔp shado to wan ɛlimɛnt |
.transition() |
@transition |
Ad CSS3 transishɔn ɛfɛkt (ɛgz., all .2s linear) . |
.rotate() |
@degrees |
Rotate wan elemɛnt n digri |
.scale() |
@ratio |
Skel wan ɛlimɛnt to n tɛm in ɔrijinal saiz |
.translate() |
@x, @y |
Muv wan ɛlimɛnt na di x ɛn y plen dɛn |
.background-clip() |
@clip |
Krop di bakgrɔn fɔ wan ɛlimɛnt (yusful fɔ border-radius) . |
.background-size() |
@size |
Kɔntrol di sayz fɔ bakgrɔn pikchɔ dɛn bay CSS3 |
.box-sizing() |
@boxmodel |
Chenj di bɔks mɔdel fɔ wan ɛlimɛnt (ɛgz., border-boxfɔ wan ful-wid input) . |
.user-select() |
@select |
Kɔntrol di kɔsa sɛlɛkshɔn fɔ tɛks na wan pej |
.backface-visibility() |
@visibility: visible |
Prevent flickering of kɔntinyu we yu de yuz CSS 3D transfɔm dɛn |
.resizable() |
@direction: both |
Mek ɛni ɛlimɛnt we yu kin chenj di sayz na di rayt ɛn dɔŋ |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Mek di kɔntinyu fɔ ɛni ɛlimɛnt yuz CSS3 kɔlɔm dɛn |
.hyphens() |
@mode: auto |
CSS3 hayfeneshɔn we yu want am (inklud word-wrap: break-word) . |
Bakgrɔn ɛn di grɛdiɛnt dɛn
| Mixin we dɛn mek | Paramita dɛn | Aw fɔ yuz am |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Gi wan ɛlimɛnt wan translucent bakgrɔn kɔlɔ |
#translucent > .border() |
@color: @white, @alpha: 1 |
Gi wan ɛlimɛnt wan translucent bɔda kɔlɔ |
#gradient > .vertical() |
@startColor, @endColor |
Krio wan kros-brauza vertikal bakgrɔn gradient |
#gradient > .horizontal() |
@startColor, @endColor |
Krio wan kros-brauza ɔrizɔntal bakgrɔn grɛdiɛnt |
#gradient > .directional() |
@startColor, @endColor, @deg |
Krio wan kros-brauza dairekshɔn bakgrɔn grɛdiɛnt |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Krio wan kros-brauza tri-kɔlɔ bakgrɔn gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Krio wan kros-brauza radial bakgrɔn grɛdiɛnt |
#gradient > .striped() |
@color, @angle |
Krio wan kros-brauza strɛp bakgrɔn grɛdiɛnt |
#gradientBar() |
@primaryColor, @secondaryColor |
Dɛn kin yuz am fɔ bɔtin dɛn fɔ asaynd wan gradient ɛn bɔda we dak smɔl |
Kompayl Bootstrap wit LESS
Tul dɛn fɔ kɔmpilayt
Node wit mekfayl
Instɔl di LESS kɔmand layn kɔmpayla, JSHint, Recess, ɛn uglify-js global wan wit npm bay we yu rɔn di kɔmand we de dɔŋ ya:
$ npm instɔl -g lɛs jshint rɛsɛs uglify-js
Wans yu don instɔl jɔs rɔn makefrɔm di rut fɔ yu bootstrap dairektrɔ ɛn yu ɔl dɔn sɛt.
Apat frɔm dat, if yu dɔn instɔl watchr , yu kin rɔn make watchfɔ mek dɛn bil bootstrap ɔtomɛtik wan ɛvri tɛm we yu ɛdit fayl na di bootstrap lib (dis nɔ nid, na jɔs wan kɔvinɛns we).
Kɔmand layn
Instɔl di LESS kɔmand layn tul via Node ɛn rɔn di kɔmand we de dɔŋ ya:
$ lessc ./lɛs/bɔtstrap.lɛs > butstrap.css
Mek shɔ se yu put --compressinsay da kɔmand de if yu de tray fɔ sev sɔm bayt dɛn!
JavaSkript fɔ di Baybul
Daunlod di laytst Less.js ɛn put di rod fɔ go de (ɛn Bootstrap) insay di <head>.
<link rel = "staylshit/lɛs" href = "/pat/to/bɔtstrap.lɛs" > <skript src = "/pat/to/lɛs.js" ></script>
Fɔ kɔmpilayt di .less fayl dɛn bak, jɔs sev dɛn ɛn lod yu pej bak. Less.js de kɔmpilayt dɛn ɛn kip dɛn na lokal stɔrɔj.
Mac ap we nɔ gɛt ɔfishal wan
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
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Simpless
Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.