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.
Gebouwd met MINDER
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.
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.
Bootstrap-variabelen LESS-variabelen, hun waarden en gebruiksrichtlijnen
Hyperlinks
@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
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Formulieren
@placeholderText |
@grayLight |
navigatiesysteem
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Formulierstatussen en waarschuwingen
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap-mixen
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 metmargin: auto |
.ie7-inline-block() |
geen | Gebruik naast regulier display: inline-blockom IE7-ondersteuning te krijgen |
.size() |
@height: 5px, @width: 5px |
Stel snel de hoogte en breedte in op één regel |
.square() |
@size: 5px |
Bouwt voort .size()om de breedte en hoogte in te stellen als dezelfde waarde |
.opacity() |
@opacity: 100 |
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 | Zorg voor een container met vaste breedte (set met @siteWidth) voor het bewaren van uw inhoud |
.columns() |
@columns: 1 |
Bouw een rasterkolom die een willekeurig aantal kolommen beslaat (standaard 1 kolom) |
.offset() |
@columns: 1 |
Offset een rasterkolom met linkermarge die een willekeurig aantal kolommen overspant |
.gridColumn() |
geen | Een element laten zweven als een rasterkolom |
CSS3-eigenschappen
| mixen | Parameters: | Gebruik |
|---|---|---|
.border-radius() |
@radius: 5px |
Rond de hoeken van een element af. Kan een enkele waarde zijn of vier door spaties gescheiden waarden |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Maak elk element aan de rechterkant en onderaan aanpasbaar |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
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 achtergrondverloop met drie kleuren in verschillende browsers |
.#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 |
Bootstrap compileren met LESS
Hulpmiddelen voor het compileren
Knooppunt met makefile
Installeer de LESS command line compiler globaal met npm door de volgende opdracht uit te voeren:
$ npm installatie -g minder
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 ./lib/bootstrap.less > bootstrap.css
Zorg ervoor dat u --compressin 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 .