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

MINDRE CSS

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.

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

Parametriske blandinger

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

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

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 avmargin: auto
.ie7-inline-block() ingen Bruk i tillegg til vanlig display: inline-blockfor å 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 placeholdertekstfargen 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 inputelementer, ta hensyn til polstring og grenser
.makeColumn @columns: 1, @offset: 0 Gjør noen divtil 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-boxfor 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, 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.

Flere Mac-apper

Crunch

Crunch er en flott mindre editor og kompilator bygget på Adobe Air.

CodeKit

Laget av samme fyr som den uoffisielle Mac-appen, CodeKit er en Mac-app som kompilerer LESS, SASS, Stylus og CoffeeScript.

Enkelt

Mac-, Linux- og PC-app for dra og slipp kompilering av MINDRE filer. I tillegg er kildekoden på GitHub .