Primer CSS Introduction

Last Updated : 11 May, 2022

Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to 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 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 a highly reusable model.

Primer CSS facilitates the different designs to build & create an attractive user interface with the help of GitHub’s design system which helps to enhance the overall user experience of the website. There are 2 different ways the Primer CSS can be utilized in the project:

Installing Primer CSS via NPM
By implementing through the CDN Links

We will explore both the option for implementing the Primer CSS & understand it through the example.

Installing Primer CSS via NPM: Before we proceed to install the Primer CSS, we must have installed the Node Package Manager in the system. To check the version installed, run the below commands:

npm -v OR npm --version

In order to use the components, Utilities, etc, we must have the npm version 3 or above. In case if older version were installed the use the below command to upgrade the npm version:

npm install npm@latest -g

Steps for installing Primer CSS:

Step 1: Use the below command to install the Primer CSS:

npm install @primer/css --save

This will help to install all the required SCSS source files into the node_modules/@primer/css directory.

Step 2: Import the below import statement inside the <style> tag in the HTML file or we can create the stylesheet that will contain the below import statement & linked the stylesheet with the <link> tag in the <head> tag of the HTML file.

@import "node_modules/@primer/css/dist/primer.css";

Step 3: Add the classes of specific components/Utilities, as given below:

<button class="BtnGroup-item btn" type="button">Button</button>

Implementing the Primer CSS through the CDN Link: The Prime CSS can be utilized either by downloading the built CSS from unpkg.com & need to host it by ourselves or simply by including a CDN link in the HTML:

<link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />

Example: This example describes the implementation of Primer CSS by using the labels with radio buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <title>Primer CSS</title> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2>Primer CSS Example</h2> 
    <form> 
        <label for=""> 
            Choose the Programming Language with 
            the no. of questions attempted 
        </label> 
        <div class="radio-group" 
             style="margin: 1em;"> 
            <input class="radio-input" 
                   id="lang1" 
                   type="radio" 
                   name="options"> 
            <label class="radio-label" 
                   for="lang1"> Java  
                <span class="Counter mr-1  
                    color-bg-danger-emphasis  
                    color-fg-on-emphasis"> 3 
                </span>  
            </label> 
            <input class="radio-input" 
                   id="lang2" 
                   type="radio" 
                   name="options"> 
            <label class="radio-label" 
                   for="lang2"> Python  
                <span class="Counter mr-1  
                    Counter--secondary"> 5 
                </span>  
            </label> 
            <input class="radio-input"
                   id="lang3" 
                   type="radio" 
                   name="options"> 
            <label class="radio-label" 
                   for="lang3"> C++  
                <span class="Counter mr-1  
                    Counter--primary"> 8 
                </span>  
            </label> 
            <input class="radio-input"
                   id="lang4" 
                   type="radio"
                   name="options"> 
            <label class="radio-label" 
                   for="lang4"> C  
                <span class="Counter mr-1  
                    color-bg-success-emphasis  
                    color-fg-on-emphasis"> 10 
                </span>  
            </label> 
        </div> 
    </form> 
</body> 
</html>

Output:

Example 2: This example describes the implementation of Prime CSS by specifying the path in the import statement.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        @import "node_modules/@primer/css/dist/primer.css"; 
    </style> 
    <title>Primer CSS</title> 
</head> 
  
<body> 
    <div class="text-left"> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1> 
        <h3>Primer CSS Button Example</h3> 
    </div> 
    <br> 
    <div class="BtnGroup"> 
        <button class="BtnGroup-item btn"
                type="button"> 
            <svg class="octicon" 
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16" 
                 width="16" 
                 height="16"> 
             <path fill-rule="evenodd" 
                   d= 
"M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75  
8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75  
3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"> 
              </path> 
            </svg> Download Button 
        </button> 
        <button class="BtnGroup-item btn" 
                type="button" 
                aria-disabled="true"> 
            <svg class="octicon"
                viewBox="0 0 16 16" 
                xmlns="http://www.w3.org/2000/svg" 
                width="16" 
                height="16"> 
             <path fill-rule="evenodd" 
                   d="M8.22 1.754a.25.25 0 00-.44 0L1.698 
                    13.132a.25.25 0 00.22.368h12.164a.25.25 0 
                    00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 
                    2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 
                    0114.082 15H1.918a1.75 1.75 0  
                    01-1.543-2.575L6.457 1.047zM9 11a1 1 0 
                    11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 
                    00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> 
             </path> 
            </svg> Disabled Button 
        </button> 
        <button class="BtnGroup-item btn" 
                type="button"> 
            <svg class="octicon"
                 xmlns="http://www.w3.org/2000/svg" 
                 viewBox="0 0 16 16" 
                 width="16" 
                 height="16"> 
                <path fill-rule="evenodd" 
                      d= 
"M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527  
3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 
2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366  
2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 
9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981  
0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619  
1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008  
6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091  
2.187-2.345 2.637-3.023a1.619 1.619 0  
000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671  
2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"> 
                </path> 
             </svg> Visibility Button  
        </button> 
    </div> 
</body> 
</html>

Output:

Benefits of using Prime CSS:

It facilitates the Utility-centric and BEM-style components, which is the basic building block for the web project.
It provides the presentational UI components having the styles encapsulated in it.
It has different types of design layouts, flows, and wireframes, that helps to make prototypes with Primer components in Figma.

Primer CSS Animations

bijaybhaskar

Improve

Article Tags :

Primer CSS Introduction

HTML

HTML

Similar Reads

Primer CSS Utility

Primer CSS Components

Primer CSS Marketing

Thank You!

What kind of Experience do you want to share?