Merge pull request #142 from primer/232

Primer 2.3.2

_config.yml

@@ -8,7 +8,7 @@ permalink: pretty
 source: docs
 baseurl: ""
 
-version: 2.3.1
+version: 2.3.2
 
 sass:
   sass_dir: ../

css/.primer-stats.md

@@ -1,13 +1,13 @@
 # [primer]( http://primercss.io )
 
-**Version:** `2.3.1`
+**Version:** `2.3.2`
 
 ## Parker Report
 
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 29043
+- **Total Stylesheet Size:** 29048
 - **Total Media Queries:** 1
 - **Total Rules:** 372
 - **Selectors Per Rule:** 1.521505376344086

docs/guidelines.md

@@ -148,31 +148,11 @@ Here are some good examples that apply the above guidelines:
 
 ## File organization
 
-In general, the CSS file organization should follow something like this:
+In general, a flat directory of files works best, but at GitHub we break things down by bundles (separate compiled CSS files) and sections (directories of related content).
 
-{% highlight bash %}
-styles
-├── components
-│   ├── comments.scss
-│   └── listings.scss
-├── globals
-│   ├── browser_helpers.scss
-│   ├── responsive_helpers.scss
-│   └── variables.scss
-├── plugins
-│   ├── jquery.fancybox-1.3.4.css
-│   └── reset.scss
-├── sections
-│   ├── issues.scss
-│   └── profile.scss
-└── shared
-    ├── forms.scss
-    └── markdown.scss
-{% endhighlight %}
-
-### Multiple bundles
+### Bundles
 
-Variations on this structure include the multi-bundle Rails approach, as seen in the `github/github` repo:
+GitHub.com uses a handful of bundles. Here's a simplified representation of our two desktop bundles (split to support IE9's maximum selector limit per CSS file) and a dedicated mobile bundle for our separate mobile views.
 
 {% highlight bash %}
 stylesheets
@@ -184,22 +164,21 @@ stylesheets
 │   ├── about.scss
 │   └── blog.scss
 └── mobile
-    ├── _variables.scss
-    └── base.scss
+    ├── base.scss
+    └── files.scss
 {% endhighlight %}
 
-Here, we have two desktop bundles to support IE9's maximum selector limit per CSS file, as well as a dedicated mobile bundle to go with our separate mobile views.
-
 ### Including (S)CSS files
 
-Use [Sprockets](https://github.com/sstephenson/sprockets) to **require** files. However, you should explicitly **import** any scss that does not generate styles (`globals/`) in the particular SCSS file you'll be needing its helpers in.  Here's a good example:
+Previously we used [Sprockets](https://github.com/sstephenson/sprockets) to **require** files in Primer and at GitHub. Nowadays, we use explicit lists of **imports** to control the cascade, specificity, and more.
 
 {% highlight scss %}
-//= require_tree ./plugins
-//= require my_awesome_styles
-
-@import "../globals/basic";
+// Imports
+@import "primer";
+@import "component";
+@import "another_component";
 
+// Rules
 .rule { ... }
 {% endhighlight %}
 

docs/roadmap.md

@@ -5,12 +5,8 @@ title: Roadmap
 
 A brief—and incomplete—look at potential future Primer updates with a focus on rewriting components for simplicity and durability, as well as consolidating UI options.
 
-## v2
-- [ ] Add Hound CI for SCSS linting
-- [ ] Document the `user-content` repo somehow
-- [ ] Clarify usage of CLA in our docs
-
 ## v3
+- [ ] Document the `user-content` repo
 - [ ] Refactor alerts to reduce selectors and overrides
 - [ ] Deprecate the gradient mixin for Autoprefixer
 - [ ] Clean up the utility classes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primer",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "homepage": "http://primercss.io",
   "author": "GitHub, Inc.",
   "scss": "./scss/primer.scss",

scss/_forms.scss

@@ -508,10 +508,11 @@ input::-webkit-inner-spin-button {
 
 .select {
   display: inline-block;
+  max-width: 100%;
   padding: 7px 24px 7px 8px;
   vertical-align: middle;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAMAAACNQ/wIAAAAYFBMVEUzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMS2aZBAAAAH3RSTlMAAQYNDg8VJDQ2N0JbdXZ4h4mKpL3Iycvb6vDx8vn+GLdSCAAAAHBJREFUeNq90TcSgDAMRFGRMwZMTnv/W+IBm6BxzSt/pUBGURKT73v+LdkGbNm7xDOUOXlKNOE0RaaEI7QxvIrX4db5pLgtXlqXyJH4kA5VYCr6Xw2msYxqWUgJetyGwH4cfkIjXaCsqfUd/GmMEKQdADIVzQIQilIAAAAASUVORK5CYII=) no-repeat right 8px center;
-  background-size: 9px 13px;
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
+  background-size: 8px 10px;
   box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
   // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
   -webkit-appearance: none;
@@ -524,7 +525,7 @@ input::-webkit-inner-spin-button {
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
   }
 
-  // Hides the caret in IE11
+  // Hides the default caret in IE11
   &::-ms-expand {
     opacity: 0;
   }
@@ -534,7 +535,7 @@ input::-webkit-inner-spin-button {
   padding-top: 3px;
   padding-bottom: 3px;
   font-size: 12px;
-  
+
   &:not([multiple]) {
     height: 26px;
     min-height: 26px;