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

10 лучших проектов для начинающих по отработке навыков HTML и 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 пикселя отступа будут добавлены к верхней и нижней сторонам контейнера.
Читайте также:  Как создать линейную диаграмму на JavaScript?

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

Выход:

Читайте также:  7 лучших фреймворков и библиотек JavaScript для веб-разработчиков

В приведенном ниже примере показано использование расширенной шкалы

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector