css README

The project's README from github.com/primer/css. As one markdown file: README.md.

Primer CSS

The CSS implementation of GitHub's Primer Design System

npm package build status contributors graph last commit license

:warning: This project is in KTLO mode! Use existing utility classes from this project where needed. For more complete patterns that include styling and markup, please use primer/react or, if necessary, primer/view_components.

Documentation

Our documentation site lives at primer.style/css. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

Install

This repository is distributed with npm. After installing npm, you can install @primer/css with this command:

npm install --save @primer/css

Usage

The included source files are written in Sass using SCSS syntax. Once installed, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:

@import "@primer/css/index.scss";

You can import individual Primer modules directly from the @primer/css package:

@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";

Development

See DEVELOP.md for development docs.

Releasing (for GitHub staff)

You can find docs about our release process in RELEASING.md.

License

MIT © GitHub

css (primer/css)

Searching Database…

13K ·GitHub
Css
What is this?Primer CSS is the stylesheet implementation of GitHub's design system - the open-source @primer/css package behind the look of github.com.
So is it a CSS framework I pull into my own project, or something GitHub-internal?It's a CSS framework for any web project: Sass source in SCSS syntax that you install from npm and import through your own build, not a GitHub-only tool.
How do I add it to a project?Install npm, run npm install @primer/css, then add the package's node_modules folder to your Sass include paths. The full docs live at primer.style/css.
What does my build need in place for it to work?Node and npm (the package targets Node 16+) plus a Sass compiler in your build chain, since Primer ships as SCSS source rather than plain CSS.
Is it still the recommended way to build GitHub-style UI, or has it moved on?It's in KTLO (keep-the-lights-on) mode: maintenance only. For complete patterns with styling and markup, use primer/react or primer/view_components; existing utility classes remain fine to use.
Can I use it in commercial projects?Yes - it's MIT licensed by GitHub, so commercial use is no problem.
How established is this project?Very - GitHub has developed Primer in the open since March 2015 and the repo counts around 13,000 stars. It's the design system GitHub itself runs on.
Does this repository include JavaScript components too?No - it's the CSS layer only: Sass source with no runtime dependencies. Markup-complete and interactive patterns live in the sibling Primer packages.
What are similar projects?mdb-ui-kit, daisyui, NES.css, yeti, weui, blueprint, tachyons, bootstrap
Which topics is it in?styleguide, meta, styling, design-systems, css-framework, scss, sass, ui-library, design-system, github, design, ui-components
Creator
primer
Size
38.4 MB
Stars
13K
Updated
CommitOct 15Releasev22.3.0Jun 17
Age
11y
Commits · 90 Days