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.

Hyperkoblinger

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

`@baseFontSize`	13 piksler
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18 piksler

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

`@primaryButtonBackground`	`@linkColor`

Skjemaer

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40 piksler
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Skjematilstander og varsler

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

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: 5px, @width: 5px`	Still inn høyde og bredde raskt på én linje
`.square()`	`@size: 5px`	Bygger på `.size()`for å angi bredde og høyde som samme verdi
`.opacity()`	`@opacity: 100`	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	Gi en beholder med fast bredde (sett med `@siteWidth`) for å holde innholdet ditt
`.columns()`	`@columns: 1`	Bygg en rutenettkolonne som spenner over et hvilket som helst antall kolonner (standard til 1 kolonne)
`.offset()`	`@columns: 1`	Forskyv en rutenettkolonne med venstre marg som spenner over et hvilket som helst antall kolonner
`.gridColumn()`	ingen	Få et element til å flyte som en rutenettsøyle

CSS3-egenskaper

Mixin	Parametere	Bruk
`.border-radius()`	`@radius: 5px`	Rund hjørnene på et element. Kan være en enkelt verdi eller fire mellomromseparerte verdier
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	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: 0, @y: 0`	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
`.resizable()`	`@direction: both`	Gjør ethvert element som kan endres til høyre og nederst
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Få innholdet til ethvert element til å bruke CSS3-kolonner

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`	Create a cross-browser striped background gradient
`.#gradientBar()`	`@primaryColor, @secondaryColor`	Used for buttons to assign a gradient and slightly darker border

Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.

Tools for compiling

Node with makefile

Install the LESS command line compiler globally with npm by running the following command:

$ npm install -g less

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

Command line

Install the LESS command line tool via Node and run the following command:

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

Be sure to include --compress in that command if you're trying to save some bytes!

Javascript

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

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

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

Unofficial Mac app

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.

Bygget med MINDRE

Hvorfor MINDRE?

Hva er inkludert?

Lære mer

Variabler

Mixins

Drift

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

Hyperkoblinger

Rutenettsystem

Typografi

Gråtonefarger

Aksentfarger

Komponenter

Knapper

Skjemaer

Navbar

Skjematilstander og varsler

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

Compiling Bootstrap with LESS

Tools for compiling

Node with makefile

Command line

Javascript

Unofficial Mac app

More Mac apps

Crunch

CodeKit

Simpless