bitters 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|