bitters 1.0.0 → 1.1.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/.gitignore +2 -0
- data/.hound.yml +5 -0
- data/.scss-lint.yml +14 -0
- data/CONTRIBUTING.md +48 -8
- data/Gemfile +0 -1
- data/Gulpfile.js +31 -0
- data/README.md +29 -11
- data/app/assets/stylesheets/_base.scss +1 -1
- data/app/assets/stylesheets/_buttons.scss +11 -7
- data/app/assets/stylesheets/_forms.scss +20 -8
- data/app/assets/stylesheets/_grid-settings.scss +3 -3
- data/app/assets/stylesheets/_tables.scss +2 -2
- data/app/assets/stylesheets/_typography.scss +6 -12
- data/app/assets/stylesheets/_variables.scss +8 -1
- data/bitters.gemspec +3 -2
- data/contrib/index.html +184 -0
- data/contrib/styles.scss +27 -0
- data/lib/bitters/version.rb +1 -1
- data/package.json +33 -0
- metadata +26 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6e22cad3ebff50fe64932c8c6f4408ebcb17e759
|
|
4
|
+
data.tar.gz: 99e265432c657f9e6a817e34b911755f01e2cdbd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b84ceea5d1509e266b468203c85e2d3f50fac2fe63a69e360a57980c92596fccdb9bdc303531bf3fc4a188b140cebc7c5722aea75530df2d88578d42e3823697
|
|
7
|
+
data.tar.gz: ae066809a3152dca0c72abc10633120608eb5f14cb43d6185dcce2860dcd3ecafe7174c9fe38c57e3d1824f43ce0cbd987363a4833346cfb43e6037c5fd66e94
|
data/.gitignore
CHANGED
data/.hound.yml
ADDED
data/.scss-lint.yml
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
scss_files: "app/assets/stylesheets/**/*.scss"
|
|
2
|
+
linters:
|
|
3
|
+
ColorVariable:
|
|
4
|
+
enabled: false
|
|
5
|
+
LeadingZero:
|
|
6
|
+
enabled: true
|
|
7
|
+
style: include_zero
|
|
8
|
+
PropertyCount:
|
|
9
|
+
enabled: false
|
|
10
|
+
QualifyingElement:
|
|
11
|
+
enabled: false
|
|
12
|
+
StringQuotes:
|
|
13
|
+
enabled: true
|
|
14
|
+
style: double_quotes
|
data/CONTRIBUTING.md
CHANGED
|
@@ -1,10 +1,47 @@
|
|
|
1
|
-
|
|
1
|
+
# Contributing to Bitters
|
|
2
|
+
|
|
3
|
+
We love pull requests from everyone. By participating in this project, you
|
|
4
|
+
agree to abide by the thoughtbot [code of conduct]. Here’s a quick guide:
|
|
5
|
+
|
|
6
|
+
[code of conduct]: https://thoughtbot.com/open-source-code-of-conduct
|
|
7
|
+
|
|
8
|
+
While developing and contributing to Bitters you can use gulp to spin up an example site to help
|
|
9
|
+
preview your changes! Running `gulp` to pull in the stylesheets and serve a small html preview page at `http://localhost:8000`.
|
|
10
|
+
|
|
11
|
+
## Geting started started
|
|
2
12
|
|
|
3
13
|
1. Fork the repository.
|
|
14
|
+
|
|
4
15
|
2. Make your changes in a topic branch.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
16
|
+
|
|
17
|
+
3. Make sure you have node & npm installed by running ↴.
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
$ npm -v
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
If you don't have it, you can download it [here](https://nodejs.org/).
|
|
24
|
+
|
|
25
|
+
4. Next up, `cd` in to bitters and run `npm install`.
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
$ cd bitters
|
|
29
|
+
$ npm install
|
|
30
|
+
```
|
|
31
|
+
Then Run the gulp build command.
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
$ gulp
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This will have gulp compile the stylesheets from `app/assets/stylesheets` and link them to a test page so
|
|
38
|
+
you can preview your changes!!
|
|
39
|
+
|
|
40
|
+
5. Squash your commits into a single one (more on that [here](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html)).
|
|
41
|
+
|
|
42
|
+
6. Rebase against `origin/master`, push to your fork and submit a pull request.
|
|
43
|
+
|
|
44
|
+
7. If you are writing a new feature please add documentation for it by making another pull request to the `gh_pages` branch.
|
|
8
45
|
|
|
9
46
|
At this point you're waiting on us. We like to at least comment on, if not
|
|
10
47
|
accept, pull requests within three business days (and, typically, one business
|
|
@@ -16,19 +53,22 @@ Some things that will increase the chance that your pull request is accepted:
|
|
|
16
53
|
* Use the right syntax and naming conventions.
|
|
17
54
|
* Update parts of the documentation that are affected by your contribution.
|
|
18
55
|
|
|
19
|
-
|
|
56
|
+
## Git Commit Messages
|
|
20
57
|
|
|
21
58
|
* Capitalize your commit messages.
|
|
22
59
|
* Start your message with a verb.
|
|
23
60
|
* Use present tense.
|
|
24
61
|
* Refer to the issue/PR number in your squashed commit message.
|
|
25
62
|
|
|
26
|
-
|
|
63
|
+
## SCSS Style Guide
|
|
27
64
|
|
|
28
65
|
* Two spaces, no tabs.
|
|
29
|
-
* Dashes instead of underscores or camel case: `
|
|
30
|
-
* Names should be descriptive and written in full-words: `$
|
|
66
|
+
* Dashes instead of underscores or camel case: `section-header` **not** `section_header` or `sectionHeader`
|
|
67
|
+
* Names should be descriptive and written in full-words: `$base-font-color` **not** `$color` or `$txtCLR`
|
|
31
68
|
* Space between property and value: `width: 20px` **not** `width:20px`
|
|
32
69
|
* Declarations within a block should be ordered alphabetically.
|
|
33
70
|
* Blank lines between rules.
|
|
34
71
|
* No trailing whitespace. Blank lines should not have any space.
|
|
72
|
+
|
|
73
|
+
For more on how [thoughtbot](http://thoughtbot.com) writes Sass, check out our
|
|
74
|
+
[guides](https://github.com/thoughtbot/guides/tree/master/style/sass).
|
data/Gemfile
CHANGED
data/Gulpfile.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var gulp = require("gulp"),
|
|
2
|
+
autoprefix = require("gulp-autoprefixer"),
|
|
3
|
+
sass = require("gulp-sass"),
|
|
4
|
+
connect = require("gulp-connect"),
|
|
5
|
+
bourbon = require("node-bourbon").includePaths;
|
|
6
|
+
|
|
7
|
+
var paths = {
|
|
8
|
+
scss: "./contrib/*.scss"
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
gulp.task("sass", function () {
|
|
12
|
+
return gulp.src(paths.scss)
|
|
13
|
+
.pipe(sass({
|
|
14
|
+
includePaths: ["styles"].concat(bourbon)
|
|
15
|
+
}))
|
|
16
|
+
.pipe(autoprefix("last 2 versions"))
|
|
17
|
+
.pipe(gulp.dest("./contrib"))
|
|
18
|
+
.pipe(connect.reload());
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
gulp.task("connect", function() {
|
|
22
|
+
connect.server({
|
|
23
|
+
root: "contrib",
|
|
24
|
+
port: 8000,
|
|
25
|
+
livereload: true
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
gulp.task("default", ["sass", "connect"], function() {
|
|
30
|
+
gulp.watch(paths.scss, ["sass"]);
|
|
31
|
+
});
|
data/README.md
CHANGED
|
@@ -12,10 +12,13 @@ Bitters is made to work alongside a CSS reset; not replace one. Our suggested re
|
|
|
12
12
|
- **[Changelog](https://github.com/thoughtbot/bitters/releases)**
|
|
13
13
|
- **[Issues & Bugs](https://github.com/thoughtbot/bitters/issues)**
|
|
14
14
|
|
|
15
|
+
Follow the [@bourbonsass](https://twitter.com/bourbonsass) Twitter account
|
|
16
|
+
for updates.
|
|
17
|
+
|
|
15
18
|
## Requirements
|
|
16
19
|
|
|
17
|
-
- [Sass](https://github.com/sass/sass) 3.
|
|
18
|
-
- [Bourbon](https://github.com/thoughtbot/bourbon) 2
|
|
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) 4.2+
|
|
19
22
|
- Ruby 1.9.3+ (required to install Bitters from the command line)
|
|
20
23
|
|
|
21
24
|
## Installation
|
|
@@ -25,7 +28,7 @@ For command line help, visit our wiki page on Bitters’ [command line interface
|
|
|
25
28
|
1. Install the Bitters gem using the [RubyGems](https://rubygems.org) package manager:
|
|
26
29
|
|
|
27
30
|
```bash
|
|
28
|
-
gem install bitters
|
|
31
|
+
$ gem install bitters
|
|
29
32
|
```
|
|
30
33
|
|
|
31
34
|
*If you use [rbenv](https://github.com/sstephenson/rbenv), be sure to run `rbenv rehash` without any errors.*
|
|
@@ -35,14 +38,14 @@ For command line help, visit our wiki page on Bitters’ [command line interface
|
|
|
35
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`:
|
|
36
39
|
|
|
37
40
|
```bash
|
|
38
|
-
bitters install
|
|
41
|
+
$ bitters install
|
|
39
42
|
```
|
|
40
43
|
|
|
41
44
|
A `base` directory will be generated which contains all of the Bitters files.
|
|
42
45
|
|
|
43
46
|
4. Import Bitters after Bourbon in your `application.css.scss` or main manifest file. All additional stylesheets should be imported below Bitters.
|
|
44
47
|
|
|
45
|
-
```
|
|
48
|
+
```scss
|
|
46
49
|
@import "bourbon";
|
|
47
50
|
@import "base/base";
|
|
48
51
|
```
|
|
@@ -97,7 +100,14 @@ All lists have stripped out styles. No bullets, no left padding. To add back the
|
|
|
97
100
|
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.
|
|
98
101
|
|
|
99
102
|
### Buttons
|
|
100
|
-
Basic style for `button` and `input[type="submit"]`. Base button styles can be
|
|
103
|
+
Basic style for `button` and `input[type="submit"]`. Base button styles can be
|
|
104
|
+
changed by modifying the styles applied to `button` and `#{$all-button-inputs}`
|
|
105
|
+
in `base/_button.scss`.
|
|
106
|
+
|
|
107
|
+
## Contributing
|
|
108
|
+
|
|
109
|
+
For more information on contributing to Bitters, check out our
|
|
110
|
+
[contributing guide](https://github.com/thoughtbot/bitters/blob/master/CONTRIBUTING.md).
|
|
101
111
|
|
|
102
112
|
## The Bourbon family
|
|
103
113
|
|
|
@@ -106,12 +116,20 @@ Basic style for `button` and `input[type="submit"]`. Base button styles can be c
|
|
|
106
116
|
- [Bitters](https://github.com/thoughtbot/bitters): Scaffold styles, variables and structure for Bourbon projects
|
|
107
117
|
- [Refills](https://github.com/thoughtbot/refills): Prepackaged patterns and components built with Bourbon, Neat and Bitters
|
|
108
118
|
|
|
109
|
-
##
|
|
119
|
+
## License
|
|
110
120
|
|
|
111
|
-
[
|
|
121
|
+
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).
|
|
112
122
|
|
|
113
|
-
|
|
123
|
+
## About thoughtbot
|
|
114
124
|
|
|
115
|
-
|
|
125
|
+
[<img src="http://thoughtbot.github.io/images/signature.svg" width="250" alt="thoughtbot logo">][hire]
|
|
116
126
|
|
|
117
|
-
|
|
127
|
+
Bitters is maintained and funded by thoughtbot, inc.
|
|
128
|
+
The names and logos for thoughtbot are trademarks of thoughtbot, inc.
|
|
129
|
+
|
|
130
|
+
We love open source software!
|
|
131
|
+
See [our other projects][community] or
|
|
132
|
+
[hire us][hire] to design, develop, and grow your product.
|
|
133
|
+
|
|
134
|
+
[community]: https://thoughtbot.com/community?utm_source=github
|
|
135
|
+
[hire]: https://thoughtbot.com/hire-us?utm_source=github
|
|
@@ -1,31 +1,35 @@
|
|
|
1
|
-
#{$all-
|
|
2
|
-
|
|
3
|
-
@include appearance(none);
|
|
4
|
-
-webkit-font-smoothing: antialiased;
|
|
1
|
+
#{$all-buttons} {
|
|
2
|
+
appearance: none;
|
|
5
3
|
background-color: $action-color;
|
|
4
|
+
border: 0;
|
|
6
5
|
border-radius: $base-border-radius;
|
|
7
|
-
border: none;
|
|
8
6
|
color: #fff;
|
|
9
7
|
cursor: pointer;
|
|
10
8
|
display: inline-block;
|
|
11
9
|
font-family: $base-font-family;
|
|
12
10
|
font-size: $base-font-size;
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
13
12
|
font-weight: 600;
|
|
14
13
|
line-height: 1;
|
|
15
|
-
padding:
|
|
14
|
+
padding: $small-spacing $base-spacing;
|
|
16
15
|
text-decoration: none;
|
|
16
|
+
transition: background-color $base-duration $base-timing;
|
|
17
17
|
user-select: none;
|
|
18
18
|
vertical-align: middle;
|
|
19
19
|
white-space: nowrap;
|
|
20
20
|
|
|
21
21
|
&:hover,
|
|
22
22
|
&:focus {
|
|
23
|
-
background-color:
|
|
23
|
+
background-color: shade($action-color, 20%);
|
|
24
24
|
color: #fff;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&:disabled {
|
|
28
28
|
cursor: not-allowed;
|
|
29
29
|
opacity: 0.5;
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
background-color: $action-color;
|
|
33
|
+
}
|
|
30
34
|
}
|
|
31
35
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
fieldset {
|
|
2
|
-
background-color:
|
|
2
|
+
background-color: $secondary-background-color;
|
|
3
3
|
border: $base-border;
|
|
4
4
|
margin: 0 0 $small-spacing;
|
|
5
5
|
padding: $base-spacing;
|
|
@@ -27,8 +27,7 @@ label {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
#{$all-text-inputs},
|
|
30
|
-
select[multiple=multiple]
|
|
31
|
-
textarea {
|
|
30
|
+
select[multiple=multiple] {
|
|
32
31
|
background-color: $base-background-color;
|
|
33
32
|
border: $base-border;
|
|
34
33
|
border-radius: $base-border-radius;
|
|
@@ -36,13 +35,13 @@ textarea {
|
|
|
36
35
|
box-sizing: border-box;
|
|
37
36
|
font-family: $base-font-family;
|
|
38
37
|
font-size: $base-font-size;
|
|
39
|
-
margin-bottom: $
|
|
38
|
+
margin-bottom: $small-spacing;
|
|
40
39
|
padding: $base-spacing / 3;
|
|
41
|
-
transition: border-color;
|
|
40
|
+
transition: border-color $base-duration $base-timing;
|
|
42
41
|
width: 100%;
|
|
43
42
|
|
|
44
43
|
&:hover {
|
|
45
|
-
border-color:
|
|
44
|
+
border-color: shade($base-border-color, 20%);
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
&:focus {
|
|
@@ -50,6 +49,15 @@ textarea {
|
|
|
50
49
|
box-shadow: $form-box-shadow-focus;
|
|
51
50
|
outline: none;
|
|
52
51
|
}
|
|
52
|
+
|
|
53
|
+
&:disabled {
|
|
54
|
+
background-color: shade($base-background-color, 5%);
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
border: $base-border;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
53
61
|
}
|
|
54
62
|
|
|
55
63
|
textarea {
|
|
@@ -57,17 +65,21 @@ textarea {
|
|
|
57
65
|
}
|
|
58
66
|
|
|
59
67
|
input[type="search"] {
|
|
60
|
-
|
|
68
|
+
appearance: none;
|
|
61
69
|
}
|
|
62
70
|
|
|
63
71
|
input[type="checkbox"],
|
|
64
72
|
input[type="radio"] {
|
|
65
73
|
display: inline;
|
|
66
74
|
margin-right: $small-spacing / 2;
|
|
75
|
+
|
|
76
|
+
+ label {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
}
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
input[type="file"] {
|
|
70
|
-
|
|
82
|
+
margin-bottom: $small-spacing;
|
|
71
83
|
width: 100%;
|
|
72
84
|
}
|
|
73
85
|
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
// $column: 90px;
|
|
5
5
|
// $gutter: 30px;
|
|
6
6
|
// $grid-columns: 12;
|
|
7
|
-
// $max-width:
|
|
7
|
+
// $max-width: 1200px;
|
|
8
8
|
|
|
9
9
|
// Neat Breakpoints
|
|
10
|
-
$medium-screen:
|
|
11
|
-
$large-screen:
|
|
10
|
+
$medium-screen: 600px;
|
|
11
|
+
$large-screen: 900px;
|
|
12
12
|
|
|
13
13
|
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
|
|
14
14
|
$large-screen-up: new-breakpoint(min-width $large-screen 8);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
table {
|
|
2
|
-
@include font-feature-settings("kern", "liga", "tnum");
|
|
3
2
|
border-collapse: collapse;
|
|
3
|
+
font-feature-settings: "kern", "liga", "tnum";
|
|
4
4
|
margin: $small-spacing 0;
|
|
5
5
|
table-layout: fixed;
|
|
6
6
|
width: 100%;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
th {
|
|
10
|
-
border-bottom: 1px solid
|
|
10
|
+
border-bottom: 1px solid shade($base-border-color, 25%);
|
|
11
11
|
font-weight: 600;
|
|
12
12
|
padding: $small-spacing 0;
|
|
13
13
|
text-align: left;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
body {
|
|
2
|
-
@include font-feature-settings("kern", "liga", "pnum");
|
|
3
|
-
-webkit-font-smoothing: antialiased;
|
|
4
2
|
color: $base-font-color;
|
|
5
3
|
font-family: $base-font-family;
|
|
4
|
+
font-feature-settings: "kern", "liga", "pnum";
|
|
6
5
|
font-size: $base-font-size;
|
|
7
6
|
line-height: $base-line-height;
|
|
8
7
|
}
|
|
@@ -26,25 +25,20 @@ p {
|
|
|
26
25
|
a {
|
|
27
26
|
color: $action-color;
|
|
28
27
|
text-decoration: none;
|
|
29
|
-
transition: color
|
|
28
|
+
transition: color $base-duration $base-timing;
|
|
30
29
|
|
|
31
30
|
&:active,
|
|
32
31
|
&:focus,
|
|
33
32
|
&:hover {
|
|
34
|
-
color:
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:active,
|
|
38
|
-
&:focus {
|
|
39
|
-
outline: none;
|
|
33
|
+
color: shade($action-color, 25%);
|
|
40
34
|
}
|
|
41
35
|
}
|
|
42
36
|
|
|
43
37
|
hr {
|
|
44
38
|
border-bottom: $base-border;
|
|
45
|
-
border-left:
|
|
46
|
-
border-right:
|
|
47
|
-
border-top:
|
|
39
|
+
border-left: 0;
|
|
40
|
+
border-right: 0;
|
|
41
|
+
border-top: 0;
|
|
48
42
|
margin: $base-spacing 0;
|
|
49
43
|
}
|
|
50
44
|
|
|
@@ -22,7 +22,6 @@ $medium-gray: #999;
|
|
|
22
22
|
$light-gray: #ddd;
|
|
23
23
|
|
|
24
24
|
// Font Colors
|
|
25
|
-
$base-background-color: #fff;
|
|
26
25
|
$base-font-color: $dark-gray;
|
|
27
26
|
$action-color: $blue;
|
|
28
27
|
|
|
@@ -30,6 +29,14 @@ $action-color: $blue;
|
|
|
30
29
|
$base-border-color: $light-gray;
|
|
31
30
|
$base-border: 1px solid $base-border-color;
|
|
32
31
|
|
|
32
|
+
// Background Colors
|
|
33
|
+
$base-background-color: #fff;
|
|
34
|
+
$secondary-background-color: tint($base-border-color, 75%);
|
|
35
|
+
|
|
33
36
|
// Forms
|
|
34
37
|
$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
|
|
35
38
|
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
|
|
39
|
+
|
|
40
|
+
// Animations
|
|
41
|
+
$base-duration: 150ms;
|
|
42
|
+
$base-timing: ease;
|
data/bitters.gemspec
CHANGED
|
@@ -26,8 +26,9 @@ design and brand requirements.
|
|
|
26
26
|
s.add_development_dependency 'bundler', '~> 1.3'
|
|
27
27
|
s.add_development_dependency 'rake'
|
|
28
28
|
s.add_development_dependency 'rspec'
|
|
29
|
+
s.add_development_dependency 'scss_lint', '~> 0.40'
|
|
29
30
|
|
|
30
|
-
s.add_dependency 'bourbon', '>=
|
|
31
|
-
s.add_dependency 'sass', '>= 3.
|
|
31
|
+
s.add_dependency 'bourbon', '>= 4.2'
|
|
32
|
+
s.add_dependency 'sass', '>= 3.4'
|
|
32
33
|
s.add_dependency 'thor'
|
|
33
34
|
end
|
data/contrib/index.html
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
7
|
+
<title>Have fun ♥️</title>
|
|
8
|
+
<link rel="stylesheet" href="styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<header class="welcome-message" role="banner">
|
|
12
|
+
<div class="container">
|
|
13
|
+
<h1>
|
|
14
|
+
Hey there! Thanks for contributing to
|
|
15
|
+
<a href="http://bitters.bourbon.io">Bitters</a>.
|
|
16
|
+
</h1>
|
|
17
|
+
<p>
|
|
18
|
+
The purpose of this page is to help contributors view and test
|
|
19
|
+
changes to Bitters.
|
|
20
|
+
</p>
|
|
21
|
+
</div>
|
|
22
|
+
</header>
|
|
23
|
+
<main class="container" role="main">
|
|
24
|
+
<h1>Heading 1</h1>
|
|
25
|
+
<h2>Heading 2</h2>
|
|
26
|
+
<h3>Heading 3</h3>
|
|
27
|
+
<h4>Heading 4</h4>
|
|
28
|
+
<h5>Heading 5</h5>
|
|
29
|
+
<h6>Heading 6</h6>
|
|
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
|
|
33
|
+
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero
|
|
34
|
+
nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
|
|
35
|
+
mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
|
|
36
|
+
volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus
|
|
37
|
+
eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem,
|
|
38
|
+
consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue
|
|
39
|
+
quis tellus.
|
|
40
|
+
</p>
|
|
41
|
+
<p>
|
|
42
|
+
Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing
|
|
43
|
+
elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.
|
|
44
|
+
Nunc iaculis <strong>strong</strong> dui. Nam sit amet sem. Aliquam libero nisi,
|
|
45
|
+
imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis,
|
|
46
|
+
massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim
|
|
47
|
+
diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien
|
|
48
|
+
fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at,
|
|
49
|
+
commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
|
|
50
|
+
</p>
|
|
51
|
+
<h2>Ordered List</h2>
|
|
52
|
+
<ol>
|
|
53
|
+
<li>List Item 1</li>
|
|
54
|
+
<li>List Item 2</li>
|
|
55
|
+
<li>List Item 3</li>
|
|
56
|
+
</ol>
|
|
57
|
+
<h2>Unordered List</h2>
|
|
58
|
+
<ul>
|
|
59
|
+
<li>List Item 1</li>
|
|
60
|
+
<li>List Item 2</li>
|
|
61
|
+
<li>List Item 3</li>
|
|
62
|
+
</ul>
|
|
63
|
+
<h2>Definition List</h2>
|
|
64
|
+
<dl>
|
|
65
|
+
<dt>Definition Term Title 1</dt>
|
|
66
|
+
<dd>Definition term description</dd>
|
|
67
|
+
<dt>Definition Term Title 2</dt>
|
|
68
|
+
<dd>Definition term description</dd>
|
|
69
|
+
<dt>Definition Term Title 3</dt>
|
|
70
|
+
<dd>Definition term description</dd>
|
|
71
|
+
</dl>
|
|
72
|
+
<h2><code>%default-ol</code> Ordered List</h2>
|
|
73
|
+
<ol class="default-ol">
|
|
74
|
+
<li>List Item 1</li>
|
|
75
|
+
<li>List Item 2</li>
|
|
76
|
+
<li>List Item 3</li>
|
|
77
|
+
</ol>
|
|
78
|
+
<h2><code>%default-ul</code> Unordered List</h2>
|
|
79
|
+
<ul class="default-ul">
|
|
80
|
+
<li>List Item 1</li>
|
|
81
|
+
<li>List Item 2</li>
|
|
82
|
+
<li>List Item 3</li>
|
|
83
|
+
</ul>
|
|
84
|
+
<hr>
|
|
85
|
+
<form>
|
|
86
|
+
<label for="text_field">Text Field</label>
|
|
87
|
+
<input id="text_field" type="text">
|
|
88
|
+
<label for="text_field">Disabled Text Field</label>
|
|
89
|
+
<input id="text_field" type="text" disabled>
|
|
90
|
+
<label for="text_area">Text Area</label>
|
|
91
|
+
<textarea id="text_area"></textarea>
|
|
92
|
+
<label for="password">Password</label>
|
|
93
|
+
<input id="password" type="password">
|
|
94
|
+
<label for="search">Search</label>
|
|
95
|
+
<input id="search" type="search">
|
|
96
|
+
<label for="file">File Input</label>
|
|
97
|
+
<input id="file" type="file">
|
|
98
|
+
<label for="select">Select</label>
|
|
99
|
+
<select id="select">
|
|
100
|
+
<optgroup label="Group 1">
|
|
101
|
+
<option value="1">Option 1</option>
|
|
102
|
+
<option value="2">Option 2</option>
|
|
103
|
+
<option value="3">Option 3</option>
|
|
104
|
+
</optgroup>
|
|
105
|
+
<optgroup label="Group 2">
|
|
106
|
+
<option value="1">Option 1</option>
|
|
107
|
+
<option value="2">Option 2</option>
|
|
108
|
+
<option value="3">Option 3</option>
|
|
109
|
+
</optgroup>
|
|
110
|
+
</select>
|
|
111
|
+
<label for="select_multiple">Select Multiple</label>
|
|
112
|
+
<select id="select_multiple" multiple>
|
|
113
|
+
<option value="1">Option 1</option>
|
|
114
|
+
<option value="2">Option 2</option>
|
|
115
|
+
<option value="3">Option 3</option>
|
|
116
|
+
</select>
|
|
117
|
+
<fieldset>
|
|
118
|
+
<legend>Fieldset</legend>
|
|
119
|
+
<label for="first_name">First Name</label>
|
|
120
|
+
<input type="text" id="first_name" placeholder="Bill">
|
|
121
|
+
<label for="last_name">Last Name</label>
|
|
122
|
+
<input type="text" id="last_name" placeholder="Murray">
|
|
123
|
+
</fieldset>
|
|
124
|
+
<fieldset>
|
|
125
|
+
<legend>Fieldset</legend>
|
|
126
|
+
<label for="radio_buttons">Radio Buttons</label>
|
|
127
|
+
<label>
|
|
128
|
+
<input type="radio" value="radio_1">
|
|
129
|
+
Radio 1
|
|
130
|
+
</label>
|
|
131
|
+
<label>
|
|
132
|
+
<input type="radio" value="radio_2">
|
|
133
|
+
Radio 2
|
|
134
|
+
</label>
|
|
135
|
+
<label>
|
|
136
|
+
<input type="radio" value="radio_3">
|
|
137
|
+
Radio 3
|
|
138
|
+
</label>
|
|
139
|
+
</fieldset>
|
|
140
|
+
<fieldset>
|
|
141
|
+
<legend>Fieldset</legend>
|
|
142
|
+
<label for="checkboxes">Checkboxes</label>
|
|
143
|
+
<label>
|
|
144
|
+
<input type="checkbox" value="check_1" checked>
|
|
145
|
+
Checkbox 1
|
|
146
|
+
</label>
|
|
147
|
+
<label>
|
|
148
|
+
<input type="checkbox" value="check_2">
|
|
149
|
+
Checkbox 2
|
|
150
|
+
</label>
|
|
151
|
+
<label>
|
|
152
|
+
<input type="checkbox" value="check_3">
|
|
153
|
+
Checkbox 3
|
|
154
|
+
</label>
|
|
155
|
+
</fieldset>
|
|
156
|
+
<input type="submit" value="Submit">
|
|
157
|
+
<input type="submit" value="Disabled" disabled>
|
|
158
|
+
</form>
|
|
159
|
+
<hr>
|
|
160
|
+
<table cellspacing="0" cellpadding="0">
|
|
161
|
+
<tr>
|
|
162
|
+
<th>Table Header 1</th>
|
|
163
|
+
<th>Table Header 2</th>
|
|
164
|
+
<th>Table Header 3</th>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td>Division 1</td>
|
|
168
|
+
<td>Division 2</td>
|
|
169
|
+
<td>Division 3</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td>Division 1</td>
|
|
173
|
+
<td>Division 2</td>
|
|
174
|
+
<td>Division 3</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Division 1</td>
|
|
178
|
+
<td>Division 2</td>
|
|
179
|
+
<td>Division 3</td>
|
|
180
|
+
</tr>
|
|
181
|
+
</table>
|
|
182
|
+
</main>
|
|
183
|
+
</body>
|
|
184
|
+
</html>
|
data/contrib/styles.scss
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import "bourbon";
|
|
2
|
+
@import "../app/assets/stylesheets/base";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
margin: 0 0 ($base-spacing * 2);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.container {
|
|
9
|
+
@include margin(null auto);
|
|
10
|
+
@include padding(null $base-spacing);
|
|
11
|
+
max-width: 500px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.default-ol {
|
|
15
|
+
@extend %default-ol;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.default-ul {
|
|
19
|
+
@extend %default-ul;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.welcome-message {
|
|
23
|
+
@include padding($base-spacing null);
|
|
24
|
+
background-color: #f2f2f2;
|
|
25
|
+
margin-bottom: $base-spacing;
|
|
26
|
+
text-align: center;
|
|
27
|
+
}
|
data/lib/bitters/version.rb
CHANGED
data/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Bitters",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Scaffold styles, variables and structure for Bourbon projects.",
|
|
5
|
+
"main": "Gulpfile.js",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/thoughtbot/bitters.git"
|
|
9
|
+
},
|
|
10
|
+
"keywords": [
|
|
11
|
+
"bourbon",
|
|
12
|
+
"css",
|
|
13
|
+
"sass",
|
|
14
|
+
"scss",
|
|
15
|
+
"scaffold"
|
|
16
|
+
],
|
|
17
|
+
"author": {
|
|
18
|
+
"name": "thoughtbot",
|
|
19
|
+
"url": "http://thoughtbot.com"
|
|
20
|
+
},
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/thoughtbot/bitters/issues"
|
|
24
|
+
},
|
|
25
|
+
"homepage": "http://bitters.bourbon.io",
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"gulp": "^3.8.11",
|
|
28
|
+
"gulp-autoprefixer": "^2.3.1",
|
|
29
|
+
"gulp-connect": "^2.2.0",
|
|
30
|
+
"gulp-sass": "^2.0.2",
|
|
31
|
+
"node-bourbon": "^4.2.3"
|
|
32
|
+
}
|
|
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.1.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: 2015-
|
|
14
|
+
date: 2015-08-28 00:00:00.000000000 Z
|
|
15
15
|
dependencies:
|
|
16
16
|
- !ruby/object:Gem::Dependency
|
|
17
17
|
name: bundler
|
|
@@ -55,34 +55,48 @@ dependencies:
|
|
|
55
55
|
- - ">="
|
|
56
56
|
- !ruby/object:Gem::Version
|
|
57
57
|
version: '0'
|
|
58
|
+
- !ruby/object:Gem::Dependency
|
|
59
|
+
name: scss_lint
|
|
60
|
+
requirement: !ruby/object:Gem::Requirement
|
|
61
|
+
requirements:
|
|
62
|
+
- - "~>"
|
|
63
|
+
- !ruby/object:Gem::Version
|
|
64
|
+
version: '0.40'
|
|
65
|
+
type: :development
|
|
66
|
+
prerelease: false
|
|
67
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
68
|
+
requirements:
|
|
69
|
+
- - "~>"
|
|
70
|
+
- !ruby/object:Gem::Version
|
|
71
|
+
version: '0.40'
|
|
58
72
|
- !ruby/object:Gem::Dependency
|
|
59
73
|
name: bourbon
|
|
60
74
|
requirement: !ruby/object:Gem::Requirement
|
|
61
75
|
requirements:
|
|
62
76
|
- - ">="
|
|
63
77
|
- !ruby/object:Gem::Version
|
|
64
|
-
version: '
|
|
78
|
+
version: '4.2'
|
|
65
79
|
type: :runtime
|
|
66
80
|
prerelease: false
|
|
67
81
|
version_requirements: !ruby/object:Gem::Requirement
|
|
68
82
|
requirements:
|
|
69
83
|
- - ">="
|
|
70
84
|
- !ruby/object:Gem::Version
|
|
71
|
-
version: '
|
|
85
|
+
version: '4.2'
|
|
72
86
|
- !ruby/object:Gem::Dependency
|
|
73
87
|
name: sass
|
|
74
88
|
requirement: !ruby/object:Gem::Requirement
|
|
75
89
|
requirements:
|
|
76
90
|
- - ">="
|
|
77
91
|
- !ruby/object:Gem::Version
|
|
78
|
-
version: '3.
|
|
92
|
+
version: '3.4'
|
|
79
93
|
type: :runtime
|
|
80
94
|
prerelease: false
|
|
81
95
|
version_requirements: !ruby/object:Gem::Requirement
|
|
82
96
|
requirements:
|
|
83
97
|
- - ">="
|
|
84
98
|
- !ruby/object:Gem::Version
|
|
85
|
-
version: '3.
|
|
99
|
+
version: '3.4'
|
|
86
100
|
- !ruby/object:Gem::Dependency
|
|
87
101
|
name: thor
|
|
88
102
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -110,8 +124,11 @@ extensions: []
|
|
|
110
124
|
extra_rdoc_files: []
|
|
111
125
|
files:
|
|
112
126
|
- ".gitignore"
|
|
127
|
+
- ".hound.yml"
|
|
128
|
+
- ".scss-lint.yml"
|
|
113
129
|
- CONTRIBUTING.md
|
|
114
130
|
- Gemfile
|
|
131
|
+
- Gulpfile.js
|
|
115
132
|
- LICENSE.md
|
|
116
133
|
- README.md
|
|
117
134
|
- Rakefile
|
|
@@ -125,9 +142,12 @@ files:
|
|
|
125
142
|
- app/assets/stylesheets/_variables.scss
|
|
126
143
|
- bin/bitters
|
|
127
144
|
- bitters.gemspec
|
|
145
|
+
- contrib/index.html
|
|
146
|
+
- contrib/styles.scss
|
|
128
147
|
- lib/bitters.rb
|
|
129
148
|
- lib/bitters/generator.rb
|
|
130
149
|
- lib/bitters/version.rb
|
|
150
|
+
- package.json
|
|
131
151
|
- sache.json
|
|
132
152
|
- spec/bitters_spec.rb
|
|
133
153
|
- spec/fixtures/application.scss
|