Primer CSS Prototyping

Last Updated : 26 Aug, 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.

We can use any prototyping to enhance your page, but there are some prototyping that will help you to create clickable mocks that can be shared through URLs. Prototyping will be very useful for designing and creating an interactive environment.

There are two prototypes to include the Primer CSS in your project.

Simple HTML prototype with Primer CSS: In this prototype, you can just add the CDN link to your HTML file and the work is done.
Jekyll prototyping with GitHub CSS and JavaScript: In this prototype, you can take the help of Jekyll to pull the fork from the GitHub library and use that file to enhance the development process.

Example 1: The following code demonstrates the Primer CSS prototyping by adding the link and using the required class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
<body> 
    <center> 
        <h1 class="color-fg-success">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3>       
    </center> 
</body> 
</html>

Output:

Example 2: The following code demonstrates another example of Primer CSS prototyping by adding the link and using the required class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
<body> 
    <center> 
        <h1 class="color-fg-success">GeeksforGeeks</h1> 
        <h3 class="color-bg-success-emphasis"> 
            A computer science portal for geeks 
        </h3>       
    </center> 
</body> 
</html>