Integration of the new Github look & feel

[natewave]

Hello,

Are there any plans to adopt the new github look & feel into primer-css ?

Thanks

[broccolini]

@natewave If you mean are we adding the new color palette to primer-css, then yes we are. There are a couple issues breaking the build right now that I'm fixing and will cut a new release, so should be available later today.

[natewave]

Hello @broccolini,

Indeed the new color palette is what I was referring to.

Great, I dig the new colors.

Thanks!

[broccolini]

@natewave Thank you! The new color variables are now in the primer-support module here: https://github.com/primer/primer-support/blob/master/lib/variables/color-system.scss - I'm afraid the primer.io website docs don't reflect this, we're currently working on a new documentation site to replace it.

[amaurycatelan]

@broccolini Wow! The new color palette is absolutely amazing! 😍 🎉
Thank you and keep up the great work! 👊 🎉

[clonalejandro]

I'd like to primer team add this features:

• GitHub cards for example: this
• GitHub navbar for example: this
• Animations for example: this

[broccolini]

Hi @clonalejandro, we're unlikely to add the navigation bar as a component for a few reasons:

• it's currently built with some custom CSS and we plan to refactor it and use more of our utilities and layout styles
• it's unlikely to ever be one single component, the navbar is made up a multiple components and utilities will style the things in between, and different views contain different components (such as logged-in navigation)

In future we're planning to add more of the components and styles you see used in the navigation so you'll likely be able to make something similar, though obviously we'd hope you wouldn't replicate exactly with our branding! 😬

Re the explore pattern. That's in need of a bit of refactoring too, and is currently styled with a mix of Primer styles and custom styles. There are no plans to create an entire component for this, however you can create most of the pattern with existing styles. Here's an example, though there are multiple ways you could achieve this:

<a class="d-block Box box-shadow-medium position-relative border-gray-light overflow-hidden no-underline" href="#">
  <div class="Box-header py-2 bg-red border-red"></div>
  <div class="Box-body px-4 pb-6 position-relative">
    <h3 class="lh-condensed text-normal link-gray-dark no-underline mb-1">Projects that power GitHub for Mac</h3>
    <p class="alt-text-small text-gray">
      Build software faster and with fewer headaches.
    </p>
    <ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
      <li class="d-inline-block mr-1">28 repositories</li>
      <li class="d-inline-block">4 languages</li>
    </ul>
  </div>
</a>

And here's a codepen with the grid layout.

We're working on a new documentation site, but you can read most of the docs in the CSS module readme's. Here's the modules used in the codepen example:

• Box component
• Border & rounded corner utilities
• Typography and list styles utilities
• Flexbox
• Layout utilities
• Margin & padding utilities
• Grid styles aren't in the docs yet but here's the Sass and hopefully the codepen example helps you
• There's also a few options with using Octicons (I didn't use in my example but they are used on the explore grid)

I'm not sure what you were referring to with regards to animations since it looks like the same link as the navbar example, however we do have animation utilities documented here.

Hope that helps!