Primer CSS The CSS implementation of GitHub's Primer Design System > :warning: This project is in KTLO mode! Use existing utility classes from this project where needed. For more complete…
Primer CSS
The CSS implementation of GitHub's Primer Design System




> :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][install-npm], you can install@primer/css with this command:
sh
npm install --save @primer/css
Usage
The included source files are written in [Sass] using SCSS syntax. Once installed, you can add your project'snode_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:
scss
@import "@primer/css/index.scss";
You can import individual Primer modules directly from the @primer/css package:
scss
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
Development
See [DEVELOP.md](DEVELOP.md) for development docs.Releasing (for GitHub staff)
You can find docs about our release process in [RELEASING.md](RELEASING.md).License
[MIT](./LICENSE) © GitHub
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[npm]: https://www.npmjs.com/
[sass]: http://sass-lang.com/
-
css
Primer is GitHub's design system. This is the CSS implementation
SCSS ★ 13k 1d agoExplain → -
octicons
A scalable set of icons handcrafted with ❤️ by GitHub
JavaScript ★ 8.7k 16d agoExplain → -
react
An implementation of GitHub's Primer Design System using React
TypeScript ★ 3.9k 1d agoExplain → -
github-vscode-theme
GitHub's VS Code themes
JavaScript ★ 2.0k 5mo agoExplain → -
design ▣
Primer Design Guidelines
MDX ★ 761 11mo agoExplain → -
prism ▣
A tool for creating and maintaining cohesive, consistent, and accessible color palettes
TypeScript ★ 685 1y agoExplain → -
view_components
ViewComponents for the Primer Design System
Ruby ★ 578 1d agoExplain → -
primitives
Color, typography, and spacing primitives in json.
TypeScript ★ 393 6d agoExplain → -
doctocat
A Gatsby theme for building Primer documentation sites
JavaScript ★ 310 5d agoExplain → -
stylelint-config
Sharable stylelint config used by GitHub's CSS
JavaScript ★ 208 1d agoExplain → -
primer.style
The website for all things Primer
JavaScript ★ 173 8d agoExplain → -
figma-action ▣
Export image assets from Figma to GitHub
JavaScript ★ 171 5y agoExplain → -
primer-markdown ▣
Stylesheets for rendering GitHub Flavored Markdown with Primer.
★ 169 9y agoExplain → -
github-syntax-theme-generator ▣
Uses a prettylights theme object to generate syntax themes for multiple platforms
JavaScript ★ 160 5y agoExplain → -
brand
React components and Primitives for GitHub marketing websites
TypeScript ★ 132 15h agoExplain → -
octicons-v2 ▣
[WIP] A new look for Octicons, GitHub's icon set
JavaScript ★ 129 3y agoExplain → -
figma-diff-probot ▣
Probot using figma api to comment on PRs with before after images
JavaScript ★ 114 7y agoExplain → -
presentations ▣
Primer Presentations is the presentation design system for GitHub. It's intended to be used only by GitHub staff for presentations that represent GitHub.
MDX ★ 78 1y agoExplain → -
figma
Primer, GitHub's design system, available on Figma.
★ 75 12d agoExplain → -
github-syntax-light ▣
The CSS syntax theme for GitHub
CSS ★ 74 9y agoExplain → -
github-vscode-theme-dark-classic ▣
GitHub Dark (classic) theme for VS Code
JavaScript ★ 62 5y agoExplain → -
github-syntax-dark ▣
The CSS dark syntax theme for GitHub
CSS ★ 50 9y agoExplain → -
react-template
The quickest way to start playing around with Primer React
JavaScript ★ 48 2d agoExplain → -
deploy ▣
Deploy to Now from GitHub Actions with useful aliases
JavaScript ★ 45 7y agoExplain → -
publish ▣
The GitHub Action that publishes Primer packages to npm
JavaScript ★ 44 3y agoExplain → -
behaviors
Shared behaviors for JavaScript components
TypeScript ★ 39 1d agoExplain → -
jekyll-octicons ▣
A jekyll liquid plugin that makes including svg Octicons simple.
★ 33 8y agoExplain → -
github-atom-light-syntax ▣
GitHub's official light syntax theme as an atom theme
Less ★ 24 5y agoExplain → -
swatch ▣
Get a swatch svg for a color token from @primer/primitives
JavaScript ★ 21 3mo agoExplain → -
github-textmate-theme ▣
GitHub's official syntax themes as TextMate themes
★ 21 9y agoExplain → -
doctocat-template
No description.
JavaScript ★ 19 7mo agoExplain → -
doctocat-nextjs
A Next.js theme for building Primer documentation sites
TypeScript ★ 18 2mo agoExplain → -
octicons_helper ▣
A rails helper that inlines SVG octicons
★ 18 8y agoExplain → -
codemirror-github-light ▣
Codemirror GitHub syntax theme
CSS ★ 17 5y agoExplain → -
rails_forms ▣
Primer forms framework for Rails
Ruby ★ 17 3y agoExplain → -
eslint-plugin-primer-react
ESLint rules for Primer React
JavaScript ★ 14 1d agoExplain → -
github-atom-dark-syntax ▣
GitHub's official dark syntax theme as an atom theme
CSS ★ 14 9y agoExplain → -
keynote-octicons ▣
Keynote templates for using GitHub's octicons in presentations
★ 12 9y agoExplain → -
primer-utilities ▣
Immutable, atomic CSS classes to rapidly build product
★ 10 9y agoExplain → -
contribute ▣
Contribution guidelines for the Primer Design System
JavaScript ★ 10 8mo agoExplain → -
primer-tooltips ▣
Add tooltips built entirely in CSS to nearly any element.
★ 10 8y agoExplain → -
blueprints ▣
Reusable components for our documentation sites
JavaScript ★ 10 6y agoExplain → -
octicons_gem ▣
Octicons gem that makes primer/octicons available in ruby env
★ 10 8y agoExplain → -
sync ▣
Sync Primer CSS source files from npm to your git repo
JavaScript ★ 9 9mo agoExplain → -
next-pages ▣
Understand all the pages in your Next.js app like a person who makes websites
JavaScript ★ 9 7y agoExplain → -
live-region-element
A custom element for making announcements with live regions
TypeScript ★ 8 2d agoExplain → -
autocomplete-primer ▣
An atom autocomplete+ provider that completes primer related code
JavaScript ★ 8 9y agoExplain → -
react-toolchain ▣
Toolchain to help in building React components with @primer/react
JavaScript ★ 8 11mo agoExplain → -
cli ▣
Design guidelines for GitHub's command line tool
JavaScript ★ 8 1y agoExplain → -
primer-module-build ▣
Scripts to build primer SCSS modules into CSS and stats
JavaScript ★ 8 8y agoExplain → -
.github
GitHub Stuff
★ 7 12d agoExplain → -
story2sketch ⑂
Convert Storybook into Sketch symbols 💎
JavaScript ★ 7 1y agoExplain → -
react-migrate ▣
One time migrations for primer/react
JavaScript ★ 7 10mo agoExplain → -
stylelint-selector-no-utility ▣
Stylelint rule that forbids re-styling Primer CSS utility classes
JavaScript ★ 7 7y agoExplain → -
cdnjs ⑂
Free and Open Source Public Web CDN for web developer!
★ 7 6y agoExplain → -
storybook ▣
Compiled storybook source for GH-pages
HTML ★ 6 7y agoExplain → -
primer.github.io ▣
No description.
HTML ★ 6 7y agoExplain → -
figma-theme ⑂
Generate development-ready theme JSON files from Figma Styles
TypeScript ★ 6 2mo agoExplain → -
view_components-template
The quickest way to start playing around with Primer ViewComponents
Ruby ★ 6 3y agoExplain → -
primer-buttons ▣
A collection of buttons used for primary and secondary actions.
★ 5 9y agoExplain → -
codemirror-github-dark ▣
Codemirror GitHub syntax theme
CSS ★ 4 9y agoExplain → -
github-ace-dark ▣
Ace theme for GitHub dark syntax
CSS ★ 4 9y agoExplain → -
api ▣
A GraphQL API for collecting and accessing data about the Primer Design System
TypeScript ★ 4 1y agoExplain → -
primer-forms ▣
Style individual form controls and utilize common layouts.
★ 4 9y agoExplain → -
primer-avatars ▣
Basic styles for user profile avatars.
★ 4 9y agoExplain → -
primer-truncate ▣
Shorten text with an ellipsis
★ 4 9y agoExplain → -
primer-core ▣
The core modules of the primer framework. Shared between our product and marketing pages.
★ 4 9y agoExplain → -
primer-support ▣
Sass variables, mixins, and functions used in primer
★ 4 9y agoExplain → -
primer-docs
Public repository for folks outside of GitHub to open issues relating to the Primer documentation site (https://primer.style).
★ 3 1y agoExplain → -
primitives-vscode-extension
VSCode extension for Primer primitives
TypeScript ★ 3 2mo agoExplain → -
github-ace-light ▣
Ace theme for GitHub light syntax
CSS ★ 3 9y agoExplain → -
atom-packages ▣
A list of Atom packages recommended by the GitHub design systems team
★ 3 9y agoExplain → -
primer-navigation ▣
Singular purpose and flexible navigation elements.
★ 3 9y agoExplain → -
primer-layout ▣
Containers, rows, and columns for creating page layout.
★ 3 9y agoExplain → -
primer-table-object ▣
A module for creating dynamically resizable elements that always sit on the same horizontal line.
★ 3 9y agoExplain → -
primer-states ▣
States, or state indicators, inform users of the current status of a particular item.
★ 3 9y agoExplain → -
primer-box ▣
A module for creating rounded-corner boxes with options for headers, lists, and footers.
★ 3 9y agoExplain → -
primer-product ▣
The product based modules of the primer framework. Shared between our product and marketing pages.
★ 3 9y agoExplain → -
brand-releases
No description.
★ 2 6mo agoExplain → -
next-auth-template
A template for using Next + Primer + Auth.js + Octokit
TypeScript ★ 2 2mo agoExplain → -
primer-base ▣
CSS to reset the browsers default styles
★ 2 9y agoExplain → -
primer-blankslate ▣
Blankslates are for when there is a lack of content within a page or section.
★ 2 9y agoExplain → -
primer-alerts ▣
Flash messages, or alerts, inform users of successful or pending actions.
★ 2 9y agoExplain → -
react-analyze ▣
work in progress
HTML ★ 2 4y agoExplain → -
releases ▣
Get data on the latest Primer releases
JavaScript ★ 2 2y agoExplain → -
primer-marketing ▣
Primer marketing is the marketing based modules of the primer framework.
★ 2 9y agoExplain → -
primer-page-headers ▣
Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.
★ 2 9y agoExplain → -
primer-marketing-type ▣
No description.
★ 2 9y agoExplain → -
cssstats ⑂ ▣
Visualize various stats about your css
JavaScript ★ 1 7mo agoExplain → -
comment-token-update ▣
No description.
JavaScript ★ 1 5y agoExplain → -
test-actions
This is a repo to test actions
★ 1 1y agoExplain → -
test-repo ▣
No description.
MDX ★ 1 1y agoExplain → -
generated-data
A repo with generated GitHub-like data to be used in tools like Figma plugins and prototypes.
TypeScript ★ 1 1y agoExplain → -
primer-labels ▣
No description.
★ 1 9y agoExplain → -
primer-breadcrumb ▣
Breadcrumb navigation for pages with parents / grandparents.
★ 1 9y agoExplain → -
primer-marketing-support ▣
Sass variables, mixins, and functions for use in our marketing components.
★ 1 9y agoExplain → -
primer-cards ▣
Card-like containers to group semantically related content together on marketing websites at GitHub.
★ 1 9y agoExplain → -
primer-page-sections ▣
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
★ 1 9y agoExplain → -
primer-tables ▣
Styles to display tabular data for marketing websites at GitHub.
★ 1 9y agoExplain → -
primer-marketing-utilities ▣
No description.
★ 1 9y agoExplain → -
agent-eval
Tools to evaluate agent performance on Primer tasks
TypeScript ★ 0 2d agoExplain → -
vercel-action ⑂
This action make a deployment with github actions instead of Vercel builder.
★ 0 4mo agoExplain →
No repos match these filters.