Primer CSS Breakpoint Variables

Last Updated : 29 Nov, 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.

Breakpoints are based on screen widths where our content starts to break and breakpoints may change as we move more of the product into responsive layouts. The specific breakpoints can be utilized to implement the particular responsive style. It is mainly used to change the size of containers according to the screen size and different breakpoints. Abbreviations are used to keep the class names concise and the abbreviations are used consistently across responsive styles.

The Components of Breakpoints:

Breakpoint and up: Breakpoint and up are used with the min-width which means if you assign any breakpoint in your web page and if you cross that breakpoint then your UI will change according to your specification. In simple words, the CSS property will change when you cross the breakpoint.
Breakpoint variables: Values are defined as variables and then you can put them into a Sass map that generates the media query mixin.
Media query mixins: When you want to change CSS properties at a particular breakpoint then you can use media query mixins and the media query mixin works by passing in a breakpoint value, such as breakpoint(md).
Responsive variants: This is a variable mapping of breakpoints to classname variants.

Primer CSS Breakpoints Responsive Classes:

col-*: This class is used to specify the number of columns that the specific container will occupy.
col-sm-*: This class is used to specify the number of columns that the specific container will occupy when the minimum width of the screen is 544px.
col-md-*: This class is used to specify the number of columns that the specific container will occupy when the minimum width of the screen is 768px.
col-lg-*: This class is used to specify the number of columns that the specific container will occupy when the minimum width of the screen is 1004px.
col-xl-*: This class is used to specify the number of columns that the specific container will occupy when the minimum width of the screen is 1280px.

Breakpoint	Syntax	Break at
Small	sm	544px
Medium	md	768px
Large	lg	1012px
Extra-large	xl	1280px

Syntax:

<div class="container-lg clearfix">
   <div class="col-sm-6 col-md-3 col-lg-2">
      ...
      ...
   </div>
</div>

Example 1: In the below model, we have made a responsive web page in which while contracting the page entire component will change its situation to look great.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS Breakpoints</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <style>
        {
            background-color: blue;
            color: lightblue
        }
    </style>
</head>
 
<body style="background-color:orange;
        color:white; text-align:center;">
    <div class="m-4">
        <h1 class="color-fg-success"> 
          Break point variables </h1>
        <h3>CSS Breakpoints</h3>
        <br />
    </div>
    <div class="container-lg clearfix">
        <div class="col-sm-6 col-md-2 col-lg-3
         float-left p-2 border" id="part">
            Breakpoints
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3
         float-left p-2 border" id="part">
            A computer graphics for variables
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3
        float-left p-2 border" id="part">
            Operating system
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3
          float-left p-2 border" id="part">
            An operating system acts as an intermediary 
              between the user of a computer and computer hardware.
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3
       float-left p-2 border" id="part">
            Java
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3
           float-left p-2 border" id="part">
            python is very easy and understand 
              programming language
        </div>
    </div>
</body>
 
</html>

Output:

Example 2: In the below model, we have made a responsive site page in what while contracting the page entire component will change its situation to look great.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS Breakpoints</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <style>
        div {
            margin-left: 20px;
        }
 
        #gfg {
            background-color: lightblue;
            color: orange;
            width: 150px;
            height: 75px;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="m-4">
            <h1 class="color-fg-success">
              Breakpoints variables </h1>
            <h3>Primer CSS | Breakpoint</h3>
        </div>
        <div class="container-lg clearfix">
            <div class="col-sm-3 col-md-4 col-lg-2
               float-left p-2 border" id="gfg">
                CSS Breakpoints
            </div>
            <div class="col-sm-3 col-md-4 col-lg-2
            float-left p-2 border" id="gfg">
                CSS Breakpoints
            </div>
            <div class="col-sm-3 col-md-4 col-lg-2
           float-left p-2 border" id="gfg">
                CSS Breakpoints
            </div>
        </div>
    </center>
</body>
 
</html>