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 +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
|
-
[![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
|
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
|