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 formatting provides various ways to write 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 of the website.
List of instructions for formatting:
- We should use hex color codes #000 instead of using RGB in raw CSS.
- We should use // for comment blocks instead of using /* */
- We should avoid specifying units for zero values like “margin: 0px”;
- We must explicitly set all the available values.
Example 1: In the below code, we will use “margin:0”; instead of using “margin:0px”;
<!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>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</body>
</html>
|
Output:
Example 2: In the below code, we will use hex color code instead of rgba().
<!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>
<style>
h1{
color:#228B22;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</body>
</html>
|
Output:
Reference: https://primer.style/css/principles/scss#formatting