Расширенная шкала интервалов Primer CSS

Primer CSS Spacing Scale — это указанный диапазон значений для указания количества утилит, таких как поля, отступы и т. д. Primer CSS использует шкалу интервалов с основанием 8, которая очень гибкая, поскольку позволяет нам умножать или делить восемь столько раз, сколько мы хотим, и при этом получать целые целые числа.

Расширенная шкала интервалов добавляет шесть дополнительных параметров к существующей шкале интервалов. Это означает, что шкала, которая имела диапазон от 0 до 6, теперь увеличена до 7–12. Но этот расширенный диапазон не работает для каждого класса полезности во всех направлениях. Наиболее эффективное использование расширенного класса — это поля и отступы. Расширенный диапазон, т. е. 7-12, не работает по оси X, но работает отдельно с левой и правой стороны для полей и отступов. Но для поля мы не можем использовать этот диапазон 7-12 для всей оси X ни вместе, ни по отдельности. В отличие от Basic Scaling Scale в расширенной части значение увеличивается на 16px вместо 8px.

Все переменные и значения расширенной шкалы интервалов:

Переменная	Шкала	Ценность
$спейсер-7	7	48 пикселей
$спейсер-8	8	64px
$спейсер-9	9	80 пикселей
$спейсер-10	10	96 пикселей
$спейсер-11	11	112 пикселей
$спейсер-12	12	128 пикселей

Для этого нет абсолютно используемых классов, но это используется в различных служебных классах.

Необходимое количество полей: например, my-5 означает, что поля по 32 пикселя будут добавлены к левой и правой сторонам контейнера.
Необходимое количество отступов: например, py-5 означает, что 32 пикселя отступа будут добавлены к верхней и нижней сторонам контейнера.

Пример 1: В приведенном ниже примере показано использование расширенной шкалы интервалов для указания отступов с двух сторон контейнера. Мы использовали классы pt-8 и pl-8, которые задают отступ в 64 пикселя в верхней и левой части контейнера div.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0">



    <link href=

"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"

         rel="stylesheet" />

    <title>Primer CSS Extended Spacing Scale</title>

</head>

<body>

    <div class="m-4">

        <h1 class="color-fg-success"> GeeksforGeeks </h1>

        <h3>Primer CSS Extended Spacing Scale</h3>

        <br/>

    </div>

    <div class="pt-8 pl-8 color-bg-open-emphasis

                d-inline-block m-4">

        <div class="color-bg-subtle p-1">GeeksforGeeks</div>

    </div>

</body>

</html>

Выход:

Пример 2: В приведенном ниже примере показано использование расширенной шкалы интервалов для указания поля с двух сторон контейнера. Мы использовали класс my-11, который определяет отступы в 112 пикселей сверху и снизу контейнера div.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content=

"width=device-width, initial-scale=1.0">



    <link href=

"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"

          rel="stylesheet" />

    <title>Primer CSS Extended Spacing Scale</title>

    <style>

       body

       {

         margin-left:10px;

         margin-right:10px;

       }

    </style>

</head>

<body>

    <div class="m-4">

        <h1 class="color-fg-success"> GeeksforGeeks </h1>

        <h3>Primer CSS Extended Spacing Scale</h3>

        <br/>

    </div>

    <div class="my-11 color-bg-open-emphasis

                     d-flex flex-column p-4">

        <div class="color-bg-subtle p-1">GeeksforGeeks</div>

    </div>

    <div class="m-4 color-bg-open-emphasis

                    d-flex flex-column p-4">

        <div class="color-bg-subtle p-1">GeeksforGeeks</div>

    </div>

</body>

</html>

Выход:

Читайте также: Pandas Check Column Type