Open In App

Primer CSS Responsive Padding

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture inform its CSS approach. It is extremely reusable and adaptable. It was created using the GitHub design system.

Padding in CSS is a way to add space around an element’s inner contents, within any border which encloses it. In Primer CSS the global spacing scale is used to define how much padding will be added, which ensures that the horizontal and vertical padding is consistent. By using this utility, we can make different layouts using the same styles because it helps us to reduce the amount of custom CSS that can have the same characteristics. 

Responsive Padding is an attribute that helps us to adjust all the padding utilities at specific breakpoints which helps us to make it responsive to different screen sizes. Each padding utility given adds padding to that specific breakpoint and sizes above it.

Responsive Padding used Class:

  • p-[direction]-[breakpoint]-[spacer]: Here direction refers to the axis in which the padding will be applied, the breakpoint from which the padding will be added. The spacer refers to the value from the Primer’s global spacing scale. 
    • Direction can have values x/y.
    • Breakpoint can have sm/md/lg values.
    • Spacer can have 0-6 values.

Syntax:

<div class="px-sm-2 px-md-4">
      ...
</div>

Example 1: In the below given example, the padding has been increased in the x-axis when the screen size is reduced by using the responsive padding classes.

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 Responsive Padding</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
          
        <h3>Primer CSS Responsive Padding</h3>
        <br />
    </div>
  
    <div class="px-sm-6 px-md-4 px-lg-2 
        color-bg-open-emphasis d-inline-block m-3">
        <div class="color-bg-inset color-fg-open p-1">
            Hello Geeks my Padding changes 
            when my size decreses!!
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the below given example, the padding will decrease on the y-axis when the screen size is reduced by using the responsive padding classes.

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 Responsive Padding</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success">
            GeeksforGeeks 
        </h1>
          
        <h3>Primer CSS Responsive Padding</h3>
        <br />
    </div>
  
    <div class="py-sm-2 py-md-4 py-lg-6 
        color-bg-open-emphasis d-inline-block m-3">
        <div class="color-bg-inset color-fg-open p-1">
            Hello Geeks my Padding changes 
            when my size decreses!!
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/utilities/padding#responsive-padding



Last Updated : 11 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads