bitters 1.8.0 → 2.0.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 +5 -5
- data/.circleci/config.yml +26 -0
- data/.hound.yml +3 -1
- data/.stylelintrc.json +3 -0
- data/.tool-versions +2 -0
- data/CHANGELOG.md +23 -2
- data/CONTRIBUTING.md +2 -2
- data/Gulpfile.js +37 -28
- data/README.md +8 -18
- data/bitters.gemspec +0 -1
- data/contrib/styles.scss +5 -5
- data/core/_base.scss +1 -1
- data/core/_buttons.scss +14 -19
- data/core/_forms.scss +44 -30
- data/core/_tables.scss +4 -4
- data/core/_typography.scss +13 -13
- data/core/_variables.scss +41 -31
- data/lib/bitters/version.rb +1 -1
- data/package-lock.json +7347 -2416
- data/package.json +9 -5
- metadata +6 -21
- data/.ruby-version +0 -1
- data/.scss-lint.yml +0 -249
- data/circle.yml +0 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 04af53c0783319c9fca22a9269483843b4e7b3a1ee6a83dfc58f5d2f9b64446c
|
4
|
+
data.tar.gz: f40919cdab64e9f9b4a0b73b9c809ddda202e7cf7059bd56342faa5eca3d46d8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3701e64b06db1d00bd31aa5e2c9c9960714cf7a50870347615c1c79d09e45438a2a539a348a0a526f32c1fe9f1cac8903cffbbfd07bafa7f8c1162e35d005cc4
|
7
|
+
data.tar.gz: a06653366b3c278a8ed7ffcca7f1b1f53930958093648dafe255192ea48eafd351bcf9452ccfbc9de8e0f99c263134fbf7a47bd67b5f4ed54a9373ff37dea82c
|
@@ -0,0 +1,26 @@
|
|
1
|
+
version: 2
|
2
|
+
|
3
|
+
jobs:
|
4
|
+
build:
|
5
|
+
docker:
|
6
|
+
- image: circleci/ruby:2.6.3
|
7
|
+
|
8
|
+
steps:
|
9
|
+
- checkout
|
10
|
+
|
11
|
+
- restore_cache:
|
12
|
+
keys:
|
13
|
+
- bitters-{{ arch }}-{{ checksum "bitters.gemspec" }}
|
14
|
+
|
15
|
+
- run:
|
16
|
+
name: Install Ruby dependencies
|
17
|
+
command: bundle install --path vendor/bundle
|
18
|
+
|
19
|
+
- save_cache:
|
20
|
+
key: bitters-{{ arch }}-{{ checksum "bitters.gemspec" }}
|
21
|
+
paths:
|
22
|
+
- vendor/bundle
|
23
|
+
|
24
|
+
- run:
|
25
|
+
name: Run the tests
|
26
|
+
command: bundle exec rake
|
data/.hound.yml
CHANGED
data/.stylelintrc.json
ADDED
data/.tool-versions
ADDED
data/CHANGELOG.md
CHANGED
@@ -5,9 +5,30 @@ project adheres to [Semantic Versioning](http://semver.org).
|
|
5
5
|
|
6
6
|
## [Unreleased (`master`)][unreleased]
|
7
7
|
|
8
|
-
|
8
|
+
### Added
|
9
|
+
|
10
|
+
- Added variables for all font weights
|
11
|
+
- Added CSS to make `input[type="search"]` behave as a textfield in Safari
|
12
|
+
|
13
|
+
### Changed
|
14
|
+
|
15
|
+
- Changed project Sass variables to native CSS variables
|
16
|
+
- Changed variables name structures:
|
17
|
+
- Remove "`base`" from CSS vars (`--base-font-family` to `--font-family`)
|
18
|
+
- Placing the modifier after the noun instead of before. Example: `--font-family--heading`
|
19
|
+
- Separating the modifier and noun with 2 dashes. Example: `--font-weight--extra-light`
|
20
|
+
- Changed the default border to use `currentColor`
|
21
|
+
- Changed remaining pixel (`px`) values to `rem`s
|
22
|
+
|
23
|
+
### Removed
|
24
|
+
|
25
|
+
- Removed unused `base-z-index` variable
|
26
|
+
- Removed unused `medium-gray` variable
|
27
|
+
- Removed unused `gray-light` variable
|
28
|
+
- Removed [Bourbon] dependency
|
9
29
|
|
10
30
|
[unreleased]: https://github.com/thoughtbot/bitters/compare/v1.8.0...HEAD
|
31
|
+
[Bourbon]: https://github.com/thoughtbot/bourbon
|
11
32
|
|
12
33
|
## [1.8.0] - 2018-02-05
|
13
34
|
|
@@ -82,7 +103,7 @@ Nothing at the moment.
|
|
82
103
|
|
83
104
|
### Removed
|
84
105
|
|
85
|
-
- Removed `$base-font-size` in favor of more specific
|
106
|
+
- Removed `$base-font-size` in favor of more specific implementations specific
|
86
107
|
to the particular object being modified. ([#272])
|
87
108
|
|
88
109
|
[1.6.0]: https://github.com/thoughtbot/bitters/compare/v1.5.0...v1.6.0
|
data/CONTRIBUTING.md
CHANGED
@@ -7,7 +7,7 @@ agree to abide by the thoughtbot [code of conduct]. Here’s a quick guide:
|
|
7
7
|
|
8
8
|
While developing and contributing to Bitters you can use gulp to spin up an
|
9
9
|
example site to help preview your changes! Running `gulp` to pull in the
|
10
|
-
stylesheets and serve a small HTML preview page at `http://localhost:
|
10
|
+
stylesheets and serve a small HTML preview page at `http://localhost:3000`.
|
11
11
|
|
12
12
|
## Getting started
|
13
13
|
|
@@ -73,7 +73,7 @@ Some things that will increase the chance that your pull request is accepted:
|
|
73
73
|
* Two spaces, no tabs.
|
74
74
|
* Dashes instead of underscores or camel case: `section-header` **not**
|
75
75
|
`section_header` or `sectionHeader`
|
76
|
-
* Names should be descriptive and written in full-words: `$
|
76
|
+
* Names should be descriptive and written in full-words: `$font-color--base`
|
77
77
|
**not** `$color` or `$txtCLR`
|
78
78
|
* Space between property and value: `width: 20px` **not** `width:20px`
|
79
79
|
* Declarations within a block should be ordered alphabetically.
|
data/Gulpfile.js
CHANGED
@@ -1,34 +1,43 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
sass = require("gulp-sass");
|
1
|
+
const bourbon = require('bourbon').includePaths;
|
2
|
+
const browserSync = require('browser-sync').create();
|
3
|
+
const gulp = require('gulp');
|
4
|
+
const sass = require('gulp-sass');
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
6
|
+
const paths = {
|
7
|
+
markup: {
|
8
|
+
src: './contrib/**/*.html',
|
9
|
+
},
|
10
|
+
styles: {
|
11
|
+
src: [
|
12
|
+
'./contrib/**/*.scss',
|
13
|
+
'./core/**/*.scss',
|
14
|
+
],
|
15
|
+
dest: './contrib/',
|
16
|
+
}
|
12
17
|
};
|
13
18
|
|
14
|
-
|
15
|
-
return gulp.src(paths.
|
16
|
-
.pipe(sass({
|
17
|
-
|
18
|
-
|
19
|
-
.pipe(autoprefix("last 2 versions"))
|
20
|
-
.pipe(gulp.dest("./contrib"))
|
21
|
-
.pipe(connect.reload());
|
22
|
-
});
|
19
|
+
function styles() {
|
20
|
+
return gulp.src(paths.styles.src)
|
21
|
+
.pipe(sass({includePaths: bourbon}))
|
22
|
+
.pipe(gulp.dest(paths.styles.dest));
|
23
|
+
};
|
23
24
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
livereload: true
|
25
|
+
function serve(done) {
|
26
|
+
browserSync.init({
|
27
|
+
open: false,
|
28
|
+
server: './contrib/',
|
29
29
|
});
|
30
|
-
|
30
|
+
done();
|
31
|
+
}
|
32
|
+
|
33
|
+
function reload(done) {
|
34
|
+
browserSync.reload();
|
35
|
+
done();
|
36
|
+
}
|
37
|
+
|
38
|
+
function watch() {
|
39
|
+
gulp.watch(paths.markup.src, reload);
|
40
|
+
gulp.watch(paths.styles.src, gulp.series(styles, reload));
|
41
|
+
}
|
31
42
|
|
32
|
-
gulp.task(
|
33
|
-
gulp.watch(paths.scss, ["sass"]);
|
34
|
-
});
|
43
|
+
gulp.task('default', gulp.series(styles, serve, watch));
|
data/README.md
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
-
[<img src="https://images.thoughtbot.com/bourbon/bitters-logo.svg" width="200" alt="Bitters">](http://bitters.bourbon.io)
|
1
|
+
[<img src="https://images.thoughtbot.com/bourbon/bitters-logo-v2.svg" width="200" alt="Bitters">](http://bitters.bourbon.io)
|
2
|
+
|
3
|
+
[](https://houndci.com)
|
2
4
|
|
3
5
|
## Scaffold styles, variables and structure for Bourbon projects.
|
4
6
|
|
@@ -34,12 +36,10 @@ one. We like to use [Normalize].
|
|
34
36
|
## Requirements
|
35
37
|
|
36
38
|
- [Sass] 3.4+ or [LibSass] 3.3+
|
37
|
-
- [Bourbon] 5.0+
|
38
39
|
- Ruby 1.9.3+ (required to install Bitters from the command line)
|
39
40
|
|
40
41
|
[Sass]: https://github.com/sass/sass
|
41
42
|
[LibSass]: https://github.com/sass/libsass
|
42
|
-
[Bourbon]: https://github.com/thoughtbot/bourbon
|
43
43
|
|
44
44
|
## Installation
|
45
45
|
|
@@ -49,8 +49,6 @@ one. We like to use [Normalize].
|
|
49
49
|
gem install bitters
|
50
50
|
```
|
51
51
|
|
52
|
-
1. Install [Bourbon][bourbon-install].
|
53
|
-
|
54
52
|
1. Install the Bitters library into the current directory by running the
|
55
53
|
following command at the command-line. If you’re using Ruby on Rails, run the
|
56
54
|
command in `app/assets/stylesheets`:
|
@@ -66,7 +64,6 @@ one. We like to use [Normalize].
|
|
66
64
|
file. All additional stylesheets should be imported below Bitters.
|
67
65
|
|
68
66
|
```scss
|
69
|
-
@import "bourbon";
|
70
67
|
@import "base/base";
|
71
68
|
```
|
72
69
|
|
@@ -74,23 +71,20 @@ one. We like to use [Normalize].
|
|
74
71
|
below them.
|
75
72
|
|
76
73
|
```scss
|
77
|
-
@import "bourbon";
|
78
74
|
@import "base/base";
|
79
75
|
@import "my-project-styles";
|
80
76
|
…
|
81
77
|
```
|
82
78
|
|
83
79
|
[RubyGems]: https://rubygems.org
|
84
|
-
[bourbon-install]: https://github.com/thoughtbot/bourbon#installation
|
85
80
|
|
86
81
|
## Using Bitters
|
87
82
|
|
88
83
|
### Sass structure & default style
|
89
84
|
|
90
85
|
The Bitters directory (`base/`) should contain styles for all the basic elements
|
91
|
-
used throughout the project.
|
92
|
-
|
93
|
-
directories. Customize Bitters for your site as you see fit.
|
86
|
+
used throughout the project. Add code to the existing files or add new files.
|
87
|
+
Customize Bitters for your site as you see fit.
|
94
88
|
|
95
89
|
### Variables
|
96
90
|
|
@@ -100,9 +94,7 @@ file start with `$base` to indicate that they are the most basic variables.
|
|
100
94
|
|
101
95
|
### Typography
|
102
96
|
|
103
|
-
All type is based on
|
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`.
|
97
|
+
All type is based on a `font-size` of `100%`, set on the `html` element.
|
106
98
|
|
107
99
|
### Lists
|
108
100
|
|
@@ -116,8 +108,8 @@ inherit from the variables file but make it really easy to be overridden.
|
|
116
108
|
### Buttons
|
117
109
|
|
118
110
|
Basic style for `button` and `input[type="submit"]`. Base button styles can be
|
119
|
-
changed by modifying the styles applied to `button` and `#{$all-
|
120
|
-
in `base/
|
111
|
+
changed by modifying the styles applied to `button` and `#{$all-buttons}`
|
112
|
+
in `base/_buttons.scss`.
|
121
113
|
|
122
114
|
## Command Line Interface
|
123
115
|
|
@@ -148,11 +140,9 @@ bitters [options]
|
|
148
140
|
|
149
141
|
- [Bourbon]: A Lightweight Sass Tool Set
|
150
142
|
- [Neat]: A lightweight and flexible Sass grid
|
151
|
-
- [Refills]: Components and patterns built with Bourbon and Neat
|
152
143
|
|
153
144
|
[Bourbon]: https://github.com/thoughtbot/bourbon
|
154
145
|
[Neat]: https://github.com/thoughtbot/neat
|
155
|
-
[Refills]: https://github.com/thoughtbot/refills
|
156
146
|
|
157
147
|
## Contributing
|
158
148
|
|
data/bitters.gemspec
CHANGED
@@ -6,7 +6,6 @@ Gem::Specification.new do |s|
|
|
6
6
|
s.add_development_dependency "bundler", "~> 1.3"
|
7
7
|
s.add_development_dependency "rake"
|
8
8
|
s.add_development_dependency "rspec"
|
9
|
-
s.add_development_dependency "scss_lint", "~> 0.47"
|
10
9
|
s.add_runtime_dependency "bourbon", "~> 5.0"
|
11
10
|
s.add_runtime_dependency "sass", "~> 3.4"
|
12
11
|
s.add_runtime_dependency "thor", "~> 0.19"
|
data/contrib/styles.scss
CHANGED
@@ -2,18 +2,18 @@
|
|
2
2
|
@import "../core/base";
|
3
3
|
|
4
4
|
body {
|
5
|
-
margin: 0 0 (
|
5
|
+
margin: 0 0 calc(var(--spacing) * 2);
|
6
6
|
}
|
7
7
|
|
8
8
|
.container {
|
9
|
-
|
10
|
-
|
9
|
+
margin: 0 auto;
|
10
|
+
padding: 0 var(--spacing);
|
11
11
|
max-width: 500px;
|
12
12
|
}
|
13
13
|
|
14
14
|
.welcome-message {
|
15
|
-
|
15
|
+
padding: var(--spacing) 0;
|
16
16
|
background-color: #f2f2f2;
|
17
|
-
margin-bottom:
|
17
|
+
margin-bottom: var(--spacing);
|
18
18
|
text-align: center;
|
19
19
|
}
|
data/core/_base.scss
CHANGED
data/core/_buttons.scss
CHANGED
@@ -1,43 +1,38 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
button,
|
2
|
+
[type='button'],
|
3
|
+
[type='reset'],
|
4
|
+
[type='submit'] {
|
5
5
|
appearance: none;
|
6
|
-
background-color: $
|
6
|
+
background-color: $action-color;
|
7
7
|
border: 0;
|
8
|
-
border-radius:
|
9
|
-
color:
|
8
|
+
border-radius: var(--border-radius);
|
9
|
+
color: inherit;
|
10
10
|
cursor: pointer;
|
11
11
|
display: inline-block;
|
12
|
-
font-family:
|
13
|
-
font-size:
|
12
|
+
font-family: var(--font-family-base);
|
13
|
+
font-size: 1rem;
|
14
14
|
-webkit-font-smoothing: antialiased;
|
15
15
|
font-weight: 600;
|
16
16
|
line-height: 1;
|
17
|
-
padding:
|
17
|
+
padding: var(--spacing--small) var(--spacing);
|
18
18
|
text-align: center;
|
19
19
|
text-decoration: none;
|
20
|
-
transition: background-color
|
20
|
+
transition: background-color var(--duration) var(--timing);
|
21
21
|
user-select: none;
|
22
22
|
vertical-align: middle;
|
23
23
|
white-space: nowrap;
|
24
24
|
|
25
25
|
&:hover {
|
26
|
-
background-color: $
|
27
|
-
color: contrast-switch($_button-background-color-hover);
|
26
|
+
background-color: $action-color--alt;
|
28
27
|
}
|
29
28
|
|
30
29
|
&:focus {
|
31
|
-
outline:
|
32
|
-
outline-offset:
|
30
|
+
outline: var(--focus-outline);
|
31
|
+
outline-offset: var(--focus-outline-offset);
|
33
32
|
}
|
34
33
|
|
35
34
|
&:disabled {
|
36
35
|
cursor: not-allowed;
|
37
36
|
opacity: 0.5;
|
38
|
-
|
39
|
-
&:hover {
|
40
|
-
background-color: $_button-background-color;
|
41
|
-
}
|
42
37
|
}
|
43
38
|
}
|
data/core/_forms.scss
CHANGED
@@ -1,6 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
:root {
|
2
|
+
--form-box-shadow: inset 0 --border-width 0.1875rem rgba(#000, 0.06);
|
3
|
+
--form-box-shadow-focus: var(--form-box-shadow), 0 0 0.3125rem #{$action-color};
|
4
|
+
}
|
4
5
|
|
5
6
|
fieldset {
|
6
7
|
background-color: transparent;
|
@@ -11,60 +12,73 @@ fieldset {
|
|
11
12
|
|
12
13
|
legend {
|
13
14
|
font-weight: 600;
|
14
|
-
margin-bottom:
|
15
|
+
margin-bottom: var(--spacing--small);
|
15
16
|
padding: 0;
|
16
17
|
}
|
17
18
|
|
18
19
|
label {
|
19
20
|
display: block;
|
20
21
|
font-weight: 600;
|
21
|
-
margin-bottom:
|
22
|
+
margin-bottom: var(--spacing--small);
|
22
23
|
}
|
23
24
|
|
24
25
|
input,
|
25
26
|
select,
|
26
27
|
textarea {
|
27
28
|
display: block;
|
28
|
-
font-family:
|
29
|
-
font-size:
|
29
|
+
font-family: var(--font-family);
|
30
|
+
font-size: 1rem;
|
30
31
|
}
|
31
32
|
|
32
|
-
|
33
|
+
[type='color'],
|
34
|
+
[type='date'],
|
35
|
+
[type='datetime'],
|
36
|
+
[type='datetime-local'],
|
37
|
+
[type='email'],
|
38
|
+
[type='month'],
|
39
|
+
[type='number'],
|
40
|
+
[type='password'],
|
41
|
+
[type='search'],
|
42
|
+
[type='tel'],
|
43
|
+
[type='text'],
|
44
|
+
[type='time'],
|
45
|
+
[type='url'],
|
46
|
+
[type='week'],
|
47
|
+
input:not([type]),
|
48
|
+
textarea {
|
33
49
|
appearance: none;
|
34
|
-
background-color:
|
35
|
-
border:
|
36
|
-
border-radius:
|
37
|
-
box-shadow:
|
50
|
+
background-color: transparent;
|
51
|
+
border: var(--border);
|
52
|
+
border-radius: var(--border-radius);
|
53
|
+
box-shadow: var(--form-box-shadow);
|
38
54
|
box-sizing: border-box;
|
39
|
-
margin-bottom:
|
40
|
-
padding:
|
41
|
-
transition: border-color
|
55
|
+
margin-bottom: var(--spacing--small);
|
56
|
+
padding: calc(var(--spacing) / 3);
|
57
|
+
transition: border-color var(--duration) var(--timing);
|
42
58
|
width: 100%;
|
43
59
|
|
44
|
-
&:hover {
|
45
|
-
border-color: shade($base-border-color, 20%);
|
46
|
-
}
|
47
|
-
|
48
60
|
&:focus {
|
49
|
-
|
50
|
-
box-shadow: $_form-box-shadow-focus;
|
51
|
-
outline: none;
|
61
|
+
box-shadow: var(--form-box-shadow-focus);
|
52
62
|
}
|
53
63
|
|
54
64
|
&:disabled {
|
55
|
-
background-color: shade($_form-background-color, 5%);
|
56
65
|
cursor: not-allowed;
|
57
66
|
|
58
67
|
&:hover {
|
59
|
-
border:
|
68
|
+
border: var(--border);
|
60
69
|
}
|
61
70
|
}
|
62
71
|
|
63
72
|
&::placeholder {
|
64
|
-
color:
|
73
|
+
color: $font-color--base;
|
74
|
+
opacity: 0.25;
|
65
75
|
}
|
66
76
|
}
|
67
77
|
|
78
|
+
[type="search"] {
|
79
|
+
-webkit-appearance: textfield;
|
80
|
+
}
|
81
|
+
|
68
82
|
textarea {
|
69
83
|
resize: vertical;
|
70
84
|
}
|
@@ -72,16 +86,16 @@ textarea {
|
|
72
86
|
[type="checkbox"],
|
73
87
|
[type="radio"] {
|
74
88
|
display: inline;
|
75
|
-
margin-right:
|
89
|
+
margin-right: var(--spacing--small);
|
76
90
|
}
|
77
91
|
|
78
92
|
[type="file"] {
|
79
|
-
margin-bottom:
|
93
|
+
margin-bottom: var(--spacing--small);
|
80
94
|
width: 100%;
|
81
95
|
}
|
82
96
|
|
83
97
|
select {
|
84
|
-
margin-bottom:
|
98
|
+
margin-bottom: var(--spacing--small);
|
85
99
|
width: 100%;
|
86
100
|
}
|
87
101
|
|
@@ -90,7 +104,7 @@ select {
|
|
90
104
|
[type="file"],
|
91
105
|
select {
|
92
106
|
&:focus {
|
93
|
-
outline:
|
94
|
-
outline-offset:
|
107
|
+
outline: var(--focus-outline);
|
108
|
+
outline-offset: var(--focus-outline-offset);
|
95
109
|
}
|
96
110
|
}
|