bitters 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +29 -1
- data/LICENSE.md +1 -1
- data/README.md +129 -56
- data/contrib/index.html +2 -2
- data/core/_base.scss +2 -2
- data/core/_buttons.scss +7 -3
- data/core/_forms.scss +16 -3
- data/core/_layout.scss +4 -0
- data/core/_typography.scss +8 -5
- data/core/_variables.scss +5 -6
- data/lib/bitters/version.rb +1 -1
- data/package.json +4 -4
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 03146ac229298e36aad3ec9c30ae699451bb9569
|
4
|
+
data.tar.gz: d8500b5396569e99803933271b9c49c5478638c4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b0f5ab1a7f5ab8531f7fde56ff3899b95dc9bb7a2354cc6432e0f4027964a3514a111dfa4f7ad4d58bb106199d1229ad2fe6317b3358bb3b9f5732ecf1558e91
|
7
|
+
data.tar.gz: 1182ebe45777ebb0bad6198f25d51523b32cfd2e66a89241dcc77a799c4ac710b49405189b187deb930ab9e59fc32c02c13093c2f205504aa86ab08f7f0481a5
|
data/CHANGELOG.md
CHANGED
@@ -5,9 +5,37 @@ project adheres to [Semantic Versioning](http://semver.org).
|
|
5
5
|
|
6
6
|
## [Unreleased]
|
7
7
|
|
8
|
-
|
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–
|
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
|
-
[
|
2
|
-
|
3
|
-
[](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
|
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
|
-
|
16
|
+
### Helpful Links
|
10
17
|
|
11
|
-
-
|
12
|
-
-
|
13
|
-
-
|
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
|
-
|
16
|
-
|
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]
|
21
|
-
- [Bourbon]
|
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
|
-
|
40
|
+
[Sass]: https://github.com/sass/sass
|
41
|
+
[LibSass]: https://github.com/sass/libsass
|
42
|
+
[Bourbon]: https://github.com/thoughtbot/bourbon
|
25
43
|
|
26
|
-
|
44
|
+
## Installation
|
27
45
|
|
28
|
-
1. Install the Bitters gem using the [RubyGems]
|
46
|
+
1. Install the Bitters gem using the [RubyGems] package manager:
|
29
47
|
|
30
|
-
|
31
|
-
|
32
|
-
|
48
|
+
```bash
|
49
|
+
gem install bitters
|
50
|
+
```
|
33
51
|
|
34
|
-
|
52
|
+
1. Install [Bourbon][bourbon-install].
|
35
53
|
|
36
|
-
|
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
|
-
|
58
|
+
```bash
|
59
|
+
bitters install
|
60
|
+
```
|
39
61
|
|
40
|
-
|
41
|
-
|
42
|
-
```
|
62
|
+
A `base` directory will be generated which contains all of the Bitters
|
63
|
+
files.
|
43
64
|
|
44
|
-
|
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
|
-
|
68
|
+
```scss
|
69
|
+
@import "bourbon";
|
70
|
+
@import "base/base";
|
71
|
+
```
|
47
72
|
|
48
|
-
|
49
|
-
|
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
|
-
|
76
|
+
```scss
|
77
|
+
@import "bourbon";
|
78
|
+
@import "base/base";
|
79
|
+
@import "my-project-styles";
|
80
|
+
…
|
81
|
+
```
|
54
82
|
|
55
|
-
|
56
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
##
|
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
|
-
|
87
|
-
[contributing guide](https://github.com/thoughtbot/bitters/blob/master/CONTRIBUTING.md).
|
147
|
+
## The Bourbon Family
|
88
148
|
|
89
|
-
|
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
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
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
|
-
|
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
|
171
|
+
## About
|
101
172
|
|
102
|
-
|
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
|
-
|
105
|
-
The names and logos for thoughtbot are trademarks of thoughtbot, inc.
|
177
|
+
[![thoughtbot][thoughtbot-logo]][thoughtbot]
|
106
178
|
|
107
|
-
We love open
|
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
|
data/contrib/index.html
CHANGED
@@ -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="#"
|
32
|
-
|
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
|
data/core/_base.scss
CHANGED
data/core/_buttons.scss
CHANGED
@@ -7,7 +7,7 @@
|
|
7
7
|
cursor: pointer;
|
8
8
|
display: inline-block;
|
9
9
|
font-family: $base-font-family;
|
10
|
-
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;
|
data/core/_forms.scss
CHANGED
@@ -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:
|
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: $
|
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: $
|
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
|
+
}
|
data/core/_layout.scss
CHANGED
data/core/_typography.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
|
1
|
+
html {
|
2
2
|
color: $base-font-color;
|
3
3
|
font-family: $base-font-family;
|
4
|
-
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:
|
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 {
|
data/core/_variables.scss
CHANGED
@@ -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
|
-
//
|
41
|
-
$
|
42
|
-
$
|
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;
|
data/lib/bitters/version.rb
CHANGED
data/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "Bitters",
|
3
|
-
"version": "1.
|
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.
|
27
|
+
"bourbon": "^5.0.0-beta.7",
|
28
28
|
"gulp": "^3.9",
|
29
29
|
"gulp-autoprefixer": "^3.1",
|
30
|
-
"gulp-connect": "^
|
31
|
-
"gulp-sass": "^
|
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.
|
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:
|
14
|
+
date: 2017-05-12 00:00:00.000000000 Z
|
15
15
|
dependencies:
|
16
16
|
- !ruby/object:Gem::Dependency
|
17
17
|
name: bundler
|