🍓 Berry CSS 3.0

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

Описание

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

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

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

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

  • -ttop
  • -bbottom
  • -rright
  • -lleft
  • -tbtop & bottom
  • -rlright & left

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

background

Utilities module

Colors module

block

Utilities module

Примеры
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

Colors module

Примеры
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

Примеры
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>
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-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

filter

Utilities module

gradients css-var

Utilities module

Примеры
<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

line-height

Utilities module

links

Utilities module

Примеры
<div class="t-blue links-no-color">
    <a href="#">link sample</a>
</div>
<div class="hover-t-orange hover-no-color">
    <a href="#">link sample (to orange)</a>
</div>
<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>
<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

object-fit

Utilities module

opacity

Utilities module

Примеры
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

position

Utilities module

rounded

Utilities module

Примеры
rounded
rounded20
rounded-circle
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 rounded-circle">rounded-circle</div>
<div class="bor1 bor-solid bor-blue rounded-circle w100px h100px">rounded-circle</div>

shadow css-var

Utilities module

Примеры
Text sample
Text sample
<div class="t120 t-bold t-shadow-var">Text sample</div>
<div class="t120 t-pink t-shadow-var" style="--t-shadow: 2px 4px 6px #A1346B">Text sample</div>
Block sample
Block sample
<div class="b-shadow-var">Block sample</div>
<div class="bg-pink100 b-shadow-var" style="--b-shadow: 2px 4px 6px #A1346B">Block sample</div>

table

Utilities module

transition css-var

Utilities module

Примеры
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>
<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

visible

Utilities module

width

Utilities module