style-guide 0.6.0 → 0.6.1
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.
- data/README.md +65 -12
- data/config/locales/en.yml +37 -39
- data/lib/style_guide/partial.rb +12 -5
- data/lib/style_guide/version.rb +1 -1
- data/spec/lib/style_guide/partial_spec.rb +18 -2
- data/style-guide.gemspec +4 -3
- metadata +20 -4
data/README.md
CHANGED
@@ -1,31 +1,84 @@
|
|
1
|
-
#
|
1
|
+
# Style Guide
|
2
2
|
|
3
3
|
[](https://travis-ci.org/pivotalexperimental/style-guide) [](https://gemnasium.com/pivotalexperimental/style-guide) [](https://codeclimate.com/github/pivotalexperimental/style-guide)
|
4
4
|
|
5
|
-
|
5
|
+
Style Guide was born out of a need to quickly audit the CSS applied to
|
6
|
+
visual elements and iterate on them in a controlled environment. It is
|
7
|
+
implemented as a Rails engine in order to stay close to the application being
|
8
|
+
styled.
|
6
9
|
|
7
|
-
|
10
|
+
When used with [guard-livereload](https://github.com/guard/guard-livereload),
|
11
|
+
Style Guide automatically reloads itself when you make changes to the CSS,
|
12
|
+
Javascript or HTML in your site.
|
8
13
|
|
9
|
-
The canonical deployed instance is located at [http://swivel.herokuapp.com](http://swivel.herokuapp.com)
|
10
14
|
|
11
15
|
## Usage
|
12
16
|
|
13
|
-
First, require the StyleGuide gem in
|
17
|
+
First, require the StyleGuide gem in `application.rb`:
|
14
18
|
|
15
|
-
Bundler.require
|
16
19
|
require "style_guide"
|
17
20
|
|
18
|
-
Next, mount the StyleGuide application in your `routes.rb` file:
|
19
|
-
|
20
|
-
mount StyleGuide::Engine => "/style-guide"
|
21
21
|
|
22
|
-
|
22
|
+
Then, append a directory of partials in `application.rb`:
|
23
23
|
|
24
24
|
config.style_guide.partial_paths << Rails.root.join("app/views/styles")
|
25
25
|
|
26
|
-
You could, however, just display only your partials (note the assignment):
|
27
26
|
|
28
|
-
|
27
|
+
Next, mount the StyleGuide application in `routes.rb`:
|
28
|
+
|
29
|
+
mount StyleGuide::Engine => "/style-guide" unless Rails.env.production?
|
30
|
+
|
31
|
+
|
32
|
+
Finally, add `Rack::LiveReload` to `environments/development.rb`:
|
33
|
+
|
34
|
+
config.middleware.insert_before(::Rack::Lock, ::Rack::LiveReload)
|
35
|
+
|
36
|
+
|
37
|
+
## Enhancing Your Experience
|
38
|
+
|
39
|
+
Running [Guard](https://github.com/guard/guard) is highly recommended:
|
40
|
+
|
41
|
+
$ guard init
|
42
|
+
INFO - livereload guard added to Guardfile, feel free to edit it
|
43
|
+
$ guard
|
44
|
+
INFO - LiveReload is waiting for a browser to connect.
|
45
|
+
|
46
|
+
Using [Foreman](https://github.com/ddollar/foreman) to manage the startup of
|
47
|
+
both your Rails app and Guard is an excellent idea.
|
48
|
+
|
49
|
+
First, turn off the Guard interactor so that it doesn't try to block output.
|
50
|
+
Add this line to the top of your `Guardfile`:
|
51
|
+
|
52
|
+
interactor :off
|
53
|
+
|
54
|
+
Then add the following lines to `Procfile`, located in the root of your app:
|
55
|
+
|
56
|
+
web: bundle exec rails s
|
57
|
+
guard: bundle exec guard
|
58
|
+
|
59
|
+
|
60
|
+
## Best Practices
|
61
|
+
|
62
|
+
* Do not attempt to do layout in the Style Guide. Attempting to make it lay
|
63
|
+
out your pages will lead you down the road of madness.
|
64
|
+
|
65
|
+
* The canonical installation of Style Guide pulls in all of the
|
66
|
+
directories under `app/views/style_guide`, like so:
|
67
|
+
|
68
|
+
config.style_guide.partial_paths << Rails.root.join("app/views/style_guide/*")
|
69
|
+
|
70
|
+
* From here, the Style Guide is broken down into sections,
|
71
|
+
like "Buttons", "Forms" and "Typography".
|
72
|
+
|
73
|
+
* You should only use static content in the partials you render
|
74
|
+
to the Style Guide.
|
75
|
+
|
76
|
+
|
77
|
+
## Example
|
78
|
+
|
79
|
+
You can see an example of Style Guide at swivel's automatically-deployed
|
80
|
+
testing instance: [http://swivel.herokuapp.com](http://swivel.herokuapp.com)
|
81
|
+
|
29
82
|
|
30
83
|
## License
|
31
84
|
|
data/config/locales/en.yml
CHANGED
@@ -2,15 +2,15 @@ en:
|
|
2
2
|
style_guide:
|
3
3
|
buttons:
|
4
4
|
disabled_anchor: >
|
5
|
-
Make
|
6
|
-
the
|
5
|
+
Make `<a>` buttons look unclickable by adding
|
6
|
+
the `.disabled` class
|
7
7
|
disabled_element: >
|
8
|
-
Make
|
9
|
-
the
|
8
|
+
Make `<button>` buttons look unclickable by adding
|
9
|
+
the `.disabled` class
|
10
10
|
sizes: >
|
11
11
|
Fancy larger or smaller buttons?
|
12
|
-
Add
|
13
|
-
|
12
|
+
Add `.btn-large`, `.btn-small`, or
|
13
|
+
`.btn-mini` for additional sizes.
|
14
14
|
types: >
|
15
15
|
Need different buttons for different occasions? Add some class!
|
16
16
|
|
@@ -19,42 +19,40 @@ en:
|
|
19
19
|
controls_checkbox_and_radio: >
|
20
20
|
Checkboxes are for selecting one or several options in a list while
|
21
21
|
radios are for selecting one option from many.
|
22
|
-
Add the
|
22
|
+
Add the `.inline` class to a series of checkboxes or radios
|
23
23
|
for controls to appear on the same line.
|
24
24
|
controls_input: >
|
25
25
|
Most common form control, text-based input fields.
|
26
26
|
Includes support for all HTML5 types:
|
27
27
|
text, password, datetime, datetime-local, date, month, time, week,
|
28
28
|
number, email, url, search, tel, and color.
|
29
|
-
Requires the use of a specified
|
29
|
+
Requires the use of a specified `type` at all times.
|
30
30
|
controls_select: >
|
31
|
-
Use the default option or specify a
|
31
|
+
Use the default option or specify a `multiple="multiple"`
|
32
32
|
to show multiple options at once.
|
33
33
|
controls_textarea: >
|
34
34
|
Form control which supports multiple lines of text.
|
35
|
-
Change
|
35
|
+
Change the `rows` attribute as necessary.
|
36
36
|
|
37
37
|
# layouts
|
38
38
|
default_styles: >
|
39
39
|
Individual form controls receive styling, but without any required base
|
40
|
-
class on the
|
40
|
+
class on the `<form>` or large changes in markup.
|
41
41
|
Results in stacked, left-aligned labels on top of form controls.
|
42
42
|
horizontal: >
|
43
43
|
Right align labels and float them to the left to make them appear on
|
44
44
|
the same line as controls.
|
45
45
|
Requires the most markup changes from a default form:
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
|
51
|
-
</ul>
|
46
|
+
* Add `.form-horizontal` to the form
|
47
|
+
* Wrap labels and controls in `.control-group`
|
48
|
+
* Add `.control-label` to the label
|
49
|
+
* Wrap any associated controls in `.controls` for proper alignment
|
52
50
|
inline: >
|
53
|
-
Add
|
51
|
+
Add `.form-inline` for left-aligned labels and inline-block
|
54
52
|
controls for a compact layout.
|
55
53
|
search: >
|
56
|
-
Add
|
57
|
-
to the
|
54
|
+
Add `.form-search` to the form and `.search-query`
|
55
|
+
to the `<input>` for an extra-rounded text input.
|
58
56
|
|
59
57
|
images:
|
60
58
|
dropdown_icons: Dropdown in a button group.
|
@@ -66,44 +64,44 @@ en:
|
|
66
64
|
|
67
65
|
tables:
|
68
66
|
default_style: >
|
69
|
-
For basic styling
|
70
|
-
dividers
|
71
|
-
any
|
67
|
+
For basic styling – light padding and only horizontal
|
68
|
+
dividers – add the base class `.table` to
|
69
|
+
any `<table>`.
|
72
70
|
striped: >
|
73
|
-
|
71
|
+
`.table-striped`
|
74
72
|
adds zebra-striping to any table row within the
|
75
|
-
|
73
|
+
`<tbody>` via the `:nth-child` CSS selector
|
76
74
|
(not available in IE7-IE8).
|
77
75
|
bordered: >
|
78
|
-
|
76
|
+
`.table-bordered`
|
79
77
|
adds borders and rounded corners to the table.
|
80
78
|
hover: >
|
81
|
-
|
82
|
-
enables a hover state on table rows within a
|
79
|
+
`.table-hover`
|
80
|
+
enables a hover state on table rows within a `<tbody>`.
|
83
81
|
condensed: >
|
84
|
-
|
82
|
+
`.table-condensed`
|
85
83
|
makes tables more compact by cutting cell padding in half.
|
86
84
|
row_classes: >
|
87
85
|
Use contextual classes to color table rows.
|
88
86
|
|
89
87
|
typography:
|
90
88
|
body_copy: >
|
91
|
-
Bootstrap's global default
|
92
|
-
<strong>14px</strong>, with a
|
93
|
-
<strong>20px</strong>. This is applied to the
|
94
|
-
and all paragraphs. In addition,
|
89
|
+
Bootstrap's global default `font-size` is
|
90
|
+
<strong>14px</strong>, with a `line-height` of
|
91
|
+
<strong>20px</strong>. This is applied to the `<body>`
|
92
|
+
and all paragraphs. In addition, `<p>` (paragraphs)
|
95
93
|
receive a bottom margin of half their line-height (10px by default).
|
96
|
-
Make a paragraph stand out by adding
|
94
|
+
Make a paragraph stand out by adding `.lead`.
|
97
95
|
|
98
96
|
headings: >
|
99
|
-
All HTML headings,
|
100
|
-
|
97
|
+
All HTML headings, `<h1>` through
|
98
|
+
`<h6>` are available.
|
101
99
|
|
102
100
|
code_inline: >
|
103
|
-
Use
|
101
|
+
Use `<code>` for inline snippets of code.
|
104
102
|
code_blocks: >
|
105
|
-
Use
|
103
|
+
Use `<pre>` for multiple lines of code.
|
106
104
|
Be sure to escape any angle brackets in the code for proper rendering.
|
107
105
|
images_placeholders: >
|
108
|
-
Add classes to an
|
106
|
+
Add classes to an `<img>` element to easily
|
109
107
|
style images in any project.
|
data/lib/style_guide/partial.rb
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
require "nokogiri"
|
2
|
+
require "github/markdown"
|
2
3
|
|
3
4
|
module StyleGuide
|
4
5
|
class Partial
|
@@ -22,11 +23,7 @@ module StyleGuide
|
|
22
23
|
end
|
23
24
|
|
24
25
|
def description
|
25
|
-
@description ||=
|
26
|
-
I18n.translate!(id, :scope => [:style_guide, section.id.to_sym])
|
27
|
-
rescue I18n::MissingTranslationData
|
28
|
-
nil
|
29
|
-
end
|
26
|
+
@description ||= GitHub::Markdown.render_gfm(translated_description)
|
30
27
|
end
|
31
28
|
|
32
29
|
def classes
|
@@ -51,6 +48,16 @@ module StyleGuide
|
|
51
48
|
|
52
49
|
private
|
53
50
|
|
51
|
+
def style_guide_scope
|
52
|
+
[:style_guide, section.id.to_sym]
|
53
|
+
end
|
54
|
+
|
55
|
+
def translated_description
|
56
|
+
I18n.translate!(id, :scope => style_guide_scope)
|
57
|
+
rescue I18n::MissingTranslationData
|
58
|
+
nil
|
59
|
+
end
|
60
|
+
|
54
61
|
def parsed
|
55
62
|
@parsed ||= Nokogiri::HTML.parse(content)
|
56
63
|
end
|
data/lib/style_guide/version.rb
CHANGED
@@ -63,9 +63,25 @@ describe StyleGuide::Partial do
|
|
63
63
|
end
|
64
64
|
|
65
65
|
context "when there is a translation string available" do
|
66
|
-
|
66
|
+
let(:translated) { "pants" }
|
67
67
|
|
68
|
-
|
68
|
+
before { I18n.stub(:translate => translated) }
|
69
|
+
|
70
|
+
it { should include "<p>pants" }
|
71
|
+
|
72
|
+
context "when the translated string includes html" do
|
73
|
+
let(:translated) { '`<br>`' }
|
74
|
+
|
75
|
+
it { should include '<br>' }
|
76
|
+
end
|
77
|
+
|
78
|
+
context "when the translated string includes markdown" do
|
79
|
+
let(:translated) { "`meat` *beans* __socks__" }
|
80
|
+
|
81
|
+
it { should include "<code>meat" }
|
82
|
+
it { should include "<em>beans" }
|
83
|
+
it { should include "<strong>socks" }
|
84
|
+
end
|
69
85
|
end
|
70
86
|
end
|
71
87
|
|
data/style-guide.gemspec
CHANGED
@@ -7,16 +7,17 @@ Gem::Specification.new do |s|
|
|
7
7
|
s.authors = ["Doc Ritezel"]
|
8
8
|
s.email = ["doc@pivotallabs.com"]
|
9
9
|
s.homepage = "https://github.com/pivotal/style-guide"
|
10
|
-
s.summary = "A live style guide for your application."
|
11
|
-
s.description = "Inspired by the Bootstrap guide, style-guide is
|
10
|
+
s.summary = "A live style guide for your Rails application."
|
11
|
+
s.description = "Inspired by the Bootstrap guide, style-guide is a Rails engine that lets you see all your styles applied in front of your eyes."
|
12
12
|
|
13
13
|
s.files = `git ls-files`.split( "\n" ) - %w(Gemfile.lock)
|
14
14
|
s.test_files = `git ls-files -- spec/*`.split( "\n" )
|
15
|
-
s.require_paths = [
|
15
|
+
s.require_paths = ["lib"]
|
16
16
|
|
17
17
|
s.add_dependency "rails", "~> 3.2"
|
18
18
|
s.add_dependency "jquery-rails", "~> 2.1"
|
19
19
|
s.add_dependency "nokogiri", "~> 1.5"
|
20
|
+
s.add_dependency "github-markdown", "~> 0.5"
|
20
21
|
|
21
22
|
s.add_development_dependency "foreman"
|
22
23
|
s.add_development_dependency "rb-fsevent"
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: style-guide
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.6.
|
4
|
+
version: 0.6.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -59,6 +59,22 @@ dependencies:
|
|
59
59
|
- - ~>
|
60
60
|
- !ruby/object:Gem::Version
|
61
61
|
version: '1.5'
|
62
|
+
- !ruby/object:Gem::Dependency
|
63
|
+
name: github-markdown
|
64
|
+
requirement: !ruby/object:Gem::Requirement
|
65
|
+
none: false
|
66
|
+
requirements:
|
67
|
+
- - ~>
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: '0.5'
|
70
|
+
type: :runtime
|
71
|
+
prerelease: false
|
72
|
+
version_requirements: !ruby/object:Gem::Requirement
|
73
|
+
none: false
|
74
|
+
requirements:
|
75
|
+
- - ~>
|
76
|
+
- !ruby/object:Gem::Version
|
77
|
+
version: '0.5'
|
62
78
|
- !ruby/object:Gem::Dependency
|
63
79
|
name: foreman
|
64
80
|
requirement: !ruby/object:Gem::Requirement
|
@@ -187,8 +203,8 @@ dependencies:
|
|
187
203
|
- - ! '>='
|
188
204
|
- !ruby/object:Gem::Version
|
189
205
|
version: '0'
|
190
|
-
description: Inspired by the Bootstrap guide, style-guide is
|
191
|
-
see all your styles applied
|
206
|
+
description: Inspired by the Bootstrap guide, style-guide is a Rails engine that lets
|
207
|
+
you see all your styles applied in front of your eyes.
|
192
208
|
email:
|
193
209
|
- doc@pivotallabs.com
|
194
210
|
executables: []
|
@@ -429,7 +445,7 @@ rubyforge_project:
|
|
429
445
|
rubygems_version: 1.8.24
|
430
446
|
signing_key:
|
431
447
|
specification_version: 3
|
432
|
-
summary: A live style guide for your application.
|
448
|
+
summary: A live style guide for your Rails application.
|
433
449
|
test_files:
|
434
450
|
- spec/controllers/style_guide/style_controller_spec.rb
|
435
451
|
- spec/dummy/README.rdoc
|