Coder Social home page Coder Social logo

primer / css Goto Github PK

View Code? Open in Web Editor NEW
12.5K 244.0 1.2K 35.41 MB

The CSS design system that powers GitHub

Home Page: https://primer.style/css

License: MIT License

Shell 2.09% JavaScript 9.67% SCSS 88.23%
sass ui-components framework design-system design-systems primer css primer-css meta styleguide

css's Introduction

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 People

Contributors

agisilaos avatar ampinsk avatar ashygee avatar binarymuse avatar brandonrosage avatar broccolini avatar califa avatar colebemis avatar dependabot[bot] avatar emilybrick avatar github-actions[bot] avatar gladwearefriends avatar greenkeeperio-bot avatar jasonetco avatar jonrohan avatar khiga8 avatar koddsson avatar langermank avatar manuelpuyol avatar mdo avatar muan avatar primer-css avatar primer[bot] avatar psjishnu avatar shawnbot avatar simurai avatar tobiasahlin avatar trosage avatar vdepizzol avatar yaili avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

css's Issues

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.

before-long

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

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

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.

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

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!

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).

How to create a modal?

How to create modals using Primer?

screenshot from 2015-04-27 14 54 19

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

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.

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

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?

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)

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.

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?

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.

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?

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.

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.

Supported browsers?

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

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.

Selects

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

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.

Need examples

Hi

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

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.

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;

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.

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! 😁

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 !

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).

screen shot 2015-03-24 at 9 50 05 am

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.