Утилитарные классы

Описание

Классы расположены в алфавитном порядке. Значком css-var отмечены классы, использующие css-переменные. Знак @media отмечает примеры адаптивности.

В качестве примера используется цвет red и red600 (см. таблицу цветов). В качестве примера адаптивности используется модификатор -tablet. Символ N указывает на число (доступные значения задаются в переменных в файле _default.scss).

Под символом hover:: подразумевается стили срабатывающие при hover-наведении.

Символом [location] отмечаются все модификаторы положения:

-t ↝ top
-b ↝ bottom
-r ↝ right
-l ↝ left
-tb ↝ top & bottom
-rl ↝ right & left

См. также: Text / Flexbox / Layout (контейнер) / CSS Grid

background |
block |
border |
column |
cursor |
filter |
gradients |
height |
line-height |
links |
lists |
object-fit |
opacity |
padding-margin |
position |
rounded |
shadow |
table |
transition |
vertical-align |
visible |
width

background ▲

Utilities ^module

bg-size-cover ↝ background-size: cover
bg-size-contain ↝ background-size: contain
bg-no-repeat ↝ background-repeat: no-repeat
bg-position-center ↝ background-position: center
bg-position-var ↝ background-position: var(--position, 50% 50%) css-var
bg-fixed ↝ background-attachment: fixed;

Colors ^module

bg-red600 ↝ background-color: $red600
hover-bg-red600 ↝ hover::background-color: $red600

block ▲

Utilities ^module

b-clearfix — отменяет обтекание от float
b-clear ↝ clear: both
b-right ↝ float: right
b-left ↝ float: left
b-center ↝ margin-left : auto; margin-right: auto
b-hide ↝ display: none
b-hide-imp ↝ display: none !important;
b-inline, b-inline-block ↝ display: inline-block
b-block ↝ display: block
b-block-imp ↝ display: block !important
b-flex ↝ display: flex
b-inline-flex ↝ display: inline-flex
b-grid ↝ display: grid
b-inline-grid ↝ display: inline-grid
b-overlay — Оверлей. Наложение слоёв с hover-эффектом
b-overlay-text

Примеры

Sample text

<div class="b-overlay">
    <img class="w100 h100" src="assets/images/nature1.jpg">
    <div class="b-overlay-text">
        <div class="pad15 pos0-b t-white bg-op-var" style="--op-red: 69; --op-green: 132; --op-blue: 140; --op: .5">
            Sample text
        </div>
    </div>
</div>

Sample text

<div class="b-overlay">
    <img class="w100 h100" src="assets/images/nature2.jpg">
    <div class="b-overlay-text">
        <div class="pad15 h100 t-white bg-op60 flex flex-ai-center t-center">
           <div class="w100">Sample text</div>
        </div>
    </div>
</div>

border ▲

Utilities ^module

bordered ↝ border: $bordered;
borN ↝ border-width: Npx
bor-none ↝ border-style: none !important
bor-none-tablet ↝ border-style: none !important for tablet @media
bor-none-t[location] ↝ border-top[location]-style: none !important
bor-STYLE[solid, dotted, dashed и т.д.] ↝ border-style: STYLE
bor-STYLE-t[location] ↝ border-top[location]-style: STYLE
bor-currentColor ↝ border-color: currentColor
bor-var ↝ border-style: var(--style, solid); border-width: var(--width, 1px); border-color: var(--color, #D4D7DD); css-var

Colors ^module

bor-red ↝ border-color: $red
hover-bor-red ↝ hover::border-color: $red

Примеры

bor1 bor-solid bor-blue

bor1 bor-dotted bor-red

bor2 bor-solid-rl bor-green

bor3 bor-double-t bor-orange

--width: 6px; --color: #d900d9; --style: ridge

currentColor

<div class="mar10-tb bor1 bor-solid bor-blue pad10">bor1 bor-solid bor-blue</div>

<div class="mar10-tb bor1 bor-dotted bor-red pad10">bor1 bor-dotted bor-red</div>

<div class="mar10-tb bor2 bor-solid-rl bor-green pad10">bor2 bor-solid-rl bor-green</div>

<div class="mar10-tb bor3 bor-double-t bor-orange pad10">bor3 bor-double-t bor-orange</div>

<div class="bor-var" style="--width: 6px; --color: #d900d9; --style: ridge;"></div>

<div class="t-red700 bor1 bor-solid bor-currentColor pad10">currentColor</div>

column ▲

Utilities ^module

column-countN[1..7] ↝ column-count: N
column-gap10[20, 30, 40, 50] ↝ column-gap: Npx
column-rule-var ↝ column-rule: var(--width, 1px) var(--style, solid) var(--color, #aaa) css-var
column-var ↝ column-count: var(--count, 3); column-gap : var(--gap, 30px); column-rule : var(--rule, 1px solid #aaa) css-var

Примеры

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

<div class="column-count3 column-gap20">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div class="column-count3 column-gap30 column-rule-var" style="--color: #D61566; --width: 2px; --style: dotted">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

cursor ▲

Utilities ^module

cursor-pointer ↝ cursor: pointer
cursor-not-allowed ↝ cursor: not-allowed

filter ▲

Utilities ^module

filter-invert ↝ filter: INVERT(var(--invert, 100%))css-var
filter-sepia ↝ filter: SEPIA(var(--sepia, 100%)) css-var

gradients css-var ▲

Utilities ^module

gr-linear-var ↝ background: linear-gradient(var(--direct, to bottom), var(--start, #fff) 0%, var(--end, #444) 100%)
gr-linear-vertical-var ↝ background: linear-gradient(to bottom, var(--start, #fff) 0%, var(--end, #444) 100%)
gr-linear-horizontal-var ↝ background: linear-gradient(to right, var(--start, #fff) 0%, var(--end, #444) 100%)
gr-radial-var ↝ background: radial-gradient(ellipse at center, var(--start, #fff) 0%, var(--end, #444) 100%)

Примеры

<div class="gr-linear-var" style="--direct: to left top; --start: #ff99ff; --end: #8c008c"></div>
<div class="gr-linear-var" style="--direct: 30grad; --start: #ff99ff; --end: #8c008c"></div>
<div class="gr-linear-vertical-var" style="--start: #ff99ff; --end: #8c008c"></div>
<div class="gr-linear-horizontal-var" style="--start: #ff99ff; --end: #8c008c"></div>
<div class="gr-radial-var" style="--start: #ff99ff; --end: #8c008c"></div>

height ▲

Utilities ^module

h100 ↝ height: 100%
h-auto ↝ height: auto
hNpx ↝ height: Npx;
hNpx-min ↝ min-height: Npx;
hNpx-max ↝ max-height: Npx;
hNvh ↝ height: Nvh;
hNvh-min ↝ min-height: Nvh;
hNvh-max ↝ max-height: Nvh;
h-auto-tablet ↝ height: auto; min-height: 0; max-height: none @media

line-height ▲

Utilities ^module

lh130[100, 110...] ↝ line-height: 1.3
lh130em ↝ line-height: 1.3em

links ▲

Utilities ^module

a.hover-no-color ↝ hover:: color: inherit
hover-no-color a ↝ hover:: color: inherit
a.hover-no-underline ↝ hover:: text-decoration: none
hover-no-underline a ↝ hover:: text-decoration: none
links-no-color a ↝ color: inherit
links-no-color-imp a ↝ color: inherit !important

Примеры

link sample

<div class="t-blue links-no-color">
    <a href="#">link sample</a>
</div>

link sample (to orange)

<div class="hover-t-orange hover-no-color">
    <a href="#">link sample (to orange)</a>
</div>

link sample (to BODY color)

<div class="hover-no-color">
    <a href="#">link sample (to BODY color)</a>
</div>

<a class="hover-no-color" href="#">link sample (to BODY color)</a>

link sample (no-underline)

<div class="hover-no-underline">
    <a href="#">link sample (no-underline)</a>
</div>

<a class="hover-no-underline" href="#">link sample (no-underline)</a>

lists ▲

Utilities ^module

ul.list-unstyled ↝ list-style: none; margin: 0; padding-left: 0;
ul.list-inline ↝ list-style: none; margin: 0; padding-left: 0; & > li {display: inline-block}
ul.no-margin ↝ padding-left: 13px
ul.no-bullet ↝ list-style: none
ul.square ↝ list-style-type: square
ul.disc ↝ list-style-type: disc
ul.circle ↝ list-style-type: circle
См. примеры

object-fit ▲

Utilities ^module

object-fit-fill ↝ object-fit: fill
object-fit-contain ↝ object-fit: contain
object-fit-cover ↝ object-fit: cover
object-fit-scale-down ↝ object-fit: scale-down
object-fit-none ↝ object-fit: none

opacity ▲

Utilities ^module

bg-transparent ↝ background-color: transparent !important
t-transparent ↝ color: transparent !important
opacityN ↝ opacity: N
hover-opacityN ↝ hover:: opacity: N
bg-opN ↝ background-color: rgba(0, 0, 0, N);
hover-bg-opN ↝ hover:: background-color: rgba(0, 0, 0, N);
bg-op-var ↝ background-color: rgba(var(--op-red, 0), var(--op-green, 0), var(--op-blue, 0), var(--op, .7)) css-var
bg-op-white-var ↝ background-color: rgba(var(--op-red, 255), var(--op-green, 255), var(--op-blue, 255), var(--op, .7) css-var

Примеры

bg 30%

bg 70%

black 50%

white 50%

<div class="pad10 bg-green200">
    <div class="mar10-tb pad10 bg-op-var" style="--op-red: 120; --op-green: 40; --op-blue: 60; --op: .3">bg 30% </div>
    
    <div class="mar10-tb pad10 bg-op-var" style="--op-red: 120; --op-green: 40; --op-blue: 60; --op: .7">bg 70%</div>
    
    <div class="mar10-tb pad10 bg-op-var" style="--op: .5">black 50%</div>

    <div class="mar10-tb pad10 bg-op-white-var" style="--op: .5">white 50%</div>
</div>

padding-margin ▲

Utilities ^module

mar30 ↝ margin: 30px
mar30-t[location] ↝ margin-top[locaion]: 30px
mar30-tablet ↝ margin: 30px for tablet
pad30 ↝ padding: 30px
pad-t[location] ↝ padding-top[locaion]: 30px
pad30-tablet ↝ padding: 30px for tablet@media

position ▲

Utilities ^module

pos-fixed ↝ position: fixed
pos-absolute ↝ position: absolute
pos-relative ↝ position: relative
pos-sticky ↝ position: sticky
posN-t ↝ top: Npx
posN-b ↝ bottom: Npx
posN-r ↝ right: Npx
posN-l ↝ left: Npx
z-indexN ↝ z-index: N

rounded ▲

Utilities ^module

rounded-circle ↝ border-radius: 50%
rounded ↝ border-radius: var(--rounded-radius, $rounded) css-var
roundedN ↝ border-radius: Npx !important
roundedN-r ↝ right top and bottom border-radius: Npx !important
roundedN-l ↝ left top and bottom border-radius: Npx !important
roundedN-t ↝ top border-radius: Npx !important
roundedN-b ↝ bottom border-radius: Npx !important

Примеры

rounded rounded20 rounded20-l rounded20-r rounded20-t rounded20-b

rounded-circle

<div class="bor1 bor-solid bor-blue rounded">rounded</div>
<div class="bor1 bor-solid bor-blue rounded20">rounded20</div>
<div class="bor1 bor-solid bor-blue rounded20-r">rounded20-r</div>
<div class="bor1 bor-solid bor-blue rounded20-l">rounded20-l</div>
<div class="bor1 bor-solid bor-blue rounded20-t">rounded20-t</div>
<div class="bor1 bor-solid bor-blue rounded20-b">rounded20-b</div>
<div class="bor1 bor-solid bor-blue rounded-circle">rounded-circle</div>
<div class="bor1 bor-solid bor-blue rounded-circle w100px h100px">rounded-circle</div>

shadow css-var ▲

Utilities ^module

b-shadow-var ↝ box-shadow: var(--shadow-b, 0 2px 7px 0 rgba(0, 0, 0, 0.1))
t-shadow-var ↝ text-shadow: var(--shadow-t, 1px 1px 5px #999)

Примеры

Text sample

<div class="t120 t-bold t-shadow-var">Text sample</div>
<div class="t120 t-pink t-shadow-var" style="--shadow-t: 2px 4px 6px #A1346B">Text sample</div>

Block sample

<div class="b-shadow-var">Block sample</div>
<div class="bg-pink100 b-shadow-var" style="--shadow-b: 2px 4px 6px #A1346B">Block sample</div>

table ▲

Utilities ^module

table-layout-fixed ↝ table-layout: fixed
table-layout-auto ↝ table-layout: auto
table-caption-bottom ↝ caption-side: bottom
См. примеры

transition css-var ▲

Utilities ^module

transition-var ↝ transition: all var(--duration, .5s)
transition-child-var * ↝ transition: all var(--duration, .5s)

Примеры

hover my (default --duration = .5s)

hover my (--duration: 1.5s)

<div class="bg-pink100 hover-bg-pink700 t-pink700 hover-t-pink100 transition-var">hover my (default --duration = .5s)</div>

<div class="bg-pink100 hover-bg-pink700 t-pink700 hover-t-pink100 transition-var" style="--duration: 1.5s">hover my (--duration: 1.5s)</div>

Link Link Link

<div class="transition-child-var" style="--duration: .8s">
    <a class="bor2 bor-solid bor-gray300 hover-bor-pink pad10" href="#">Link</a> 
    <a class="hover-bg-pink300 pad10" href="#">Link</a> 
    <a class="bg-pink300 opacity30 hover-opacity100 pad10" href="#">Link</a> 
</div>

vertical-align ▲

Utilities ^module

va-baseline ↝ vertical-align: baseline
va-top ↝ vertical-align: top
va-middle ↝ vertical-align: middle
va-bottom ↝ vertical-align: bottom
va-text-top ↝ vertical-align: text-top
va-text-bottom ↝ vertical-align: text-bottom
va-sub ↝ vertical-align: sub
va-super ↝ vertical-align: super
va-baseline:before ↝ vertical-align:before: baseline
va-top:before ↝ vertical-align:before: top
va-middle:before ↝ vertical-align:before: middle
va-bottom:before ↝ vertical-align:before: bottom
va-text-top:before ↝ vertical-align:before: text-top
va-text-bottom:before ↝ vertical-align:before: text-bottom
va-sub:before ↝ vertical-align:before: sub
va-super:before ↝ vertical-align:before: super

visible ▲

Utilities ^module

visibility-hidden ↝ visibility: hidden
visibility-visible ↝ visibility: visible
overflow-hidden ↝ overflow: hidden
overflow-auto ↝ overflow: auto
overflow-x-auto ↝ overflow-x: auto
overflow-y-auto ↝ overflow-y: auto
overscroll-behavior-contain ↝ overscroll-behavior: contain
overscroll-behavior-none ↝ overscroll-behavior: none
hide-tablet ↝ display: none !important for tablet @media
show-tablet ↝ display: block !important for tablet @media

width ▲

Utilities ^module

w-layout-max ↝ width: 100%; max-width: $layout_max_width
w100-max ↝ max-width: 100%;
w-auto ↝ width: auto
w-max-none ↝ max-width: none
w-tablet ↝ width: tablet size
w-tablet-max ↝ max-width: tablet size
w-tablet-min ↝ min-width: tablet size
wN[1..12]col ↝ width: percentage(N/12)
wN[1..12]col-tablet ↝ width: percentage(N/12) for tablet @media
w30px ↝ width: 30px
w30px-min ↝ min-width: 30px
w30px-max ↝ max-width: 30px
w30 ↝ width: 30%
w30-min ↝ min-width: 30%
w30-max ↝ max-width: 30%
w30-tablet ↝ width: 30% for tablet @media
w-auto-tablet ↝ width: auto for tablet @media
w100-max-tablet ↝ max-width: 100% for tablet @media
w0-min-tablet ↝ min-width: 0 for tablet @media