Падыход

У той час як старонкі для пачатку працы даюць азнаямленне з праектам і тым, што ён прапануе, гэты дакумент прысвечаны таму, чаму мы робім тое, што робім у Bootstrap. У ім тлумачыцца наша філасофія пабудовы ў Інтэрнэце, каб іншыя маглі вучыцца ў нас, уносіць свой уклад і дапамагаць нам паляпшацца.

Бачыце нешта, што гучыць не так, ці, магчыма, можна зрабіць лепш? Адкрыйце пытанне — мы будзем рады абмеркаваць яго з вамі.

Рэзюмэ

Мы паглыбімся ў кожны з іх больш падрабязна, але на высокім узроўні, вось чым кіруецца наш падыход.

• Кампаненты павінны быць спагаднымі і арыентаванымі на мабільныя прылады
• Кампаненты павінны быць створаны з базавым класам і пашыраны з дапамогай класаў-мадыфікатараў
• Станы кампанентаў павінны падпарадкоўвацца агульнай шкале z-індэксу
• Па магчымасці аддавайце перавагу рэалізацыі HTML і CSS перад JavaScript
• Па магчымасці выкарыстоўвайце ўтыліты замест карыстацкіх стыляў
• Па магчымасці пазбягайце строгіх патрабаванняў HTML (даччыныя селектары)

Спагадны

Спагадныя стылі Bootstrap пабудаваны, каб быць спагаднымі, падыход, які часта называюць мабільным у першую чаргу . Мы выкарыстоўваем гэты тэрмін у нашых дакументах і ў значнай ступені згодны з ім, але часам ён можа быць занадта шырокім. Нягледзячы на ​​​​тое, што не кожны кампанент павінен быць цалкам спагадным у Bootstrap, гэты адаптыўны падыход заключаецца ў памяншэнні перавызначэнняў CSS, падштурхоўваючы вас дадаваць стылі па меры павелічэння акна прагляду.

Ва ўсім Bootstrap вы ўбачыце гэта найбольш выразна ў нашых медыя-запытах. У большасці выпадкаў мы выкарыстоўваем min-widthзапыты, якія пачынаюць прымяняцца ў пэўнай кропцы перапынку і пераносяцца праз больш высокія кропкі перапынку. Напрыклад, a .d-noneпрымяняецца ад min-width: 0да бясконцасці. З іншага боку, a .d-md-noneпрымяняецца ад сярэдняй кропкі перапынку і вышэй.

Часам мы будзем выкарыстоўваць max-width, калі гэтага патрабуе ўласцівая складанасць кампанента. Часам гэтыя перавызначэнні функцыянальна і разумова больш зразумелыя для рэалізацыі і падтрымкі, чым перапісванне асноўных функцый з нашых кампанентаў. Мы імкнемся абмежаваць гэты падыход, але будзем выкарыстоўваць яго час ад часу.

Заняткі

Акрамя нашай Reboot, крос-браўзернай табліцы стыляў нармалізацыі, усе нашы стылі накіраваны на выкарыстанне класаў у якасці селектараў. Гэта азначае пазбяганне селектараў тыпаў (напрыклад, input[type="text"]) і старонніх бацькоўскіх класаў (напрыклад, .parent .child), якія робяць стылі занадта спецыфічнымі, каб іх лёгка перавызначыць.

Такім чынам, кампаненты павінны быць створаны з базавым класам, які змяшчае агульныя пары ўласцівасць-значэнне, якія не павінны быць перавызначаны. Напрыклад, .btnі .btn-primary. Мы выкарыстоўваем .btnдля ўсіх распаўсюджаных стыляў, такіх як display, paddingі border-width. Затым мы выкарыстоўваем мадыфікатары, напрыклад .btn-primary, каб дадаць колер, колер фону, колер рамкі і г.д.

Класы-мадыфікатары варта выкарыстоўваць толькі тады, калі ёсць некалькі ўласцівасцей або значэнняў, якія трэба змяніць у некалькіх варыянтах. Мадыфікатары не заўсёды патрэбныя, таму пераканайцеся, што вы сапраўды захоўваеце радкі кода і прадухіляеце непатрэбныя перавызначэнні пры іх стварэнні. Добрыя прыклады мадыфікатараў - нашы класы колеру тэмы і варыянты памеру.

шкалы z-індэкс

У Bootstrap ёсць дзве z-indexшкалы — элементы ўнутры кампанента і кампаненты, якія накладаюцца.

Складовыя элементы

• Некаторыя кампаненты ў Bootstrap створаны з элементамі, якія перакрываюцца, каб прадухіліць падвойныя межы без змены borderўласцівасці. Напрыклад, групы кнопак, групы ўводу і пагінацыя.
• Гэтыя кампаненты маюць стандартную z-indexшкалу 0праз 3.
• 0з'яўляецца стандартным (пачатковым), 1з'яўляецца :hover, 2з'яўляецца :active/ .activeі 3з'яўляецца :focus.
• Такі падыход адпавядае нашым чаканням найвышэйшага прыярытэту карыстальнікаў. Калі элемент знаходзіцца ў цэнтры ўвагі, ён знаходзіцца ў полі зроку і ўвазе карыстальніка. Актыўныя элементы займаюць другое месца, таму што яны паказваюць стан. Навядзенне курсора займае трэцяе месца па велічыні, таму што паказвае намеры карыстальніка, але можна навесці практычна ўсё .

Накладныя кампаненты

Bootstrap уключае некалькі кампанентаў, якія функцыянуюць як нейкае накладанне. Гэта ўключае ў сябе, у парадку найвышэйшага z-index, выпадаючыя спісы, фіксаваныя і ліпкія панэлі навігацыі, мадальныя падказкі і ўсплывальныя падказкі. Гэтыя кампаненты маюць сваю ўласную z-indexшкалу, якая пачынаецца з 1000. Гэты пачатковы нумар быў выбраны адвольна і служыць невялікім буферам паміж нашымі стылямі і карыстацкімі стылямі вашага праекта.

Кожны кампанент накладання z-indexнязначна павялічвае сваю каштоўнасць такім чынам, што агульныя прынцыпы карыстальніцкага інтэрфейсу дазваляюць элементам, арыентаваным на карыстача або наведзеным курсорам, увесь час заставацца ў полі зроку. Напрыклад, мадальнае - гэта блакіроўка дакумента (напрыклад, вы не можаце рабіць ніякіх іншых дзеянняў, акрамя дзеяння мадальнага), таму мы размяшчаем гэта над панэллю навігацыі.

Даведайцеся больш пра гэта на нашай z-indexстаронцы макета .

HTML і CSS замест JS

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

Гэты прынцып з'яўляецца нашым першакласным JavaScript API з выкарыстаннем dataатрыбутаў. Вам не трэба пісаць практычна ніякі JavaScript, каб выкарыстоўваць нашы плагіны JavaScript; замест гэтага напішыце HTML. Чытайце больш аб гэтым на нашай старонцы агляду JavaScript .

Нарэшце, нашы стылі грунтуюцца на фундаментальных паводзінах звычайных вэб-элементаў. Па магчымасці мы аддаем перавагу выкарыстоўваць тое, што прапануе браўзер. Напрыклад, вы можаце змясціць .btnклас практычна ў любы элемент, але большасць элементаў не забяспечваюць семантычнага значэння або функцыянальнасці браўзера. Таму замест гэтага мы выкарыстоўваем <button>s і <a>s.

Тое ж самае тычыцца і больш складаных кампанентаў. Нягледзячы на ​​тое, што мы маглі б напісаць уласны плагін для праверкі формы, каб дадаць класы да бацькоўскага элемента на аснове стану ўводу, што дазваляе нам стылізаваць тэкст, напрыклад, чырвоны, мы аддаем перавагу выкарыстоўванню псеўдаэлементаў :valid/ :invalid, якія прадастаўляе нам кожны браўзер.

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

Карысныя класы — раней памочнікі ў Bootstrap 3 — з'яўляюцца магутным саюзнікам у барацьбе з раздуццем CSS і нізкай прадукцыйнасцю старонкі. Карысны клас звычайна ўяўляе сабой адну нязменную пару ўласцівасць-значэнне, выражаную ў выглядзе класа (напрыклад, .d-blockпрадстаўляе display: block;). Іх асноўная прывабнасць - гэта хуткасць выкарыстання падчас напісання HTML і абмежаванне колькасці карыстальніцкага CSS, які вы павінны напісаць.

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

Гнуткі HTML

Нягледзячы на ​​тое, што гэта не заўсёды магчыма, мы імкнемся пазбягаць празмернай дагматыкі ў патрабаваннях HTML да кампанентаў. Такім чынам, мы засяроджваемся на асобных класах у нашых селектараў CSS і стараемся пазбягаць непасрэдных даччыных селектараў ( >). Гэта дае вам большую гнуткасць у рэалізацыі і дапамагае зрабіць наш CSS больш простым і менш канкрэтным.

Кодавыя ўмоўнасці

Кіраўніцтва па коду (ад сустваральніка Bootstrap, @mdo) дакументуе, як мы пішам наш HTML і CSS праз Bootstrap. Ён вызначае рэкамендацыі па агульным фарматаванні, значэннях здаровага сэнсу па змаўчанні, парадку ўласцівасцей і атрыбутаў і г.д.

Мы выкарыстоўваем Stylelint для забеспячэння выканання гэтых і іншых стандартаў у нашым Sass/CSS. Наша карыстальніцкая канфігурацыя Stylelint з адкрытым зыходным кодам даступная іншым для выкарыстання і пашырэння.

Мы выкарыстоўваем vnu-jar для забеспячэння выканання стандартнага і семантычнага HTML, а таксама для выяўлення распаўсюджаных памылак.