Lilo KERE pẹlu Bootstrap

Ṣe akanṣe ati faagun Bootstrap pẹlu KERE , aṣaaju CSS kan, lati lo anfani awọn oniyipada, awọn apopọ, ati diẹ sii ti a lo lati kọ Bootstrap's CSS.

Kini idi ti KERE?

Bootstrap ni a ṣe pẹlu KERE ni ipilẹ rẹ, ede aṣa aṣa ti o ni agbara ti a ṣẹda nipasẹ ọrẹ wa to dara, Alexis Sellier . O jẹ ki CSS ti o da lori awọn eto ṣiṣe ni iyara, rọrun, ati igbadun diẹ sii.

Kini o wa ninu?

Gẹgẹbi itẹsiwaju ti CSS, KERE pẹlu awọn oniyipada, awọn apopọ fun awọn snippets koodu atunlo, awọn iṣẹ ṣiṣe fun mathematiki rọrun, itẹ-ẹiyẹ, ati paapaa awọn iṣẹ awọ.

Kọ ẹkọ diẹ si

Ṣabẹwo oju opo wẹẹbu osise ni http://lesscss.org/ lati kọ ẹkọ diẹ sii.

Awọn oniyipada

Ṣiṣakoso awọn awọ ati awọn iye piksẹli ni CSS le jẹ irora diẹ, nigbagbogbo ti o kun fun ẹda ati lẹẹmọ. Kii ṣe pẹlu KERE botilẹjẹpe—fi awọn awọ tabi awọn iye piksẹli ṣe bi awọn oniyipada ki o yi wọn pada lẹẹkan.

Mixins

Awọn ikede redio-ala-ala mẹta yẹn o nilo lati ṣe ni deede ol' CSS? Bayi wọn wa si laini kan pẹlu iranlọwọ ti awọn mixins, awọn snippets ti koodu o le tun lo nibikibi.

Awọn iṣẹ ṣiṣe

Ṣe akoj rẹ, aṣaaju, ati rọ diẹ sii nipa ṣiṣe iṣiro lori fo pẹlu awọn iṣẹ ṣiṣe. Ṣe isodipupo, pin, ṣafikun, ati yọkuro ọna rẹ si mimọ CSS.

Scaffolding ati awọn ọna asopọ

`@bodyBackground`	`@white`	Awọ abẹlẹ oju-iwe
`@textColor`	`@grayDark`	Awọ ọrọ aiyipada fun gbogbo ara, awọn akọle, ati diẹ sii
`@linkColor`	`#08c`	Awọ ọrọ ọna asopọ aiyipada
`@linkColorHover`	`darken(@linkColor, 15%)`	Aiyipada ọna asopọ ọrọ rababa awọ

Eto akoj

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Iwe kikọ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Gbọdọ jẹ awọn piksẹli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Gbọdọ jẹ awọn piksẹli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Awọn tabili

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

Greyscale awọn awọ

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

Awọn awọ asẹnti

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

Awọn eroja

Awọn bọtini

`@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`

Awọn fọọmu

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

Fọọmu ipinle ati titaniji

`@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`

Awọn idasile

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

Akọni kuro

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Nipa mixins

Ipilẹ mixins

Adapọ ipilẹ jẹ pataki pẹlu tabi apa kan fun snippet ti CSS. Wọn ti kọ gẹgẹ bi kilasi CSS ati pe a le pe wọn nibikibi.

. eroja {
  . clearfix ();
}

Parametric mixins

Adapọ parametric kan dabi mixin ipilẹ, ṣugbọn o tun gba awọn ayeraye (nitorinaa orukọ) pẹlu awọn iye aiyipada aṣayan.

. eroja {
  . aala - rediosi ( 4px );
}

Ni irọrun ṣafikun tirẹ

O fẹrẹ to gbogbo awọn apopọ Bootstrap ti wa ni ipamọ ni mixins.less, ohun elo .less faili iyanu ti o fun ọ laaye lati lo mixin ni eyikeyi awọn faili .less ninu ohun elo irinṣẹ.

Nitorinaa, lọ siwaju ki o lo awọn ti o wa tẹlẹ tabi lero ọfẹ lati ṣafikun tirẹ bi o ṣe nilo.

To wa mixins

Awọn ohun elo

Mixin	Awọn paramita	Lilo
`.clearfix()`	ko si	Ṣafikun si eyikeyi obi lati ko awọn lilefo loju omi laarin
`.tab-focus()`	ko si	Waye ara idojukọ Webkit ati ilana ilana Firefox yika
`.center-block()`	ko si	Laifọwọyi aarin a Àkọsílẹ-ipele ano lilo`margin: auto`
`.ie7-inline-block()`	ko si	Lo ni afikun si deede `display: inline-block`lati gba atilẹyin IE7
`.size()`	`@height @width`	Ni kiakia ṣeto giga ati iwọn lori laini kan
`.square()`	`@size`	Kọ lori `.size()`lati ṣeto iwọn ati giga bi iye kanna
`.opacity()`	`@opacity`	Ṣeto, ni odidi awọn nọmba, ipin ogorun opacity (fun apẹẹrẹ, "50" tabi "75")

Awọn fọọmu

Mixin	Awọn paramita	Lilo
`.placeholder()`	`@color: @placeholderText`	Ṣeto `placeholder`awọ ọrọ fun awọn igbewọle

Iwe kikọ

Mixin	Awọn paramita	Lilo
`#font > #family > .serif()`	ko si	Ṣe ohun elo kan lo akopọ fonti serif kan
`#font > #family > .sans-serif()`	ko si	Ṣe ohun elo kan lo akopọ fonti sans-serif kan
`#font > #family > .monospace()`	ko si	Ṣe ohun elo kan lo akopọ fonti monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ni irọrun ṣeto iwọn fonti, iwuwo, ati idari
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ṣeto idile fonti si serif, ati iwọn iṣakoso, iwuwo, ati idari
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ṣeto idile fonti si sans-serif, ati iwọn iṣakoso, iwuwo, ati idari
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ṣeto idile fonti si monospace, ati iwọn iṣakoso, iwuwo, ati idari

Eto akoj

Mixin	Awọn paramita	Lilo
`.container-fixed()`	ko si	Ṣẹda eiyan ti aarin petele fun idaduro akoonu rẹ
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Ṣe ina eto akoj piksẹli kan (apoti, kana, ati awọn ọwọn) pẹlu awọn ọwọn n ati x pixel fife gotter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ṣe ina eto akoj precent pẹlu awọn ọwọn n ati x % fife gota
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ṣe ipilẹṣẹ eto piksẹli fun `input`awọn eroja, ṣiṣe iṣiro fun padding ati awọn aala
`.makeColumn`	`@columns: 1, @offset: 0`	Yipada eyikeyi `div`sinu iwe akoj laisi awọn `.span*`kilasi

CSS3-ini

Mixin	Awọn paramita	Lilo
`.border-radius()`	`@radius`	Yika awọn igun ti ohun ano. Le jẹ iye ẹyọkan tabi awọn iye iyasọtọ aaye mẹrin
`.box-shadow()`	`@shadow`	Fi ojiji ju silẹ si eroja kan
`.transition()`	`@transition`	Ṣafikun ipa iyipada CSS3 (fun apẹẹrẹ, `all .2s linear`)
`.rotate()`	`@degrees`	Yi ohun ano n iwọn
`.scale()`	`@ratio`	Ṣe iwọn ano si n igba iwọn atilẹba rẹ
`.translate()`	`@x, @y`	Gbe ohun elo kan lori awọn ọkọ ofurufu x ati y
`.background-clip()`	`@clip`	Gbin irugbin lẹhin nkan kan (wulo fun `border-radius`)
`.background-size()`	`@size`	Ṣakoso iwọn awọn aworan abẹlẹ nipasẹ CSS3
`.box-sizing()`	`@boxmodel`	Yi awoṣe apoti pada fun eroja kan (fun apẹẹrẹ, `border-box`fun iwọn ni kikun `input`)
`.user-select()`	`@select`	Ṣakoso yiyan kọsọ ọrọ lori oju-iwe kan
`.backface-visibility()`	`@visibility: visible`	Dena yiyi akoonu nigba lilo awọn iyipada CSS 3D
`.resizable()`	`@direction: both`	Ṣe eyikeyi ano resizable lori ọtun ati isalẹ
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Ṣe akoonu ti eyikeyi eroja lo awọn ọwọn CSS3

Backgrounds ati gradients

Mixin	Awọn paramita	Lilo
`#translucent > .background()`	`@color: @white, @alpha: 1`	Fun ohun kan ni awọ abẹlẹ translucent
`#translucent > .border()`	`@color: @white, @alpha: 1`	Fun ohun ano kan translucent aala awọ
`#gradient > .vertical()`	`@startColor, @endColor`	Ṣẹda agbekọja oniwakiri inaro isale isale
`#gradient > .horizontal()`	`@startColor, @endColor`	Ṣẹda oniṣawakiri-agbelebu petele itọlẹ isale
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Ṣẹda itọsona aṣawakiri-agbelebu isale isale
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Ṣẹda oniṣawakiri-agbelebu kan gradient lẹhin awọ mẹta
`#gradient > .radial()`	`@innerColor, @outerColor`	Ṣẹda oniṣawakiri-agbelebu radial isale gradient
`#gradient > .striped()`	`@color, @angle`	Ṣẹda oniṣawakiri-agbelebu ṣiṣawari isale isale
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ti a lo fun awọn bọtini lati fi ipin gradient ati aala dudu diẹ sii

Akiyesi: Ti o ba n fi ibeere fifa silẹ si GitHub pẹlu CSS ti a ṣe atunṣe, o gbọdọ tun CSS ṣe nipasẹ eyikeyi awọn ọna wọnyi.

Awọn irinṣẹ fun akopọ

Node pẹlu makefile

Fi sori ẹrọ alakojọ laini aṣẹ LESS ati uglify-js agbaye pẹlu npm nipa ṣiṣe pipaṣẹ atẹle:

$ npm fi sori ẹrọ -g kere uglify-js

Ni kete ti fi sori ẹrọ kan ṣiṣe makelati gbongbo ti itọsọna bootstrap rẹ ati pe o ti ṣeto gbogbo rẹ.

Ni afikun, ti o ba ni oluṣọ ti fi sori ẹrọ, o le ṣiṣẹ make watchlati ni atunṣe bootstrap laifọwọyi ni gbogbo igba ti o ṣatunkọ faili kan ninu lib bootstrap (eyi ko nilo, ọna irọrun nikan).

Laini aṣẹ

Fi ọpa laini aṣẹ LESS sori ẹrọ nipasẹ Node ati ṣiṣe aṣẹ wọnyi:

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

Rii daju lati ṣafikun --compressninu aṣẹ yẹn ti o ba n gbiyanju lati fipamọ diẹ ninu awọn baiti!

Javascript

Ṣe igbasilẹ Less.js tuntun ki o pẹlu ọna si (ati Bootstrap) ninu faili <head>.

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

Lati tun awọn faili ti ko kere si, kan fi wọn pamọ ki o tun gbee si oju-iwe rẹ. Less.js ṣe akopọ wọn ati tọju wọn ni ibi ipamọ agbegbe.

Laigba aṣẹ Mac app

Ohun elo Mac laigba aṣẹ n wo awọn ilana ti .less awọn faili ati ṣe akopọ koodu si awọn faili agbegbe lẹhin gbogbo fifipamọ faili .less ti wiwo.

Ti o ba fẹ, o le yi awọn ayanfẹ pada ninu ohun elo naa fun idinku aifọwọyi ati itọsọna wo ni awọn faili ti o ṣajọ pari ni.

Ti a ṣe pẹlu KERE

Kini idi ti KERE?

Kini o wa ninu?

Kọ ẹkọ diẹ si

Awọn oniyipada

Mixins

Awọn iṣẹ ṣiṣe

Awọn oniyipada Bootstrap Awọn oniyipada KERE, awọn iye wọn, ati awọn itọnisọna lilo

Scaffolding ati awọn ọna asopọ

Eto akoj

Iwe kikọ

Awọn tabili

Greyscale awọn awọ

Awọn awọ asẹnti

Awọn eroja

Awọn bọtini

Awọn fọọmu

Fọọmu ipinle ati titaniji

Navbar

Awọn idasile

Akọni kuro

Bootstrap mixins

Nipa mixins

Ipilẹ mixins

Parametric mixins

Ni irọrun ṣafikun tirẹ

To wa mixins

Awọn ohun elo

Awọn fọọmu

Iwe kikọ

Eto akoj

CSS3-ini

Backgrounds ati gradients

Iṣakojọpọ Bootstrap pẹlu KERE

Awọn irinṣẹ fun akopọ

Node pẹlu makefile

Laini aṣẹ

Javascript

Laigba aṣẹ Mac app

Awọn ohun elo Mac diẹ sii

Crunch

CodeKit

Rọrun