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 DiffstatExample 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>
Output:
Primer CSS Diffstat
Reference: https://primer.style/css/components/labels#diffstat
Similar Reads
Primer CSS Layout Display 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
2 min read
Primer CSS Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS Layout Floats 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
2 min read
Primer CSS Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS Labels Default 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Alerts Default 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
2 min read