Пример страницы

Мастерская ФИМ Пример страницы

Документация по компонентам

Все файлы подключаются в style.sass

Reset

Самый простой Reset. Добавлены миксины:

  • =reset-buttons
  • =reset-list

Сброшены маркеры у ul

Variables

  • Breakpoints
  • Shadows
    • =shadow
    • =shadowHover
  • Transition
  • Spacers

Theme Variables

  • Theme colors ($accent)
  • Theme fonts
    1. $heading-font
    2. $text-font

Icons

Подключает Bootstrap Icons через миксин =bs-font

Colors

$black
$white
$accnet

Color Palette

-50

-00

Grid

Сетка отличается от Bootstrap, в первую очередь, тем, что от Breakpoins меняется Gutters

Как и в Bootstrap, сетка на flexbox

  • .no-gutters
  • .g-0
  • .col
  • .col-* col-sm-* col-md-* .col-lg-* .col-xl-* .col-xxl-*
  • .offset-*
  • .order[-breakpoint]-(first|0|1|2|3|4|5|last)

Breakpoints

  • $xs: 480px
  • $sm: 576px
  • $md: 768px
  • $lg: 1024px
  • $xl: 1400px
  • $xxl: 1500px

Gutters

  • "xs": 20px
  • "sm": 24px
  • "md": 30px
  • "lg": 32px
  • "xl": 34px
  • "xxl": 36px

Размеры

  • $sm диапазон: 576px - 767px
  • $sm-container: 552px = 528px - padding 12px * 2
  • $md диапазон: 768px - 1023px
  • $md-container: 708px = 738px - padding 15px * 2
  • $lg диапазон: 1024px - 1399px
  • $lg-container: 960px = 992px - padding 16px * 2
  • $xl диапазон: 1400px - 1499px
  • $xl-container: 1332px = 1366px - padding 17px * 2
  • $xxl-container: 1428px = 1464px - padding 18px * 2

col-6
col-6
col-5
col-7
col-4
col-8
col-3
col-9
col-2
col-10
col-1
col-11
col-five
col-five
col-five
col-five
col-five

Typography

Пример заголовка H1 Badges

Пример заголовка H2 Badges

Пример заголовка H3 Badges

Пример заголовка H4 Badges

Пример заголовка H5 Badges
Пример заголовка H6 Badges

md-text - по-умолчанию

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad assumenda atque, dignissimos earum harum itaque mollitia nesciunt nihil perspiciatis, saepe tempora temporibus. Autem consectetur, debitis dolore iste quisquam voluptatem. Aliquam dolore in molestiae temporibus. Hic modi non numquam! Ab atque deserunt dicta eaque eos harum inventore iure, maxime minima mollitia, obcaecati pariatur quae saepe sint suscipit totam ut veritatis.

sm-text

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad assumenda atque, dignissimos earum harum itaque mollitia nesciunt nihil perspiciatis, saepe tempora temporibus. Autem consectetur, debitis dolore iste quisquam voluptatem. Aliquam dolore in molestiae temporibus. Hic modi non numquam! Ab atque deserunt dicta eaque eos harum inventore iure, maxime minima mollitia, obcaecati pariatur quae saepe sint suscipit totam ut veritatis.








Badges

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Цвет меняется в _colors.sass

Alrets

background-color: sky-200, border-color: sky-300, color: blue-900
background-color: gray-200, border-color: gray-300, color: gray-900
background-color: emerald-200, border-color: green-300, color: green-900
background-color: rose-200, border-color: rose-400, color: rose-900
background-color: emerald-200, border-color: green-300, color: green-900
background-color: cyan-200, border-color: cyan-300, color: cyan-900
background-color: gray-100, border-color: gray-200, color: gray-500
background-color: slate-400, border-color: green-300, color: green-900

BG Classes

.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark

Typography utilities

  • .fw-bold
  • .nowrap
  • small, .small
  • .text-dark
  • .uppercase - UPPERCASE
  • .text-capitalize - Capitalize
  • .text-lowercase - lowercase
  • .text-left (.text-*-left)
  • .text-right (.text-*-right)
  • .text-center (.text-*-center)
.border
.border-start
.border-bottom

.border-top
.border-end

Utilities

  • .white-bg-wrapper - padding 40/60 для больших блоков
  • .bg-black
  • .bg-white
  • .bg-accent
  • .border-top - gray-500

Стандартные Bootstrap отступы

.(m|p)[-(t|r|b|l|y|x)]-*

  • .position-(static|relative|absolute|fixed|sticky)
  • .hidden
  • .rounded-2
  • .w-100
  • .h-100

Стандартные Bootstrap Displays

  • .d[-breakpoint]-block
  • .d[-breakpoint]-inline-block
  • .d[-breakpoint]-inline
  • .d[-breakpoint]-flex
  • .d[-breakpoint]-none

Flexbox Utilities

  • .flex-center
  • .flex-row-sb
  • .flex-row-sb-aic
  • .flex-row-sa
  • .flex-row-sa-aic
  • .flex-row-start
  • .flex-column-start
  • .flex-column-end
  • .flex-column-sb
  • .flex-column-aic
  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-self-auto
  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-baseline
  • .align-top
  • .align-middle
  • .align-bottom
  • .align-text-bottom
  • .align-text-top

Forms

Tables

Стрижка (мытье + укладка включены в стоимость) Мастер Топ-мастер
Короткие (до 10см) 1500 руб. 1700 руб.
Средние (до 20см) 1700 руб. 1900 руб.
Длинные (до 40см) 2000 руб. 2200 руб.
Стрижка кончиков волос одним срезом 1500 руб. 1700 руб.
Стрижка (мытье + укладка включены в стоимость) Мастер Топ-мастер
Короткие (до 10см) 1500 руб. 1700 руб.
Средние (до 20см) 1700 руб. 1900 руб.
Длинные (до 40см) 2000 руб. 2200 руб.
Стрижка кончиков волос одним срезом 1500 руб. 1700 руб.