Primer CSS Diffstat

Last Updated : 12 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 Diffstat along with examples.

The Diffstat can be used to display the total number of counts of addition or deletion a particular diff contains. It has 5 blocks rows that have a color like red for deletion and green for addition.

Primer CSS Diffstat Class:

diffstat: This class is used to create an element of diffstat types.
diffstat-block-added: This class is used to create a green-colored box to indicate the addition of any line.
diffstat-block-deleted: This class is used to create a red-colored box to indicate the deletion of any line.
diffstat-block-neutral: This class is used to create a white-colored box to indicate that the line has no changes.

Syntax:

<div class="diffstat tooltipped tooltipped-s" 
       aria-label="some changes made">
          .......
  <span class="diffstat-block-added></span>
</div>

Example 1: This example illustrates the implementation of Primer CSS diffstat.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Diffstat </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks  
        </h1> 
        <h3> Primer CSS Diffstat </h3> 
            <span class="diffstat tooltipped tooltipped-w" 
                  aria-label="11 changes: 8 additions & 3 deletions">11 
                <span class="diffstat-block-added"></span> 
                <span class="diffstat-block-deleted"></span> 
                <span class="diffstat-block-deleted"></span> 
                <span class="diffstat-block-neutral"></span> 
                <span class="diffstat-block-neutral"></span> 
            </span> 
    </center> 
</body> 
</html>

Output:

Primer CSS Diffstat

Example 2: The below example illustrates the use of Primer CSS diffstat using color utilities.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Diffstat </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks  
        </h1> 
        <h3> 
            Primer CSS Diffstat  
        </h3> 
        <div class="diffstat">  
            <span class="color-fg-success">8</span> 
            <span class="color-fg-danger">−3</span>  
            <span class="tooltipped tooltipped-s " 
                  aria-label="11 lines altered"> 
                  <span class="diffstat-block-added"></span>  
                  <span class="diffstat-block-added"></span> 
                  <span class="diffstat-block-deleted"></span> 
                  <span class="diffstat-block-deleted"></span>  
                  <span class="diffstat-block-neutral"></span>  
              </span> 
        </div> 
    </center> 
</body> 
</html>