Primer CSS Introduction Last Updated : 11 May, 2022 Comments Improve Suggest changes Like Article Like Report 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 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 facilitates the different designs to build & create an attractive user interface with the help of GitHub’s design system which helps to enhance the overall user experience of the website. There are 2 different ways the Primer CSS can be utilized in the project: Installing Primer CSS via NPMBy implementing through the CDN LinksWe will explore both the option for implementing the Primer CSS & understand it through the example. Installing Primer CSS via NPM: Before we proceed to install the Primer CSS, we must have installed the Node Package Manager in the system. To check the version installed, run the below commands: npm -v OR npm --versionIn order to use the components, Utilities, etc, we must have the npm version 3 or above. In case if older version were installed the use the below command to upgrade the npm version: npm install npm@latest -gSteps for installing Primer CSS: Step 1: Use the below command to install the Primer CSS: npm install @primer/css --saveThis will help to install all the required SCSS source files into the node_modules/@primer/css directory. Step 2: Import the below import statement inside the <style> tag in the HTML file or we can create the stylesheet that will contain the below import statement & linked the stylesheet with the <link> tag in the <head> tag of the HTML file. @import "node_modules/@primer/css/dist/primer.css";Step 3: Add the classes of specific components/Utilities, as given below: <button class="BtnGroup-item btn" type="button">Button</button>Implementing the Primer CSS through the CDN Link: The Prime CSS can be utilized either by downloading the built CSS from unpkg.com & need to host it by ourselves or simply by including a CDN link in the HTML: <link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />Example: This example describes the implementation of Primer CSS by using the labels with radio buttons. 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 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Example</h2> <form> <label for=""> Choose the Programming Language with the no. of questions attempted </label> <div class="radio-group" style="margin: 1em;"> <input class="radio-input" id="lang1" type="radio" name="options"> <label class="radio-label" for="lang1"> Java <span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis"> 3 </span> </label> <input class="radio-input" id="lang2" type="radio" name="options"> <label class="radio-label" for="lang2"> Python <span class="Counter mr-1 Counter--secondary"> 5 </span> </label> <input class="radio-input" id="lang3" type="radio" name="options"> <label class="radio-label" for="lang3"> C++ <span class="Counter mr-1 Counter--primary"> 8 </span> </label> <input class="radio-input" id="lang4" type="radio" name="options"> <label class="radio-label" for="lang4"> C <span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis"> 10 </span> </label> </div> </form> </body> </html> Output: Example 2: This example describes the implementation of Prime CSS by specifying the path in the import statement. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import "node_modules/@primer/css/dist/primer.css"; </style> <title>Primer CSS</title> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Button Example</h3> </div> <br> <div class="BtnGroup"> <button class="BtnGroup-item btn" type="button"> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d= "M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"> </path> </svg> Download Button </button> <button class="BtnGroup-item btn" type="button" aria-disabled="true"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> </path> </svg> Disabled Button </button> <button class="BtnGroup-item btn" type="button"> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d= "M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"> </path> </svg> Visibility Button </button> </div> </body> </html> Output: Benefits of using Prime CSS: It facilitates the Utility-centric and BEM-style components, which is the basic building block for the web project.It provides the presentational UI components having the styles encapsulated in it.It has different types of design layouts, flows, and wireframes, that helps to make prototypes with Primer components in Figma. Comment More infoAdvertise with us Next Article Primer CSS Animations B bijaybhaskar Follow Improve Article Tags : Web Technologies CSS Similar Reads Primer CSS 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 Introduction 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 our patterns are ste 4 min read Primer CSS UtilityPrimer CSS AnimationsPrimer 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 4 min read Primer CSS BordersPrimer 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 Borders is a utility class that applies b 3 min read Primer CSS Box shadowPrimer 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 4 min read Primer CSS ColorsPrimer 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. It is highly reusable and flexible. I 7 min read Primer CSS DetailsPrimer 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 2 min read Primer CSS FlexboxPrimer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make 6 min read Primer CSS GridPrimer 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 ar 4 min read Primer CSS LayoutPrimer 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 MarginPrimer 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 PaddingPadding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be 3 min read Primer CSS TypographyPrimer 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 5 min read Primer CSS ComponentsPrimer CSS AlertsPrimer 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.Alerts are used to signify an important message to th 3 min read Primer CSS AutocompletePrimer CSS is a free open-source CSS framework that's created upon systems that make the insights of the essential style elements like spacing, typography, and color. This methodical system makes sure its patterns are steady and interoperable with every other. It's largely reusable and adaptable.  I 3 min read Primer CSS AvatarsPrimer CSS is a free open-source CSS framework that's built upon systems that make the inspiration of the essential style elements like spacing, typography, and color. This systematic method makes sure its patterns are steady and interoperable with every other. it's highly reusable and versatile.  I 4 min read Primer CSS BlankslatePrimer 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 Blankslate is used as a placeholder when 5 min read Primer CSS Box OverlayPrimer 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 Branch namePrimer 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 BreadcrumbsPrimer 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 offers us so many components, and Breadcru 2 min read Primer CSS ButtonsPrimer 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 DropdownPrimer 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.Dropdowns are lightweigh 4 min read Primer CSS FormsPrimer 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 Forms provide different components for in 6 min read Primer CSS HeaderPrimer 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 LabelsPrimer 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 3 min read Primer CSS LinksPrimer 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 colour. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Links are used to decorate links in the 3 min read Primer CSS LoadersPrimer 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 MarkdownPrimer 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 NavigationPrimer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired b 6 min read Primer CSS PaginationPrimer 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 PopoverPrimer 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 5 min read Primer CSS ProgressPrimer CSS is a free open-source CSS framework that is built upon 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 our patterns are ste 4 min read Primer CSS Select menuPrimer CSS is a free open-source CSS framework built on principles that establish the foundation for basic design elements including spacing, typeface, and color. Our patterns will be consistent and compatible as a result of this method. Its CSS approach is influenced by object-oriented CSS concepts 4 min read Primer CSS SubheadPrimer 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 TimelinePrimer CSS is a free open-source CSS framework that is built upon 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 our patterns are ste 7 min read Primer CSS ToastsPrimer 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 3 min read Primer CSS TruncatePrimer CSS is a CSS framework that comes with pre-styled components and a design language with spacing, typography, and Theming that helps in building a website effectively. This systematic method makes sure our patterns are steady and interoperable with every other. It is created with GitHub’s desi 2 min read Primer CSS MarketingPrimer CSS Marketing ButtonsPrimer 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.Buttons are used to define an action that can be perf 2 min read Primer CSS Marketing FiltersPrimer 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.Filters are used to change the overall background or 2 min read Primer CSS Marketing LinksPrimer 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 TypographyTypography is a feature of Primer for styling and formatting the text content. It is used to create headings, subheadings, paragraphs, pull quotes, add more design-oriented font styles, and much more. It's responsive, but on a smaller scale, and the headlines are set in the marketing typeface.Primer 3 min read Like