npm i goodt-framework-css --save
npm i less --save-dev
npm i less-loader --save-dev
// ваш <enty-point>.js
import 'goodt-framework-css/src/_all.less'
npm run build
.src/
components/... |
набор компонентов |
_all.less |
точка входа, собирает все части фреймворка воедино |
_helpers.less |
набор вспомогательных примесей |
_params.less |
основные параметры всего фреймворка, используются всеми частями фреймворка |
grid.less |
отзывчивая flex сетка 5%, 1/12, 1/24 |
typography.less |
базовые стили, типографика |
utility.less |
набор вспомогательных классов "утилит" |
Компонент условно делится на три части
[1] параметры |
параметры, которые использует компонент |
[2] хуки |
встроенные в стили компонента хуки, которые позволяют внедрять кастомный стиль в то или иное правило компонента |
[3] стиль |
стиль компонента, описывающий внешний вид компонента, используя параметры и
хуки |
components/example.less
// [1] параметры, которые использует компонент
@example-font-size: .8rem;
@example-line-height: 1.5;
@example-padding: @spacer3 @spacer4;
@example-color: @color-white;
@example-background: @color-body;
// [2] хук, вызываемый в стиле компонента; позволяет переопределить стиль компонента
.hook-example() {}
// [3] стиль
.example {
position: relative;
display: inline-block;
vertical-align: middle;
padding: @example-padding; // <-- использование параметров [1]
color: @example-color;
font-size: @example-font-size;
line-height: @example-line-height;
background: @example-background;
.hook-example(); // <-- вставка хука [2]
}
_all.less
в свой
.less
файл, далее можно уже переопределить любой параметр фреймворка в тч элементов
или компонентов; или переопределить стили используя хуки.my-theme.less
// импорт фреймворка
@import './<путь>/_all.less';
// переопределяем базовые параметры, используемые всеми частями фреймворка из ~ params.less
@font-family: Helvetica, Arial, sans-serif;
@font-family-headings: Helvetica, Arial, sans-serif;
@font-size: 16px;
// переопределяем параметры конкретного компонента ~ components/toast.less
@toast-font-size: 1rem;
// используем хук компонента ~ toast.less
.hook-toast() {
display: inline-flex; // <-- переопределяет "display", который изначально в компоненте "inline-block"
}
padding
и margin
@spacer
и @spacer-layout
.
Отступы расчитываются от базового значения 16px
название | значение | итог |
---|---|---|
@spacer1 |
0.125 |
2px |
@spacer2 |
0.25 |
4px |
@spacer3 |
0.5 |
8px |
@spacer4 |
0.75 |
12px |
@spacer5 |
1 |
16px |
@spacer6 |
1.5 |
24px |
@spacer7 |
2 |
32px |
@spacer8 |
2 |
40px |
@spacer9 |
2 |
48px |
@layout-spacer1 |
1 |
16px |
@layout-spacer2 |
1.5 |
24px |
@layout-spacer3 |
2 |
32px |
@layout-spacer4 |
3 |
48px |
@layout-spacer5 |
4 |
64px |
@layout-spacer6 |
6 |
96px |
@layout-spacer7 |
10 |
160px |
{viewport}
.
.{viewport}-{classname}
// например
.s-text-small
// где
// {viewport} — s
// {classname} — text-small
{viewport}
в кастомных компонентах или классах
используйте less хелпер .media
@import './<путь>/_helpers.less'
// пример использования .media хелпера
.my-class {
font-size: 1rem;
}
.media(@viewport-s, .my-class {
font-size: .9rem;
})
{viewport}
; ниже показан их список.less переменная | название {viewport} |
ширина экрана | приоритет |
---|---|---|---|
— | — | ∞ | самый низкий |
@viewport-xl |
xl | 0 - 1280px | отменяет default |
@viewport-l |
l | 0 - 1024px | отменяет xl default |
@viewport-m |
m | 0 - 840px | отменяет l xl default |
@viewport-s |
s | 0 - 640px | отменяет m l xl default |
:root
)
css переменная | значение |
---|---|
--viewport-xl | 1280px |
--viewport-l | 1024px |
--viewport-m | 840px |
--viewport-s | 640px |
--ratio-scaling-enabled | false |
--ratio-scaling-viewport-min-width | 1600px |
--container-max-width | 1100px |
--font-family | 'PTRootUIWebRegular',Helvetica,Arial,sans-serif |
--font-family-headings | 'PTRootUIWebRegular',Helvetica,Arial,sans-serif |
--font-size-base | 16px |
--font-size-h1 | 3rem ~ 48px |
--h1-line-height | 3.75rem ~ 60px |
--h1-margin-bottom | 2rem ~ 32px |
--font-size-h2 | 2rem ~ 32px |
--h2-line-height | 2.5rem ~ 40px |
--h2-margin-bottom | 1.5rem ~ 24px |
--font-size-h3 | 1.5rem ~ 24px |
--h3-line-height | 1.875rem ~ 30px |
--h3-margin-bottom | 1rem ~ 16px |
--font-size-h4 | 1.125rem ~ 18px |
--h4-line-height | 1.4375rem ~ 23px |
--h4-margin-bottom | .5rem ~ 8px |
--font-size-xsmaller | .75rem ~ 12px |
--font-size-smaller | .875rem ~ 14px |
--font-size-larger | 1.125rem ~ 18px |
--line-height | 1.5 |
--color-body | #2c2c2c |
--color-link | #1a67fe |
--color-link-dark | #013cb1 |
--color-link-light | #80aafe |
--color-link-focus | rgba(26,103,254,0.3) |
--color-link-hover | #0156fd |
--color-primary | #1a67fe |
--color-primary-dark | #013cb1 |
--color-primary-light | #80aafe |
--color-primary-focus | rgba(26,103,254,0.3) |
--color-primary-hover | #0156fd |
--color-red | #ed5564 |
--color-red-dark | #c71527 |
--color-red-light | #f7b1b8 |
--color-red-focus | rgba(237,85,100,0.3) |
--color-red-hover | #eb3e4f |
--color-green | #0acf83 |
--color-green-dark | #056e45 |
--color-green-light | #49f6b3 |
--color-green-focus | rgba(10,207,131,0.3) |
--color-green-hover | #09b774 |
--color-blue | #5e9dec |
--color-blue-dark | #1868cc |
--color-blue-light | #b9d5f7 |
--color-blue-focus | rgba(94,157,236,0.3) |
--color-blue-hover | #478fe9 |
--color-yellow | #f7c844 |
--color-yellow-dark | #cc9909 |
--color-yellow-light | #fbe5a6 |
--color-yellow-focus | rgba(247,200,68,0.3) |
--color-yellow-hover | #f6c12c |
--color-orange | #ff994d |
--color-orange-dark | #e66200 |
--color-orange-light | #ffd3b3 |
--color-orange-focus | rgba(255,153,77,0.3) |
--color-orange-hover | #ff8a33 |
--color-grey | #999 |
--color-grey-dark | #666 |
--color-grey-light | #dcdcdc |
--color-grey-lighter | #f6f6f6 |
--color-white | #fff |
--color-black | #000 |
--color-muted | #dcdcdc |
--color-disabled | #eee |
--color-disabled-dark | #c8c8c8 |
--color-border | #eee |
--color-highlight | #ffd |
--color-focus | rgba(26,103,254,0.3) |
--color-scrollbar | #ccc |
--border-radius | .25rem ~ 4px |
--border-radius1 | .25rem ~ 4px |
--border-radius2 | .5rem ~ 8px |
--border-radius3 | 1rem ~ 16px |
--border-radius4 | 2rem ~ 32px |
--border-radius5 | 4rem ~ 64px |
--unit | .5rem ~ 8px |
--spacer | 1rem ~ 16px |
--spacer1 | .125rem ~ 2px |
--spacer2 | .25rem ~ 4px |
--spacer3 | .5rem ~ 8px |
--spacer4 | .75rem ~ 12px |
--spacer5 | 1rem ~ 16px |
--spacer6 | 1.5rem ~ 24px |
--spacer7 | 2rem ~ 32px |
--spacer8 | 2.5rem ~ 40px |
--spacer9 | 3rem ~ 48px |
--spacer-layout1 | 1rem ~ 16px |
--spacer-layout2 | 1.5rem ~ 24px |
--spacer-layout3 | 2rem ~ 32px |
--spacer-layout4 | 3rem ~ 48px |
--spacer-layout5 | 4rem ~ 64px |
--spacer-layout6 | 6rem ~ 96px |
--spacer-layout7 | 10rem ~ 160px |
--width-fixed | 8rem ~ 128px |
--width-fixed1 | 8rem ~ 128px |
--width-fixed2 | 16rem ~ 256px |
--width-fixed3 | 24rem ~ 384px |
--width-fixed4 | 32rem ~ 512px |
--width-fixed5 | 40rem ~ 640px |
--width-fixed6 | 48rem ~ 768px |
--width-fixed7 | 56rem ~ 896px |
переменная | значение |
---|---|
@viewport-xl | 1280px |
@viewport-l | 1024px |
@viewport-m | 840px |
@viewport-s | 640px |
@ratio-scaling-enabled | false |
@ratio-scaling-viewport-min-width | 1600px |
@container-max-width | 1100px |
@font-family | 'PTRootUIWebRegular', Helvetica, Arial, sans-serif |
@font-family-headings | 'PTRootUIWebRegular', Helvetica, Arial, sans-serif |
@font-size-base | 16px |
@font-size | 1rem ~ 16px |
@line-height | 1.5 |
@font-size-h1 | 3rem ~ 48px |
@h1-line-height | 3.75rem ~ 60px |
@h1-margin-bottom | @spacer7 |
@font-size-h2 | 2rem ~ 32px |
@h2-line-height | 2.5rem ~ 40px |
@h2-margin-bottom | @spacer6 |
@font-size-h3 | 1.5rem ~ 24px |
@h3-line-height | 1.875rem ~ 30px |
@h3-margin-bottom | @spacer5 |
@font-size-h4 | 1.125rem ~ 18px |
@h4-line-height | 1.4375rem ~ 23px |
@h4-margin-bottom | @spacer3 |
@font-size-xsmaller | 0.75rem ~ 12px |
@font-size-smaller | 0.875rem ~ 14px |
@font-size-larger | 1.125rem ~ 18px |
@color-body | #2c2c2c |
@color-link | #1a67fe |
@color-link-light | .color-light(@color-link)[@return] |
@color-link-dark | .color-dark(@color-link)[@return] |
@color-link-focus | .color-focus(@color-link)[@return] |
@color-link-hover | .color-hover(@color-link)[@return] |
@color-primary | #1a67fe |
@color-primary-light | .color-light(@color-primary)[@return] |
@color-primary-dark | .color-dark(@color-primary)[@return] |
@color-primary-focus | .color-focus(@color-primary)[@return] |
@color-primary-hover | .color-hover(@color-primary)[@return] |
@color-red | #ed5564 |
@color-red-light | .color-light(@color-red)[@return] |
@color-red-dark | .color-dark(@color-red)[@return] |
@color-red-focus | .color-focus(@color-red)[@return] |
@color-red-hover | .color-hover(@color-red)[@return] |
@color-green | #0acf83 |
@color-green-light | .color-light(@color-green)[@return] |
@color-green-dark | .color-dark(@color-green)[@return] |
@color-green-focus | .color-focus(@color-green)[@return] |
@color-green-hover | .color-hover(@color-green)[@return] |
@color-blue | #5e9dec |
@color-blue-light | .color-light(@color-blue)[@return] |
@color-blue-dark | .color-dark(@color-blue)[@return] |
@color-blue-focus | .color-focus(@color-blue)[@return] |
@color-blue-hover | .color-hover(@color-blue)[@return] |
@color-yellow | #f7c844 |
@color-yellow-light | .color-light(@color-yellow)[@return] |
@color-yellow-dark | .color-dark(@color-yellow)[@return] |
@color-yellow-focus | .color-focus(@color-yellow)[@return] |
@color-yellow-hover | .color-hover(@color-yellow)[@return] |
@color-orange | #ff994d |
@color-orange-light | .color-light(@color-orange)[@return] |
@color-orange-dark | .color-dark(@color-orange)[@return] |
@color-orange-focus | .color-focus(@color-orange)[@return] |
@color-orange-hover | .color-hover(@color-orange)[@return] |
@color-grey | #999 |
@color-grey-dark | #666 |
@color-grey-light | #dcdcdc |
@color-grey-lighter | #f6f6f6 |
@color-white | #fff |
@color-black | #000 |
@color-muted | @color-grey-light |
@color-disabled | #eee |
@color-disabled-dark | darken(@color-disabled, 15%) |
@color-border | #eee |
@color-highlight | #ffd |
@color-focus | @color-primary-focus |
@color-scrollbar | #ccc |
@border-radius | unit((4px / @font-size-base), rem) |
@border-radius1 | @border-radius |
@border-radius2 | @border-radius*2 |
@border-radius3 | @border-radius*4 |
@border-radius4 | @border-radius*8 |
@border-radius5 | @border-radius*16 |
@unit | unit((8px / @font-size-base), rem) |
@spacer | @unit*2 |
@spacer1 | @spacer*0.125 |
@spacer2 | @spacer*0.25 |
@spacer3 | @spacer*0.5 |
@spacer4 | @spacer*0.75 |
@spacer5 | @spacer |
@spacer6 | @spacer*1.5 |
@spacer7 | @spacer*2 |
@spacer8 | @spacer*2.5 |
@spacer9 | @spacer*3 |
@spacer-layout1 | @spacer |
@spacer-layout2 | @spacer*1.5 |
@spacer-layout3 | @spacer*2 |
@spacer-layout4 | @spacer*3 |
@spacer-layout5 | @spacer*4 |
@spacer-layout6 | @spacer*6 |
@spacer-layout7 | @spacer*10 |
@width-fixed | (@unit*16) |
@width-fixed1 | @width-fixed*1 |
@width-fixed2 | @width-fixed*2 |
@width-fixed3 | @width-fixed*3 |
@width-fixed4 | @width-fixed*4 |
@width-fixed5 | @width-fixed*5 |
@width-fixed6 | @width-fixed*6 |
@width-fixed7 | @width-fixed*7 |
переменная | значение |
---|---|
@alert-border-radius | @border-radius |
@alert-close-right | @spacer3 |
@alert-close-top | @spacer3 |
@alert-body-padding | @spacer-layout1 @spacer-layout1 |
@alert-success-color | @color-green-dark |
@alert-success-background | @color-green-light |
@alert-error-color | @color-red-dark |
@alert-error-background | @color-red-light |
@alert-warn-color | @color-yellow-dark |
@alert-warn-background | @color-yellow-light |
переменная | значение |
---|---|
@badge-margin | 1px 0 |
@badge-padding | @spacer2 @spacer3 |
@badge-font-size | 1rem ~ 16px |
@badge-border-radius | @border-radius |
@badge-background | @color-grey-light |
@badge-primary-color | @color-white |
@badge-primary-background | @color-primary |
@badge-success-color | @color-white |
@badge-success-background | @color-green |
@badge-warn-color | @color-white |
@badge-warn-background | @color-yellow |
@badge-error-color | @color-white |
@badge-error-background | @color-red |
@badge-misc-color | @color-white |
@badge-misc-background | @color-orange |
переменная | значение |
---|---|
@breadcrumbs-spacer | @spacer3 |
@breadcrumbs-spacer-text | "/" |
@breadcrumbs-spacer-color | @color-grey-light |
@breadcrumbs-item-link-color | @color-grey-dark |
@breadcrumbs-item-link-hover-color | @color-link |
переменная | значение |
---|---|
@btn-border-radius | @border-radius |
@btn-color | @color-body |
@btn-height | @unit*5 |
@btn-padding | 0 @spacer5 |
@btn-font-size | @font-size |
@btn-line-height | @line-height |
@btn-disabled-color | @color-grey |
@btn-disabled-background | @color-disabled |
@btn-small-height | @unit*4 |
@btn-small-padding | 0 @spacer4 |
@btn-small-font-size | @font-size-smaller |
@btn-large-height | @unit*7 |
@btn-large-padding | 0 @spacer7 |
@btn-large-font-size | @font-size-larger |
@btn-primary-color | @color-white |
@btn-primary-background | @color-primary |
@btn-primary-focus | @color-primary-focus |
@btn-primary-hover-background | @color-primary-hover |
@btn-success-color | @color-white |
@btn-success-background | @color-green |
@btn-success-focus | @color-green-focus |
@btn-success-hover-background | @color-green-hover |
@btn-error-color | @color-white |
@btn-error-background | @color-red |
@btn-error-focus | @color-red-focus |
@btn-error-hover-background | @color-red-hover |
@btn-warn-color | @color-white |
@btn-warn-background | @color-yellow |
@btn-warn-focus | @color-yellow-focus |
@btn-warn-hover-background | @color-yellow-hover |
@btn-misc-color | @color-white |
@btn-misc-background | @color-orange |
@btn-misc-focus | @color-orange-focus |
@btn-misc-hover-background | @color-orange-hover |
@btn-outline-color | @color-primary |
@btn-outline-background | transparent |
@btn-outline-focus | @color-primary-focus |
@btn-outline-border-color | @color-primary |
@btn-outline-hover-color | @color-primary-hover |
@btn-outline-hover-border-color | @color-primary-hover |
@btn-ghost-color | @color-primary |
@btn-ghost-focus | @color-primary-focus |
@btn-ghost-background | transparent |
@btn-ghost-hover-color | @color-primary-hover |
@btn-loading-preloader-border-width | unit((2px / @font-size-base), rem) |
переменная | значение |
---|---|
@divider-color | @color-grey-light |
@divider-border | 1px solid @color-border |
переменная | значение |
---|---|
@dropdown-z | 10 |
@dropdown-min-width | @unit*12 |
@dropdown-background | @color-white |
@dropdown-border-radius | @border-radius1 |
@dropdown-list-max-height | (@spacer3*2 + @font-size* @line-height) * 5 |
@dropdown-list-item-padding | @spacer3 @spacer4 |
@dropdown-list-item-color | @color-grey-dark |
@dropdown-list-item-hr-margin | 0 |
@dropdown-list-item-active-color | @color-white |
@dropdown-list-item-active-background | @color-primary |
@dropdown-list-item-hover-color | @color-link |
@dropdown-list-item-hover-background | @color-grey-lighter |
@dropdown-list-item-disabled-color | @color-disabled-dark |
@dropdown-content-padding | @spacer-layout1 |
@dropdown-small-font-size | @font-size-smaller |
@dropdown-small-list-item-padding | @spacer2 @spacer4 |
@dropdown-small-list-max-height | (@spacer2*2 + @dropdown-small-font-size* @line-height) * 5 |
переменная | значение |
---|---|
@form-elem-border-radius | @border-radius |
@form-elem-height | @unit*5 |
@form-elem-line-height | @line-height |
@form-elem-padding | @spacer2 @spacer3 |
@form-elem-background | @color-white |
@form-elem-placeholder-color | @color-grey |
@form-elem-color | @color-body |
@form-elem-font-size | @font-size |
@form-elem-border-size | 1px |
@form-elem-border-color | @color-grey-light |
@form-elem-disabled-color | @color-disabled-dark |
@form-elem-disabled-background | @color-disabled |
@form-elem-disabled-secondary-background | @color-disabled-dark |
@form-elem-focus-border-color | @color-grey |
@form-elem-invalid-color | @color-red |
@form-elem-invalid-border-color | @color-red |
@form-elem-invalid-placeholder-color | @color-red |
@form-elem-invalid-focus-border-color | @color-red-dark |
@form-elem-invalid-focus | @color-red-focus |
@form-elem-valid-color | @color-green |
@form-elem-valid-border-color | @color-green |
@form-elem-valid-placeholder-color | @color-green |
@form-elem-valid-focus-border-color | @color-green-dark |
@form-elem-valid-focus | @color-green-focus |
@form-elem-small-height | @unit*4 |
@form-elem-small-font-size | @font-size-smaller |
@form-elem-large-height | @unit*7 |
@form-elem-large-font-size | @font-size-larger |
@form-control-icon-width | @unit*5 |
@form-label-font-size | @font-size |
@form-label-color | @color-grey-dark |
@form-label-margin | 0 |
@form-label-xsmall-font-size | @font-size-xsmaller |
@form-label-small-font-size | @font-size-smaller |
@form-label-large-font-size | @font-size-larger |
@form-label-sticky-margin | 0 @spacer3 |
@form-label-sticky-padding | 0 0 |
@form-label-sticky-background | @color-white |
@form-label-float-margin | 0 @spacer3 |
@form-label-float-padding | 0 0 |
@form-label-float-background | @color-white |
@select-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-placeholder-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>' |
@select-valid-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-valid-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>' |
@select-invalid-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-invalid-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>' |
@select-disabled-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-disabled-secondary-background}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>' |
@checkbox-size | @unit*2.5 |
@checkbox-small-size | @unit*2 |
@checkbox-checked-background | @color-primary |
@checkbox-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 34 34"><path fill="@{color-white}" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" /></svg>' |
@checkbox-indeterminate-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{color-white}" d="M19,13H5V11H19V13Z" /></svg>' |
@radio-size | @unit*2.5 |
@radio-small-size | @unit*2 |
@radio-checked-background | @color-primary |
@radio-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="@{color-white}" d="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z" /></svg>' |
@switch-width | @unit*5 |
@switch-height | @unit*2.5 |
@switch-small-width | @unit*4 |
@switch-small-height | @unit*2 |
@switch-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-placeholder-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>' |
@switch-valid-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-valid-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>' |
@switch-invalid-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-invalid-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>' |
@switch-checked-icon | '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{color-white}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>' |
переменная | значение |
---|---|
@header-z | 1 |
@header-min-height | @unit*9 |
@header-background | @color-white |
@header-padding | @spacer-layout1 @spacer-layout1 |
переменная | значение |
---|---|
@menu-z | 10 |
@menu-min-width | @unit*15 |
@menu-padding | @spacer2 0 |
@menu-background | @color-white |
@menu-border-radius | @border-radius1 |
@menu-sub-margin | -@spacer2 0 0 0 |
@menu-item-hr-margin | @spacer1 @spacer4 |
@menu-item-link-padding | @spacer3 @spacer4 |
@menu-item-link-color | @color-grey-dark |
@menu-item-link-hover-color | @color-link |
@menu-item-icon-gap | @spacer3 |
@menu-item-active-link-color | @color-link |
@menu-item-disabled-link-color | @color-disabled-dark |
@menu-small-padding | @spacer2 0 |
@menu-small-item-hr-margin | @spacer1 @spacer4 |
@menu-small-item-link-font-size | @font-size-smaller |
@menu-small-item-link-padding | @spacer2 @spacer4 |
переменная | значение |
---|---|
@nav-item-link-padding | @spacer2 0 |
@nav-item-link-color | @color-grey-dark |
@nav-item-link-hover-color | @color-link |
@nav-item-active-link-color | @color-link |
@nav-item-active-link-hover-color | darken(@color-link, 10%) |
@nav-horizontal-item-link-padding | @spacer2 0 |
@nav-horizontal-item-link-margin | 0 @spacer5 0 0 |
переменная | значение |
---|---|
@offcanvas-z | 1000 |
@offcanvas-content-width | @width-fixed2 |
@offcanvas-content-background | @color-white |
@offcanvas-overlay-background | rgba(0, 0, 0, .5) |
переменная | значение |
---|---|
@pagination-spacer | 0 |
@pagination-item-link-color | @color-grey-dark |
@pagination-item-link-hover-color | @color-link |
@pagination-item-link-padding | @spacer1 @spacer3 |
@pagination-item-text-color | @color-grey-dark |
@pagination-item-text-padding | @spacer1 @spacer3 |
@pagination-item-active-link-color | @color-link |
@pagination-item-active-link-hover-color | darken(@color-link, 10%) |
@pagination-item-disabled-link-color | @color-disabled-dark |
переменная | значение |
---|---|
@panel-background | @color-white |
@panel-header-padding | @spacer-layout2 |
@panel-body-padding | @spacer-layout2 |
@panel-footer-padding | @spacer-layout2 |
переменная | значение |
---|---|
@popup-z | 1000 |
@popup-background | rgba(0, 0, 0, .5) |
@popup-dialog-background | @color-white |
@popup-dialog-close-right | @spacer3 |
@popup-dialog-close-top | @spacer3 |
@popup-dialog-header-padding | @spacer-layout2 |
@popup-dialog-body-padding | @spacer-layout2 |
@popup-dialog-footer-padding | @spacer-layout2 |
переменная | значение |
---|---|
@preloader-size | 1rem ~ 16px |
@preloader-border-width | unit((2px/@font-size-base), rem) |
@preloader-color | @color-grey-dark |
переменная | значение |
---|---|
@shim-z | 1 |
@shim-overlay-opacity | .75 |
@shim-overlay-background | @color-white |
переменная | значение |
---|---|
@sidebar-width | @width-fixed2 |
@sidebar-background | @color-white |
@sidebar-small-width | @unit*7 |
переменная | значение |
---|---|
@skeleton-border-radius | @border-radius |
@skeleton-background-color | @color-muted |
@skeleton-height | @line-height*@font-size |
@skeleton-small-height | @line-height*@font-size*.5 |
@skeleton-large-height | @line-height*@font-size*2 |
переменная | значение |
---|---|
@table-cell-padding | @spacer3 @spacer3 |
@table-cell-responsive-padding | @spacer1 @spacer3 |
@table-row-responsive-padding | @spacer3 |
@table-borders-row-border | 1px solid @color-border |
@table-zebra-row-odd-background | @color-grey-lighter |
@table-hover-row-hover-background | @color-highlight |
переменная | значение |
---|---|
@tabs-spacer | 0 |
@tabs-item-border | 2px solid transparent |
@tabs-item-active-border | 2px solid @color-link |
@tabs-item-active-link-color | @color-link |
@tabs-item-active-link-hover-color | darken(@tabs-item-active-link-color, 10%) |
@tabs-item-link-padding | @spacer3 @spacer-layout2 |
@tabs-item-link-color | @color-grey-dark |
@tabs-item-link-hover-color | @color-link |
@tabs-container-padding | @spacer-layout2 0 |
переменная | значение |
---|---|
@tile-background | @color-white |
@tile-body-padding | @spacer-layout2 |
переменная | значение |
---|---|
@toast-z | 10 |
@toast-font-size | @font-size-smaller |
@toast-line-height | @line-height |
@toast-padding | @spacer3 @spacer4 |
@toast-color | @color-white |
@toast-background | @color-body |
@toast-border-radius | @border-radius |
переменная | значение |
---|---|
@tooltip-z | 10 |
@tooltip-font-size | @font-size-smaller |
@tooltip-line-height | @line-height |
@tooltip-padding | @spacer3 @spacer4 |
@tooltip-color | @color-white |
@tooltip-background-color | @color-body |
@tooltip-border-radius | @border-radius |
@tooltip-triangle-size | unit((5px/@font-size-base), rem) |
// ваш <enty-point>.js
import 'goodt-framework-css/fonts/regular/pt-root-ui-regular.css';
import 'goodt-framework-css/fonts/bold/pt-root-ui-bold.css';
код | результат |
---|---|
<h1> .h1 |
h1 |
<h2> .h2 |
h2 |
<h3> .h3 |
h3 |
<h4> .h4 |
h4 |
.text-large .text-lead |
text-large
|
.text-small |
text-small
|
.text-xsmall |
text-xsmall
|
<p> .p |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, vel. |
<blockquote> |
Lorem ipsum dolor sit amet consectetur. |
<pre> .pre |
Lorem ipsum dolor sit amet consectetur. |
<s> <del> .del |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus,
vel.
|
<sup> .sup |
Lorem ipsum |
<sub> .sub |
Lorem ipsum |
<mark> .mark |
Lorem ipsum |
<code> .code |
Lorem ipsum |
|
|
|
|
|
|
<ul>
<li>list item</li>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
</ul>
</li>
</ul>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item
<ol>
<li>list item</li>
</ol>
</li>
</ol>
.unstyled
для элементов <ul>
<table>
, что позволяет использовать
таблицы с стандартными стилями, наряду с фреймворком..table
Класс | Описание |
---|---|
.w-{size} |
может применятся для элементов <th> <td> ,
задает ширину столбца; подробнее см. Width
утилиты |
.table-w-auto |
может применятся для элементов <th> <td> ,
задает минимальную ширину колонки, подстраиваясь под ширину ее контента; схоже с
тем, как работает утилита .w-auto на других элементах |
top
..table-vtop
.table-vmid
.table-vbot
.table-vbase
Heading | Heading | Heading |
---|---|---|
Column Column Column |
Column Column |
Column |
Heading | Heading | Heading |
---|---|---|
Column Column Column |
Column Column |
Column |
Heading | Heading | Heading |
---|---|---|
Column Column Column |
Column Column |
Column |
Heading | Heading | Heading |
---|---|---|
Column Column Column |
Column Column |
Column |
<table class="table table-vtop">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vmid">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vbot">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vbase">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
.table-borders
Heading | Heading | Heading |
---|---|---|
Column | Column | Column |
Column | Column | Column |
Column | Column | Column |
<table class="table table-borders">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
.table-zebra
Heading | Heading | Heading |
---|---|---|
Column | Column | Column |
Column | Column | Column |
Column | Column | Column |
<table class="table table-zebra">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
.table-hover
Heading | Heading | Heading |
---|---|---|
Column | Column | Column |
Column | Column | Column |
Column | Column | Column |
<table class="table table-hover">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
.table-responsive
Heading | Heading | Heading |
---|---|---|
Column | Column | Column |
Column | Column | Column |
Column | Column | Column |
<table class="table table-responsive">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
.row
. По умолчанию, строки задают отступы для колонок
по вертикали и горизонтали..row-collapse
.col
. Колонки должны быть непосредственными дочерними
элементами строки .row
..col-vtop
.col-vmid
.col-vbot
<div class="row h-100" style="height:100px">
<div class="col">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vtop">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vmid">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vbot">
<div class="bg-green pad-3 h-100"></div>
</div>
</div>
.col-auto
задает колонку, которая старается занять как можно
меньше места по ширине, подстраиваясь под ее контент (режим shrink)<div class="row color-white text-small text-center">
<div class="col col-auto">
<div class="bg-green pad-3">col-auto</div>
</div>
<div class="col">
<div class="bg-green pad-3">col</div>
</div>
<div class="col col-auto">
<div class="bg-green pad-3">col-auto</div>
</div>
</div>
.col-{size}
, где
{size}
зависит от выбранной системы (см. таблицу ниже).Система | Описание | {size} |
---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
<div class="row color-white text-small text-center">
<div class="col col-15">
<div class="bg-green pad-3">col-15</div>
</div>
<div class="col col-25">
<div class="bg-green pad-3">col-25</div>
</div>
<div class="col col-60">
<div class="bg-green pad-3">col-60</div>
</div>
</div>
<div class="row color-white text-small text-center">
<div class="col col-2-12">
<div class="bg-green pad-3">col-2-12</div>
</div>
<div class="col col-4-12">
<div class="bg-green pad-3">col-4-12</div>
</div>
<div class="col col-6-12">
<div class="bg-green pad-3">col-6-12</div>
</div>
</div>
<div class="row color-white text-small text-center">
<div class="col col-5-24">
<div class="bg-green pad-3">col-5-24</div>
</div>
<div class="col col-7-24">
<div class="bg-green pad-3">col-7-24</div>
</div>
<div class="col col-12-24">
<div class="bg-green pad-3">col-12-24</div>
</div>
</div>
.{viewport}-col-{size}
.{viewport} |
название viewport |
{size} |
размер колонки, в зависимости от выбранной вами системы |
.row-gap-{1-9}
или .row-gap-l{1-7}
(см. таблицу ниже).Класс | Описание |
---|---|
.row-gap-{1-9} |
применяет горизонтальный и вертикальный gap размером @spacer{1-9} |
.row-gap-l{1-7} |
применяет горизонтальный и вертикальный gap размером @spacer-layout{1-7} |
<div class="row row-gap-l1">
<div class="col">
<div class="bg-green pad-3"></div>
</div>
<div class="col">
<div class="bg-green pad-3"></div>
</div>
<div class="col col-12-12">
<div class="bg-green pad-3"></div>
</div>
</div>
.row-hgap-{1-9}
или .row-hgap-l{1-7}
(см. таблицу ниже).Класс | Описание |
---|---|
.row-hgap-{1-9} |
применяет gap размером @spacer{1-9} |
.row-hgap-l{1-7} |
применяет gap размером @spacer-layout{1-7} |
<div class="p">
<div class="row row-hgap-3">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-hgap-6">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-hgap-l4">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>
.row-vgap-{1-9}
или .row-vgap-l{1-7}
(см. таблицу ниже).Класс | Описание |
---|---|
.row-vgap-{1-9} |
применяет gap размером @spacer{1-9} |
.row-vgap-l{1-7} |
применяет gap размером @spacer-layout{1-7} |
<div class="p">
<div class="row row-vgap-3">
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-vgap-6">
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
</div>
</div>
<div class="row row-hgap-l2 row-vgap-l2">...</div>
.push-{size}
, где
{size}
зависит от выбранной системы (см. таблицу ниже).Система | Описание | {size} |
---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
<div class="row color-white text-small text-center">
<div class="col col-25 push-5">
<div class="bg-green pad-3">push-5</div>
</div>
</div>
<div class="row color-white text-small text-center">
<div class="col col-4-12 push-5-12">
<div class="bg-green pad-3">push-5-12</div>
</div>
</div>
<div class="row color-white text-small text-center">
<div class="col col-5-24 push-14-24">
<div class="bg-green pad-3">push-14-24</div>
</div>
</div>
.{viewport}-push-{size}
.{viewport} |
название viewport |
{size} |
размер отступа, в зависимости от выбранной вами системы |
<div class="row">
<div class="col col-25">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col">
<div class="bg-green pad-3 h-100">
<div class="row">
<div class="col">
<div class="bg-white pad-3"></div>
</div>
<div class="col">
<div class="bg-white pad-3"></div>
</div>
</div>
</div>
</div>
</div>
components/alert.less
.alert-success
.alert-warn
.alert-error
<div class="alert alert-success mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div>
<div class="alert alert-warn mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div>
<div class="alert alert-error mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div>
.avatar-{2-7}
.round
(см. Misc утилиты)<div class="avatar mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-2 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-3 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-4 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-5 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-6 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 round mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 round shadow-2 mar-2">AR</div>
.badge-primary
.badge-success
.badge-warn
.badge-error
.badge-misc
<div>
<span class="badge mar-2">badge</span>
<span class="badge badge-primary mar-2">badge</span>
<span class="badge badge-success mar-2">badge</span>
<span class="badge badge-warn mar-2">badge</span>
<span class="badge badge-error mar-2">badge</span>
<span class="badge badge-misc mar-2">badge</span>
</div>
.round
(см. Misc утилиты).btn-primary
.btn-success
.btn-warn
.btn-error
.btn-misc
.btn-outline
.btn-ghost
.btn-inline
<button class="btn btn-primary mar-2">.btn-primary</button>
<button class="btn btn-success mar-2">.btn-success</button>
<button class="btn btn-warn mar-2">.btn-warn</button>
<button class="btn btn-error mar-2">.btn-error</button>
<button class="btn btn-misc mar-2">.btn-misc</button>
<button class="btn btn-outline mar-2">.btn-outline</button>
<button class="btn btn-ghost mar-2">.btn-ghost</button>
<button class="btn btn-inline mar-2">.btn-inline</button>
.btn
имеет спец. классы .hover
.active
.focus
.disabled
, повторяющие состояния
:hover
:active
:focus
:disabled
.<button class="btn btn-primary mar-2">normal</button>
<button class="btn btn-primary hover mar-2">hover</button>
<button class="btn btn-primary active mar-2">active</button>
<button class="btn btn-primary focus mar-2">focus</button>
<button class="btn btn-primary disabled mar-2">disabled</button>
.btn
отличные элементы от
<button>
, не забудьте, что для работы :focus
состояния,
необходимо указывать атрибут tabindex="0"
.<div class="p">Используем элемент <code><a></code> для кнопки</div>
<a class="btn btn-primary mar-2">button no focus :(</a>
<a class="btn btn-primary mar-2" tabindex="0">button with focus</a>
.btn-small
и
.btn-large
.btn-wrap
<button class="btn btn-primary btn-wrap btn-small mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>
<button class="btn btn-primary btn-wrap mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>
<button class="btn btn-primary btn-wrap btn-large mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>
.icon
.btn-icon
(его можно использовать с любым стилем) и утилиту .icon
для иконок.<button class="btn btn-primary btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-success btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-warn btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-error btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-misc btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-outline btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-ghost btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
.round
(см. Misc утилиты).btn-loading
(его можно
использовать с любым стилем).<button class="btn btn-primary btn-loading mar-2">button</button>
<button class="btn btn-success btn-loading mar-2">button</button>
<button class="btn btn-warn btn-loading mar-2">button</button>
<button class="btn btn-error btn-loading mar-2">button</button>
<button class="btn btn-misc btn-loading mar-2">button</button>
<button class="btn btn-outline btn-loading mar-2">button</button>
<button class="btn btn-ghost btn-loading mar-2">button</button>
.divider-vertical
<div class="row">
<div class="col">
<div class="pad-l3 text-right"><button class="btn btn-primary">do this</button>
</div>
</div>
<div class="col col-auto">
<div class="divider divider-vertical">OR</div>
</div>
<div class="col">
<div class="pad-l3"><button class="btn btn-primary">do that</button></div>
</div>
</div>
components/dropdown.less
.dropdown-small
dropdown
имеет ограничение в 5 элементов в списке, после которого
появится прокрутка.dropdown
позволяет интегрировать кастомные dom-элементы<div class="dropdown">
<div class="my-custom-element">
<div class="bg-green color-white pad-3 text-center text-small">Custom element
</div>
</div>
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
<div class="my-custom-element">
<div class="bg-green color-white pad-3 text-center text-small">Custom element
</div>
</div>
</div>
dropdown
возможно использовать в качестве контейнера для других
компонентов/интерфейсов используя .dropdown-content
components/header.less
<div class="header">
<div class="container">
<div class="row row-collapse">
<div class="col col-vmid">
<nav class="nav nav-horizontal d-block">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
</div>
<div class="col col-auto col-vmid">
<div class="row row-collapse">
<div class="col col-auto">
<div class="avatar round mar-right-3"><img src="i/image.jpg">
</div>
</div>
<div class="col">
<span class="link">username</span>
</div>
</div>
</div>
</div>
</div>
</div>
components/menu.less
.menu-small
.icon
и
.mdi
<div class="menu">
<ul>
<li class="active">
<a href="#">
<span>Active</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
<li class="disabled">
<a href="#">
<span>Disabled</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
<li>
<hr>
</li>
<li>
<a href="#">
<span>Item</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<a href="#">Submenu</a>
<div class="menu">
<ul>
<li><a href="">Item</a></li>
<li>
<a href="">Submenu</a>
<div class="menu">
<ul>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
<li>
<hr>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
.menu-left
components/nav.less
components/offcanvas.less
<div id="demo-offcanvas1" class="offcanvas pos-abs">
<div class="offcanvas-overlay" data-close="1"></div>
<div class="offcanvas-content">
<div class="pad-l3">Offcanvas content</div>
</div>
</div>
<div class="d-flex flex-h-center flex-v-center h-100">
<span class="link" data-offcanvas="#demo-offcanvas1">Открыть offcanvas</span>
</div>
.active
для открытия offcanvas
.offcanvas-right
<div id="demo-offcanvas2" class="offcanvas offcanvas-right pos-abs">
<div class="offcanvas-overlay" data-close="1"></div>
<div class="offcanvas-content">
<div class="pad-l3">Offcanvas content</div>
</div>
</div>
<div class="d-flex flex-h-center flex-v-center h-100">
<span class="link" data-offcanvas="#demo-offcanvas2">Открыть offcanvas</span>
</div>
components/panel.less
<div class="panel w-6-12">
<div class="panel-body">
<h3>Title</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
</div>
<div class="panel-footer">
<span class="btn btn-ghost" tabindex="0">Button</span>
</div>
</div>
components/popup.less
<div class="popup">
<div class="popup-dialog w-6-12">
<div class="close">
<i class="mdi mdi-close mdi-24px"></i>
</div>
<div class="popup-dialog-body">
<h3>Title</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
</div>
<div class="popup-dialog-footer">
<span class="btn btn-ghost" tabindex="0">Button</span>
</div>
</div>
</div>
popup
на всю ширину/высоту окна, используйте
класс .popup-fixed
.color-{value}
утилит
.pad-{size}
.pad-l{size}
утилит<div class="preloader pad-1"></div>
<div class="preloader pad-2"></div>
<div class="preloader pad-3"></div>
<div class="preloader pad-4"></div>
<div class="preloader pad-5"></div>
<div class="preloader pad-6"></div>
<div class="preloader pad-7"></div>
<div class="preloader pad-l1"></div>
<div class="preloader pad-l2"></div>
<div class="preloader pad-l3"></div>
<div class="preloader pad-l4"></div>
<div class="preloader pad-l5"></div>
components/shim.less
shim
можно использовать как "ширму" для других компонентов
или элементов<div class="shim">
<div class="shim-overlay"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>
<div class="panel">
<div class="panel-body">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis sunt facilis
voluptatibus eum officia veritatis nam, dolorum rem blanditiis placeat!
</div>
</div>
<div class="shim">
<div class="shim-overlay"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>
</div>
shim-overlay
, используйте классы
.bg-{value}
утилит<div class="shim">
<div class="shim-overlay bg-green"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>
preloader
components/sidebar.less
<div class="sidebar">
<nav class="nav pad-l1">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
</div>
.sidebar-small
<div class="sidebar sidebar-small">
<nav class="nav">
<ul>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-account mdi-24px"></i>
</div>
</a></li>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-security mdi-24px"></i>
</div>
</a></li>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-star mdi-24px"></i></div>
</a></li>
</ul>
</nav>
</div>
components/skeleton.less
.skeleton-small
, .skeleton-large
<div class="skeleton skeleton-small p"></div>
<div class="skeleton skeleton p"></div>
<div class="skeleton skeleton-large"></div>
<div class="tile p w-6-12">
<div class="tile-body">
<div class="row">
<div class="col col-auto">
<div class="skeleton avatar-4 round"></div>
</div>
<div class="col">
<div class="skeleton skeleton-large p"></div>
<div class="row">
<div class="col col-8-12">
<div class="skeleton skeleton-small"></div>
</div>
<div class="col">
<div class="skeleton skeleton-small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
components/tabs.less
.tabs-center
.tabs-right
<ul class="tabs">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
<ul class="tabs tabs-center">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
<ul class="tabs tabs-right">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
components/tile.less
<div class="tile">
<div class="tile-body">
<h3>Title</h3>
<div>Some content here</div>
</div>
</div>
.tile-1-1
.tile-2-1
.tile-4-3
.tile-16-9
<div class="row">
<div class="col">
<div class="tile tile-1-1">
<div class="tile-body">
<h3>1:1</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-2-1">
<div class="tile-body">
<h3>2:1</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-4-3">
<div class="tile-body">
<h3>4:3</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-16-9">
<div class="tile-body">
<h3>16:9</h3>
</div>
</div>
</div>
</div>
.tooltip-top
.tooltip-bot
.tooltip-left
.tooltip-right
components/form.less
input
select
textarea
фреймворк использует свои классы. Что изолирует стили и позволяет использовать данные элементы
для кастомной стилизации, если это необходимо.
<div class="pad-2"><input class="input" type="text" placeholder="normal"></div>
<div class="pad-2"><input class="input hover" type="text" placeholder="hover"></div>
<div class="pad-2"><input class="input focus" type="text" placeholder="focus"></div>
<div class="pad-2"><input class="input disabled" type="text" placeholder="disabled">
</div>
<div class="pad-2"><input class="input valid" type="text" placeholder="valid"></div>
<div class="pad-2"><input class="input invalid" type="text" placeholder="invalid"></div>
input
, используйте классы
.input-small
.input-large
textarea
, используйте класс
.textarea
<div class="pad-2"><textarea class="textarea" placeholder="normal"></textarea></div>
<div class="pad-2"><textarea class="textarea hover" placeholder="hover"></textarea>
</div>
<div class="pad-2"><textarea class="textarea focus" placeholder="focus"></textarea>
</div>
<div class="pad-2"><textarea class="textarea disabled" placeholder="disabled"></textarea></div>
<div class="pad-2"><textarea class="textarea valid" placeholder="valid"></textarea>
</div>
<div class="pad-2"><textarea class="textarea invalid" placeholder="invalid"></textarea>
</div>
textarea
, используйте классы
.textarea-small
.textarea-large
select
, используйте класс .select
<select class="select">
<option value="">Select option</option>
</select>
<select class="select hover">
<option value="">Select option</option>
</select>
<select class="select focus">
<option value="">Select option</option>
</select>
<select class="select disabled" disabled="">
<option value="">Select option</option>
</select>
<select class="select valid">
<option value="">Select option</option>
</select>
<select class="select invalid">
<option value="">Select option</option>
</select>
select
, используйте классы
.select-small
.select-large
<form class="d-inline-block" autocomplete="off">
<input class="checkbox" type="checkbox"><br>
<input class="checkbox" type="checkbox" indeterminate=""><br>
<input class="checkbox" type="checkbox" checked=""><br>
<input class="checkbox hover" type="checkbox"><br>
<input class="checkbox focus" type="checkbox"><br>
<input class="checkbox disabled" type="checkbox"><br>
<input class="checkbox disabled" type="checkbox" checked=""><br>
<input class="checkbox valid" type="checkbox"><br>
<input class="checkbox invalid" type="checkbox">
</form>
<form autocomplete="off">
<input class="radio" type="radio" name="radio"><br>
<input class="radio" type="radio" name="radio-c" checked=""><br>
<input class="radio hover" type="radio" name="radio"><br>
<input class="radio focus" type="radio" name="radio"><br>
<input class="radio disabled" type="radio" name="radio"><br>
<input class="radio disabled" type="radio" name="radio-d" checked=""><br>
<input class="radio valid" type="radio" name="radio"><br>
<input class="radio invalid" type="radio" name="radio">
</form>
<form autocomplete="off">
<input class="switch" type="checkbox"><br>
<input class="switch" type="checkbox" checked=""><br>
<input class="switch hover" type="checkbox"><br>
<input class="switch focus" type="checkbox"><br>
<input class="switch disabled" type="checkbox"><br>
<input class="switch disabled" type="checkbox" checked=""><br>
<input class="switch valid" type="checkbox"><br>
<input class="switch invalid" type="checkbox">
</form>
.form-label
form-label
, используйте классы
.form-label-xsmall
.form-label-small
.form-label-large
<div class="pad-2">
<div class="form-label form-label-xsmall">xsmall</div>
</div>
<div class="pad-2">
<div class="form-label form-label-small">small</div>
</div>
<div class="pad-2">
<div class="form-label">normal</div>
</div>
<div class="pad-2">
<div class="form-label form-label-large">large</div>
</div>
form-label
используйте класс form-label-sticky
form-label-sticky
использует абсолютное позиционирование, вам необходимо использовать контейнер. В качестве контейнера вы можете использовать form-control
.<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-xsmall form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-small form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-large form-label-sticky">label</div>
</div>
form-label
используйте класс form-label-float
. Работает с элементами .input
.textarea
form-label-float
использует абсолютное позиционирование, вам необходимо использовать контейнер. В качестве контейнера вы можете использовать form-control
.<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-xsmall form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-small form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-large form-label-float">label</div>
</div>
<div class="pad-2">
<div class="form-elem" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem hover" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem focus" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem disabled" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem valid" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem invalid" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
form-elem
, используйте классы
.form-elem-small
.form-elem-large
<div class="pad-2">
<div class="form-elem form-elem-small" tabindex="0">
<div class="d-flex flex-v-center h-100">small</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem" tabindex="0">
<div class="d-flex flex-v-center h-100">normal</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem form-elem-large" tabindex="0">
<div class="d-flex flex-v-center h-100">large</div>
</div>
</div>
position: relative; display: inline-block;
input
select
form-elem
form-control
используйте класс
.form-control-icon-left
.form-control-icon-right
.form-control-icon-both
вместе с утилитой
.icon
<div>
<div class="form-control form-control-icon-left mar-2 w-f2">
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>
<div>
<div class="form-control form-control-icon-right mar-2 w-f2">
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>
<div>
<div class="form-control form-control-icon-both mar-2 w-f2">
<div class="icon"><i class="mdi mdi-account"></i></div>
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>
utility.less
float
.класс | описание | пример |
---|---|---|
responsive
.pull-left .{viewport}-pull-left |
применяет float: left |
lorem ipsum
|
responsive
.pull-right .{viewport}-pull-right |
применяет float: right |
lorem ipsum
|
responsive
.pull-center .{viewport}-pull-center |
применяет float: none; margin: 0 auto; |
lorem ipsum
|
responsive
.pull-none .{viewport}-pull-none |
применяет float: none; margin: 0; |
класс | описание | пример |
---|---|---|
.text-h1 |
применяет font-size элемента <h1> |
Text
|
.text-h2 |
применяет font-size элемента <h2> |
Text
|
.text-h3 |
применяет font-size элемента <h3> |
Text
|
.text-h4 |
применяет font-size элемента <h4> |
Text
|
responsive
.text-large .text-lead .{viewport}-text-large .{viewport}-text-lead |
применяет @font-size*1.125 |
Text
|
responsive
.text-small .{viewport}-text-small |
применяет @font-size*0.875 |
Text
|
responsive
.text-xsmall .{viewport}-text-xsmall |
применяет @font-size*0.75 |
Text
|
.text-left |
применяет text-align: left |
Text
|
.text-right |
применяет text-align: right |
Text
|
.text-center |
применяет text-align: center |
Text
|
.text-justify |
применяет text-align: justify |
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
.text-italic |
применяет font-style: italic |
Text
|
.text-bold |
применяет font-weight: bold |
Text
|
.text-normal |
применяет font-weight: normal; font-style: normal |
Text
|
.text-muted |
приглушает текст |
Text
|
.text-truncate |
обрезает длинный текст |
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
.text-upper |
преобразуем текст в большим буквам |
This text was written in a normal case.
|
.text-nowrap nobr |
применяет white-space: nowrap |
|
.break-word |
разрешает перенос текста по словам | |
.lh-1 |
применяет line-height: 1 |
color
класс | пример |
---|---|
.color-black |
text |
.color-body |
text |
.color-primary |
text |
.color-link |
text |
.color-red .color-invalid .color-required |
text |
.color-green .color-valid |
text |
.color-yellow |
text |
.color-orange |
text |
.color-grey |
text |
.color-grey-dark |
text |
.color-grey-light |
text |
.color-grey-lighter |
text |
.color-muted |
text |
.color-white |
text |
.color-disabled |
text |
.color-disabled-dark |
text |
.color-border |
text |
.color-transparent |
text |
.color-inherit |
text |
background-color
класс | пример |
---|---|
.bg-black |
|
.bg-body |
|
.bg-primary |
|
.bg-link |
|
.bg-red .bg-invalid .bg-required |
|
.bg-green .bg-valid |
|
.bg-yellow |
|
.bg-orange |
|
.bg-grey |
|
.bg-grey-dark |
|
.bg-grey-light |
|
.bg-grey-lighter |
|
.bg-muted |
|
.bg-white |
|
.bg-disabled |
|
.bg-disabled-dark |
|
.bg-border |
|
.bg-transparent |
|
.bg-inherit |
vertical-align
класс | описание |
---|---|
.v-top |
применяет vertical-align: top |
.v-mid |
применяет vertical-align: middle |
.v-bot |
применяет vertical-align: bottom |
.v-base |
применяет vertical-align: baseline |
.v-inherit |
применяет vertical-align: inherit |
padding
класс | описание |
---|---|
.pad-none |
применяет padding: 0 |
.pad-v-none |
применяет padding-top: 0; padding-bottom: 0; |
.pad-h-none |
применяет padding-left: 0; padding-right: 0; |
.pad-left-none |
применяет padding-left: 0 |
.pad-right-none |
применяет padding-right: 0 |
.pad-top-none |
применяет padding-top: 0 |
.pad-bot-none |
применяет padding-bottom: 0 |
.pad-{1-9} |
применяет padding: @spacer{1-9} |
.pad-v-{1-9} |
применяет padding-top: @spacer{1-9}; padding-bottom: @spacer{1-9} |
.pad-h-{1-9} |
применяет padding-left: @spacer{1-9}; padding-right: @spacer{1-9} |
.pad-left-{1-9} |
применяет padding-left: @spacer{1-9} |
.pad-right-{1-9} |
применяет padding-right: @spacer{1-9} |
.pad-top-{1-9} |
применяет padding-top: @spacer{1-9} |
.pad-bot-{1-9} |
применяет padding-bottom: @spacer{1-9} |
.pad-l{1-7} |
применяет padding: @spacer-layout{1-7} |
.pad-v-l{1-7} |
применяет padding-top: @spacer-layout{1-7}; padding-bottom: @spacer-layout{1-7} |
.pad-h-l{1-7} |
применяет padding-left: @spacer-layout{1-7}; padding-right: @spacer-layout{1-7} |
.pad-left-l{1-7} |
применяет padding-left: @spacer-layout{1-7} |
.pad-right-l{1-7} |
применяет padding-right: @spacer-layout{1-7} |
.pad-top-l{1-7} |
применяет padding-top: @spacer-layout{1-7} |
.pad-bot-l{1-7} |
применяет padding-bottom: @spacer-layout{1-7} |
margin
класс | описание |
---|---|
.mar-none |
применяет margin: 0 |
.mar-v-none |
применяет margin-top: 0; margin-bottom: 0 |
.mar-h-none |
применяет margin-left: 0; margin-right: 0 |
.mar-left-none |
применяет margin-left: 0 |
.mar-right-none |
применяет margin-right: 0 |
.mar-top-none |
применяет margin-top: 0 |
.mar-bot-none .last .end |
применяет margin-bottom: 0 |
.mar-auto |
применяет margin: auto |
.mar-v-auto |
применяет margin-top: auto; margin-bottom: auto |
.mar-h-auto |
применяет margin-left: auto; margin-right: auto |
.mar-left-auto |
применяет margin-left: auto |
.mar-right-auto |
применяет margin-right: auto |
.mar-top-auto |
применяет margin-top: auto |
.mar-bot-auto |
применяет margin-bottom: auto |
.mar-{1-9} |
применяет margin: @spacer{1-9} |
.mar-v-{1-9} |
применяет margin-top: @spacer{1-9}; margin-bottom: @spacer{1-9} |
.mar-h-{1-9} |
применяет margin-left: @spacer{1-9}; margin-right: @spacer{1-9} |
.mar-left-{1-9} |
применяет margin-left: @spacer{1-9} |
.mar-right-{1-9} |
применяет margin-right: @spacer{1-9} |
.mar-top-{1-9} |
применяет margin-top: @spacer{1-9} |
.mar-bot-{1-9} |
применяет margin-bottom: @spacer{1-9} |
.mar-l{1-7} |
применяет margin: @spacer-layout{1-7} |
.mar-v-l{1-7} |
применяет margin-top: @spacer-layout{1-7}; margin-bottom: @spacer-layout{1-7} |
.mar-h-l{1-7} |
применяет margin-left: @spacer-layout{1-7}; margin-right: @spacer-layout{1-7} |
.mar-left-l{1-7} |
применяет margin-left: @spacer-layout{1-7} |
.mar-right-l{1-7} |
применяет margin-right: @spacer-layout{1-7} |
.mar-top-l{1-7} |
применяет margin-top: @spacer-layout{1-7} |
.mar-bot-l{1-7} |
применяет margin-bottom: @spacer-layout{1-7} |
display
класс | описание |
---|---|
.d-flex |
применяет display: flex |
.d-inline-flex |
применяет display: inline-flex |
.d-inline-block |
применяет display: inline-block |
.d-inline |
применяет display: inline |
.d-block |
применяет display: block |
responsive
.show .{viewport}-show |
применяет display: block |
responsive
.hide .{viewport}-hide |
применяет display: none |
.invisible |
применяет visibility: hidden |
flex
элементами.класс | описание |
---|---|
.flex-col |
применяет flex-direction: column , применяется к flex элементу
|
.flex-center |
применяет align-items: center и justify-content: center |
.flex-h-center |
применяет горизонтальное выравнивание дочерних элементов по центру
justify-content: center , применяется к flex элементу |
.flex-h-stretch |
применяет justify-content: stretch |
.flex-h-space-between |
применяет justify-content: space-between |
.flex-h-space-evenly |
применяет justify-content: space-evenly |
.flex-h-space-around |
применяет justify-content: space-around |
.flex-h-start |
применяет justify-content: flex-start |
.flex-h-end |
применяет justify-content: flex-end |
.flex-v-center |
применяет вертикальное выравнивание дочерних элементов по центру
align-items: center , применяется к flex элементу |
.flex-v-stretch |
применяет align-items: stretch |
.flex-v-baseline |
применяет align-items: baseline |
.flex-v-space-between |
применяет align-content: space-between |
.flex-v-space-evenly |
применяет align-content: space-evenly |
.flex-v-space-around |
применяет align-content: space-around |
.flex-v-start |
применяет align-content: flex-start |
.flex-v-end |
применяет align-content: flex-end |
.flex-wrap |
применяет flex-wrap: wrap |
.flex-nowrap |
применяет flex-wrap: nowrap |
.flex-grow |
применяет flex-grow: 1 , применяется к дочерним элементам flex
элемента |
.flex-shrink |
применяет flex-shrink: 1 , применяется к дочерним элементам
flex элемента |
<div class="d-flex flex-center" style="height:150px">
<button class="btn btn-primary">Button</button>
</div>
position
.класс | описание |
---|---|
.pos-abs |
применяет position: absolute |
.pos-rel |
применяет position: relative |
.pos-fixed |
применяет position: fixed |
.pos-sticky |
применяет position: sticky |
.pos-static |
применяет position: static |
.pos-right
.pos-left
.pos-top
.pos-bot
<div class="pos-abs pos-right">
<div class="demo-fx bg-green pad-5"><code>.pos-right</code></div>
</div>
<div class="pos-abs pos-left">
<div class="demo-fx bg-green pad-5"><code>.pos-left</code></div>
</div>
<div class="pos-abs pos-top">
<div class="demo-fx bg-green pad-5"><code>.pos-top</code></div>
</div>
<div class="pos-abs pos-bot">
<div class="demo-fx bg-green pad-5"><code>.pos-bot</code></div>
</div>
.pos-top-left
.pos-top-center
.pos-top-right
.pos-bot-left
.pos-bot-center
.pos-bot-right
.pos-left-center
.pos-right-center
.pos-center
<div class="pos-abs pos-top-left">
<code>.pos-top-left</code>
</div>
<div class="pos-abs pos-top-center">
<code>.pos-top-center</code>
</div>
<div class="pos-abs pos-top-right">
<code>.pos-top-right</code>
</div>
<div class="pos-abs pos-bot-left">
<code>.pos-bot-left</code>
</div>
<div class="pos-abs pos-bot-center">
<code>.pos-bot-center</code>
</div>
<div class="pos-abs pos-bot-right">
<code>.pos-bot-right</code>
</div>
<div class="pos-abs pos-left-center">
<code>.pos-left-center</code>
</div>
<div class="pos-abs pos-right-center">
<code>.pos-right-center</code>
</div>
<div class="pos-abs pos-center">
<code>.pos-center</code>
</div>
.pos-offset-left
.pos-offset-right
.pos-offset-top
.pos-offset-bot
×
<div class="demo-fx">
<code class="pos-abs pos-offset-left">.pos-offset-left</code>
<code class="pos-abs pos-offset-right">.pos-offset-right</code>
<code class="pos-abs pos-offset-top">.pos-offset-top</code>
<code class="pos-abs pos-offset-bot">.pos-offset-bot</code>
×
</div>
width
.
класс | описание |
---|---|
responsive
.w-{size} .{viewport}-w-{size} |
применяет ширину {size} , которая зависит от выбранной системы (см.
таблицу ниже) |
Система | Описание | {size} |
---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
viewport | width |
---|---|
* | w-6-12 |
XL | w-8-12 |
L | w-10-12 |
M | w-11-12 |
S | w-12-12 |
<div class="bg-green pad-2 w-25">w-25</div>
<div class="bg-green pad-2 w-6-12">w-6-12</div>
<div class="bg-green pad-2 w-19-24">w-19-24</div>
<div class="bg-grey-lighter pad-2 w-6-12 xl-w-8-12 l-w-10-12 m-w-11-12 s-w-12-12">
<div class="p">Ресайзите окно браузера</div>
<table class="table w-100">
<thead>
<tr>
<th class="table-w-auto">viewport</th>
<th>width</th>
</tr>
</thead>
<tbody><tr>
<td><mark>*</mark></td>
<td><code>w-6-12</code></td>
</tr>
<tr>
<td><mark>XL</mark></td>
<td><code>w-8-12</code></td>
</tr>
<tr>
<td><mark>L</mark></td>
<td><code>w-10-12</code></td>
</tr>
<tr>
<td><mark>M</mark></td>
<td><code>w-11-12</code></td>
</tr>
<tr>
<td><mark>S</mark></td>
<td><code>w-12-12</code></td>
</tr>
</tbody></table>
</div>
.w-f{size}
, где
{size}
принимает значения:{size} | less переменная | ширина (px) |
---|---|---|
1 |
@width-fixed1 |
128 |
2 |
@width-fixed2 |
256 |
3 |
@width-fixed3 |
384 |
4 |
@width-fixed4 |
512 |
5 |
@width-fixed5 |
640 |
6 |
@width-fixed6 |
768 |
7 |
@width-fixed7 |
896 |
<div class="bg-green pad-2 w-f1">w-f1</div>
<div class="bg-green pad-2 w-f2">w-f2</div>
<div class="bg-green pad-2 w-f3">w-f3</div>
<div class="bg-green pad-2 w-f4">w-f4</div>
<div class="bg-green pad-2 w-f5">w-f5</div>
<div class="bg-green pad-2 w-f6">w-f6</div>
<div class="bg-green pad-2 w-f7">w-f7</div>
.min-w-f{size}
и .max-w-f{size}
, где
{size}
принимает значения по аналогии с .w-f{size}
height
.
класс | описание |
---|---|
.h-auto |
применяет height: auto |
.h-100 |
применяет height: 100% |
.h-100v |
применяет height: 100vh |
.min-h-f{size}
и .max-h-f{size}
, где
{size}
принимает значения по аналогии с .w-f{size}
класс | описание |
---|---|
.section |
применяет отступ margin-bottom: @spacer-layout5 |
.block |
применяет отступ margin-bottom: @spacer-layout3 |
.p |
применяет отступ margin-bottom: @spacer-layout1 |
.container |
контейнер 100% ширины (но не более @container-max-width ), выровненный по
центру |
.cf .clear |
cleafix хак, для устранения проблем с float элементами |
overflow
.класс | описание |
---|---|
.scroll-hide .noscroll |
применяет overflow: hidden |
.scroll-x |
применяет overflow-x: auto |
.scroll-y |
применяет overflow-y: auto |
pointer-events
.класс | описание |
---|---|
.events-none |
применяет pointer-events: none |
.events-all |
применяет pointer-events: all |
cursor
.класс | описание |
---|---|
.cursor-auto |
применяет cursor: auto |
.cursor-default |
применяет cursor: default |
.cursor-pointer |
применяет cursor: pointer |
.cursor-help |
применяет cursor: help |
filter
.класс | описание | пример |
---|---|---|
.filter-blur |
применяет filter: blur(5px) |
![]() |
.filter-grayscale |
применяет filter: grayscale(1) |
![]() |
.filter-invert |
применяет filter: invert(1) |
![]() |
object-fit
.класс | описание |
---|---|
.obj-contain |
применяет object-fit: contain |
.obj-cover |
применяет object-fit: cover |
класс | описание | пример |
---|---|---|
.thumb .thumbnail |
применяет рамку для предпросмотра | ![]() |
.responsive |
задает max-width: 100%; height: auto применимо к <img>
<video> |
![]() |
.round |
полностью закругляет края элемента | |
.radius-none |
убирает закругления краев элемента | |
.radius .radius-{1-5} |
закругляет края элемента, согласно заданным параметрам фреймворка (4px, 8px, 16px, 32px, 64px) | |
.shadow-none |
убирает тень элемента | |
.shadow .shadow-{1-5} |
задает тень элемента, согласно заданным параметрам фреймворка | |
.icon .icon .icon-2 .icon .icon-3 |
спец. flex контейнер для иконок |
|
.close |
close |
|
.link |
ссылка интерактивная (предполагает открытие ui элемента типа popup например) | Lorem ipsum |
.u-select-none .u-select-all .u-select-text |
применяет user-select: none | all | text |
|
.ui-muted |
применяет opacity |
Sample text |
.border-none |
применяет border: none |
.icon
.color-{value}
утилитами (см. Color утилиты Misc утилиты).npm install @mdi/font --save
npm install @mdi/light-font --save
// ваш <entry-point>.js
import '@mdi/font/css/materialdesignicons.min.css';
import '@mdi/light-font/css/materialdesignicons-light.min.css'
<div class="icon demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon icon-2 demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon icon-3 demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon demo-borders color-grey"><i class="mdi mdi-account mdi-18px"></i></div>
<div class="icon icon-2 demo-borders color-primary"><i class="mdi mdi-account mdi-24px"></i></div>
<div class="icon icon-3 demo-borders color-green"><i class="mdi mdi-account mdi-36px"></i></div>
<div class="icon icon-3 demo-borders color-red"><i class="mdi mdi-account mdi-48px"></i></div>
<div class="icon demo-borders"><i class="mdi mdi-loading mdi-spin"></i></div>
Такого раздела пока нет в документации