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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: b3d8d7e89e3ed0410f696586637d456654e26a48
4
- data.tar.gz: 9fa98ecc50178bf91a56aa7af379730f37ae1103
2
+ SHA256:
3
+ metadata.gz: 04af53c0783319c9fca22a9269483843b4e7b3a1ee6a83dfc58f5d2f9b64446c
4
+ data.tar.gz: f40919cdab64e9f9b4a0b73b9c809ddda202e7cf7059bd56342faa5eca3d46d8
5
5
  SHA512:
6
- metadata.gz: 3f51ad32f99a2cf88c380a92fb5994e0c8cb506e087a0997642ba26a8ee85e8847e41bc2760c273b3998273a42b18dcf7ba14673d8231647b011c136fabe22fc
7
- data.tar.gz: c99642d0c38d9e8c979fb77155a0199e800d596a128c68fc78e55eb22ac02529473d1c41add6d766b591eeedb2a5cff1635198eaee20de2c2f2c14d41aa647bf
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
@@ -1,5 +1,7 @@
1
1
  ruby:
2
2
  enabled: true
3
3
  scss:
4
- config_file: .scss-lint.yml
4
+ enabled: false
5
+ stylelint:
5
6
  enabled: true
7
+ config_file: .stylelintrc.json
@@ -0,0 +1,3 @@
1
+ {
2
+ "extends": "@thoughtbot/stylelint-config"
3
+ }
@@ -0,0 +1,2 @@
1
+ ruby 2.6.3
2
+ nodejs 10.16.0
@@ -5,9 +5,30 @@ project adheres to [Semantic Versioning](http://semver.org).
5
5
 
6
6
  ## [Unreleased (`master`)][unreleased]
7
7
 
8
- Nothing at the moment.
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 implimentations 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
@@ -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:8000`.
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: `$base-font-color`
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.
@@ -1,34 +1,43 @@
1
- var bourbon = require("bourbon").includePaths,
2
- autoprefix = require("gulp-autoprefixer"),
3
- connect = require("gulp-connect"),
4
- gulp = require("gulp"),
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
- var paths = {
8
- scss: [
9
- "./core/**/*.scss",
10
- "./contrib/*.scss"
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
- gulp.task("sass", function () {
15
- return gulp.src(paths.scss)
16
- .pipe(sass({
17
- includePaths: ["styles"].concat(bourbon)
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
- gulp.task("connect", function() {
25
- connect.server({
26
- root: "contrib",
27
- port: 8000,
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("default", ["sass", "connect"], function() {
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
+ [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](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. 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.
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 `$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`.
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-button-inputs}`
120
- in `base/_button.scss`.
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
 
@@ -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"
@@ -2,18 +2,18 @@
2
2
  @import "../core/base";
3
3
 
4
4
  body {
5
- margin: 0 0 ($base-spacing * 2);
5
+ margin: 0 0 calc(var(--spacing) * 2);
6
6
  }
7
7
 
8
8
  .container {
9
- @include margin(null auto);
10
- @include padding(null $base-spacing);
9
+ margin: 0 auto;
10
+ padding: 0 var(--spacing);
11
11
  max-width: 500px;
12
12
  }
13
13
 
14
14
  .welcome-message {
15
- @include padding($base-spacing null);
15
+ padding: var(--spacing) 0;
16
16
  background-color: #f2f2f2;
17
- margin-bottom: $base-spacing;
17
+ margin-bottom: var(--spacing);
18
18
  text-align: center;
19
19
  }
@@ -1,4 +1,4 @@
1
- // Bitters 1.8.0
1
+ // Bitters 2.0.0
2
2
  // http://bitters.bourbon.io
3
3
  // Copyright 2013-2017 thoughtbot, inc.
4
4
  // MIT License
@@ -1,43 +1,38 @@
1
- $_button-background-color: $action-color;
2
- $_button-background-color-hover: shade($action-color, 20%);
3
-
4
- #{$all-buttons} {
1
+ button,
2
+ [type='button'],
3
+ [type='reset'],
4
+ [type='submit'] {
5
5
  appearance: none;
6
- background-color: $_button-background-color;
6
+ background-color: $action-color;
7
7
  border: 0;
8
- border-radius: $base-border-radius;
9
- color: contrast-switch($_button-background-color);
8
+ border-radius: var(--border-radius);
9
+ color: inherit;
10
10
  cursor: pointer;
11
11
  display: inline-block;
12
- font-family: $base-font-family;
13
- font-size: 16px;
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: $small-spacing $base-spacing;
17
+ padding: var(--spacing--small) var(--spacing);
18
18
  text-align: center;
19
19
  text-decoration: none;
20
- transition: background-color $base-duration $base-timing;
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: $_button-background-color-hover;
27
- color: contrast-switch($_button-background-color-hover);
26
+ background-color: $action-color--alt;
28
27
  }
29
28
 
30
29
  &:focus {
31
- outline: $focus-outline;
32
- outline-offset: $focus-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
  }
@@ -1,6 +1,7 @@
1
- $_form-background-color: #fff;
2
- $_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
3
- $_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
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: $small-spacing / 2;
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: $small-spacing / 2;
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: $base-font-family;
29
- font-size: 16px;
29
+ font-family: var(--font-family);
30
+ font-size: 1rem;
30
31
  }
31
32
 
32
- #{$all-text-inputs} {
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: $_form-background-color;
35
- border: $base-border;
36
- border-radius: $base-border-radius;
37
- box-shadow: $_form-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: $small-spacing;
40
- padding: $base-spacing / 3;
41
- transition: border-color $base-duration $base-timing;
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
- border-color: $action-color;
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: $base-border;
68
+ border: var(--border);
60
69
  }
61
70
  }
62
71
 
63
72
  &::placeholder {
64
- color: tint($base-font-color, 40%);
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: $small-spacing / 2;
89
+ margin-right: var(--spacing--small);
76
90
  }
77
91
 
78
92
  [type="file"] {
79
- margin-bottom: $small-spacing;
93
+ margin-bottom: var(--spacing--small);
80
94
  width: 100%;
81
95
  }
82
96
 
83
97
  select {
84
- margin-bottom: $small-spacing;
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: $focus-outline;
94
- outline-offset: $focus-outline-offset;
107
+ outline: var(--focus-outline);
108
+ outline-offset: var(--focus-outline-offset);
95
109
  }
96
110
  }