Merge pull request #151 from primer/v3

Primer 3

Author: jonrohan

css/.primer-stats.md

@@ -1,6 +1,6 @@
 # [primer-css]( http://primercss.io )
 
-**Version:** `2.7.0`
+**Version:** `3.0.0`
 
 > Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via Bower, so it's easy to include all or part of it within your own project.
 
@@ -11,17 +11,17 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 32804
+- **Total Stylesheet Size:** 31700
 - **Total Media Queries:** 1
-- **Total Rules:** 468
-- **Selectors Per Rule:** 1.4294871794871795
-- **Total Selectors:** 669
-- **Identifiers Per Selector:** 2.007473841554559
-- **Specificity Per Selector:** 15.681614349775785
-- **Top Selector Specificity:** 43
-- **Top Selector Specificity Selector:** dl.form.warn dd.warning::after
+- **Total Rules:** 462
+- **Selectors Per Rule:** 1.3484848484848484
+- **Total Selectors:** 623
+- **Identifiers Per Selector:** 1.768860353130016
+- **Specificity Per Selector:** 15.296950240770466
+- **Top Selector Specificity:** 41
+- **Top Selector Specificity Selector:** .form-group.warn .warning::after
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 1343
-- **Total Declarations:** 1036
-- **Total Unique Colors:** 82
-- **Total Important Keywords:** 156
+- **Total Identifiers:** 1102
+- **Total Declarations:** 1029
+- **Total Unique Colors:** 73
+- **Total Important Keywords:** 157

css/primer.css

@@ -78,7 +78,7 @@ <h2>Build tools</h2>
 
     <script src="{{ site.baseurl }}/js/anchor.min.js"></script>
     <script>
-      var selector = '.markdown-body h2, .markdown-body h3';
+      var selector = '.markdown-body > h2, .markdown-body > h3';
       anchors.options = {
         placement: 'left',
         class: 'anchor-link'

docs/_layouts/default.html

@@ -23,13 +23,13 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
 
 ## With Octicons
 
-When it helps the message, include `.mega-octicon`s as the first elements in the blank slate. Be sure to use relevant icons.
+When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so.
 
 {% example html %}
 <div class="blankslate">
-  <span class="mega-octicon octicon-git-commit"></span>
-  <span class="mega-octicon octicon-tag"></span>
-  <span class="mega-octicon octicon-git-branch"></span>
+  <span class="mega-octicon octicon-git-commit blankslate-icon"></span>
+  <span class="mega-octicon octicon-tag blankslate-icon"></span>
+  <span class="mega-octicon octicon-git-branch blankslate-icon"></span>
   <h3>This is a blank slate</h3>
   <p>Use it to provide information when no dynamic content exists.</p>
 </div>
@@ -44,7 +44,7 @@ Add an additional optional class to the `.blankslate` to change its appearance.
 Narrows the blankslate container to not occupy the entire available width.
 
 {% example html %}
-<div class="blankslate has-fixed-width">
+<div class="blankslate blankslate-fixed-width">
   <h3>This is a blank slate</h3>
   <p>Use it to provide information when no dynamic content exists.</p>
 </div>
@@ -55,7 +55,7 @@ Narrows the blankslate container to not occupy the entire available width.
 Removes the `border-radius` on the top corners.
 
 {% example html %}
-<div class="blankslate capped">
+<div class="blankslate blankslate-capped">
   <h3>This is a blank slate</h3>
   <p>Use it to provide information when no dynamic content exists.</p>
 </div>
@@ -66,7 +66,18 @@ Removes the `border-radius` on the top corners.
 Significantly increases the vertical padding.
 
 {% example html %}
-<div class="blankslate spacious">
+<div class="blankslate blankslate-spacious">
+  <h3>This is a blank slate</h3>
+  <p>Use it to provide information when no dynamic content exists.</p>
+</div>
+{% endexample %}
+
+### Large
+
+Increases the size of the text in the blankslate
+
+{% example html %}
+<div class="blankslate blankslate-large">
   <h3>This is a blank slate</h3>
   <p>Use it to provide information when no dynamic content exists.</p>
 </div>
@@ -77,7 +88,7 @@ Significantly increases the vertical padding.
 Removes the `background-color` and `border`.
 
 {% example html %}
-<div class="blankslate clean-background">
+<div class="blankslate blankslate-clean-background">
   <h3>This is a blank slate</h3>
   <p>Use it to provide information when no dynamic content exists.</p>
 </div>

docs/blankslate.md

@@ -154,13 +154,11 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
 </div>
 {% endexample %}
 
-Add `.button_to` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
-
-**Heads up!** This class name is inconsistent and will change in the next major version.
+Add `.btn-group-form` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
 
 {% example html %}
 <div class="btn-group">
-  <form class="button_to">
+  <form class="btn-group-form">
     <button class="btn" type="button">Button in a form</button>
   </form>
   <button class="btn" type="button">Button</button>
@@ -174,7 +172,7 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
 
 {% example html %}
 <span class="hidden-text-expander">
-  <a href="#">&hellip;</a>
+  <button type="button" class="ellipsis-expander">&hellip;</button>
 </span>
 {% endexample %}
 

docs/buttons.md

@@ -242,6 +242,10 @@ body {
 // Examples
 //
 
+.highlight {
+  margin: 0;
+}
+
 .docs-example {
   position: relative;
   padding: 15px;
@@ -250,6 +254,13 @@ body {
   border: 1px solid #e5e5e5;
   border-radius: .25rem .25rem 0 0;
 
+  // Undo `.markdown-body`
+  p,
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   + .highlight {
     margin-top: -1px;
     border: 1px solid #e5e5e5;
@@ -288,12 +299,12 @@ body {
   // Override Markdown styles to restore values from `_type.scss`
   ul,
   ol {
-    padding: 0;
+    padding-left: 0;
     margin-top: 0;
     margin-bottom: 0;
   }
 
-  dl.form {
+  .form-group {
     margin: 15px 0;
 
     &:first-child {

docs/docs.scss

@@ -28,10 +28,10 @@ Form controls in Primer currently have no basic layout specified (this is by des
 {% example html %}
 <form>
   <label for="name">Name</label>
-  <input type="text" id="name">
+  <input class="form-control" type="text" id="name">
 
   <label for="email">Email address</label>
-  <input type="email" id="email">
+  <input class="form-control" type="email" id="email">
 
   <label>
     <input type="checkbox"> Remember me
@@ -54,36 +54,36 @@ Textual form controls have a white background by default. You can change this to
 
 {% example html %}
 <form>
-  <input type="text" placeholder="Default input">
-  <input class="input-contrast" type="text" placeholder="Input with contrast">
+  <input class="form-control" type="text" placeholder="Default input">
+  <input class="form-control input-contrast" type="text" placeholder="Input with contrast">
 </form>
 {% endexample %}
 
 ## Sizing
 
 Make inputs smaller, larger, or full-width with an additional class.
 
-### Mini
+### Small
 
 {% example html %}
 <form>
-  <input class="input-mini" type="text" placeholder="Mini input">
+  <input class="form-control input-sm" type="text" placeholder="Small input">
 </form>
 {% endexample %}
 
 ### Large
 
 {% example html %}
 <form>
-  <input class="input-large" type="text" placeholder="Large input">
+  <input class="form-control input-lg" type="text" placeholder="Large input">
 </form>
 {% endexample %}
 
 ### Block
 
 {% example html %}
 <form>
-  <input class="input-block" type="text" placeholder="Full-width input">
+  <input class="form-control input-block" type="text" placeholder="Full-width input">
 </form>
 {% endexample %}
 
@@ -93,25 +93,7 @@ Primer adds light `height` and `vertical-align` styles to `<select>`s for all br
 
 {% example html %}
 <form>
-  <select>
-    <option>Choose an option</option>
-    <option>Git</option>
-    <option>Subversion</option>
-    <option>Social Coding</option>
-    <option>Beets</option>
-    <option>Bears</option>
-    <option>Battlestar Galactica</option>
-  </select>
-</form>
-{% endexample %}
-
-### Custom
-
-Custom `<select>`s are also available—just add `.select`. **Only available in latest WebKit, Firefox, and IE browsers.**
-
-{% example html %}
-<form>
-  <select class="select">
+  <select class="form-select">
     <option>Choose an option</option>
     <option>Git</option>
     <option>Subversion</option>
@@ -128,7 +110,7 @@ Custom `<select>`s are also available—just add `.select`. **Only available in
 Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).
 
 {% example html %}
-<select class="select-sm">
+<select class="form-select select-sm">
   <option>Choose an option</option>
   <option>Git</option>
   <option>Subversion</option>
@@ -138,7 +120,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
   <option>Battlestar Galactica</option>
 </select>
 
-<select class="select select-sm">
+<select class="form-select select-sm">
   <option>Choose an option</option>
   <option>Git</option>
   <option>Subversion</option>
@@ -153,15 +135,15 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
 
 {% example html %}
 <form>
-  <dl class="form">
+  <dl class="form-group">
     <dt><label>Example Text</label></dt>
-    <dd><input type="text" value="Example Value"></dd>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
   </dl>
 
-  <dl class="form">
-    <dt><label>Example Label</label></dt>
+  <dl class="form-group">
+    <dt><label>Example Select</label></dt>
     <dd>
-      <select class="select">
+      <select class="form-select">
         <option>Choose an option</option>
         <option>Git</option>
         <option>Subversion</option>
@@ -172,24 +154,31 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
       </select>
     </dd>
   </dl>
+
+  <dl class="form-group">
+    <dt><label>Example Textarea</label></dt>
+    <dd>
+      <textarea class="form-control"></textarea>
+    </dd>
+  </dl>
 </form>
 {% endexample %}
 
 ## Form group validation
 
-Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
+Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
 
 {% example html %}
 <form>
-  <dl class="form errored">
+  <dl class="form-group errored">
     <dt><label>Example Text</label></dt>
-    <dd><input type="text" value="Example Value"></dd>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
     <dd class="error">This example input has an error.</dd>
   </dl>
   <br>
-  <dl class="form warn">
+  <dl class="form-group warn">
     <dt><label>Example Text</label></dt>
-    <dd><input type="text" value="Example Value"></dd>
+    <dd><input class="form-control" type="text" value="Example Value"></dd>
     <dd class="warning">This example input has a warning.</dd>
   </dl>
 </form>
@@ -233,7 +222,7 @@ Attached an input and button to one another.
 {% example html %}
 <form>
   <div class="input-group">
-    <input type="text" placeholder="Username">
+    <input class="form-control" type="text" placeholder="Username">
     <span class="input-group-button">
       <button class="btn">
         <span class="octicon octicon-clippy"></span>

docs/forms.md

@@ -4,9 +4,9 @@
   padding: 15px;
   font-size: 14px;
   line-height: 1.5;
-  color: #246;
-  background-color: #e2eef9;
-  border: 1px solid #bac6d3;
+  color: $flash-text-blue;
+  background-color: $flash-bg-blue;
+  border: 1px solid $flash-border-blue;
   border-radius: 3px;
 
   p:last-child {
@@ -53,15 +53,15 @@
 //
 
 .flash-warn {
-  color: #4c4a42;
-  background-color: #fff9ea;
-  border-color: #dfd8c2;
+  color: $flash-text-yellow;
+  background-color: $flash-bg-yellow;
+  border-color: $flash-border-yellow;
 }
 
 .flash-error {
-  color: #911;
-  background-color: #fcdede;
-  border-color: #d2b2b2;
+  color: $flash-text-red;
+  background-color: $flash-bg-red;
+  border-color: $flash-border-red;
 }
 
 .flash-full {