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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d8d2db37daf03e0be0d9aa416aedbdf14ad5f3f9
4
- data.tar.gz: 2fb5ffe4e4919fd72036a862da70d62de7768fbc
3
+ metadata.gz: 6e22cad3ebff50fe64932c8c6f4408ebcb17e759
4
+ data.tar.gz: 99e265432c657f9e6a817e34b911755f01e2cdbd
5
5
  SHA512:
6
- metadata.gz: 398669d7b49a72b13391edecf12146754afa240a348fd6182560ac92084a18265b63e3a494f016855c60d81c3620f853b8f22194565b00ec63bd6e54577541af
7
- data.tar.gz: 88a5f13f3b2d9061d0b1eddbb54f08988aced8c1147df7d50a716e822f838eed352267d6ada17f5fe55da7470a590f40fd77bd6bbe63f8d30d2af5291858c1be
6
+ metadata.gz: b84ceea5d1509e266b468203c85e2d3f50fac2fe63a69e360a57980c92596fccdb9bdc303531bf3fc4a188b140cebc7c5722aea75530df2d88578d42e3823697
7
+ data.tar.gz: ae066809a3152dca0c72abc10633120608eb5f14cb43d6185dcce2860dcd3ecafe7174c9fe38c57e3d1824f43ce0cbd987363a4833346cfb43e6037c5fd66e94
data/.gitignore CHANGED
@@ -4,3 +4,5 @@ _site
4
4
  *gem
5
5
  *swp
6
6
  Gemfile.lock
7
+ contrib/*.css
8
+ node_modules
@@ -0,0 +1,5 @@
1
+ ruby:
2
+ enabled: true
3
+ scss:
4
+ config_file: .scss-lint.yml
5
+ enabled: true
@@ -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
@@ -1,10 +1,47 @@
1
- We love pull requests. Here's a quick guide:
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
- 4. Squash your commits into a single one (more on that [here](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html)).
6
- 5. Rebase against `origin/master`, push to your fork and submit a pull request.
7
- 6. If you are writing a new feature please add documentation for it by making another pull request to the `gh_pages` branch.
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
- **Git Commit Messages**
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
- **SCSS Style Guide**
63
+ ## SCSS Style Guide
27
64
 
28
65
  * Two spaces, no tabs.
29
- * Dashes instead of underscores or camel case: `linear-gradient` **not** `linear_gradient` or `linearGradient`
30
- * Names should be descriptive and written in full-words: `$all-text-inputs-hover` **not** `$hover` or `$alltxthvr`
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
@@ -1,4 +1,3 @@
1
1
  source 'https://rubygems.org'
2
2
 
3
- # Specify your gem's dependencies in bitters.gemspec
4
3
  gemspec
@@ -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.0+
18
- - [Bourbon](https://github.com/thoughtbot/bourbon) 2.0+
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
- ```bash
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 changed by modifying the `%button` extend in `base/extends/_button.scss`.
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
- ## Credits
119
+ ## License
110
120
 
111
- [![thoughtbot](http://images.thoughtbot.com/bourbon/thoughtbot-logo.svg)](http://thoughtbot.com)
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
- Bitters is maintained and funded by [thoughtbot, inc](http://thoughtbot.com). Tweet your questions or suggestions to [@bourbonsass](https://twitter.com/bourbonsass) and while you’re at it follow us too.
123
+ ## About thoughtbot
114
124
 
115
- ## License
125
+ [<img src="http://thoughtbot.github.io/images/signature.svg" width="250" alt="thoughtbot logo">][hire]
116
126
 
117
- 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).
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,4 +1,4 @@
1
- // Bitters 1.0.0
1
+ // Bitters 1.1.0
2
2
  // http://bitters.bourbon.io
3
3
  // Copyright 2013-2015 thoughtbot, inc.
4
4
  // MIT License
@@ -1,31 +1,35 @@
1
- #{$all-button-inputs},
2
- button {
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: 0.75em 1em;
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: darken($action-color, 15%);
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: lighten($base-border-color, 10%);
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: $base-spacing / 2;
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: darken($base-border-color, 10%);
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
- @include appearance(none);
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
- padding-bottom: $small-spacing;
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: em(1088);
7
+ // $max-width: 1200px;
8
8
 
9
9
  // Neat Breakpoints
10
- $medium-screen: em(640);
11
- $large-screen: em(860);
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 darken($base-border-color, 15%);
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 0.1s linear;
28
+ transition: color $base-duration $base-timing;
30
29
 
31
30
  &:active,
32
31
  &:focus,
33
32
  &:hover {
34
- color: darken($action-color, 15%);
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: none;
46
- border-right: none;
47
- border-top: none;
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;
@@ -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', '>= 3.2'
31
- s.add_dependency 'sass', '>= 3.2'
31
+ s.add_dependency 'bourbon', '>= 4.2'
32
+ s.add_dependency 'sass', '>= 3.4'
32
33
  s.add_dependency 'thor'
33
34
  end
@@ -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>
@@ -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
+ }
@@ -1,3 +1,3 @@
1
1
  module Bitters
2
- VERSION = "1.0.0"
2
+ VERSION = "1.1.0"
3
3
  end
@@ -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.0.0
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-01-29 00:00:00.000000000 Z
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: '3.2'
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: '3.2'
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.2'
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.2'
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