Primer CSS General Formatting

Last Updated : 18 Jun, 2022

Primer CSS is a free open-source CSS framework that is built upon a 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 General formatting provides the various ways to write the well-formatted code by using the proper elements with attributes, that enhance the overall readability of the code, along with improving the user experience that helps to enhance the interactivity in the website.

List of instruction for General formatting:

The first one is to use soft tabs with a two-space indent. Spaces are the only way to guarantee code renders the same in any person’s environment.
You should use <p> element for writing paragraph and avoid using <br> element multiple times.
Items in list form should always be in <ul>, <ol>, or <dl> rather than using a set of <div> or <p>.
Make use of the <label> tag for writing any kind of text present in the form.
Always make use of quotes around attributes for readability.
Avoid writing closing tag comments, like <!– /.element –> because this will add to page load time plus, most editors have indentation guides and open-close tag highlighting.
Avoid trailing slashes in self-closing elements. Like <br>, <hr>, <img>, and <input>.
You can avoid writing tab indexes.

Example 1: In the below example, we will see the proper use of the <p> tag with attributes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <title>Primer CSS</title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success text-center"> 
        GeeksforGeeks 
    </h1> 
    <h2 class="text-center"> 
        Primer CSS General formatting 
    </h2> 
    <p class="line-note m-3" data-attribute="106"> 
        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.  
    </p> 
  
</body> 
</html>

Output:

Example 2: This example describes the general formatting of the elements with attributes in Primer CSS.

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 class="color-fg-success text-center"> 
        GeeksforGeeks</h1> 
    <h2 class="text-center"> 
        Primer CSS General formatting</h2> 
    <p class="p-2 m-3 text-light f3-light"> 
        In General formating, use paragraphs of text 
        that must be placed in a <p>tag.  
        Every form input that has text, must be  
        attached with <label> tag, especially 
        when radio or checkbox elements are used.  
        In order to listing the items, then use  
        the <ol>, <ul>, <dl>,  
        in place of using the <div> or <p>. 
    </p> 
  
</body> 
</html>