Primer CSS Introduction and Installation - Coding

Primer CSS is a CSS framework that is built with the GitHub design system to provide support to enhance the development of websites. It is used to create the foundation of the basic style elements such as spacing, typography, and color. The systematic Primer CSS method ensures our patterns are steady and interoperable with every other. It 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 develop an attractive user interface with the help of GitHub’s design system which helps to enhance the overall user experience of the website.

Benefits of using Prime CSS:

It is used to facilitate the Utility-centric and BEM-style components, which is the basic building block for the web project.
It is used to provide the presentational UI components having the styles encapsulated in them.
It is used in different types of design layouts, flows, and wireframes, that help to make prototypes with Primer components in Figma.

There are two different ways for using Primer CSS in your project:

Installing Primer CSS via NPM: Before installing the Primer CSS, we must have installed the Node Package Manager in the system. By running the below command you can check the version of NPM:

npm -v OR npm --version

You must have the npm version 3 or above to use the components, Utilities, etc. If you have older versions of npm, then use the below command to upgrade the npm version:

npm install npm@latest -g

You can follow the below steps for Installing Primer CSS:

Step 1: You may use the below command to install the Primer CSS:

npm install @primer/css --save

This will help you to install all the required SCSS source files into the node_modules/@primer/CSS folder.

Step 2: You can make use of the import keyword inside the <style> tag in the HTML file or we can create the stylesheet that will contain the below import statement and link the stylesheet with the <link> tag in the <head> tag of the HTML file.

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

Step 3: In the last step, you can add the classes of specific components/Utilities, as given below:

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

Installing Primer CSS through the CDN Links: the other way is either by downloading the built CSS from unpkg.com and 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 1: In the below code, we will make use of the CDN link and create a primary button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <br>
        <button class="btn btn-primary"
                type="button">
            Primary
        </button>
         
    </center>
</body>
</html>

Output:

Example 2: In this example, we have created a header and text of different sizes by using the different header and typography utility classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`,initial-scale=1.0">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <style>
    body {
        margin-left:20px;
        margin-right:20px;
    }
    </style>    
</head>
 
<body>
    <center>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3><br>
         
    <u><h3>Header Utilities Class</h3></u><br>    
    <p class="h2">This is a text with class h2</p>
    <p class="h3">This is a text with class h3</p>
    <p class="h4">This is a text with class h4</p>
    <p class="h5">This is a text with class h5</p>
    <p class="h6">This is a text with class h6</p>
    </center>
</body>
</html>

Output:

Reference: https://primer.style/css/getting-started

Reffered: https://www.geeksforgeeks.org

CSS

Related
Foundation CSS JavaScript
Blaze UI Input Images
Tachyons Layout Clearfix
Tachyons Layout Debugging
Tachyons Layout Debug with a Grid

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	8