Контейнеры Dimensions
  • class="DisplayFlexMax" — для блокового отображения.
  • class="DisplayInline-FlexMax" — для инлайнового отображения.
  • class="FlexNowrapMax" — для выравнивание в линию.
  • class="FlexWrapMax" — для выравнивание в линию с переносом.
  • class="container5"
  • class="container10"
  • class="container15"
  • class="container25"
  • class="container30"
  • class="container35"
  • class="container40"
  • class="container45"
  • class="container50"
    • class="container50-1200" Срабатывает когда -1200
    • class="container50-980" Срабатывает когда -980
    • class="container50-768" Срабатывает когда -768
    • class="container50-480" Срабатывает когда -480
    • class="container50-480" Срабатывает когда -320
  • class="container55"
  • class="container60"
  • class="container65"
  • class="container70"
  • class="container75"
  • class="container80"
  • class="container80"
  • class="container85"
  • class="container90"
  • class="container95"
  • class="container100"
    • class="container100-1200" Срабатывает когда -1200
    • class="container100-980" Срабатывает когда -980
    • class="container100-768" Срабатывает когда -768
    • class="container100-480" Срабатывает когда -480
    • class="container100-320" Срабатывает когда -320
class="container1200"
class="container980"
class="container768"
class="container480"
class="container320"
Макет сайта
class="Maket1920"
class="Maket1600"
class="Maket1440"
class="Maket1366"
class="Maket1280"
class="Maket1024"
Выравнивание в нутри блока
class="JustifyContentFlex-start"
class="JustifyContentCenter"
class="JustifyContentFlex-end"
Фоновое изоброжение
class="ContainerFon1"
  • background-position: center center
  • background-size: cover
class="ContainerFon2"
  • background-position: center center
  • background-repeat: no-repeat
  • background-size: contain
class="ContainerFon2"
  • background-position: center center
  • background-repeat: no-repeat
  • background-size: contain
Отключение и включения блоков на разных размерах экрана
Выключение
  • class="DisplayNone1200"
  • class="DisplayNone980"
  • class="DisplayNone768"
  • class="DisplayNone480"
  • class="DisplayNone320"
Включение
  • class="DisplayBloc1200"
  • class="DisplayBloc980"
  • class="DisplayBloc768"
  • class="DisplayBloc480"
  • class="DisplayBloc320"
Набор цветов
Пример: <div style="background-color: var(--gray100);">--gray100</div>
--gray0
--gray100
--gray200
--gray300
--gray400
--gray500
--gray600
--gray700
--gray800
--gray900
--gray1000
Отступ внутри и снаружи блока
Отступ внутри блока верх
  • class="PaddingTop60"
  • class="PaddingTop40"
  • class="PaddingTop20"
  • class="PaddingTop10"
Отступ с наружи блока верх
  • class="MarginTop60"
  • class="MarginTop40"
  • class="MarginTop20"
  • class="MarginTop10"
Отступ внутри блока низ
  • class="PaddingBottom60"
  • class="PaddingBottom40"
  • class="PaddingBottom20"
  • class="PaddingBottom10"
Отступ с наружи блока низ
  • class="MarginBottom60"
  • class="MarginBottom40"
  • class="MarginBottom20"
  • class="MarginBottom10"
Ширина по вертикали PX
Пример: class="ContainerHeight30" можно менять размер от 30 до 700
30
60
90
120
150
200
300
400
500
600
700
Размер шрифта
class="rem68"
class="rem62"
class="rem54"
class="rem48"
class="rem42"
class="rem38"
class="rem32"
class="rem28"
class="rem24"
class="rem18"
class="rem16"
class="rem14"
class="rem12"
class="Gilroy"
class="DigisCosmo"
class="Caxo"
class="MBFAlva"
Навигация:
Прокрутить вверх