Выкарыстанне LESS з Bootstrap

Наладзьце і пашырыце Bootstrap з дапамогай LESS , прэпрацэсара CSS, каб скарыстацца перавагамі зменных, міксінаў і іншага, што выкарыстоўваецца для стварэння CSS Bootstrap.

Чаму МЕНШ?

У аснове Bootstrap ляжыць LESS, дынамічная мова табліц стыляў, створаная нашым добрым сябрам Алексісам Селье . Гэта робіць распрацоўку сістэмнага CSS больш хуткай, прасцейшай і весялейшай.

Што ўключана?

У якасці пашырэння CSS LESS уключае зменныя, міксіны для шматразовых фрагментаў кода, аперацыі для простай матэматыкі, укладвання і нават функцыі колеру.

Даведайцеся больш

Наведайце афіцыйны сайт http://lesscss.org/ , каб даведацца больш.

Пераменныя

Кіраванне колерамі і значэннямі пікселяў у CSS можа быць невялікай праблемай, як правіла, поўным капіявання і ўстаўкі. Аднак не з LESS - прызначце колеры або значэнні пікселяў у якасці зменных і змяніце іх адзін раз.

Міксіны

Гэтыя тры дэкларацыі радыуса мяжы, якія вам трэба зрабіць у звычайным старым CSS? Цяпер яны зведзены да аднаго радка з дапамогай міксінаў, фрагментаў кода, якія можна паўторна выкарыстоўваць дзе заўгодна.

Аперацыі

Зрабіце сваю сетку, ініцыятыву і больш гнуткай, выконваючы матэматыку на хаду з дапамогай аперацый. Памнажайце, дзяліце, складайце і аднімайце на сваім шляху да разумнасці CSS.

Падмосткі і звёны

`@bodyBackground`	`@white`	Колер фону старонкі
`@textColor`	`@grayDark`	Колер тэксту па змаўчанні для ўсяго цела, загалоўкаў і іншага
`@linkColor`	`#08c`	Колер тэксту спасылкі па змаўчанні
`@linkColorHover`	`darken(@linkColor, 15%)`	Стандартны колер тэксту спасылкі пры навядзенні курсора

Сеткавая сістэма

`@gridColumns`	12
`@gridColumnWidth`	60 пікселяў
`@gridGutterWidth`	20 пікселяў
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Тыпаграфіка

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, без засечак
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Манака, "Кур'ер Нью", моношир
`@baseFontSize`	13 пікселяў	Павінны быць пікселі
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 пікселяў	Павінны быць пікселі
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Табліцы

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

Колеры адценняў шэрага

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

Акцэнтныя колеры

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

Кампаненты

Гузікі

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

Формы

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

Станы формы і абвесткі

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

Навігацыйная панэль

`@navbarHeight`	40 пікселяў
`@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`

Выпадальныя спісы

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

Адзінка героя

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

Пра міксіны

Базавыя міксіны

Базавы міксін - гэта, па сутнасці, уключэнне або частка для фрагмента CSS. Яны напісаны гэтак жа, як клас CSS, і іх можна выклікаць дзе заўгодна.

. элемент {
  . Clearfix ();
}

Параметрычныя міксіны

Параметрычны міксін падобны на асноўны міксін, але ён таксама прымае параметры (адсюль і назва) з дадатковымі значэннямі па змаўчанні.

. элемент {
  . мяжа - радыус ( 4px );
}

Лёгка дадайце свой уласны

Амаль усе міксіны Bootstrap захоўваюцца ў mixins.less, выдатным службовым файле .less, які дазваляе вам выкарыстоўваць міксіны ў любым з файлаў .less у наборы інструментаў.

Такім чынам, працягвайце і выкарыстоўвайце існуючыя або не саромейцеся дадаваць свае ўласныя па меры неабходнасці.

Уключаны міксіны

Камунальныя паслугі

Міксін	Параметры	Выкарыстанне
`.clearfix()`	ні адзін	Дадайце да любога з бацькоўскіх элементаў, каб ачысціць паплаўкі ўнутры
`.tab-focus()`	ні адзін	Прымяніце стыль фокусу Webkit і круглы контур Firefox
`.center-block()`	ні адзін	Аўтаматычнае цэнтраванне элемента на ўзроўні блока з дапамогай`margin: auto`
`.ie7-inline-block()`	ні адзін	Выкарыстоўвайце ў дадатак да звычайнага `display: inline-block`, каб атрымаць падтрымку IE7
`.size()`	`@height @width`	Хутка задайце вышыню і шырыню на адной лініі
`.square()`	`@size`	Абапіраецца на `.size()`ўстаноўку аднолькавых значэнняў для шырыні і вышыні
`.opacity()`	`@opacity`	Задайце ў цэлых ліках працэнт непразрыстасці (напрыклад, "50" ці "75")

Формы

Міксін	Параметры	Выкарыстанне
`.placeholder()`	`@color: @placeholderText`	Усталюйце `placeholder`колер тэксту для ўводу

Тыпаграфіка

Міксін	Параметры	Выкарыстанне
`#font > #family > .serif()`	ні адзін	Зрабіце для элемента выкарыстанне стэка шрыфтоў з засечкамі
`#font > #family > .sans-serif()`	ні адзін	Зрабіце так, каб элемент выкарыстоўваў стос шрыфтоў без засечак
`#font > #family > .monospace()`	ні адзін	Зрабіце для элемента выкарыстанне монашырыннага стэка шрыфтоў
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Лёгка наладзьце памер шрыфта, таўшчыню і лінейку
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Усталюйце сямейства шрыфтоў з засечкамі і кантралюйце памер, вагу і лінейку
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Усталюйце сямейства шрыфтоў без засечак і кантралюйце памер, вагу і лінейку
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Усталюйце сямейства шрыфтоў у монашырынны, а таксама кантралюйце памер, вагу і лінейку

Сеткавая сістэма

Міксін	Параметры	Выкарыстанне
`.container-fixed()`	ні адзін	Стварыце гарызантальна па цэнтры кантэйнер для захоўвання вашага кантэнту
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Стварыце сістэму піксельнай сеткі (кантэйнер, радок і слупкі) з n слупкоў і жолаба шырынёй x пікселяў
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Стварыце сістэму папярэдняй сеткі з n слупкоў і x % шырыні жолаба
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Стварыце сістэму піксельнай сеткі для `input`элементаў з улікам запаўнення і межаў
`.makeColumn`	`@columns: 1, @offset: 0`	Ператварыце любы `div`ў слупок сеткі без `.span*`класаў

Ўласцівасці CSS3

Міксін	Параметры	Выкарыстанне
`.border-radius()`	`@radius`	Закругліць вуглы элемента. Можа быць адно значэнне або чатыры значэнні, падзеленыя прабеламі
`.box-shadow()`	`@shadow`	Дадайце цень да элемента
`.transition()`	`@transition`	Дадаць эфект пераходу CSS3 (напрыклад, `all .2s linear`)
`.rotate()`	`@degrees`	Павярнуць элемент на n градусаў
`.scale()`	`@ratio`	Павялічыць элемент у n разоў ад першапачатковага памеру
`.translate()`	`@x, @y`	Перамяшчайце элемент па плоскасцях x і y
`.background-clip()`	`@clip`	Абрэзаць фон элемента (карысна для `border-radius`)
`.background-size()`	`@size`	Кіруйце памерам фонавых малюнкаў праз CSS3
`.box-sizing()`	`@boxmodel`	Змяніць мадэль скрынкі для элемента (напрыклад, `border-box`для поўнай шырыні `input`)
`.user-select()`	`@select`	Кіраванне выбарам тэксту курсорам на старонцы
`.backface-visibility()`	`@visibility: visible`	Прадухіленне мігцення кантэнту пры выкарыстанні 3D-пераўтварэнняў CSS
`.resizable()`	`@direction: both`	Зрабіце магчымасць змены памеру любога элемента справа і ўнізе
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Зрабіце так, каб змест любога элемента выкарыстоўваў слупкі CSS3

Фоны і градыенты

Міксін	Параметры	Выкарыстанне
`#translucent > .background()`	`@color: @white, @alpha: 1`	Надайце элементу празрысты фонавы колер
`#translucent > .border()`	`@color: @white, @alpha: 1`	Надайце элементу колер напаўпразрыстай мяжы
`#gradient > .vertical()`	`@startColor, @endColor`	Стварыце крос-браўзерны вертыкальны фонавы градыент
`#gradient > .horizontal()`	`@startColor, @endColor`	Стварыце кросбраўзерны гарызантальны фонавы градыент
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Стварыце кросбраўзерны накіраваны фонавы градыент
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Стварыце кросбраўзерны трохкаляровы фонавы градыент
`#gradient > .radial()`	`@innerColor, @outerColor`	Стварыце кросбраўзерны радыяльны фонавы градыент
`#gradient > .striped()`	`@color, @angle`	Стварыце крос-браўзерны паласаты градыент фону
`#gradientBar()`	`@primaryColor, @secondaryColor`	Выкарыстоўваецца для кнопак для прызначэння градыенту і крыху больш цёмнай мяжы

Заўвага: калі вы адпраўляеце запыт на выцягванне ў GitHub са змененым CSS, вы павінны перакампіляваць CSS любым з гэтых метадаў.

Інструменты для кампіляцыі

Вузел з make-файлам

Усталюйце кампілятар каманднага радка LESS і uglify-js глабальна з дапамогай npm, выканаўшы наступную каманду:

$ npm install -g less uglify-js

Пасля ўстаноўкі проста запусціце makeз кораня загрузачнага каталога, і ўсё гатова.

Акрамя таго, калі ў вас усталяваны watchr , вы можаце запускаць make watchаўтаматычную перабудову загрузніка кожны раз, калі вы рэдагуеце файл у бібліятэцы загрузкі (гэта неабавязкова, проста для зручнасці).

Камандны радок

Усталюйце інструмент каманднага радка LESS праз Node і выканайце наступную каманду:

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

Абавязкова ўключыце --compressў гэтую каманду, калі вы спрабуеце зэканоміць некаторыя байты!

Javascript

Спампуйце апошнюю версію Less.js і ўключыце шлях да яе (і Bootstrap) у <head>.

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

Каб перакампіляваць файлы .less, проста захавайце іх і перазагрузіце старонку. Less.js кампілюе іх і захоўвае ў лакальным сховішчы.

Неафіцыйнае прыкладанне для Mac

Неафіцыйнае прыкладанне для Mac назірае за каталогамі файлаў .less і кампілюе код у лакальныя файлы пасля кожнага захавання прагледжанага файла .less.

Пры жаданні вы можаце пераключаць налады ў дадатку для аўтаматычнай мінімізацыі і каталога, у які ў канчатковым выніку трапляюць скампіляваныя файлы.

Пабудаваны з МЕНШЫМ

Чаму МЕНШ?

Што ўключана?

Даведайцеся больш

Пераменныя

Міксіны

Аперацыі

Пераменныя Bootstrap. Пераменныя LESS, іх значэнні і рэкамендацыі па выкарыстанні

Падмосткі і звёны

Сеткавая сістэма

Тыпаграфіка

Табліцы

Колеры адценняў шэрага

Акцэнтныя колеры

Кампаненты

Гузікі

Формы

Станы формы і абвесткі

Навігацыйная панэль

Выпадальныя спісы

Адзінка героя

Міксіны Bootstrap

Пра міксіны

Базавыя міксіны

Параметрычныя міксіны

Лёгка дадайце свой уласны

Уключаны міксіны

Камунальныя паслугі

Формы

Тыпаграфіка

Сеткавая сістэма

Ўласцівасці CSS3

Фоны і градыенты

Кампіляцыя Bootstrap з LESS

Інструменты для кампіляцыі

Вузел з make-файлам

Камандны радок

Javascript

Неафіцыйнае прыкладанне для Mac

Больш праграм для Mac

Храбуст

CodeKit

Бяспроста