Benotzt MANNER mat Bootstrap

Personnaliséiert a verlängert Bootstrap mat LESS , engem CSS Preprocessor, fir d'Variabelen, Mixins a méi ze profitéieren fir de Bootstrap's CSS ze bauen.

Firwat MANNER?

Bootstrap gëtt mat MESS am Kär gemaach, eng dynamesch Stylesheet Sprooch erstallt vun eisem gudde Frënd, Alexis Sellier . Et mécht d'Entwécklung vu Systembaséiert CSS méi séier, méi einfach a méi Spaass.

Wat ass mat abegraff?

Als Ausdehnung vu CSS enthält LESS Variablen, Mixins fir wiederverwendbare Snippets vum Code, Operatioune fir einfach Mathematik, Nesting, a souguer Faarffunktiounen.

Léier méi

Besicht déi offiziell Websäit http://lesscss.org/ fir méi ze léieren.

Variablen

D'Verwalte vu Faarwen a Pixelwäerter an CSS kann e bëssen schmerzhaft sinn, normalerweis voller Kopie a Paste. Net mat MANNER awer - gitt Faarwen oder Pixelwäerter als Variabelen a ännert se eemol.

Mixins

Déi dräi Grenzradius-Deklaratioune musst Dir am normale CSS maachen? Elo si se erof op eng Zeil mat der Hëllef vu Mixins, Snippets vu Code déi Dir iwwerall nei benotze kënnt.

Operatiounen

Maacht Äert Gitter, féierend a méi super flexibel andeems Dir Mathematik op der Flucht mat Operatiounen maacht. Multiplizéieren, deelen, addéieren an subtrahéieren Äre Wee op CSS Sanitéit.

Steieren a Linken

`@bodyBackground`	`@white`	Säit Hannergrondfaarf
`@textColor`	`@grayDark`	Standard Textfaarf fir de ganze Kierper, Rubriken a méi
`@linkColor`	`#08c`	Standard Link Text Faarf
`@linkColorHover`	`darken(@linkColor, 15%)`	Standard Link Text Hover Faarf

Gitter System

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20 px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Typographie

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13 px	Muss Pixel sinn
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Muss Pixel sinn
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Dëscher

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

Greyscale Faarwen

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eeee
`@white`	#fff

Akzent Faarwen

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

Komponenten

Knäppercher

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

Formen

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

Form Staaten an Alarmer

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

Navbar

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

Dropdowns

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

Held Eenheet

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

Iwwer Mixins

Basis Mëschungen

E Basismixin ass am Wesentlechen en Inklusioun oder en Deel fir e Snippet vun CSS. Si gi just wéi eng CSS Klass geschriwwen a kënnen iwwerall genannt ginn.

. element {
  . clearfix ();
}

Parametresch Mëschungen

E parametresche Mixin ass grad wéi e Basismixin, awer et akzeptéiert och Parameteren (also den Numm) mat optionalen Standardwäerter.

. element {
  . Grenz - Radius ( 4px );
}

Füügt einfach Ären eegene bäi

Bal all Bootstrap's Mixins ginn an mixins.less gespäichert, eng wonnerbar Utility .less Datei, déi Iech erlaabt e Mixin an engem vun den .less Dateien am Toolkit ze benotzen.

Also, gitt vir a benotzt déi existent oder fillt Iech fräi fir Är eege derbäi ze addéieren wéi Dir braucht.

Inklusiv Mixins

Utilities

Mixin	Parameteren	Benotzung
`.clearfix()`	keng	Füügt un all Elterendeel fir d'Schwämm bannen ze läschen
`.tab-focus()`	keng	Fëllt de Webkit Fokusstil a ronn Firefox Kontur un
`.center-block()`	keng	Auto Zentrum engem Block-Niveau Element benotzt`margin: auto`
`.ie7-inline-block()`	keng	Benotzt zousätzlech zu regelméissegen `display: inline-block`fir IE7 Ënnerstëtzung ze kréien
`.size()`	`@height @width`	Setzt séier d'Héicht an d'Breet op enger Linn
`.square()`	`@size`	Baut op `.size()`fir d'Breet an d'Héicht als selwechte Wäert ze setzen
`.opacity()`	`@opacity`	Setzt, a ganz Zuelen, den Opazitéitsprozent (zB "50" oder "75")

Formen

Mixin	Parameteren	Benotzung
`.placeholder()`	`@color: @placeholderText`	Setzt d' `placeholder`Textfaarf fir Inputen

Typographie

Mixin	Parameteren	Benotzung
`#font > #family > .serif()`	keng	Maachen en Element engem serif Schrëft Stack benotzen
`#font > #family > .sans-serif()`	keng	Maacht en Element mat engem sans-serif Schrëftstapel
`#font > #family > .monospace()`	keng	Maacht en Element mat engem Monospace Schrëftstapel
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Einfach Schrëftgréisst, Gewiicht a Féierung setzen
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setzt Schrëftfamill op Serif, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setzt Schrëftfamill op sans-serif, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setzt Schrëftfamill op Monospace, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung

Gitter System

Mixin	Parameteren	Benotzung
`.container-fixed()`	keng	Erstellt en horizontal zentréierte Container fir Ären Inhalt ze halen
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generéiere e Pixel Gitter System (Container, Zeil, a Kolonnen) mat n Kolonnen an x Pixel breet Renn
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generéiere engem precent Gitter System mat n Sailen an x % breet renne
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generéiere de Pixel Gitter System fir `input`Elementer, Rechnung fir Padding a Grenzen
`.makeColumn`	`@columns: 1, @offset: 0`	Maacht iergendeng `div`an eng Gitterkolonn ouni d' `.span*`Klassen

CSS3 Eegeschaften

Mixin	Parameteren	Benotzung
`.border-radius()`	`@radius`	Ronn d'Ecker vun engem Element. Kann een eenzege Wäert oder véier Raum getrennt Wäerter sinn
`.box-shadow()`	`@shadow`	Füügt e Schatt un en Element
`.transition()`	`@transition`	Füügt CSS3 Iwwergangseffekt (z.B. `all .2s linear`)
`.rotate()`	`@degrees`	Rotéiert en Element n Grad
`.scale()`	`@ratio`	Skala en Element op n mol seng ursprénglech Gréisst
`.translate()`	`@x, @y`	Beweegt en Element op den x an y Fligeren
`.background-clip()`	`@clip`	Crop den Hannergrond vun engem Element (nëtzlech fir `border-radius`)
`.background-size()`	`@size`	Kontrolléiert d'Gréisst vun den Hannergrondbiller iwwer CSS3
`.box-sizing()`	`@boxmodel`	Ännert de Këschtmodell fir en Element (zB `border-box`fir eng voll Breet `input`)
`.user-select()`	`@select`	Kontroll Cursor Auswiel vun Text op enger Säit
`.backface-visibility()`	`@visibility: visible`	Verhënnert d'Flameren vum Inhalt wann Dir CSS 3D Transformatiounen benotzt
`.resizable()`	`@direction: both`	Maachen all Element resizable op der rietser an ënnen
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Maacht den Inhalt vun all Element benotzt CSS3 Kolonnen

Hannergrënn a Gradienten

Mixin	Parameteren	Benotzung
`#translucent > .background()`	`@color: @white, @alpha: 1`	Gitt engem Element eng transluzent Hannergrondfaarf
`#translucent > .border()`	`@color: @white, @alpha: 1`	Gitt engem Element eng transluzent Grenzfaarf
`#gradient > .vertical()`	`@startColor, @endColor`	Erstellt e Cross-Browser vertikalen Hannergrondgradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Erstellt e Cross-Browser horizontalen Hannergrondgradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Erstellt e Cross-Browser Directional Hannergrondgradient
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Erstellt e Cross-Browser dräifaarweg Hannergrondgradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Erstellt e Cross-Browser radialen Hannergrondgradient
`#gradient > .striped()`	`@color, @angle`	Erstellt e Cross-Browser gesträifte Hannergrondgradient
`#gradientBar()`	`@primaryColor, @secondaryColor`	Benotzt fir Knäppercher fir e Gradient a liicht däischter Grenz ze ginn

Notiz: Wann Dir eng Pull-Ufro op GitHub mat modifizéierten CSS ofgitt, musst Dir den CSS iwwer eng vun dëse Methoden nei kompiléieren.

Tools fir ze kompiléieren

Node mat Makefile

Installéiert de LESS Kommandozeil Compiler an uglify-js weltwäit mat npm andeems Dir de folgende Kommando ausféiert:

$ npm installéieren -g manner uglify-js

Eemol installéiert, lafen einfach makevun der Root vun Ärem Bootstrap Verzeichnis an Dir sidd alles ageriicht.

Zousätzlech, wann Dir Watchr installéiert hutt, kënnt Dir lafen make watchfir Bootstrap automatesch opzebauen all Kéier wann Dir eng Datei am Bootstrap lib ännert (dëst ass net erfuerderlech, just eng Komfortmethod).

Kommando Linn

Installéiert de LESS Kommandozeil Tool iwwer Node a lafen de folgende Kommando:

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

Gitt sécher datt Dir --compressan deem Kommando enthält wann Dir probéiert e puer Bytes ze späicheren!

Javascript

Luet déi lescht Less.js erof an enthält de Wee dohinner (a Bootstrap) an der <head>.

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

Fir d'.less Dateien nei ze kompiléieren, späichert se einfach a lued Är Säit nei. Less.js kompiléiert se a späichert se an der lokaler Späichere.

Inoffiziell Mac App

Déi inoffiziell Mac App kuckt Verzeechnes vun .less Dateien a kompiléiert de Code op lokal Dateien no all Späichere vun enger iwwerwaachter .less Datei.

Wann Dir wëllt, kënnt Dir Virléiften an der App wiesselen fir automatesch Minifizéierung a wéi engem Verzeichnis déi kompiléiert Dateien ophalen.

Gebaut mat MANNER

Firwat MANNER?

Wat ass mat abegraff?

Léier méi

Variablen

Mixins

Operatiounen

Bootstrap Variablen MENG Variabelen, hir Wäerter, a Benotzungsrichtlinnen

Steieren a Linken

Gitter System

Typographie

Dëscher

Greyscale Faarwen

Akzent Faarwen

Komponenten

Knäppercher

Formen

Form Staaten an Alarmer

Navbar

Dropdowns

Held Eenheet

Bootstrap Mixins

Iwwer Mixins

Basis Mëschungen

Parametresch Mëschungen

Füügt einfach Ären eegene bäi

Inklusiv Mixins

Utilities

Formen

Typographie

Gitter System

CSS3 Eegeschaften

Hannergrënn a Gradienten

Kompiléiere Bootstrap mat MANNER

Tools fir ze kompiléieren

Node mat Makefile

Kommando Linn

Javascript

Inoffiziell Mac App

Méi Mac Apps

Crunch

CodeKit

Einfach