MINDER gebruiken met Bootstrap

Pas Bootstrap aan en breid het uit met LESS , een CSS-preprocessor, om te profiteren van de variabelen, mixins en meer die worden gebruikt om de CSS van Bootstrap te bouwen.

Waarom MINDER?

Bootstrap is gemaakt met LESS als kern, een dynamische stylesheettaal gemaakt door onze goede vriend, Alexis Sellier . Het maakt het ontwikkelen van op systemen gebaseerde CSS sneller, gemakkelijker en leuker.

Wat is inbegrepen?

Als uitbreiding van CSS bevat LESS variabelen, mixins voor herbruikbare codefragmenten, bewerkingen voor eenvoudige wiskunde, nesten en zelfs kleurfuncties.

Leer meer

Bezoek de officiële website op http://lesscss.org/ voor meer informatie.

Variabelen

Het beheren van kleuren en pixelwaarden in CSS kan een beetje lastig zijn, meestal vol kopiëren en plakken. Maar niet met MINDER: wijs kleuren of pixelwaarden toe als variabelen en wijzig ze één keer.

Mixins

Die drie grensradius-declaraties die je moet maken in de reguliere oude CSS? Nu zijn ze teruggebracht tot één regel met behulp van mixins, codefragmenten die je overal opnieuw kunt gebruiken.

Activiteiten

Maak je raster, leidend en superflexibel door de wiskunde on-the-fly te doen met bewerkingen. Vermenigvuldigen, delen, optellen en aftrekken op weg naar CSS-sanity.

Steigers en koppelingen

`@bodyBackground`	`@white`	Achtergrondkleur pagina
`@textColor`	`@grayDark`	Standaard tekstkleur voor hele tekst, koppen en meer
`@linkColor`	`#08c`	Standaard linktekstkleur
`@linkColorHover`	`darken(@linkColor, 15%)`	Standaard linktekst zweefkleur

Grid-systeem

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Typografie

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, schreefloos
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Koerier Nieuw", monospace
`@baseFontSize`	13px	Moet pixels zijn
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Moet pixels zijn
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tafels

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

Grijswaardenkleuren

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

Accentkleuren

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

Componenten

Toetsen

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

Formulieren

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

Formulierstatussen en waarschuwingen

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

navigatiesysteem

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

Vervolgkeuzelijsten

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

Heldeneenheid

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

Over mixins

Basismixen

Een basismixin is in wezen een include of een gedeeltelijke voor een CSS-fragment. Ze zijn net als een CSS-klasse geschreven en kunnen overal worden aangeroepen.

. element {
  . clearfix ();
}

Parametrische mixins

Een parametrische mixin is net als een basismixin, maar accepteert ook parameters (vandaar de naam) met optionele standaardwaarden.

. element {
  . rand - straal ( 4px );
}

Voeg eenvoudig uw eigen toe

Bijna alle mixins van Bootstrap worden opgeslagen in mixins.less, een prachtig .less-hulpprogramma waarmee je een mixin kunt gebruiken in elk van de .less-bestanden in de toolkit.

Dus ga je gang en gebruik de bestaande of voel je vrij om je eigen toe te voegen als je nodig hebt.

Meegeleverde mixen

Nutsvoorzieningen

mixen	Parameters:	Gebruik
`.clearfix()`	geen	Voeg toe aan een ouder om floats binnen te wissen
`.tab-focus()`	geen	Pas de Webkit-focusstijl en ronde Firefox-omtrek toe
`.center-block()`	geen	Een element op blokniveau automatisch centreren met`margin: auto`
`.ie7-inline-block()`	geen	Gebruik naast regulier `display: inline-block`om IE7-ondersteuning te krijgen
`.size()`	`@height @width`	Stel snel de hoogte en breedte in op één regel
`.square()`	`@size`	Bouwt voort `.size()`om de breedte en hoogte als dezelfde waarde in te stellen
`.opacity()`	`@opacity`	Stel, in gehele getallen, het dekkingspercentage in (bijv. "50" of "75")

Formulieren

mixen	Parameters:	Gebruik
`.placeholder()`	`@color: @placeholderText`	Stel de `placeholder`tekstkleur in voor invoer

Typografie

mixen	Parameters:	Gebruik
`#font > #family > .serif()`	geen	Een element een serif-lettertypestapel laten gebruiken
`#font > #family > .sans-serif()`	geen	Laat een element een schreefloze lettertypestapel gebruiken
`#font > #family > .monospace()`	geen	Laat een element een monospace font-stack gebruiken
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel eenvoudig lettergrootte, gewicht en regelafstand in
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel de lettertypefamilie in op schreef en bepaal de grootte, het gewicht en de regelafstand
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel de lettertypefamilie in op schreefloos en bepaal de grootte, het gewicht en de regelafstand
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stel de lettertypefamilie in op monospace en bepaal de grootte, het gewicht en de regelafstand

Grid-systeem

mixen	Parameters:	Gebruik
`.container-fixed()`	geen	Maak een horizontaal gecentreerde container voor het bewaren van uw inhoud
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Genereer een pixelrastersysteem (container, rij en kolommen) met n kolommen en x pixel brede goot
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Genereer een precentrastersysteem met n kolommen en x % brede goot
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Genereer het pixelrastersysteem voor `input`elementen, rekening houdend met opvulling en randen
`.makeColumn`	`@columns: 1, @offset: 0`	Verander elke `div`in een rasterkolom zonder de `.span*`klassen

CSS3-eigenschappen

mixen	Parameters:	Gebruik
`.border-radius()`	`@radius`	Rond de hoeken van een element af. Kan een enkele waarde zijn of vier door spaties gescheiden waarden
`.box-shadow()`	`@shadow`	Een slagschaduw toevoegen aan een element
`.transition()`	`@transition`	CSS3-overgangseffect toevoegen (bijv. `all .2s linear`)
`.rotate()`	`@degrees`	Een element n graden roteren
`.scale()`	`@ratio`	Een element schalen tot n keer de oorspronkelijke grootte
`.translate()`	`@x, @y`	Een element verplaatsen op de x- en y-vlakken
`.background-clip()`	`@clip`	Snijd de achtergrond van een element bij (handig voor `border-radius`)
`.background-size()`	`@size`	Bepaal de grootte van achtergrondafbeeldingen via CSS3
`.box-sizing()`	`@boxmodel`	Wijzig het doosmodel voor een element (bijvoorbeeld `border-box`voor een volledige breedte `input`)
`.user-select()`	`@select`	Cursorselectie van tekst op een pagina beheren
`.backface-visibility()`	`@visibility: visible`	Voorkom flikkeren van inhoud bij het gebruik van CSS 3D-transformaties
`.resizable()`	`@direction: both`	Maak elk element aan de rechterkant en onderaan aanpasbaar
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Zorg ervoor dat de inhoud van elk element CSS3-kolommen gebruikt

Achtergronden en verlopen

mixen	Parameters:	Gebruik
`#translucent > .background()`	`@color: @white, @alpha: 1`	Een element een doorschijnende achtergrondkleur geven
`#translucent > .border()`	`@color: @white, @alpha: 1`	Geef een element een doorschijnende randkleur
`#gradient > .vertical()`	`@startColor, @endColor`	Een verticaal achtergrondverloop tussen verschillende browsers maken
`#gradient > .horizontal()`	`@startColor, @endColor`	Een horizontaal achtergrondverloop tussen verschillende browsers maken
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Een richtingoverschrijdend achtergrondverloop tussen verschillende browsers maken
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Maak een cross-browser driekleuren achtergrondverloop
`#gradient > .radial()`	`@innerColor, @outerColor`	Een radiaal achtergrondverloop voor meerdere browsers maken
`#gradient > .striped()`	`@color, @angle`	Een gestreept achtergrondverloop voor meerdere browsers maken
`#gradientBar()`	`@primaryColor, @secondaryColor`	Gebruikt voor knoppen om een verloop en een iets donkerdere rand toe te wijzen

Opmerking: als u een pull-verzoek indient bij GitHub met aangepaste CSS, moet u de CSS opnieuw compileren via een van deze methoden.

Hulpmiddelen voor het compileren

Knooppunt met makefile

Installeer de LESS command line compiler en uglify-js globaal met npm door de volgende opdracht uit te voeren:

$ npm install -g minder uglify-js

Eenmaal geïnstalleerd, ren je gewoon makevanuit de root van je bootstrap-map en je bent helemaal klaar.

Bovendien, als je watchr hebt geïnstalleerd, kun je ervoor make watchzorgen dat bootstrap automatisch opnieuw wordt opgebouwd elke keer dat je een bestand in de bootstrap-bibliotheek bewerkt (dit is niet vereist, het is alleen een gemakkelijke methode).

Opdrachtregel

Installeer de LESS-opdrachtregeltool via Node en voer de volgende opdracht uit:

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

Zorg ervoor --compressdat u die opdracht opneemt als u enkele bytes probeert op te slaan!

Javascript

Download de nieuwste Less.js en voeg het pad ernaar toe (en Bootstrap) in het <head>.

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

Om de .less-bestanden opnieuw te compileren, hoeft u ze alleen maar op te slaan en uw pagina opnieuw te laden. Less.js compileert ze en slaat ze op in lokale opslag.

Onofficiële Mac-app

De onofficiële Mac-app bekijkt mappen met .less-bestanden en compileert de code naar lokale bestanden na elke opslag van een bekeken .less-bestand.

Als je wilt, kun je in de app de voorkeuren omschakelen voor automatische verkleining en in welke map de gecompileerde bestanden terechtkomen.

Gebouwd met MINDER

Waarom MINDER?

Wat is inbegrepen?

Leer meer

Variabelen

Mixins

Activiteiten

Bootstrap-variabelen LESS-variabelen, hun waarden en gebruiksrichtlijnen

Steigers en koppelingen

Grid-systeem

Typografie

Tafels

Grijswaardenkleuren

Accentkleuren

Componenten

Toetsen

Formulieren

Formulierstatussen en waarschuwingen

navigatiesysteem

Vervolgkeuzelijsten

Heldeneenheid

Bootstrap-mixen

Over mixins

Basismixen

Parametrische mixins

Voeg eenvoudig uw eigen toe

Meegeleverde mixen

Nutsvoorzieningen

Formulieren

Typografie

Grid-systeem

CSS3-eigenschappen

Achtergronden en verlopen

Bootstrap compileren met LESS

Hulpmiddelen voor het compileren

Knooppunt met makefile

Opdrachtregel

Javascript

Onofficiële Mac-app

Meer Mac-apps

crunch

CodeKit

eenvoud