Using Primer CSS – A Simple and Transparent CSS Library for Web Development

Last Updated : 06 Jun, 2023

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to-use set of styles for web development.

Obvious and transparent: That means the code is understandable for all coders or all beginners. When code is obvious and transparent, it means that it is easy to understand, maintain, and modify. It is clear and concise, and there are no hidden complexities or surprises that might cause confusion or errors. Obvious and transparent code is also easy to read and follow, and it doesn’t require a lot of mental effort to understand what it is doing. For writing understandable code, we will be learning some principles that are going to make our code more obvious and transparent.

They are the following:

Use a meaningful class or id name that describes the visual style applied. Primer CSS provides an intuitive set of class names.
Use comments to explain your code. Comments can help you remember what your code is doing and help others understand your code.
Avoid unnecessarily complex writing code. If there is a simpler way to do something, use it.
The class names are easy to understand and remember, making it easy for developers to use them in their code.
Primer CSS provides styles that can be applied to any HTML element without affecting its layout or functionality.
The styles provided by Primer CSS have a minimal impact on the underlying HTML structure of the page, making it easy for developers to apply them without worrying about how they will affect the page’s structure or behavior.

Some classes that are used in this article:

.bg-white: This class sets the background color of an element to white.
.text-black: This class sets the text color of an element to black.
.border: This class sets a border around an element with a width of 1 pixel.
.rounded: This class rounds the corners of an element.
.p-4: This class sets the padding of an element to 4 pixels.
.m-4: This class sets the margin of an element to 4 pixels.

Syntax:

<div class="bg-white">
      ...
</div>

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS</title> 
  
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="ml-6"> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Primer CSS Obvious and transparent</h3> 
        <br /> 
    </div> 
  
    <div class="bg-white text-black  
                border rounded p-4 m-4"> 
        This is a sample text with  
        Primer CSS styles applied. 
    </div> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="ml-6"> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Primer CSS Obvious and transparent</h3> 
        <br /> 
    </div> 
  
    <button class="color-bg-sponsors-emphasis  
                   text-white border rounded p-2 m-6"> 
        Click me! 
    </button> 
</body> 
  
</html>