primer / css

The CSS design system that powers GitHub

Primer CSS

The CSS implementation of GitHub's Primer Design System

Documentation

⚠️ The documentation of this repo is not maintained anymore. Please raise any documentation-specific pull requests in primer.style/design

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. After installing with npm, 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's Issues

layout is not fixed

layout is not fixed. for example:

<div class="columns">
        <div class="four-fifths column">
           <!-- header -->
        </div>
        <div class="one-fifth column">
            <!-- account -->
        </div>
</div>

When there is no contents in then will be on the left not on the right

Include form input warnings in docs

I was taking a look at some of our edge cases for form validation when I noticed that they aren't included in Primer's documentation. We should change this.

We should include examples of this in our documentation so we can bring some of the styling in line with our flash messaging.

Rounding column widths.

The .one-third and .two-third classes round their widths to the nearest integer, this is fine in most cases but not if you want to have three one-third columns in one row.

Counters in buttons

Currently we have no overrides for .counters in .btns. We'll want that for the default, danger, primary, and outline button styles.

Update Normalize.css to v3.0.2

Current version included is v3.0.1

https://github.com/necolas/normalize.css

Primer on a CDN

It'd be awesome to have Primer on a quick URL (perhaps even a CDN); Primer is fantastic for a quick page of documentation or something along those lines.

@mdo Any plans for Primer on a CDN?

Lists go over the border on the left

Strange behavior in lists (I did not look at the code) but here is what i see in Chrome in the typography doc page http://primercss.io/type/

Completely Support Mobile?

How can i include another scss to bem compiled ??

Hi guys,

How can i include another scss files to be compiled in doc.css in _site folder?

Document Markdown styles

From primer/markdown, we need some basic docs added.

Support for LESS?

It would be awesome if you could add support for LESS. Even if it's another repo, I'm sure there are plenty of users here that would be willing to help keep it up to date with the SASS version. I am one of them.

Button accessibility?

I saw that primer is requiring to add type attributes to all <button> tags.

My question is:
Does adding type attributes to <button> tags improve accessibility?

• If so, how does it improve accessibiilty?
• If not, are there any other reasons for using the type attribute other than distinguishing between, "button", "submit" and "reset" behaviors?

Tried googling around to answer my question but haven't been able to find any answers.
So far, I could only find documentation regarding usage of role="button" for elements made clickable, like <a> tags.

Primer's CSS Guidelines suggests using // for comments

https://github.com/primer/primer/blob/master/docs/guidelines.md#formatting

Use // for comment blocks (instead of /* */).

Without a preprocessor, C-style // comments are invalid.

body {
  background-color: red;
}
// This is an invalid comment.

/* This is a valid comment. */

Use with base jekyll?

What do I need to do to use the docs.css as the "one css to rule them all" in a jekyll site?

is there a way to take a sass file and make it part of the jekyll asset generation process?

(I actually expect this to be something like, uh duh, copy foo.sass to _sass and that's-that)

Supported browsers?

I couldn't find anything in the docs regarding which browsers (and versions thereof) are intended to be supported.

Multiline tooltip for Microsoft Edge

The hack for multiline tooltip widths doesn't apply to Microsoft Edge and Microsoft Edge doesn't support intrinsic widths :(

@media screen and (min-width:0\0) {
  // IE9 and IE10 rule sets go here
  .tooltipped-multiline:after {
    width: $multiline-max-width;
  }
}

http://caniuse.com/#feat=intrinsic-width

Perhaps adding width: $multiline-max-width above the original definition would work?

 .tooltipped-multiline {
   &:after {
+    width: $multiline-max-width;
     width: max-content;
     max-width: $multiline-max-width;
     word-break: break-word;

select menu component

Is it possible to publicise select-menu parts of github? By select-menu I means autocomplete parts of many place of github. For example language select at gist homepage.

Create a new reduced test case template for CONTRIBUTING.md

On the line 31 of CONTRIBUTING.md there is this piece of text:

1. Isolate the problem — ideally create a reduced test case and a live example. This JS Bin is a helpful template.

The This JS Bin link points to the Bootstrap's reduced test case template.

Button focus not consistent in button groups

Second, third, etc buttons in button groups don't get the outer box shadow on focus.

Can be fixed with

&:focus {
  box-shadow: 0 0 5px rgba(81,167,232,0.5), inset 1px 0 0 rgba(255,255,255,0.2);
}

before the

&:active,
&.selected {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
}

in the _buttons.scss file (line 315ish).

Mention version in docs

Need to add a version number there.

UL in docs aren't looking correct

docs.css reset the margin and padding of the ul

v2.0.3 ship list

An ongoing list of changes merged into master since our latest release.

Tooling

• #18: Add Hound CI w/ SCSS linter for code quality
• #69: Improve Gruntfile to add autoprefixer to the site publishing task (which also fixes #23)
• #74: Stop ignoring the script/ folder in bower.json since we no longer have that folder

Documentation

• #2: Update readme to remove old Sprockets instructions
• #3: Update the package name from primer to primer-css
• #4, #67, #70, #78: Add a couple notes to the docs and source code on "broken" <ul>s and <ol>s
• #8: Mention Rouge as a gem dependency in install instructions
• #9, #20, #35, #47, #75: Fix various typos in our readme and docs
• #16, #65: Add browser and platform support to About page
• #38: Add basic dev notes on how we use branches in the readme
• #44: Added .editorconfig file
• #63: Document disabled buttons
• #72: Fix links in contributing guidelines

CSS changes

• #9: Miscellaneous typos in our docs and CSS
• #27: Deprecated the gradient mixin because we use Autoprefixer
• #37: Add copyright banners to CSS files
• #48: Fix .social-count underline on :active
• #51, #66: Use more precise widths for .one-third and .two-thirds column classes
• #61: Add styles for .counters in buttons
• #76: Remove the unnecessary margins and floats on the right arrow icon in buttons

No url found for normalize (git.io/normalize)

No url found for normalize (https://git.io/normalize) from
https://github.com/primer/primer/blob/master/scss/_normalize.scss#L1

Break <ol>'s in docs, too

We currently re-break the <ul>s in the docs, but not the <ol>s.

Relevant to #4.

[Docs] Primer Ordered and Unordered Lists Touch or Extend Beyond Panel Edges

Chrome 41.0.2272.89 (64-bit) on OS X 10.10.3

[Docs] Primer Ordered and Unordered Lists Touch or Extend Beyond Panel Edges

Example Image:

Selects

Why <select> element is completely unstyled? It would look better if they were looking consistent with other inputs.

broken links in README.md

A couple links in file https://github.com/primer/primer/blob/master/README.md are broken
https://github.com/github/primer/releases/latest does not exists
https://github.com/github/primer/blob/master/.editorconfig not exists

Crema?

So, what's "Crema" as referenced in https://github.com/primer/primer/blob/7fe1680aa3105755e001623b632d9eb48af7a534/docs/alerts.md#dismiss ?

Hovering over a focused button overwrites the focus border but keeps the shadow

Is this intended? Has been bugging me for a while now on GitHub 😄

Need examples

Hi

why not add some examples ? in a /examples directory, for example. it would certainly help people understand how to use it.

cdnjs hosting

Any plans to host the framework on cdnjs?

Button text alignment in Chrome

This one has been bugging me since the button style update.

The text inside buttons sits too high on Chrome (screenshot from version 41.0.2272.89).

Where is the {:toc} markup generated

The markdown templates have {:toc} markup that generates table of contents from the headings in those templates.

I want to customize this layout and can't seem to find where it is being built.

Remove margin-top from headings, paragraphs, etc

Picking a single direction greatly simplifies our code. We reset margin-top in github/github all the time. Plus, most of our text is used in UI, not general page content since our Markdown styles address that. We might be able to nix all margin and simply use utilities, too.

Bower install isn't working

Maybe I missed a step, but it looks like bower install isn't working even when run from command line:

$ bower install
bower primer-css#2.0.2      not-cached git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2         resolve git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2    ENORESTARGET No tag found that was able to satisfy 2.0.2

Additional error details:
No versions found in git://github.com/primer/primer.git


$ bower install 'primer-css#2.0.2'
bower primer-css#2.0.2      not-cached git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2         resolve git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2      not-cached git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2         resolve git://github.com/primer/primer.git#2.0.2
bower primer-css#2.0.2    ENORESTARGET No tag found that was able to satisfy 2.0.2

Additional error details:
No versions found in git://github.com/primer/primer.git

I grabbed the 2.0.2 version number from bower.json. What am I missing?

Primer v2.3.0 on primercss.io?

Hi there, would it be possible to publish v2.3.0 of Primer on the website? Would love to look at the new goodies without having to run the jekyll server locally.

Thanks! 😁

v2.1.0 ship list

An ongoing list of changes merged into master since our latest release.

CSS

• #53, #104: Remove overrides to .btn's box-shadow when in button groups to avoid a broken :focus state
• #55, #87: Improve behavior and styling for more button states
• #56: Add utility layout class, .centered, to center content and grid columns
• #64, #86: Remove the undocumented github/github-specific CSS
• #83: Update Normalize.css to v3.0.3
• #90: Document and fix the use of <form>s in button groups with .button_to.

Docs

• #29: Add note on SCSS' overloaded rgba() function
• #81: Add version to the docs footer
• #82: Update @import guidelines in the readme
• #89: Reiterate our CSS guidelines are for SCSS
• #98: Add guideline about soft-tabs for HTML
• #96, #97, #103: Update some typos, fix Markdown, and remove expletives from the docs
• #101: Removed CLA text from the repository in favor of the CI service

Tooling

• #91: Properly configure Hound CI
• #99: Update our SCSS lint file to use the latest property order syntax and remove vendor prefixes

btn group and active buttons

Hi,

in this code:

<div class="btn-group">
<button class="btn btn-sm disabled" type="button">1</button>
<button class="btn btn-sm disabled" type="button">2</button>
<button class="btn btn-sm disabled" type="button">3</button>
</div>

only first button didn't active (down) in click on it.

if deactive this code:

.btn-group .btn + .btn:active, .btn-group .btn + .btn.selected {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15) inset;
}

all works fine.

Masthead component?

Hi! It's really great that you guys have open-sourced this framework - I already love it for tiny projects where Bootstrap is overkill. However, it seems to be missing one thing - a navbar.
But wait - when I go to websites built with primer, there is a navbar! (This even includes your website!) Why is the .masthead component missing from Primer? Or, if it's a third-party component, where do I get it?

Question about tooltips with ZeroClipboard

Hi There,

I apologize if this is not the right place to raise this issue, but I'm pretty stuck.

I have a button with a tooltip attached, which is also a zerclipboard object. When I hover over the button, the tooltip appears like it should but instantly goes away. However the tooltip works correctly when it is not a zeroclipboard object.

I tried to make a gif for a better demonstration, but Licecap isn't picking up on it for some reason.

Any advice would be much appreciated!

update web

to match v2.2.x

Tooltip example broken in Safari

In Safari (tested with version 8.0.5) on OS X, the example on the Tooltips page is broken. In Chrome, everything is fine.

v2.2.0 ship list

CSS

• #106: Darken the $brand-blue variable to make it AA compliant for contrast.
• #112: Darken the $brand-orange variable to make it AA compliant for contrast.
• #115: Removed obsolete -webkit-validation-bubble styles (unavailable since Chrome 28).
• #118: Update SCSS lint properties.
• #124: Darken $brand-gray from #999 to #666 for color contrast (and apply it to .text-muted).

Docs

• #58: Minor grammar and spelling fixes.
• #120: Update readme's installation method to use Bower's CLI install.
• #122: Update bower.json to remove moot version field.

Contributing Guidelines

Link is broken.

Rename .button_to to .btn-group-form

Makes it match our naming scheme—dashes, scoped to parent component, etc—and describes things much better based on it's intended use.

How to create a modal?

How to create modals using Primer?

The main reason I'm asking this is because I found a small modal bug and I would like to reproduce it.

Add column centering

Add a .column-centered class to quickly center a single column.

NPM support

Hi guys,

It will be nice if the repository is published on NPM. Some developers (including me) are ditching Bower to use only NPM for all front dependencies.

Thanks !

Remove expletives

Example.

Expletives are unnecessary, and unprofessional in a community-focused project. There are plenty of adjectives which better explain the authors' intent, please use them.

Unordered list not correctly indented

As seen on http://primercss.io/type/#unordered, the unordered list is not indented correctly.

The following (located in docs.scss) overrides .markdown-body ul and removes all padding:

.docs-example ul {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

.markdown-body ul, 
.markdown-body ol {
    padding-left: 2em;
}

Removing the padding on .docs-example ul yields: