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

MINDER CSS

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

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

Parametrische mixins

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

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

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 metmargin: auto
.ie7-inline-block() geen Gebruik naast regulier display: inline-blockom 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 placeholdertekstkleur 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 procentrastersysteem met n kolommen en x % brede goot
#grid > .input() @gridColumnWidth, @gridGutterWidth Genereer het pixelrastersysteem voor inputelementen, rekening houdend met opvulling en randen
.makeColumn @columns: 1, @offset: 0 Verander elke divin 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-boxvoor 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
.hyphens() @mode: auto CSS3-afbreking wanneer u dat wilt (inclusief word-wrap: break-word)

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, JSHint, Recess en uglify-js globaal met npm door de volgende opdracht uit te voeren:

$ npm install -g minder jshint uitsparing 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.

Meer Mac-apps

crunch

Crunch is een geweldig uitziende LESS-editor en compiler die is gebouwd op Adobe Air.

CodeKit

CodeKit, gemaakt door dezelfde man als de onofficiële Mac-app, is een Mac-app die LESS, SASS, Stylus en CoffeeScript compileert.

eenvoud

Mac-, Linux- en pc-app voor het slepen en neerzetten van MINDER-bestanden. Bovendien staat de broncode op GitHub .