/
bermilion
/
core-css
Обзор
Документация
Войти
/
bermilion
/
core-css
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
258 строк
23 KB
bermilion
отказался от 1px = 1rem
18 июл 2026, 11:54
18 июл 2026, 11:54
227c17f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Core CSS</title> <link rel="stylesheet" href="../src/scss/style.scss"> </head> <body> <aside class="demo"> <div class="mobile-nav-menu"> <h1>Core CSS</h1> <button class="button"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M18.625 7.875H5.375C5.15625 7.875 5 7.71875 5 7.5V6.5C5 6.3125 5.15625 6.125 5.375 6.125H18.625C18.8125 6.125 19 6.3125 19 6.5V7.5C19 7.71875 18.8125 7.875 18.625 7.875ZM18.625 12.875H5.375C5.15625 12.875 5 12.7188 5 12.5V11.5C5 11.3125 5.15625 11.125 5.375 11.125H18.625C18.8125 11.125 19 11.3125 19 11.5V12.5C19 12.7188 18.8125 12.875 18.625 12.875ZM18.625 17.875H5.375C5.15625 17.875 5 17.7188 5 17.5V16.5C5 16.3125 5.15625 16.125 5.375 16.125H18.625C18.8125 16.125 19 16.3125 19 16.5V17.5C19 17.7188 18.8125 17.875 18.625 17.875Z" fill="currentColor"/> </svg> </button> </div> <nav> <a class="link" href="#section-1">Концепция</a> <a class="link" href="#section-2">Глобальный API</a> <a class="link" href="#section-3">Цвет</a> <a class="link" href="#section-4">Масштаб</a> <a class="link" href="#section-5">Типографика</a> <a class="link" href="#section-6">Адаптивность</a> </nav> </aside> <main class="demo"> <section id="section-1"> <h2>Концепция</h2> <p>Микромодуль — это самая малая и неделимая часть сетки интерфейса. Микромодуль в интерфейсе не изображается, это условность и абстракция.</p> <p>Микромодуль квадрат размером 8×8. Размеры остальных элементов в интерфейсе, которые задаются вручную, кратны размеру микромодуля.</p> <p>Базовый шрифт для html задан размером в 1px и приравнен к 1rem.</p> <p>Все значения полученные через token функции собираются в css-переменные.</p> </section> <section id="section-2"> <h2>Глобальный API</h2> <p>Обертка над модулями colors, scale, font-family, font-weight. Чтобы не подключать все эти модули по отдельности.</p> <h5>Доступный набор функций каждого модуля:</h5> <p> <code class="code"> <span class="code__green">token</span>.<span class="code__accent">color-base</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>: <span class="code__gray">1</span>) </code> </p> <p>Базовый цвет из <code class="code code__green">@config/colors.scss</code>. Аргументы <code class="code code__orange">$color</code> — сам цвет, <code class="code code__orange">$alpha</code> — альфа канал по умолчанию единица.</p> <p>Примеры:<br> <code class="code"><span class="code__green">token</span>.<span class="span code__accent">color-base</span>(<span class="code__green">token</span>.<span class="span code__orange">$red</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--color-red</span>)</code><br> <code class="code"><span class="code__green">token</span>.<span class="span code__accent">color-base</span>(<span class="code__green">token</span>.<span class="span code__orange">$blue</span>, <span class="code__gray">.5</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--color-blue-alpha-50</span>)</code> прозрачность 50% </p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="span code__accent">color-light-10</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>: <span class="code__gray">1</span>)</code></p> <p>Светлый оттенок цвета. Доступные уровни от 10—50. Если базовый цвет слишком светлый, будет возвращен белый цвет.</p> <p>Примеры:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-light-10</span>(<span class="code__green">token</span>.<span class="code__orange">$red</span>); -> <span class="code__orange">var</span>(<span class="code__accent">--color-red-light-10</span>)</code> на 10% ярче.<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-light-30</span>(<span class="code__green">token</span>.<span class="code__orange">$blue</span>); -> <span class="code__orange">var</span>(<span class="code__accent">--color-blue-light-30</span>)</code> на 30% ярче.<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-light-50</span>(<span class="code__green">token</span>.<span class="code__orange">$green</span>, <span class="code__gray">.8</span>); -> <span class="code__orange">var</span>(<span class="code__accent">--color-green-light-50-alpha-80</span>)</code> на 50% ярче и непрозрачностью 80%. </p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">color-dark-10</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>: <span class="code__gray">1</span>)</code></p> <p>Темный оттенок цвета. Доступные уровни от 10—50. Если базовый цвет слишком тёмный, будет возвращен чёрный цвет.</p> <p>Примеры:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-dark-10</span>(<span class="code__green">token</span>.<span class="code__orange">$red</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--color-red-dark-10</span>)</code> на 10% темнее.<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-dark-30</span>(<span class="code__green">token</span>.<span class="code__orange">$blue</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--color-blue-dark-30</span>)</code> на 30% темнее.<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">color-dark-50</span>(<span class="code__green">token</span>.<span class="code__orange">$green</span>, <span class="code__gray">.8</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--color-green-dark-50-alpha-80</span>)</code> на 50% темнее и непрозрачностью 80%. </p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">color-content</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>: <span class="code__gray">1</span>)</code></p> <p>Контрастный цвет по отношению к <code class="code code__orange">$color</code>.</p> <p>По умолчанию берутся из переменных <code class="code"><span class="code__orange">$content-dark</span>: <span class="code__accent">#333333</span>;</code> и <code class="code"><span class="code__orange">$content-light</span>: <span class="code__accent">#f7f7f7</span>;</code></p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">color-mix</span>(<span class="code__orange">$color-1</span>, <span class="code__orange">$amount-base-color</span>: <span class="code__gray">80%</span>, <span class="code__orange">$color-2</span>, <span class="code__orange">$amount-mixed-color</span>: <span class="code__gray">20%</span>)</code></p> <p>Смешивает два цвета.</p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__orange">$values</span>...)</code></p> <p>Принимает от одного до 4-х значений (только числа без единиц измерения) и возвращает соответствующие CSS-переменные (--scale-name). Значения ищутся в конфигурации масштаба <code class="code code__green">@config/_scale.scss</code>. Только числа, кратные 8.</p> <p>Пример:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">8</span>, <span class="code__gray">16</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--scale-8</span>) <span class="code__orange">var</span>(<span class="code__accent">--scale-16</span>)</code><br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">24</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--scale-24</span>)</code> </p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">font-family</span>(<span class="code__orange">$font-family</span>)</code></p> <p>Принимает ключ из <code class="code code__green">@config/_fonts.scss</code>.</p> <p>Пример:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-family</span>(<span class="code__green">token</span>.<span class="code__orange">$base-font</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-family-base-font</span>)</code> </p> <hr> <p><code class="code"><span class="code__green">token</span>.<span class="code__accent">font-waight</span>(<span class="code__orange">$waight</span>)</code></p> <p>Принимает числовое значение и возвращает соответствующую CSS-переменную. Числовое значение font-weight (100, 200, 300, 400, 500, 600, 700, 800, 900)</p> <p>Пример:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-weight</span>(<span class="code__gray">400</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-weight-regular</span>)</code><br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-weight</span>(<span class="code__gray">700</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-weight-bold</span>)</code> </p> </section> <section id="section-3"> <h2>Функции работы с цветом</h2> <p>Система цветов на базе OKLCH с автоматической генерацией оттенков.</p> <p>Светлые оттенки <code class="code"><span class="code__accent">light-10</span>..<span class="code__accent">50</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>)</code></p> <div class="color-grid"> <div class="box box_blue-light-10">light 10</div> <div class="box box_blue-light-20">light 20</div> <div class="box box_blue-light-30">light 30</div> <div class="box box_blue-light-40">light 40</div> <div class="box box_blue-light-50">light 50</div> </div> <p>Тёмные оттенки <code class="code"><span class="code__accent">dark-10</span>..<span class="code__accent">50</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>)</code></p> <div class="color-grid"> <div class="box box_blue-dark-10">dark 10</div> <div class="box box_blue-dark-20">dark 20</div> <div class="box box_blue-dark-30">dark 30</div> <div class="box box_blue-dark-40">dark 40</div> <div class="box box_blue-dark-50">dark 50</div> </div> <p>Контрастный цвет <code class="code"><span class="code__accent">content</span>(<span class="code__orange">$color</span>, <span class="code__orange">$alpha</span>)</code></p> <div class="color-grid"> <div class="box box_darkest">content</div> <div class="box box_orange">content</div> </div> <p>Смешивание цветов <code class="code"><span class="code__accent">mix</span>(<span class="code__orange">$base-color</span>, <span class="code__orange">$amount</span>, <span class="code__orange">$mixed-color</span>, <span class="code__orange">$amount</span>)</code></p> <div class="color-grid"> <div class="box box_mix-accent-80-success-20">accent-80% success-20%</div> </div> <h5>Вспомогательные функции</h5> <p><code class="code"><span class="code__accent">*</span>-<span class="code__accent">value</span>()</code> — все функции имеют аналоги с суффиксом <code class="code code__accent">-value</code> для получения цветовых значений без CSS-переменных.</p> </section> <section id="section-4"> <h2>Функции работы с масштабами</h2> <p><code class="code"><span class="code__accent">scale</span>(<span class="code__orange">$values</span>...)</code></p> <div class="scale-grid"> <div class="scale-box scale-box_64-64"><span class="scale-box__text">64x64</span></div> <div class="scale-box scale-box_48-48"><span class="scale-box__text">48x48</span></div> <div class="scale-box scale-box_24-24"><span class="scale-box__text">24x24</span></div> <div class="scale-box scale-box_16-16"><span class="scale-box__text">16x16</span></div> </div> </section> <section id="section-5"> <h2>Функции работы с типографикой</h2> <p>Система работы с шрифтами на базе CSS-переменных.</p> <p><code class="code"><span class="code__accent">font-family</span>(<span class="code__orange">$font-family</span>)</code></p> <p>Принимает ключ из <code class="code code__green">@config/_fonts.scss</code> и возвращает соответствующую CSS-переменную.</p> <p>Примеры:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-family</span>(<span class="code__green">token</span>.<span class="code__orange">$base-font</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-family-base-font</span>)</code><br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-family</span>(<span class="code__green">token</span>.<span class="code__orange">$monospace-font</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-family-monospace-font</span>)</code> </p> <hr> <p><code class="code"><span class="code__accent">font-waight</span>(<span class="code__orange">$waight</span>)</code></p> <p>Принимает числовое значение и возвращает соответствующую CSS-переменную. Числовое значение font-weight (100, 200, 300, 400, 500, 600, 700, 800, 900).</p> <p>Примеры:<br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-weight</span>(<span class="code__gray">400</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-weight-regular</span>)</code><br> <code class="code"><span class="code__green">token</span>.<span class="code__accent">font-weight</span>(<span class="code__gray">700</span>) -> <span class="code__orange">var</span>(<span class="code__accent">--font-weight-bold</span>)</code> </p> <hr> <p><code class="code"><span class="code__accent">font-family-value</span>(<span class="code__orange">$font-family</span>)</code></p> <p>Аналог <code class="code code__accent">font-family()</code>, но возвращает строковое значение шрифта без CSS-переменной.</p> <hr> <p><code class="code"><span class="code__accent">font-weight-value</span>(<span class="code__orange">$waight</span>)</code></p> <p>Аналог <code class="code code__accent">font-weight()</code>, но возвращает числовое значение без CSS-переменной.</p> </section> <section id="section-6"> <h2>Функции адаптивности</h2> <p>Система адаптивной верстки на базе медиа-запросов и миксинов для различных типов устройств.</p> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">phone</span></code></p> <p>Смартфон (максимум 767px в вертикальной и 999px в горизонтальной ориентации).</p> <div class="demo-box"> <code class="code"><span class="code__blue">@include</span> <span class="code__accent">phone</span> {<br> <span class="code__accent">font-size</span>: <span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">14</span>);<br> } </code> </div> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">tablet</span></code></p> <p>Планшет (от 768px до 1280px).</p> <div class="demo-box"> <code class="code"><span class="code__blue">@include</span> <span class="code__accent">tablet</span> {<br> <span class="code__accent">padding</span>: <span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">24</span> <span class="code__gray">48</span>);<br> } </code> </div> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">laptop</span></code></p> <p>Ноутбук (от 1366px до 1599px).</p> <div class="demo-box"> <code class="code"><span class="code__blue">@include</span> <span class="code__accent">laptop</span> {<br> <span class="code__accent">max-width</span>: <span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">1366</span>);<br> } </code> </div> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">wide</span></code></p> <p>Широкоэкранные устройства (от 1920px и выше).</p> <div class="demo-box"> <code class="code"><span class="code__blue">@include</span> <span class="code__accent">wide</span> {<br> <span class="code__accent">font-size</span>: <span class="code__green">token</span>.<span class="code__accent">scale</span>(<span class="code__gray">18</span>);<br> } </code> </div> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">mobile</span></code></p> <p>Мобильные устройства: смартфоны и планшеты (максимум 1280px).</p> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">desktop</span></code></p> <p>Настольные устройства: ноутбуки и широкоэкранники (от 1366px и выше).</p> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">no-phone</span></code></p> <p>Все устройства, кроме смартфонов (от 1000px и выше).</p> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">portrait</span></code></p> <p>Вертикальная ориентация устройства.</p> <hr> <p><code class="code"><span class="code__accent">@include</span> <span class="code__accent">landscape</span></code></p> <p>Горизонтальная ориентация устройства.</p> <hr> <h5>Пример работы функций:</h5> <div class="viewports"> <div class="viewport viewport_phone">phone</div> <div class="viewport viewport_phone-portrait">phone portrait</div> <div class="viewport viewport_phone-landscape">phone landscape</div> <div class="viewport viewport_tablet">tablet</div> <div class="viewport viewport_tablet-portrait">tablet portrait</div> <div class="viewport viewport_tablet-landscape">tablet landscape</div> <div class="viewport viewport_mobile">mobile</div> <div class="viewport viewport_laptop">laptop</div> <div class="viewport viewport_wide">wide</div> <div class="viewport viewport_desktop">desktop</div> <div class="viewport viewport_no-phone">no phone</div> </div> </section> </main> <script type="module" src="../src/js/main.js"></script> </body> </html>