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 that 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.
In this article, we will learn Primer CSS HTML principles.
General Formatting:
- Use two-space indentation.
- Never use multiple <br> tags and paragraphs of text are placed in HTML <p> tags.
- Use <ol>, <ul>, <dl> tags for list items instead of using <div> or <p> tags.
- The radio and checkboxes should have a <label> tag.
- Always put quotes around attributes for readability.
- Avoid writing closing tag comments.
- Avoid trailing slashes in self-closing elements <br>, <hr>, <img>, and <input>.
Boolean attributes:
- Don’t set attributes that don’t require a value to be set, like checked
Lean markup:
Forms:
- Apply radio or checkbox lists instead of select menus.
- No need to use for attribute, rather wrap radio and checkbox inputs and their text in <label>.
- Use primary buttons for the type=”submit” button and regular buttons for type=”button”.
Tables:
Syntax:
<element class="class-name" >
...
</element>Example 1: The following code demonstrates some of the HTML general formatting principles.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS HTML</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h2> Primer CSS HTML</h2>
<p class="line-note m-0">
This is <b>paragraph</b>
with no multiple br tags.
special text paragraph
</p>
<b>No div tags are used for list items</b>
<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>
<b> Checked input</b>
<input type="checkbox" value="1"><br />
<b>Select input options</b>
<select>
<option value="1" selected>
first option
</option>
<option value="2">
second option
</option>
</select>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates some of the HTML form elements following the principles.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS HTML</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h2> Primer CSS HTML</h2>
<b>
Lean on radio and checkbox
instead of select menus
</b>
<form>
<input type="radio" id="Netflix" name="brand" value="Netflix">
<label for="Netflix">Netflix</label>
<input type="radio" id="amazon" name="brand" value="Amazon">
<label for="Amazon">Amazon</label>
<br>
<input type="checkbox" name="check" id="GFG" value="1" checked>
Checked by default
<br>
<input type="checkbox" name="check" value="2">
Not checked by default
</form>
</center>
</body>
</html>
|
Output: