primer-css - npm Package Compare versions

Comparing version 2.7.0 to 3.0.0

css/.primer-stats.md

 # [primer-css]( http://primercss.io )
 
-**Version:** `2.7.0`
+**Version:** `3.0.0`
 
@@ -14,15 +14,15 @@ > 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.
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 32804
+- **Total Stylesheet Size:** 33735
 - **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:** 496
+- **Selectors Per Rule:** 1.3387096774193548
+- **Total Selectors:** 664
+- **Identifiers Per Selector:** 1.7424698795180722
+- **Specificity Per Selector:** 15.134036144578314
+- **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:** 1157
+- **Total Declarations:** 1083
+- **Total Unique Colors:** 73
+- **Total Important Keywords:** 194

docs/blankslate.md

@@ -26,9 +26,9 @@ ---
 
-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>
@@ -43,3 +43,3 @@ <p>Use it to provide information when no dynamic content exists.</p>
 
-### Fixed width
+### Narrow
 
@@ -49,3 +49,3 @@ Narrows the blankslate container to not occupy the entire available width.
 {% example html %}
-<div class="blankslate has-fixed-width">
+<div class="blankslate blankslate-narrow">
   <h3>This is a blank slate</h3>
@@ -61,3 +61,3 @@ <p>Use it to provide information when no dynamic content exists.</p>
 {% example html %}
-<div class="blankslate capped">
+<div class="blankslate blankslate-capped">
   <h3>This is a blank slate</h3>
@@ -73,3 +73,3 @@ <p>Use it to provide information when no dynamic content exists.</p>
 {% example html %}
-<div class="blankslate spacious">
+<div class="blankslate blankslate-spacious">
   <h3>This is a blank slate</h3>
@@ -80,2 +80,13 @@ <p>Use it to provide information when no dynamic content exists.</p>
 
+### 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>
+{% endexample %}
+
 ### No background
@@ -86,3 +97,3 @@
 {% example html %}
-<div class="blankslate clean-background">
+<div class="blankslate blankslate-clean-background">
   <h3>This is a blank slate</h3>
@@ -89,0 +100,0 @@ <p>Use it to provide information when no dynamic content exists.</p>

docs/buttons.md

@@ -157,9 +157,7 @@ ---
 
-Add `.button_to` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
+Add `.btn-group-form` 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.
-
 {% 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>
@@ -178,3 +176,3 @@ </form>
 <span class="hidden-text-expander">
-  <a href="#">&hellip;</a>
+  <button type="button" class="ellipsis-expander">&hellip;</button>
 </span>
@@ -181,0 +179,0 @@ {% endexample %}

docs/forms.md

@@ -31,6 +31,6 @@ ---
   <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">
 
@@ -58,4 +58,4 @@ <label>
 <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>
@@ -68,7 +68,7 @@ {% endexample %}
 
-### 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>
@@ -81,3 +81,3 @@ {% endexample %}
 <form>
-  <input class="input-large" type="text" placeholder="Large input">
+  <input class="form-control input-lg" type="text" placeholder="Large input">
 </form>
@@ -90,3 +90,3 @@ {% endexample %}
 <form>
-  <input class="input-block" type="text" placeholder="Full-width input">
+  <input class="form-control input-block" type="text" placeholder="Full-width input">
 </form>
@@ -101,3 +101,3 @@ {% endexample %}
 <form>
-  <select>
+  <select class="form-select">
     <option>Choose an option</option>
@@ -114,20 +114,2 @@ <option>Git</option>
 
-### 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">
-    <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 %}
-
 ### Small
@@ -138,3 +120,3 @@
 {% example html %}
-<select class="select-sm">
+<select class="form-select select-sm">
   <option>Choose an option</option>
@@ -149,3 +131,3 @@ <option>Git</option>
 
-<select class="select select-sm">
+<select class="form-select select-sm">
   <option>Choose an option</option>
@@ -165,11 +147,11 @@ <option>Git</option>
 <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>
@@ -185,2 +167,9 @@ <option>Git</option>
   </dl>
+
+  <dl class="form-group">
+    <dt><label>Example Textarea</label></dt>
+    <dd>
+      <textarea class="form-control"></textarea>
+    </dd>
+  </dl>
 </form>
@@ -191,15 +180,15 @@ {% endexample %}
 
-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>
@@ -248,3 +237,3 @@ </dl>
   <div class="input-group">
-    <input type="text" placeholder="Username">
+    <input class="form-control" type="text" placeholder="Username">
     <span class="input-group-button">
@@ -251,0 +240,0 @@ <button class="btn">

docs/tooltips.md

@@ -22,5 +22,36 @@ ---
 {% example html %}
-<span class="tooltipped tooltipped-n" aria-label="This is the tooltip.">
-  Text with a tooltip
+<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North
 </span>
+<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North East
+</span>
+<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip East
+</span>
+<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South East
+</span>
+<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South
+</span>
+<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South West
+</span>
+<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip West
+</span>
+<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North West
+</span>
 {% endexample %}
+
+### Tooltips No Delay
+
+By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
+
+{% example html %}
+<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip.">
+  Tooltip no delay
+</span>
+{% endexample %}

package.json

 {
   "name": "primer-css",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "homepage": "http://primercss.io",
@@ -5,0 +5,0 @@ "author": "GitHub, Inc.",

No alert changes

Improved metrics

Total package byte prevSize

591696

increased by0.6%

Number of package files

276

increased by1.47%

Lines of code

1167

increased by0.34%

No dependency changes