Primer CSS Responsive Margins

Last Updated : 27 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

In this article, we will learn about Primer CSS Responsive Margins. Primer CSS Responsive Margins are used to support responsiveness towards screen size, which basically means that there will be different margins to an element when it renders on a small/medium/large/extra-large screens.

Responsive Margins used Class:

m[direction]-[breakpoint]-[spacer]: This class is used to provide margin in a particular direction and breakpoint.

Syntax:

<div class="m[direction]-[breakpoint]-[spacer]" >
      Content
</div>

[direction]: This value can be either;
- x: Indicates right and left margins
- y: Indicates top and bottom margins
- t: Indicates top margins
- b: Indicates bottom margins
- r: Indicates right margins
- l: Indicates left margins
[breakpoint]: This value can be used to represent
- sm: Small devices
- md: Medium devices
- lg: Large Devices
- xl: Extra Large devices
[spacer]: This value varies from 0 to 6 which indicates how much margin we want.
- 0: Provides Margin of 0px
- 1: Provides Margin of 4px
- 2: Provides Margin of 8px
- 3: Provides Margin of 16px
- 4: Provides Margin of 24px
- 5: Provides Margin of 32px
- 6: Provides Margin of 40px

Example 1: In this example, we will show different margins on small and large screens in x and y directions i.e both top and bottom.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" 
        content="width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Primer CSS Responsive Margins</h3> 
    <div class="color-bg-success " style="width: 50%;"> 
        Hi Geek! 
        <div class="mx-sm-4 my-lg-6 mx-lg-4 color-bg-warning"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we will show different margins on small and large screens in the top and bottom directions.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" 
        content="width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Primer CSS Responsive Margins</h3> 
    <div class="color-bg-success " style="width: 50%;"> 
        Hi Geek! 
        <div class="mt-sm-4 mb-lg-6  color-bg-warning"> 
            GeeksforGeeks 
        </div> 
        Bottom Margin 
    </div> 
</body> 
</html>