gitmyhub

css

SCSS ★ 13k updated 1d ago

Primer is GitHub's design system. This is the CSS implementation

GitHub's official CSS design system available as an npm package for anyone to use in their own projects. Currently in maintenance-only mode, no new features are being added.

SCSSCSSnpmsetup: easycomplexity 2/5

Primer CSS is the CSS stylesheet implementation of GitHub's Primer design system. GitHub uses Primer to build the visual appearance of GitHub.com itself, and this package makes those same styles available for anyone to use in their own projects. It is written in SCSS, which is a version of CSS that adds variables, nesting, and other features before compiling down to regular CSS that browsers understand.

The README includes an important notice: this project is currently in what GitHub calls KTLO mode, meaning Keep the Lights On. In practice, this means the project receives only minimal maintenance to stay functional, with no active feature development. Users who need complete, fully styled components including both the HTML markup and the CSS are directed to two other projects: primer/react (a React component library) and primer/view_components (a Ruby on Rails component library). Both of those are under active development and include more complete patterns.

For projects already using Primer CSS, the package is installed via npm and imported into your SCSS files with a single import statement. You can import the entire package at once or bring in smaller sub-modules for core styles, product styles, or marketing styles separately, which allows you to include only what a specific page needs.

Full documentation including all available utility classes, the design theme, and usage guidance lives at primer.style/css. The package is released under the MIT license and was created by GitHub.

Where it fits