Open In App

Primer CSS Breakpoints

Improve
Improve
Like Article
Like
Save
Share
Report

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 colour. 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 Breaks at
 
Small sm 544px
Medium  md 768px
Large lg 1012px
Extra-large  xl 1280px

The * represents the grid-based layout system, which is divided into 12 grids into rows and columns.

Syntax:

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

Example 1: In the below example, we have created a responsive web page in which while shrinking the page whole element will change its position to look good.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Breakpoints</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <style>
        div {
            margin-left: 15px;
        }
        #gfg {
            background-color: green;
            color: lightgreen;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <center>
        <div class="m-4">
            <h1 class="color-fg-success"> GeeksforGeeks </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">
                GeeksforGeeks
            </div>
            <div class="col-sm-3 col-md-4 col-lg-2 
                float-left p-2 border" id="gfg">
                GeeksforGeeks
            </div>
            <div class="col-sm-3 col-md-4 col-lg-2 
                float-left p-2 border" id="gfg">
                GeeksforGeeks
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: In the below example, we have created a responsive web page in which while shrinking the page whole element will change its position to look good.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Breakpoints</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <style>
        #part {
            background-color: green;
            color: lightgreen
        }
    </style>
</head>
<body style="background-color:black; 
    color:white; text-align:center;">
    <div class="m-4">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer 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">
            GeeksforGeeks
        </div>
        <div class="col-sm-6 col-md-2 col-lg-3 
            float-left p-2 border" id="part">
            A computer science portal for geeks
        </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">
            Java is an object-oriented programming language.
        </div>
    </div>
</body>
</html>


Output: 

 

Reference: https://primer.style/css/support/breakpoints



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