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.
The Lean Markup is a way for writing HTML in a more efficient way & making use of attributes rather than creating one more element. The use of too many elements that are not necessary, can make lengthy code & readability becomes difficult, along with taking more time to load. It is mainly used to write the code in a neat & clean manner with proper indentation, along with utilizing the elements in an efficient way that helps to reduce the overall code length, which in turn improves the overall readability & performance. For instance, consider the below code snippet:
<span class="avatar">
<img src="link">
</span>Here, we have used the <span> tag with a class as "avatar", that contains the <img> tag. We can achieve the same result with the help <img> tag only, i.e. by declaring the class & image source inside the <img> tag, which can help to reduce the overall length of the code & also makes the efficient code, along with enhancing the readability of the code. The below code is much better than the above code snippet.
<img class="avatar" src="Link">
We will understand both concepts by implementing them through the example.
Example 1: This example describes the Primer CSS Lean Markup by implementing the first code snippet.
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 Lean Markup</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
span {
margin-left: 190px;
width: 280px;
height: 250px;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
Primer CSS Lean Markup
</h3>
<span class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="gfgImg">
</span>
</body>
</html>
Output:
Example 2: This example describes the Primer CSS Lean Markup by utilizing the elements in an efficient way, so that code becomes cleaner & enhances the performance.
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 Lean Markup</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
img {
margin-left: 200px;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
Primer CSS Lean Markup
</h3>
<img class="avatar"
alt="gfgImg"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png">
</body>
</html>
Output:
Reference: https://primer.style/css/principles/html#lean-markup
Similar Reads
Primer CSS Primary Link 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Marketing Links 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Markdown Primer CSS is a free open-source CSS framework built with the GitHub design system to support 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 intero
3 min read
Primer CSS Marketing Layout 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. It is highly reusable and flexible. It is created with GitHub’s design system. Primer CSS Layout is used to change the document lay
3 min read
Primer CSS Header 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 stead
3 min read
Primer CSS Margin Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.In this article, we'll s
3 min read
Primer CSS Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS Layout Floats 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Layout Display 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Header-Item 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read