primer/css

The CSS implementation of GitHub's Primer Design System

Sass variables, mixins, and functions for use in our components.

Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to i

GitHub stylesheets for rendering markdown.

Add tooltips built entirely in CSS to nearly any element.

Immutable, atomic CSS classes to rapidly build product

Singular purpose and flexible navigation elements.

Style individual form controls and utilize common layouts.

Containers, rows, and columns for creating page layout.

A nice, consistent way to display branch names.

A collection of buttons used for primary and secondary actions.

Basic styles for user profile avatars.

Flash messages, or alerts, inform users of successful or pending actions.

Labels add metatdata or indicate status of items and navigational elements.

Primer's product modules

Buttons for marketing websites at GitHub

Marketing specific immutable, atomic CSS classes

The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.

Primer's core modules

Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.

Styles to display tabular data for marketing websites at GitHub.

A module for creating rounded-corner boxes with options for headers, lists, and footers.

Shorten text with an ellipsis.

CSS to reset the browsers default styles

Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.

Pagination component for applying button styles to a connected set of links that go to related pages

Typography for marketing websites at GitHub

Sass variables, mixins, and functions for use in our components.

A module for creating dynamically resizable elements that always sit on the same horizontal line.

Blankslates are for when there is a lack of content within a page or section.

Primer marketing packages

Styles to create distinct sections of marketing pages at GitHub.

Breadcrumb navigation for pages with parents / grandparents.

Use Progress components to visualize task completion

A lightweight context menu for navigation and actions.

Card-like containers to group semantically related content together on marketing websites at GitHub.