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

CSS KERE

Ṣ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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

  1. . eroja {
  2. . clearfix ();
  3. }

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.

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

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 lilomargin: auto
.ie7-inline-block() ko si Lo ni afikun si deede display: inline-blocklati 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 placeholderawọ ọ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 ipin kan pẹlu awọn ọwọn n ati x % fife gota
#grid > .input() @gridColumnWidth, @gridGutterWidth Ṣe ipilẹṣẹ eto piksẹli fun inputawọn eroja, ṣiṣe iṣiro fun padding ati awọn aala
.makeColumn @columns: 1, @offset: 0 Yipada eyikeyi divsinu 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 abẹlẹ ti 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-boxfun 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
.hyphens() @mode: auto CSS3 hyphenation nigba ti o ba fẹ (pẹlu word-wrap: break-word)

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 isale itesiwaju
#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, JSHint, Recess, ati uglify-js agbaye pẹlu npm nipa ṣiṣe pipaṣẹ atẹle:

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

Ni kete ti fi sori ẹrọ kan ṣiṣẹ 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 ati 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 ṣe akojọpọ awọn faili ti ko kere, 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.

Awọn ohun elo Mac diẹ sii

Crunch

Crunch jẹ olootu KEKERE ti o n wo nla ati akopọ ti a ṣe lori Adobe Air.

CodeKit

Ti a ṣẹda nipasẹ eniyan kanna bi ohun elo Mac laigba aṣẹ, CodeKit jẹ ohun elo Mac kan ti o ṣajọ KERE, SASS, Stylus, ati CoffeeScript.

Rọrun

Mac, Lainos, ati PC app fun fifa ati ju silẹ akopọ awọn faili KERE. Pẹlupẹlu, koodu orisun wa lori GitHub .