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.
Primer CSS Components:
- Alerts: They are used to signify an important message to the user. It alerts the user related to some pending items or new features on the web page. Users are informed beforehand through alerts before they interact with the web page.
- Avatars: Avatars are a much simpler way to add profile pictures because it comes with a lot of in-built classes which are readily available to customize an image meant for an avatar.
- Blankslate: It is used as a placeholder when there is a lack of content and notifies the user about the cause. Blankslates are used for the whole page or for a single section. When a user is not allowed in some section. the blankslates help to acknowledge the user about the cause and the action to take.
- Box overlay: It is used to create the overlay effect in primer CSS using Box–overlay class along with <details> and <details-dialog> elements.
- Box: It can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
- Branch name: It is used to provide a background color to any text/link. It is mainly used to provide branch names to an independent branch of the repository/project.
- Breadcrumbs: Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy
- Buttons: Buttons help us to initiate an action such as submitting a form, navigating to another link, etc.
- Dropdown: Dropdowns are lightweight menus that provide navigation and actions. It is useful in the case when the data need to be organized & displayed with a clickable dropdown menu.
- Forms: Forms provide different components for inputs such as text, checkbox, radio, selects, and textarea.
- Header: The header component as the name suggests helps us to create a header for our website.
- Labels: They provide some metadata to the user or indicate the status of an item.
- Layout: It is used to change the document layout with the help of classes that provide inline, block, table, etc. which can customize the document.
- Links: Links are used to decorate links on the webpage. Primer CSS has lots of customizations for the links.
- Loaders: The Loaders inform users that action is still in progress and might take a while to complete. This is a great way to inform users that the application is not in halt mode and is working in the background.
- Markdown: It is a lightweight markup language for creating formatted text.
- Navigation: It provides the utility to create a navigation bar or a navigation menu of a webpage which is one of the most important components of a website. It let us create navbars or nav menus of different designs and layouts. It allows us to create more flexible and customizable navigation components.
- Pagination: It is used to create a set of pages and we can jump to any page if we want.
- Popover: Popovers are used to grab users’ attention to some specific elements of the website to suggest some tips or guide them through a new experience.
- Progress: Progress Bar is a very useful component in displaying the progress of a user in completing a particular task like creating an account, reaching a particular goal, or downloading or uploading progress. It is used extensively in modern-day websites.
- Select menu: It is used to make different types of menus. It also provides us with a lot of functionalities like adjusting the layout, selecting the menu, adding a header and footer, adding a divider, using a filter, etc.
- Subhead: It is a container that has a light gray bottom border. We can use Subhead-heading class to create the heading of Subhead.
- Timeline: It is used in several cases. Like in GitHub, it is used in the issues section where one user asks solution to a problem and another user helps him to solve it and the whole thing is depicted using a timeline.
- Toasts: It is a kind of alert message or push notification, generally used to notify or display short information or time-sensitive feedback to the users.
- Tooltips: They are used to provide interactive textual hints to the user about the element when the mouse pointer moves over.
- Truncate: It is used to shorten the text when it reaches a larger length than required.
Note: Please refer to the above links or references for understanding the respective component followed by code examples. Some sample examples are given below.
Example 1: The following code demonstrates the use of Primer CSS alert, avatar and blankslate components.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
<style>
body {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h2> Primer CSS</h2>
<h3>Alert component</h3>
</br>
<div>
<div class="flash flash-error">
This is error flash.
</div>
<br />
<div class="flash flash-success">
This is success flash.
</div>
</div>
<h3> Avatar component</h3>
</br>
<div>
<img class="avatar avatar-7 mr-2" src=
</div>
</br>
<h3> Blankslate component</h3>
<div>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
"OK" action button
</button>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the use of some other Primer CSS components like Breadcrumbs and Branch name.
HTML
<!DOCTYPE html> <html>
<head>
<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 components</h2>
<h3>Primer CSS Branch Name</h3>
<a href="#" class="branch-name">
Master Branch
</a>
<a href="#" class="branch-name">
Sub Branch
</a>
</br></br>
<h3>Primer CSS Breadcrumb</h3>
<div aria-label="Breadcrumb">
<ol>
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">GFG tutorials</a>
</li>
<li class="breadcrumb-item breadcrumb-item-selected">
<a href="#" aria-current="page">Articles</a>
</li>
</ol>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components