Bruger MINDRE med Bootstrap

Tilpas og udvid Bootstrap med LESS , en CSS-forprocessor, for at drage fordel af de variabler, mixins og mere, der bruges til at bygge Bootstraps CSS.

Hvorfor MINDRE?

Bootstrap er lavet med LESS i sin kerne, et dynamisk stylesheet-sprog skabt af vores gode ven, Alexis Sellier . Det gør udvikling af systembaseret CSS hurtigere, nemmere og sjovere.

Hvad er inkluderet?

Som en udvidelse af CSS inkluderer LESS variabler, mixins til genanvendelige kodestykker, operationer til simpel matematik, indlejring og endda farvefunktioner.

Lær mere

MINDRE CSS

Besøg den officielle hjemmeside på http://lesscss.org/ for at lære mere.

Variabler

Håndtering af farver og pixelværdier i CSS kan være en smule besværligt, normalt fuld af copy og paste. Dog ikke med MINDRE – tildel farver eller pixelværdier som variable og skift dem én gang.

Mixins

De tre grænseradius-erklæringer, du skal lave i almindelig CSS? Nu er de nede på én linje ved hjælp af mixins, kodestykker, du kan genbruge hvor som helst.

Operationer

Gør dit gitter, førende og mere superfleksibelt ved at lave regnestykket på farten med operationer. Multiplicer, divider, addér og subtraher din vej til CSS-fornuft.

Stilladser og links

@bodyBackground @white Side baggrundsfarve
@textColor @grayDark Standardtekstfarve for hele brødteksten, overskrifter og mere
@linkColor #08c Standard linktekstfarve
@linkColorHover darken(@linkColor, 15%) Standard farve for linktekst-hover

Gittersystem

@gridColumns 12
@gridColumnWidth 60 px
@gridGutterWidth 20 px
@fluidGridColumnWidth 6,382978723 %
@fluidGridGutterWidth 2,127659574 %

Typografi

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13 px Skal være pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18 px Skal være pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabeller

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

Gråtone farver

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

Accentfarver

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

Komponenter

Knapper

@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

Formularer

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

Form tilstande og advarsler

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Navbar

@navbarHeight 40 px
@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

Dropdowns

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Hero enhed

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Om mixins

Grundlæggende blandinger

Et grundlæggende mixin er i det væsentlige en inkludering eller en del af et uddrag af CSS. De er skrevet ligesom en CSS-klasse og kan kaldes overalt.

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

Parametriske blandinger

Et parametrisk mixin er ligesom et grundlæggende mixin, men det accepterer også parametre (deraf navnet) med valgfri standardværdier.

  1. . element {
  2. . border - radius ( 4px );
  3. }

Tilføj nemt din egen

Næsten alle Bootstraps mixins er gemt i mixins.less, en vidunderlig .less-fil, der gør dig i stand til at bruge en mixin i enhver af .less-filerne i værktøjssættet.

Så gå videre og brug de eksisterende, eller du er velkommen til at tilføje dine egne efter behov.

Inkluderet mixins

Hjælpeprogrammer

Blanding Parametre Brug
.clearfix() ingen Tilføj til enhver forælder for at rydde flyder indeni
.tab-focus() ingen Anvend Webkit-fokusstilen og rund Firefox-kontur
.center-block() ingen Autocentrer et element på blokniveau ved hjælp afmargin: auto
.ie7-inline-block() ingen Brug ud over almindelig display: inline-blockfor at få IE7-understøttelse
.size() @height @width Indstil hurtigt højden og bredden på én linje
.square() @size Bygger videre på .size()at indstille bredden og højden til samme værdi
.opacity() @opacity Indstil opacitetsprocenten i hele tal (f.eks. "50" eller "75")

Formularer

Blanding Parametre Brug
.placeholder() @color: @placeholderText Indstil placeholdertekstfarven for input

Typografi

Blanding Parametre Brug
#font > #family > .serif() ingen Få et element til at bruge en serif-skrifttypestak
#font > #family > .sans-serif() ingen Få et element til at bruge en sans-serif skrifttypestak
#font > #family > .monospace() ingen Få et element til at bruge en monospace-skrifttypestak
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Indstil nemt skriftstørrelse, vægt og indføring
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Indstil skrifttypefamilien til serif, og kontroller størrelse, vægt og linjeføring
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Indstil skrifttypefamilien til sans-serif, og kontroller størrelse, vægt og førende
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Indstil skrifttypefamilien til monospace, og kontroller størrelse, vægt og førende

Gittersystem

Blanding Parametre Brug
.container-fixed() ingen Opret en vandret centreret beholder til at opbevare dit indhold
#grid > .core() @gridColumnWidth, @gridGutterWidth Generer et pixelgittersystem (beholder, række og kolonner) med n kolonner og x pixel bred rende
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Generer et procentgittersystem med n søjler og x % bred tagrende
#grid > .input() @gridColumnWidth, @gridGutterWidth Generer pixelgittersystemet til inputelementer, der tager højde for polstring og grænser
.makeColumn @columns: 1, @offset: 0 Gør enhver divtil en gitterkolonne uden .span*klasserne

CSS3 egenskaber

Blanding Parametre Brug
.border-radius() @radius Afrund hjørnerne af et element. Kan være en enkelt værdi eller fire mellemrumsadskilte værdier
.box-shadow() @shadow Tilføj en skygge til et element
.transition() @transition Tilføj CSS3-overgangseffekt (f.eks. all .2s linear)
.rotate() @degrees Roter et element n grader
.scale() @ratio Skaler et element til n gange dets oprindelige størrelse
.translate() @x, @y Flyt et element på x- og y-planerne
.background-clip() @clip Beskær baggrunden for et element (nyttigt til border-radius)
.background-size() @size Styr størrelsen af ​​baggrundsbilleder via CSS3
.box-sizing() @boxmodel Skift boksmodellen for et element (f.eks. border-boxfor en fuld bredde input)
.user-select() @select Styr markørens valg af tekst på en side
.backface-visibility() @visibility: visible Undgå flimren af ​​indhold, når du bruger CSS 3D-transformationer
.resizable() @direction: both Gør ethvert element tilpasbart til højre og nederst
.content-columns() @columnCount, @columnGap: @gridGutterWidth Få indholdet af ethvert element til at bruge CSS3-kolonner
.hyphens() @mode: auto CSS3 orddeling, når du ønsker det (inkluderer word-wrap: break-word)

Baggrunde og gradienter

Blanding Parametre Brug
#translucent > .background() @color: @white, @alpha: 1 Giv et element en gennemskinnelig baggrundsfarve
#translucent > .border() @color: @white, @alpha: 1 Giv et element en gennemskinnelig kantfarve
#gradient > .vertical() @startColor, @endColor Opret en lodret baggrundsgradient på tværs af browsere
#gradient > .horizontal() @startColor, @endColor Opret en horisontal baggrundsgradient på tværs af browser
#gradient > .directional() @startColor, @endColor, @deg Opret en retningsbestemt baggrundsgradient på tværs af browsere
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Opret en trefarvet baggrundsgradient på tværs af browsere
#gradient > .radial() @innerColor, @outerColor Opret en radial baggrundsgradient på tværs af browsere
#gradient > .striped() @color, @angle Opret en stribet baggrundsgradient på tværs af browsere
#gradientBar() @primaryColor, @secondaryColor Bruges til knapper til at tildele en gradient og lidt mørkere kant
Bemærk: Hvis du sender en pull-anmodning til GitHub med modificeret CSS, skal du genkompilere CSS'en via en af ​​disse metoder.

Værktøjer til kompilering

Node med makefile

Installer LESS kommandolinjekompileren, JSHint, Recess og uglify-js globalt med npm ved at køre følgende kommando:

$ npm installer -g mindre jshint fordybning uglify-js

Når det er installeret, skal du bare køre makefra roden af ​​din bootstrap-mappe, og du er klar.

Derudover, hvis du har watchr installeret, kan du køre make watchfor at få bootstrap automatisk genopbygget hver gang du redigerer en fil i bootstrap lib (dette er ikke påkrævet, kun en bekvemmelighedsmetode).

Kommandolinje

Installer kommandolinjeværktøjet LESS via Node og kør følgende kommando:

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

Sørg for at inkludere --compressi den kommando, hvis du prøver at gemme nogle bytes!

Javascript

Download den seneste Less.js og inkluder stien til den (og Bootstrap) i <head>.

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

For at genkompilere .less-filerne skal du bare gemme dem og genindlæse din side. Less.js kompilerer dem og gemmer dem i lokalt lager.

Uofficiel Mac-app

Den uofficielle Mac-app overvåger mapper med .less-filer og kompilerer koden til lokale filer efter hver lagring af en overvåget .less-fil.

Hvis du vil, kan du skifte præferencer i appen for automatisk minificering, og hvilken mappe de kompilerede filer ender i.

Flere Mac-apps

Crunch

Crunch er en flot MINDRE editor og compiler bygget på Adobe Air.

CodeKit

Oprettet af den samme fyr som den uofficielle Mac-app, CodeKit er en Mac-app, der kompilerer LESS, SASS, Stylus og CoffeeScript.

Simpelt

Mac-, Linux- og pc-app til træk og slip kompilering af MINDRE filer. Derudover er kildekoden på GitHub .