bitters 1.5.0 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 32bdaa96712b9bd008a25066f3f20dac2a456195
4
- data.tar.gz: c551c47a79622d4d67c5abacc7d660d74985ded0
3
+ metadata.gz: 03146ac229298e36aad3ec9c30ae699451bb9569
4
+ data.tar.gz: d8500b5396569e99803933271b9c49c5478638c4
5
5
  SHA512:
6
- metadata.gz: 41206278a4cc5dfd637c9b9607b616592df14cdcfbeacfbdede34f22237971dcbbf02c0c5b3a4fbf36513ee788fe922551cc2377d913f35d85add0ff3e3f265a
7
- data.tar.gz: db70c31018dd1232bfb6fb024985e86825fb55ad91a6003c5b1407daf1d5a5ef0713196c5b7a7e23333351b7f1ba86d24d20d53a08485a523bf6100e1610b5d1
6
+ metadata.gz: b0f5ab1a7f5ab8531f7fde56ff3899b95dc9bb7a2354cc6432e0f4027964a3514a111dfa4f7ad4d58bb106199d1229ad2fe6317b3358bb3b9f5732ecf1558e91
7
+ data.tar.gz: 1182ebe45777ebb0bad6198f25d51523b32cfd2e66a89241dcc77a799c4ac710b49405189b187deb930ab9e59fc32c02c13093c2f205504aa86ab08f7f0481a5
@@ -5,9 +5,37 @@ project adheres to [Semantic Versioning](http://semver.org).
5
5
 
6
6
  ## [Unreleased]
7
7
 
8
- Nothing at the moment.
8
+ ### Added
9
+
10
+ - Set `margin` to `0` on the `body` element. ([#280])
11
+ - Global variables for the styling of focus outlines. ([#284])
12
+
13
+ ### Changed
14
+
15
+ - Component/feature-specific variables have been moved into their respective
16
+ partials, rather than in the global variables partial. They have also been
17
+ prefixed with an underscore to indicate they are "private" to that
18
+ partial. ([#275])
19
+ - Base typography is now styled off of the `html` element, instead of the `body`
20
+ element. ([#279])
21
+ - `a` elements no longer have `text-decoration` set to `none`. They also now
22
+ have `text-decoration-skip` set to `ink`. ([#283])
23
+ - The visual style of outlines on focused elements (`a`, `$all-buttons`,
24
+ `[type="checkbox"]`, `[type="radio"]`, `[type="file"]`, `select`) is now solid
25
+ and offset from the element. ([#284])
26
+
27
+ ### Removed
28
+
29
+ - Removed `$base-font-size` in favor of more specific implimentations specific
30
+ to the particular object being modified. ([#272])
9
31
 
10
32
  [Unreleased]: https://github.com/thoughtbot/bitters/compare/v1.5.0...HEAD
33
+ [#272]: https://github.com/thoughtbot/bitters/pull/272
34
+ [#275]: https://github.com/thoughtbot/bitters/pull/275
35
+ [#279]: https://github.com/thoughtbot/bitters/pull/279
36
+ [#280]: https://github.com/thoughtbot/bitters/pull/280
37
+ [#283]: https://github.com/thoughtbot/bitters/pull/283
38
+ [#284]: https://github.com/thoughtbot/bitters/pull/284
11
39
 
12
40
  ## [1.5.0] - 2016-11-08
13
41
 
data/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright © 2013–2015 [thoughtbot, inc.](http://thoughtbot.com)
3
+ Copyright © 2013–2017 [thoughtbot, inc.](http://thoughtbot.com)
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the “Software”), to deal
data/README.md CHANGED
@@ -1,112 +1,185 @@
1
- [![Bitters](http://images.thoughtbot.com/bourbon/bitters-logo.svg)](http://bitters.bourbon.io)
2
-
3
- [![Gem Version](http://img.shields.io/gem/v/bitters.svg?style=flat)](https://rubygems.org/gems/bitters)
1
+ [<img src="https://images.thoughtbot.com/bourbon/bitters-logo.svg" width="200" alt="Bitters">](http://bitters.bourbon.io)
4
2
 
5
3
  ## Scaffold styles, variables and structure for Bourbon projects.
6
4
 
7
- Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. It’s been specifically designed for use within web applications. Bitters should live in your project’s root Sass directory and we *encourage* you to modify and extend it to meet your design and brand requirements.
5
+ Bitters helps designers start projects faster by defining a basic set of Sass
6
+ variables, default element style and project structure. It’s been specifically
7
+ designed for use within web applications. Bitters should live in your project’s
8
+ root Sass directory and we *encourage* you to modify and extend it to meet your
9
+ design and brand requirements.
10
+
11
+ Bitters is made to work alongside a CSS reset or style-normalizer; not replace
12
+ one. We like to use [Normalize].
13
+
14
+ [Normalize]: https://github.com/necolas/normalize.css/
8
15
 
9
- Bitters is made to work alongside a CSS reset; not replace one. Our suggested reset is [Normalize](http://necolas.github.io/normalize.css).
16
+ ### Helpful Links
10
17
 
11
- - **[Demo](http://bitters.bourbon.io)**
12
- - **[Changelog](https://github.com/thoughtbot/bitters/releases)**
13
- - **[Issues & Bugs](https://github.com/thoughtbot/bitters/issues)**
18
+ - [Demo](http://bitters.bourbon.io)
19
+ - [Change log](CHANGELOG.md)
20
+ - [Twitter](https://twitter.com/bourbonsass)
21
+ - [Stack Overflow](https://stackoverflow.com/questions/tagged/bitters)
14
22
 
15
- Follow the [@bourbonsass](https://twitter.com/bourbonsass) Twitter account
16
- for updates.
23
+ ## Table of Contents
24
+
25
+ - [Requirements](#requirements)
26
+ - [Installation](#installation)
27
+ - [Using Bitters](#using-bitters)
28
+ - [Command Line Interface](#command-line-interface)
29
+ - [The Bourbon Family](#the-bourbon-family)
30
+ - [Contributing](#contributing)
31
+ - [License](#license)
32
+ - [About](#about)
17
33
 
18
34
  ## Requirements
19
35
 
20
- - [Sass](https://github.com/sass/sass) 3.4+ or [LibSass](https://github.com/sass/libsass) 3.1+
21
- - [Bourbon](https://github.com/thoughtbot/bourbon) 5.0+
36
+ - [Sass] 3.4+ or [LibSass] 3.3+
37
+ - [Bourbon] 5.0+
22
38
  - Ruby 1.9.3+ (required to install Bitters from the command line)
23
39
 
24
- ## Installation
40
+ [Sass]: https://github.com/sass/sass
41
+ [LibSass]: https://github.com/sass/libsass
42
+ [Bourbon]: https://github.com/thoughtbot/bourbon
25
43
 
26
- For command line help, visit our wiki page on Bitters’ [command line interface](https://github.com/thoughtbot/bitters/wiki/Command-Line-Interface).
44
+ ## Installation
27
45
 
28
- 1. Install the Bitters gem using the [RubyGems](https://rubygems.org) package manager:
46
+ 1. Install the Bitters gem using the [RubyGems] package manager:
29
47
 
30
- ```bash
31
- $ gem install bitters
32
- ```
48
+ ```bash
49
+ gem install bitters
50
+ ```
33
51
 
34
- *If you use [rbenv](https://github.com/sstephenson/rbenv), be sure to run `rbenv rehash` without any errors.*
52
+ 1. Install [Bourbon][bourbon-install].
35
53
 
36
- 2. Install [Bourbon](https://github.com/thoughtbot/bourbon#installation)
54
+ 1. Install the Bitters library into the current directory by running the
55
+ following command at the command-line. If you’re using Ruby on Rails, run the
56
+ command in `app/assets/stylesheets`:
37
57
 
38
- 3. Install the Bitters library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in `app/assets/stylesheets`:
58
+ ```bash
59
+ bitters install
60
+ ```
39
61
 
40
- ```bash
41
- $ bitters install
42
- ```
62
+ A `base` directory will be generated which contains all of the Bitters
63
+ files.
43
64
 
44
- A `base` directory will be generated which contains all of the Bitters files.
65
+ 1. Import Bitters after Bourbon in your `application.css.scss` or main manifest
66
+ file. All additional stylesheets should be imported below Bitters.
45
67
 
46
- 4. Import Bitters after Bourbon in your `application.css.scss` or main manifest file. All additional stylesheets should be imported below Bitters.
68
+ ```scss
69
+ @import "bourbon";
70
+ @import "base/base";
71
+ ```
47
72
 
48
- ```scss
49
- @import "bourbon";
50
- @import "base/base";
51
- ```
73
+ 1. Once Bourbon and Bitters are set up, you can begin to import your styles
74
+ below them.
52
75
 
53
- 5. Once Bourbon and Bitters are set up, you can begin to import your styles below them.
76
+ ```scss
77
+ @import "bourbon";
78
+ @import "base/base";
79
+ @import "my-project-styles";
80
+
81
+ ```
54
82
 
55
- ```scss
56
- @import "bourbon";
57
- @import "base/base";
58
- @import "my-project-styles";
59
-
60
- ```
83
+ [RubyGems]: https://rubygems.org
84
+ [bourbon-install]: https://github.com/thoughtbot/bourbon#installation
61
85
 
62
86
  ## Using Bitters
63
87
 
64
88
  ### Sass structure & default style
65
- The Bitters directory should contain styles for all the basic elements used throughout the project. It also contains directories for custom mixins and extends for your site as well. Add code to the existing files or add new files to the directories. Customize Bitters for your site as you see fit.
89
+
90
+ The Bitters directory (`base/`) should contain styles for all the basic elements
91
+ used throughout the project. It also contains directories for custom mixins and
92
+ extends for your site. Add code to the existing files or add new files to the
93
+ directories. Customize Bitters for your site as you see fit.
66
94
 
67
95
  ### Variables
68
- This houses all variables that are used, or will be used, in more than one file in your site. Variable names in Bitters that are used outside of the variables file start with `$base` to indicate that they are the most basic variables.
96
+
97
+ This houses all variables that are used, or will be used, in more than one file
98
+ in your site. Variable names in Bitters that are used outside of the variables
99
+ file start with `$base` to indicate that they are the most basic variables.
69
100
 
70
101
  ### Typography
71
- All type is based on `$base-font-size` which is set to 1em (16px) by default. The spacing around type is based on `$base-line-height` so as to keep a semi-baseline grid. All sizes are scaled up or down by a factor of `0.25`.
102
+
103
+ All type is based on `$base-font-size` which is set to 1em (16px) by default.
104
+ The spacing around type is based on `$base-line-height` so as to keep a
105
+ semi-baseline grid. All sizes are scaled up or down by a factor of `0.25`.
72
106
 
73
107
  ### Lists
108
+
74
109
  All lists have stripped out styles. No bullets, no left padding.
75
110
 
76
111
  ### Forms
77
- Adds basic styles all form elements. The variables at the top of the file all inherit from the variables file but make it really easy to be overridden.
112
+
113
+ Adds basic styles all form elements. The variables at the top of the file all
114
+ inherit from the variables file but make it really easy to be overridden.
78
115
 
79
116
  ### Buttons
117
+
80
118
  Basic style for `button` and `input[type="submit"]`. Base button styles can be
81
119
  changed by modifying the styles applied to `button` and `#{$all-button-inputs}`
82
120
  in `base/_button.scss`.
83
121
 
84
- ## Contributing
122
+ ## Command Line Interface
123
+
124
+ ```bash
125
+ bitters [options]
126
+ ```
127
+
128
+ ### Options
129
+
130
+ | Option | Description |
131
+ | :---------------- | :------------------------ |
132
+ | `-h`, `--help` | Show help |
133
+ | `-v`, `--version` | Show the version number |
134
+ | `--path` | Specify a custom path |
135
+ | `--force` | Force install (overwrite) |
136
+
137
+ ### Commands
138
+
139
+ | Command | Description |
140
+ | :---------------- | :---------------------------------------------------- |
141
+ | `bitters install` | Install Bitters into the current directory |
142
+ | `bitters reset` | Reset Bitters |
143
+ | `bitters remove` | Removes Bitters from the current directory |
144
+ | `bitters help` | Show help |
145
+ | `bitters version` | Show the version number |
85
146
 
86
- For more information on contributing to Bitters, check out our
87
- [contributing guide](https://github.com/thoughtbot/bitters/blob/master/CONTRIBUTING.md).
147
+ ## The Bourbon Family
88
148
 
89
- ## The Bourbon family
149
+ - [Bourbon]: A Lightweight Sass Tool Set
150
+ - [Neat]: A lightweight and flexible Sass grid
151
+ - [Refills]: Components and patterns built with Bourbon and Neat
90
152
 
91
- - [Bourbon](https://github.com/thoughtbot/bourbon): A simple and lightweight mixin library for Sass
92
- - [Neat](https://github.com/thoughtbot/neat): A lightweight semantic grid framework for Sass and Bourbon
93
- - [Bitters](https://github.com/thoughtbot/bitters): Scaffold styles, variables and structure for Bourbon projects
94
- - [Refills](https://github.com/thoughtbot/refills): Prepackaged patterns and components built with Bourbon, Neat and Bitters
153
+ [Bourbon]: https://github.com/thoughtbot/bourbon
154
+ [Neat]: https://github.com/thoughtbot/neat
155
+ [Refills]: https://github.com/thoughtbot/refills
156
+
157
+ ## Contributing
158
+
159
+ See the [contributing] document. Thank you, [contributors]!
160
+
161
+ [contributing]: CONTRIBUTING.md
162
+ [contributors]: https://github.com/thoughtbot/bitters/graphs/contributors
95
163
 
96
164
  ## License
97
165
 
98
- Copyright © 2013–2015 [thoughtbot, inc](http://thoughtbot.com). Bitters is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
166
+ Bitters is copyright © 2013-2017 [thoughtbot, inc.][thoughtbot] It is free
167
+ software, and may be redistributed under the terms specified in the [license].
168
+
169
+ [license]: LICENSE.md
99
170
 
100
- ## About thoughtbot
171
+ ## About
101
172
 
102
- [<img src="http://presskit.thoughtbot.com/images/signature.svg" width="250" alt="thoughtbot logo">][hire]
173
+ Bitters is maintained by the thoughtbot design team. It is funded by
174
+ [thoughtbot, inc.][thoughtbot] and the names and logos for thoughtbot are
175
+ trademarks of thoughtbot, inc.
103
176
 
104
- Bitters is maintained and funded by thoughtbot, inc.
105
- The names and logos for thoughtbot are trademarks of thoughtbot, inc.
177
+ [![thoughtbot][thoughtbot-logo]][thoughtbot]
106
178
 
107
- We love open source software!
108
- See [our other projects][community] or
179
+ We love open-source software! See [our other projects][community] or
109
180
  [hire us][hire] to design, develop, and grow your product.
110
181
 
182
+ [thoughtbot]: https://thoughtbot.com?utm_source=github
183
+ [thoughtbot-logo]: http://presskit.thoughtbot.com/images/thoughtbot-logo-for-readmes.svg
111
184
  [community]: https://thoughtbot.com/community?utm_source=github
112
185
  [hire]: https://thoughtbot.com/hire-us?utm_source=github
@@ -28,8 +28,8 @@
28
28
  <h5>Heading 5</h5>
29
29
  <h6>Heading 6</h6>
30
30
  <p>
31
- Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a>
32
- adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
31
+ Lorem ipsum dolor sit amet, <a href="#">test link adipiscing elit</a>.
32
+ Nullam dignissim convallis est. Quisque aliquam. Donec
33
33
  faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero
34
34
  nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
35
35
  mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
@@ -1,6 +1,6 @@
1
- // Bitters 1.5.0
1
+ // Bitters 1.6.0
2
2
  // http://bitters.bourbon.io
3
- // Copyright 2013-2015 thoughtbot, inc.
3
+ // Copyright 2013-2017 thoughtbot, inc.
4
4
  // MIT License
5
5
 
6
6
  @import "variables";
@@ -7,7 +7,7 @@
7
7
  cursor: pointer;
8
8
  display: inline-block;
9
9
  font-family: $base-font-family;
10
- font-size: $base-font-size;
10
+ font-size: 16px;
11
11
  -webkit-font-smoothing: antialiased;
12
12
  font-weight: 600;
13
13
  line-height: 1;
@@ -19,12 +19,16 @@
19
19
  vertical-align: middle;
20
20
  white-space: nowrap;
21
21
 
22
- &:hover,
23
- &:focus {
22
+ &:hover {
24
23
  background-color: shade($action-color, 20%);
25
24
  color: #fff;
26
25
  }
27
26
 
27
+ &:focus {
28
+ outline: $focus-outline;
29
+ outline-offset: $focus-outline-offset;
30
+ }
31
+
28
32
  &:disabled {
29
33
  cursor: not-allowed;
30
34
  opacity: 0.5;
@@ -1,3 +1,6 @@
1
+ $_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
2
+ $_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
3
+
1
4
  fieldset {
2
5
  background-color: transparent;
3
6
  border: 0;
@@ -22,7 +25,7 @@ select,
22
25
  textarea {
23
26
  display: block;
24
27
  font-family: $base-font-family;
25
- font-size: $base-font-size;
28
+ font-size: 16px;
26
29
  }
27
30
 
28
31
  #{$all-text-inputs} {
@@ -30,7 +33,7 @@ textarea {
30
33
  background-color: $base-background-color;
31
34
  border: $base-border;
32
35
  border-radius: $base-border-radius;
33
- box-shadow: $form-box-shadow;
36
+ box-shadow: $_form-box-shadow;
34
37
  box-sizing: border-box;
35
38
  margin-bottom: $small-spacing;
36
39
  padding: $base-spacing / 3;
@@ -43,7 +46,7 @@ textarea {
43
46
 
44
47
  &:focus {
45
48
  border-color: $action-color;
46
- box-shadow: $form-box-shadow-focus;
49
+ box-shadow: $_form-box-shadow-focus;
47
50
  outline: none;
48
51
  }
49
52
 
@@ -80,3 +83,13 @@ select {
80
83
  margin-bottom: $small-spacing;
81
84
  width: 100%;
82
85
  }
86
+
87
+ [type="checkbox"],
88
+ [type="radio"],
89
+ [type="file"],
90
+ select {
91
+ &:focus {
92
+ outline: $focus-outline;
93
+ outline-offset: $focus-outline-offset;
94
+ }
95
+ }
@@ -12,3 +12,7 @@ html,
12
12
  body {
13
13
  height: 100%;
14
14
  }
15
+
16
+ body {
17
+ margin: 0;
18
+ }
@@ -1,7 +1,7 @@
1
- body {
1
+ html {
2
2
  color: $base-font-color;
3
3
  font-family: $base-font-family;
4
- font-size: $base-font-size;
4
+ font-size: 100%;
5
5
  line-height: $base-line-height;
6
6
  }
7
7
 
@@ -23,14 +23,17 @@ p {
23
23
 
24
24
  a {
25
25
  color: $action-color;
26
- text-decoration: none;
26
+ text-decoration-skip: ink;
27
27
  transition: color $base-duration $base-timing;
28
28
 
29
- &:active,
30
- &:focus,
31
29
  &:hover {
32
30
  color: shade($action-color, 25%);
33
31
  }
32
+
33
+ &:focus {
34
+ outline: $focus-outline;
35
+ outline-offset: $focus-outline-offset;
36
+ }
34
37
  }
35
38
 
36
39
  hr {
@@ -6,9 +6,6 @@ $large-screen: 900px;
6
6
  $base-font-family: $font-stack-system;
7
7
  $heading-font-family: $base-font-family;
8
8
 
9
- // Font Sizes
10
- $base-font-size: 1em;
11
-
12
9
  // Line height
13
10
  $base-line-height: 1.5;
14
11
  $heading-line-height: 1.2;
@@ -37,9 +34,11 @@ $base-border: 1px solid $base-border-color;
37
34
  $base-background-color: #fff;
38
35
  $secondary-background-color: tint($base-border-color, 75%);
39
36
 
40
- // Forms
41
- $form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
42
- $form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
37
+ // Focus
38
+ $focus-outline-color: transparentize($action-color, 0.4);
39
+ $focus-outline-width: 3px;
40
+ $focus-outline: $focus-outline-width solid $focus-outline-color;
41
+ $focus-outline-offset: 2px;
43
42
 
44
43
  // Animations
45
44
  $base-duration: 150ms;
@@ -1,3 +1,3 @@
1
1
  module Bitters
2
- VERSION = "1.5.0"
2
+ VERSION = "1.6.0"
3
3
  end
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "Bitters",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Scaffold styles, variables and structure for Bourbon projects.",
5
5
  "main": "Gulpfile.js",
6
6
  "repository": {
@@ -24,10 +24,10 @@
24
24
  },
25
25
  "homepage": "http://bitters.bourbon.io",
26
26
  "devDependencies": {
27
- "bourbon": "^5.0.0-beta.1",
27
+ "bourbon": "^5.0.0-beta.7",
28
28
  "gulp": "^3.9",
29
29
  "gulp-autoprefixer": "^3.1",
30
- "gulp-connect": "^2.3",
31
- "gulp-sass": "^2.2"
30
+ "gulp-connect": "^5.0",
31
+ "gulp-sass": "^3.1"
32
32
  }
33
33
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bitters
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.5.0
4
+ version: 1.6.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kyle Fiedler
@@ -11,7 +11,7 @@ authors:
11
11
  autorequire:
12
12
  bindir: bin
13
13
  cert_chain: []
14
- date: 2016-11-08 00:00:00.000000000 Z
14
+ date: 2017-05-12 00:00:00.000000000 Z
15
15
  dependencies:
16
16
  - !ruby/object:Gem::Dependency
17
17
  name: bundler