Bruker MINDRE med Bootstrap

Tilpass og utvid Bootstrap med LESS , en CSS-forprosessor, for å dra nytte av variablene, mixinene og mer som brukes til å bygge Bootstraps CSS.

Hvorfor MINDRE?

Bootstrap er laget med LESS i kjernen, et dynamisk stilarkspråk skapt av vår gode venn, Alexis Sellier . Det gjør utvikling av systembasert CSS raskere, enklere og morsommere.

Hva er inkludert?

Som en utvidelse av CSS inkluderer LESS variabler, mixins for gjenbrukbare kodebiter, operasjoner for enkel matematikk, nesting og til og med fargefunksjoner.

Lære mer

Besøk det offisielle nettstedet på http://lesscss.org/ for å lære mer.

Variabler

Å administrere farger og pikselverdier i CSS kan være litt av en smerte, vanligvis full av kopier og lim. Ikke med MINDRE – tilordne farger eller pikselverdier som variabler og endre dem én gang.

Mixins

Disse tre grense-radius-erklæringene du må lage i vanlig CSS? Nå er de nede på én linje ved hjelp av mixins, kodebiter du kan bruke hvor som helst.

Drift

Gjør rutenettet ditt, ledende og mer superfleksibelt ved å gjøre regnestykket på farten med operasjoner. Multipliser, del, legg til og trekk fra deg til CSS-fornuft.

Stillas og lenker

`@bodyBackground`	`@white`	Bakgrunnsfarge på siden
`@textColor`	`@grayDark`	Standard tekstfarge for hele brødteksten, overskrifter og mer
`@linkColor`	`#08c`	Standard lenketekstfarge
`@linkColorHover`	`darken(@linkColor, 15%)`	Standard lenketekstfarge

Rutenettsystem

`@gridColumns`	12
`@gridColumnWidth`	60 piksler
`@gridGutterWidth`	20 piksler
`@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 piksler	Må være piksler
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 piksler	Må være piksler
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabeller

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

Gråtonefarger

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

Aksentfarger

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

Skjemaer

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

Skjematilstander og varsler

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

Navbar

`@navbarHeight`	40 piksler
`@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`

Rullegardiner

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

Helteenhet

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

Om mixins

Grunnleggende blandinger

En grunnleggende mixin er i hovedsak en inkludering eller en delvis for en kodebit av CSS. De er skrevet akkurat som en CSS-klasse og kan kalles hvor som helst.

. element {
  . clearfix ();
}

Parametriske blandinger

En parametrisk mixin er akkurat som en grunnleggende mixin, men den godtar også parametere (derav navnet) med valgfrie standardverdier.

. element {
  . kantlinje - radius ( 4px );
}

Legg enkelt til din egen

Nesten alle Bootstraps mixins er lagret i mixins.less, en fantastisk .less-fil som lar deg bruke en mixin i alle .less-filene i verktøysettet.

Så fortsett og bruk de eksisterende, eller legg gjerne til dine egne etter behov.

Inkludert blandinger

Verktøy

Mixin	Parametere	Bruk
`.clearfix()`	ingen	Legg til en hvilken som helst forelder for å fjerne flyter innenfor
`.tab-focus()`	ingen	Bruk Webkit-fokusstilen og rundt Firefox-omrisset
`.center-block()`	ingen	Autosentrer et element på blokknivå ved hjelp av`margin: auto`
`.ie7-inline-block()`	ingen	Bruk i tillegg til vanlig `display: inline-block`for å få IE7-støtte
`.size()`	`@height @width`	Still inn høyde og bredde raskt på én linje
`.square()`	`@size`	Bygger på `.size()`for å angi bredde og høyde som samme verdi
`.opacity()`	`@opacity`	Angi opasitetsprosenten i hele tall (f.eks. "50" eller "75")

Skjemaer

Mixin	Parametere	Bruk
`.placeholder()`	`@color: @placeholderText`	Angi `placeholder`tekstfargen for inndata

Typografi

Mixin	Parametere	Bruk
`#font > #family > .serif()`	ingen	Få et element til å bruke en serif-fontstabel
`#font > #family > .sans-serif()`	ingen	Lag et element med en sans-serif fontstabel
`#font > #family > .monospace()`	ingen	Få et element til å bruke en monospace fontstabel
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Angi enkelt skriftstørrelse, vekt og innledning
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Sett skriftfamilien til serif, og kontroller størrelse, vekt og innledning
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Sett skriftfamilien til sans-serif, og kontroller størrelse, vekt og ledende
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Sett skriftfamilien til monospace, og kontroller størrelse, vekt og ledende

Rutenettsystem

Mixin	Parametere	Bruk
`.container-fixed()`	ingen	Lag en horisontalt sentrert beholder for å holde innholdet ditt
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generer et pikselnettsystem (beholder, rad og kolonner) med n kolonner og x pikselbred takrenne
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generer et prosentnettsystem med n søyler og x % bred renne
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generer pikselnettsystemet for `input`elementer, ta hensyn til polstring og grenser
`.makeColumn`	`@columns: 1, @offset: 0`	Gjør noen `div`til en rutenettkolonne uten `.span*`klassene

CSS3-egenskaper

Mixin	Parametere	Bruk
`.border-radius()`	`@radius`	Rund hjørnene på et element. Kan være en enkelt verdi eller fire mellomromseparerte verdier
`.box-shadow()`	`@shadow`	Legg til en skygge til et element
`.transition()`	`@transition`	Legg til CSS3-overgangseffekt (f.eks. `all .2s linear`)
`.rotate()`	`@degrees`	Roter et element n grader
`.scale()`	`@ratio`	Skaler et element til n ganger dets opprinnelige størrelse
`.translate()`	`@x, @y`	Flytt et element på x- og y-planene
`.background-clip()`	`@clip`	Beskjær bakgrunnen til et element (nyttig for `border-radius`)
`.background-size()`	`@size`	Kontroller størrelsen på bakgrunnsbilder via CSS3
`.box-sizing()`	`@boxmodel`	Endre boksmodellen for et element (f.eks. `border-box`for en full bredde `input`)
`.user-select()`	`@select`	Kontroller markørvalg av tekst på en side
`.backface-visibility()`	`@visibility: visible`	Forhindre flimring av innhold ved bruk av CSS 3D-transformasjoner
`.resizable()`	`@direction: both`	Gjør ethvert element som kan endres til høyre og nederst
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Få innholdet til ethvert element til å bruke CSS3-kolonner
`.hyphens()`	`@mode: auto`	CSS3-orddeling når du vil ha det (inkluderer `word-wrap: break-word`)

Bakgrunner og gradienter

Mixin	Parametere	Bruk
`#translucent > .background()`	`@color: @white, @alpha: 1`	Gi et element en gjennomskinnelig bakgrunnsfarge
`#translucent > .border()`	`@color: @white, @alpha: 1`	Gi et element en gjennomskinnelig kantfarge
`#gradient > .vertical()`	`@startColor, @endColor`	Lag en vertikal bakgrunnsgradient på tvers av nettlesere
`#gradient > .horizontal()`	`@startColor, @endColor`	Lag en horisontal bakgrunnsgradient på tvers av nettlesere
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Lag en retningsbestemt bakgrunnsgradient på tvers av nettlesere
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Lag en trefarget bakgrunnsgradient på tvers av nettlesere
`#gradient > .radial()`	`@innerColor, @outerColor`	Lag en radiell bakgrunnsgradient på tvers av nettlesere
`#gradient > .striped()`	`@color, @angle`	Lag en stripet bakgrunnsgradient på tvers av nettlesere
`#gradientBar()`	`@primaryColor, @secondaryColor`	Brukes for knapper for å tilordne en gradient og litt mørkere kant

Merk: Hvis du sender inn en pull-forespørsel til GitHub med modifisert CSS, må du rekompilere CSS via en av disse metodene.

Verktøy for kompilering

Node med makefile

Installer LESS kommandolinjekompilatoren, JSHint, Recess og uglify-js globalt med npm ved å kjøre følgende kommando:

$ npm install -g mindre jshint fordypning uglify-js

Når den er installert, kjør bare makefra roten til bootstrap-katalogen din, og du er klar.

I tillegg, hvis du har watchr installert, kan du kjøre make watchfor å få bootstrap automatisk gjenoppbygd hver gang du redigerer en fil i bootstrap lib (dette er ikke nødvendig, bare en praktisk metode).

Kommandolinje

Installer LESS kommandolinjeverktøyet via Node og kjør følgende kommando:

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

Sørg for å inkludere --compressi den kommandoen hvis du prøver å lagre noen byte!

Javascript

Last ned den nyeste Less.js og ta med banen til den (og Bootstrap) i <head>.

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

For å rekompilere .less-filene, lagrer du dem og laster inn siden på nytt. Less.js kompilerer dem og lagrer dem i lokal lagring.

Uoffisiell Mac-app

Den uoffisielle Mac-appen ser på kataloger med .less-filer og kompilerer koden til lokale filer etter hver lagring av en overvåket .less-fil.

Hvis du vil, kan du bytte innstillinger i appen for automatisk minifisering og hvilken katalog de kompilerte filene havner i.

Bygget med MINDRE

Hvorfor MINDRE?

Hva er inkludert?

Lære mer

Variabler

Mixins

Drift

Bootstrap-variabler MINDRE variabler, deres verdier og retningslinjer for bruk

Stillas og lenker

Rutenettsystem

Typografi

Tabeller

Gråtonefarger

Aksentfarger

Komponenter

Knapper

Skjemaer

Skjematilstander og varsler

Navbar

Rullegardiner

Helteenhet

Bootstrap-mikser

Om mixins

Grunnleggende blandinger

Parametriske blandinger

Legg enkelt til din egen

Inkludert blandinger

Verktøy

Skjemaer

Typografi

Rutenettsystem

CSS3-egenskaper

Bakgrunner og gradienter

Kompilere Bootstrap med MINDRE

Verktøy for kompilering

Node med makefile

Kommandolinje

Javascript

Uoffisiell Mac-app

Flere Mac-apper

Crunch

CodeKit

Enkelt