livingstyleguide 1.0.0.alpha.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +58 -14
- data/lib/livingstyleguide/engine.rb +4 -1
- data/lib/livingstyleguide/example.rb +1 -1
- data/lib/livingstyleguide/filters.rb +1 -0
- data/lib/livingstyleguide/filters/colors.rb +29 -0
- data/lib/livingstyleguide/markdown_extensions.rb +3 -12
- data/lib/livingstyleguide/tilt_template.rb +6 -1
- data/lib/livingstyleguide/variables_importer.rb +18 -4
- data/lib/livingstyleguide/variables_importer/content.erb +14 -12
- data/lib/livingstyleguide/version.rb +1 -1
- data/livingstyleguide.gemspec +2 -2
- data/sache.json +6 -0
- data/stylesheets/_livingstyleguide.scss +5 -5
- data/stylesheets/livingstyleguide/_code.scss +1 -1
- data/stylesheets/livingstyleguide/_color-swatches.scss +22 -9
- data/stylesheets/livingstyleguide/_content.scss +23 -0
- data/stylesheets/livingstyleguide/_layout.scss +26 -0
- data/templates/layouts/default.html.erb +2 -0
- data/test/fixtures/markdown/variables.md +4 -1
- data/test/fixtures/standalone/style.html.lsg +0 -0
- data/test/fixtures/standalone/styleguide-as-json.html.lsg +9 -0
- data/test/integration/markdown_test.rb +4 -4
- data/test/integration/standalone_test.rb +20 -0
- data/test/integration/variables_test.rb +0 -32
- data/test/unit/filters/colors_test.rb +65 -0
- metadata +15 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b47b4660a87bc5faf44a6e8aa89e52fab1bd2f85
|
4
|
+
data.tar.gz: 9a7b6499d34577a3ba00d3ab898eef5741746fcf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 782d2247f94ec877cb9ac41e9ed0628a428cc82cdaa59798f78fc273adabcaf0c98cd2a677ce943a175bd7014cfa974ada76e0ac430f5b2bda2f8823ec8a5194
|
7
|
+
data.tar.gz: 7400e8a9b9ee17c67d630c81272306371331fcea35295303997edc8aa3f0739fc927df002c3650a03770ab627dc76acd8488a5d1c2e59d45f6ba59d36b1fba47
|
data/README.md
CHANGED
@@ -12,21 +12,20 @@ your Sass.
|
|
12
12
|
source: application.css.scss # replace with your default Sass/SCSS file name
|
13
13
|
title: "My Living Style Guide"
|
14
14
|
```
|
15
|
-
|
15
|
+
|
16
16
|
2) Write documentation for each module *app/assets/stylesheets/partials/_buttons.md* (to describe *_buttons.sass* in the same folder):
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
|
18
|
+
Buttons
|
19
|
+
=======
|
20
20
|
|
21
|
-
|
22
|
-
|
23
|
-
|
21
|
+
~~~ example
|
22
|
+
<button class="button">Example button</button>
|
23
|
+
~~~
|
24
|
+
|
25
|
+
~~~ example
|
26
|
+
<button class="button -is-primary">Example button</button>
|
27
|
+
~~~
|
24
28
|
|
25
|
-
~~~ example
|
26
|
-
<button class="button -is-primary">Example button</button>
|
27
|
-
~~~
|
28
|
-
```
|
29
|
-
|
30
29
|
3) Open <http://localhost:3000/assets/styleguide.html>.
|
31
30
|
This will automatically:
|
32
31
|
* Combine all Markdown files and convert them to HTML
|
@@ -34,6 +33,53 @@ your Sass.
|
|
34
33
|
* Show the HTML source syntax highlighted close to each example
|
35
34
|
|
36
35
|
|
36
|
+
## More
|
37
|
+
|
38
|
+
### Haml Examples
|
39
|
+
|
40
|
+
This will output the code as HTML but display the syntax highlighted
|
41
|
+
source as Haml:
|
42
|
+
|
43
|
+
~~~
|
44
|
+
@haml
|
45
|
+
%button.button Example button
|
46
|
+
~~~
|
47
|
+
|
48
|
+
|
49
|
+
### JavaScript example
|
50
|
+
|
51
|
+
This will show and execute the JavaScript, e. g. you designed tabs and
|
52
|
+
need few lines of jQuery to bring them alive.
|
53
|
+
|
54
|
+
~~~ example
|
55
|
+
@javascript
|
56
|
+
$('.button').click(function() {
|
57
|
+
alert('Hello World!');
|
58
|
+
});
|
59
|
+
~~~
|
60
|
+
|
61
|
+
|
62
|
+
### CoffeeScript example
|
63
|
+
|
64
|
+
Same example but using [CoffeeScript](http://coffeescript.org). It will be
|
65
|
+
executed as JavaScript and displayed as CoffeeScript:
|
66
|
+
|
67
|
+
~~~ example
|
68
|
+
@javascript
|
69
|
+
$('.button').click ->
|
70
|
+
alert 'Hello World!'
|
71
|
+
~~~
|
72
|
+
|
73
|
+
|
74
|
+
### Font example
|
75
|
+
|
76
|
+
Show which fonts should be used on your website—this will output and example text block (A—Z, a—z, 0—9, and some special characters) of the given font. It accepts valid CSS like for `font: 32px Comic Sans;`.
|
77
|
+
|
78
|
+
~~~ example
|
79
|
+
@font-example 32px Comic Sans
|
80
|
+
~~~
|
81
|
+
|
82
|
+
|
37
83
|
## Installation
|
38
84
|
|
39
85
|
Add this line to your application's Gemfile:
|
@@ -63,5 +109,3 @@ Or install it yourself as:
|
|
63
109
|
Copyright (c) 2012 – 2014 [Nico Hagenburger](http://www.hagenburger.net).
|
64
110
|
See [MIT-LICENSE.md](MIT-LICENSE.md) for details.
|
65
111
|
Get in touch with [@hagenburger](http://twitter.com/hagenburger) on Twitter.
|
66
|
-
|
67
|
-
|
@@ -4,7 +4,10 @@ module LivingStyleGuide
|
|
4
4
|
attr_accessor :markdown, :files, :options
|
5
5
|
|
6
6
|
@@default_options = {
|
7
|
-
default_language: 'example'
|
7
|
+
default_language: 'example',
|
8
|
+
title: 'Living Style Guide',
|
9
|
+
header: '<h1 class="livingstyleguide--page-title">Living Style Guide</h1>',
|
10
|
+
footer: '<div class="livingstyleguide--footer"><a class="livingstyleguide--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>'
|
8
11
|
}
|
9
12
|
|
10
13
|
def self.default_options
|
@@ -7,7 +7,7 @@ class LivingStyleGuide::Example
|
|
7
7
|
include Hooks::InstanceHooks
|
8
8
|
include LivingStyleGuide::FilterHooks
|
9
9
|
|
10
|
-
FILTER_REGEXP = /^@([a-z\-_]+)(
|
10
|
+
FILTER_REGEXP = /^@([a-z\-_]+)(?:\s+(.+?))?$/
|
11
11
|
|
12
12
|
define_hooks :filter_before, :filter_after, :html, :pre_processor
|
13
13
|
attr_reader :options
|
@@ -0,0 +1,29 @@
|
|
1
|
+
LivingStyleGuide::Example.add_filter :colors do |file|
|
2
|
+
suppress_code_block
|
3
|
+
|
4
|
+
|
5
|
+
if file
|
6
|
+
colors = [LivingStyleGuide::VariablesImporter.variables(file)]
|
7
|
+
else
|
8
|
+
colors = []
|
9
|
+
end
|
10
|
+
|
11
|
+
html do |content|
|
12
|
+
content
|
13
|
+
end
|
14
|
+
|
15
|
+
pre_processor do |content|
|
16
|
+
colors += content.split(/\n+/).map{ |l| l.split(/\s+/) }
|
17
|
+
columns = colors.map{ |l| l.size }.max
|
18
|
+
colors_html = colors.flatten.map do |variable|
|
19
|
+
if variable == '-'
|
20
|
+
css_class = '-lsg-empty'
|
21
|
+
elsif variable[0] != '$'
|
22
|
+
variable = "$#{variable}"
|
23
|
+
end
|
24
|
+
%Q(<li class="livingstyleguide--color-swatch #{css_class || variable}">#{variable}</li>\n)
|
25
|
+
end.join("\n")
|
26
|
+
%(<ul class="livingstyleguide--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
@@ -21,23 +21,14 @@ module LivingStyleGuide
|
|
21
21
|
end
|
22
22
|
|
23
23
|
def header(text, header_level)
|
24
|
-
id =
|
24
|
+
id = slug(text)
|
25
25
|
klass = %w(page-title headline sub-headline sub-sub-headline)[header_level]
|
26
26
|
header_level += 1
|
27
|
-
%Q(<h#{header_level} class="livingstyleguide--#{klass}"#{id}>#{text}</h#{header_level}>\n)
|
27
|
+
%Q(<h#{header_level} class="livingstyleguide--#{klass}" id="#{id}"><a class="livingstyleguide--anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
|
28
28
|
end
|
29
29
|
|
30
30
|
def paragraph(text)
|
31
|
-
|
32
|
-
uri = $1
|
33
|
-
result = %Q(<ul class="livingstyleguide--color-swatches">\n)
|
34
|
-
VariablesImporter.variables(uri).each do |variable|
|
35
|
-
result << %Q(<li class="livingstyleguide--color-swatch $#{variable}">$#{variable}</li>\n)
|
36
|
-
end
|
37
|
-
result << "</ul>\n"
|
38
|
-
else
|
39
|
-
%Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
|
40
|
-
end
|
31
|
+
%Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
|
41
32
|
end
|
42
33
|
|
43
34
|
def list(contents, list_type)
|
@@ -2,6 +2,7 @@ require 'tilt'
|
|
2
2
|
require 'erb'
|
3
3
|
require 'compass'
|
4
4
|
require 'yaml'
|
5
|
+
require 'json'
|
5
6
|
|
6
7
|
module ::Tilt
|
7
8
|
class LivingStyleGuideTemplate < Template
|
@@ -36,11 +37,14 @@ module ::Tilt
|
|
36
37
|
|
37
38
|
private
|
38
39
|
def parse_options(data)
|
39
|
-
|
40
|
+
data.strip!
|
41
|
+
@options = (data[0] == '{') ? JSON.parse(data) : YAML.load(data)
|
42
|
+
@options = {} unless @options
|
40
43
|
@options.keys.each do |key|
|
41
44
|
@options[key.gsub('-', '_').to_sym] = @options.delete(key)
|
42
45
|
end
|
43
46
|
@options[:syntax] = @options.has_key?(:styleguide_sass) ? :sass : :scss
|
47
|
+
@options[:source] ||= File.basename(file, '.html.lsg')
|
44
48
|
end
|
45
49
|
|
46
50
|
private
|
@@ -49,6 +53,7 @@ module ::Tilt
|
|
49
53
|
%Q(@import "#{@options[:source]}"),
|
50
54
|
style_variables,
|
51
55
|
%Q(@import "livingstyleguide"),
|
56
|
+
%Q(@import "#{::LivingStyleGuide::VariablesImporter::VARIABLE_IMPORTER_STRING}"),
|
52
57
|
@options[:styleguide_sass] || @options[:styleguide_scss]
|
53
58
|
].flatten.join(@options[:syntax] == :sass ? "\n" : ';')
|
54
59
|
end
|
@@ -5,7 +5,7 @@ require 'compass'
|
|
5
5
|
module LivingStyleGuide
|
6
6
|
class VariablesImporter < Sass::Importers::Base
|
7
7
|
VALID_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
|
8
|
-
|
8
|
+
VARIABLE_IMPORTER_STRING = 'LivingStyleGuide::VariablesImporter'
|
9
9
|
VALID_EXTENSIONS = %w(*.sass *.scss)
|
10
10
|
|
11
11
|
TEMPLATE_FOLDER = File.join(File.expand_path('../', __FILE__), 'variables_importer')
|
@@ -13,9 +13,9 @@ module LivingStyleGuide
|
|
13
13
|
CONTENT_TEMPLATE = ERB.new(File.read(CONTENT_TEMPLATE_FILE))
|
14
14
|
|
15
15
|
def find(uri, options)
|
16
|
-
if uri =~
|
17
|
-
|
18
|
-
return self.class.sass_engine(uri,
|
16
|
+
if uri =~ /^#{VARIABLE_IMPORTER_STRING}$/
|
17
|
+
@options = options
|
18
|
+
return self.class.sass_engine(uri, all_variables, self, options)
|
19
19
|
end
|
20
20
|
nil
|
21
21
|
end
|
@@ -61,6 +61,20 @@ module LivingStyleGuide
|
|
61
61
|
variables
|
62
62
|
end
|
63
63
|
|
64
|
+
def all_variables
|
65
|
+
variables = []
|
66
|
+
test = /^#{File.dirname(@options[:filename])}/
|
67
|
+
@options[:living_style_guide].files.each do |file|
|
68
|
+
if file =~ test
|
69
|
+
sass = File.read(file)
|
70
|
+
variables << sass.scan(%r(\$([a-z\-_]+)\s*:))
|
71
|
+
end
|
72
|
+
end
|
73
|
+
variables.flatten!
|
74
|
+
variables.uniq!
|
75
|
+
variables
|
76
|
+
end
|
77
|
+
|
64
78
|
def self.sass_options(uri, importer, options)
|
65
79
|
options.merge! :filename => uri.gsub(%r{\*/},"*\\/"), :syntax => :scss, :importer => importer
|
66
80
|
end
|
@@ -1,19 +1,21 @@
|
|
1
1
|
<% variables.each do |variable| %>
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
@if (
|
6
|
-
|
7
|
-
|
2
|
+
$<%= variable %>: null !default;
|
3
|
+
@if $<%= variable %> != null {
|
4
|
+
.\$<%= variable %> {
|
5
|
+
@if type-of($<%= variable %>) == color {
|
6
|
+
@if (lightness($<%= variable %>) < lightness($livingstyleguide--color)) {
|
7
|
+
color: $livingstyleguide--background-color;
|
8
|
+
}
|
8
9
|
|
9
|
-
|
10
|
-
|
10
|
+
&:before {
|
11
|
+
background: $<%= variable %>;
|
12
|
+
}
|
11
13
|
}
|
12
|
-
}
|
13
14
|
|
14
|
-
|
15
|
-
|
16
|
-
|
15
|
+
&:after {
|
16
|
+
@extend %livingstyleguide--code !optional;
|
17
|
+
content: "#{$<%= variable %>}";
|
18
|
+
}
|
17
19
|
}
|
18
20
|
}
|
19
21
|
<% end %>
|
data/livingstyleguide.gemspec
CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
|
|
8
8
|
gem.version = LivingStyleGuide::VERSION
|
9
9
|
gem.authors = ["Nico Hagenburger"]
|
10
10
|
gem.email = ["nico@hagenburger.net"]
|
11
|
-
gem.description = %q{
|
12
|
-
gem.summary = %q{
|
11
|
+
gem.description = %q{Automatically generate beautiful frontend style guides with Sass and Markdown. See http://livingstyleguide.org for details.}
|
12
|
+
gem.summary = %q{Generate beautiful frontend style guides}
|
13
13
|
gem.homepage = ""
|
14
14
|
|
15
15
|
gem.files = `git ls-files`.split($/)
|
data/sache.json
ADDED
@@ -31,16 +31,16 @@ $livingstyleguide--width: 640px !default;
|
|
31
31
|
$livingstyleguide--gap-width: 10px !default;
|
32
32
|
$livingstyleguide--full-width-padding: $livingstyleguide--gap-width !default;
|
33
33
|
|
34
|
-
$livingstyleguide--code-background-color: #
|
35
|
-
$livingstyleguide--code-color:
|
34
|
+
$livingstyleguide--code-background-color: #dddddd !default;
|
35
|
+
$livingstyleguide--code-color: #505050 !default;
|
36
36
|
$livingstyleguide--code-border-width: $livingstyleguide--border-width !default;
|
37
37
|
$livingstyleguide--code-border-color: $livingstyleguide--border-color !default;
|
38
38
|
$livingstyleguide--code-border-radius: $livingstyleguide--border-radius !default;
|
39
39
|
|
40
40
|
$livingstyleguide--color-swatch-color: black !default;
|
41
|
-
$livingstyleguide--color-swatch-border-width:
|
42
|
-
$livingstyleguide--color-swatch-border-color:
|
43
|
-
$livingstyleguide--color-swatch-border-radius:
|
41
|
+
$livingstyleguide--color-swatch-border-width: 4px !default;
|
42
|
+
$livingstyleguide--color-swatch-border-color: rgba(black, 0.05) !default;
|
43
|
+
$livingstyleguide--color-swatch-border-radius: 50% !default;
|
44
44
|
$livingstyleguide--color-swatches-per-line: 2 !default;
|
45
45
|
|
46
46
|
$livingstyleguide--highlight-color: #f6ffa3 !default;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
.livingstyleguide--color-swatch {
|
2
2
|
color: $livingstyleguide--color-swatch-color;
|
3
3
|
display: block;
|
4
4
|
float: left;
|
@@ -6,22 +6,16 @@
|
|
6
6
|
font-size: $livingstyleguide--code-font-size;
|
7
7
|
font-weight: bold;
|
8
8
|
height: 4em * $livingstyleguide--base-line-height;
|
9
|
-
line-height: $livingstyleguide--base-line-height;
|
9
|
+
line-height: 1em * $livingstyleguide--base-line-height;
|
10
10
|
list-style: none;
|
11
11
|
margin: 0 $livingstyleguide--gap-width $livingstyleguide--gap-width 0;
|
12
|
-
padding-top: 1em * $livingstyleguide--base-line-height;
|
13
12
|
position: relative;
|
14
13
|
text-align: center;
|
15
|
-
width: floor(
|
16
|
-
($livingstyleguide--width - ($livingstyleguide--color-swatches-per-line - 1) * $livingstyleguide--gap-width)
|
17
|
-
/
|
18
|
-
$livingstyleguide--color-swatches-per-line
|
19
|
-
);
|
20
14
|
z-index: 1;
|
21
15
|
@include box-sizing(border-box);
|
22
16
|
|
23
17
|
&:before {
|
24
|
-
border: $livingstyleguide--color-swatch-border-width $livingstyleguide--
|
18
|
+
border: $livingstyleguide--color-swatch-border-width $livingstyleguide--color-swatch-border-color solid;
|
25
19
|
content: "";
|
26
20
|
display: block;
|
27
21
|
height: 100%;
|
@@ -49,3 +43,22 @@
|
|
49
43
|
@include clearfix;
|
50
44
|
@include box-sizing(border-box);
|
51
45
|
}
|
46
|
+
|
47
|
+
@for $i from 1 through 12 {
|
48
|
+
.livingstyleguide--color-swatches.-lsg-#{$i}-columns .livingstyleguide--color-swatch {
|
49
|
+
$size: floor(($livingstyleguide--width - ($i - 1) * $livingstyleguide--gap-width) / $i);
|
50
|
+
height: $size;
|
51
|
+
padding-top: $size / 2 + ($size / 5 - 20px);
|
52
|
+
width: $size;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
.livingstyleguide--color-swatch.-lsg-empty {
|
57
|
+
@include hide-text;
|
58
|
+
|
59
|
+
&:before,
|
60
|
+
&:after {
|
61
|
+
display: none;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
@@ -36,6 +36,29 @@
|
|
36
36
|
-webkit-font-smoothing: antialiased;
|
37
37
|
}
|
38
38
|
|
39
|
+
.livingstyleguide--anchor {
|
40
|
+
color: inherit;
|
41
|
+
margin-left: -1em;
|
42
|
+
position: absolute;
|
43
|
+
text-decoration: none;
|
44
|
+
width: 1em;
|
45
|
+
@include opacity(0);
|
46
|
+
|
47
|
+
.livingstyleguide--headline:hover &,
|
48
|
+
.livingstyleguide--sub-headline:hover &,
|
49
|
+
.livingstyleguide--sub-sub-headline:hover & {
|
50
|
+
@include opacity(0.5);
|
51
|
+
|
52
|
+
&:hover {
|
53
|
+
@include opacity(1);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
&:before {
|
58
|
+
content: "#";
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
39
62
|
.livingstyleguide--page-title {
|
40
63
|
display: block;
|
41
64
|
font-size: $livingstyleguide--page-title-font-size;
|
@@ -2,3 +2,29 @@
|
|
2
2
|
background: $livingstyleguide--background-color;
|
3
3
|
display: block;
|
4
4
|
}
|
5
|
+
|
6
|
+
.livingstyleguide--container {
|
7
|
+
display: block;
|
8
|
+
min-height: 50vh;
|
9
|
+
}
|
10
|
+
|
11
|
+
.livingstyleguide--footer {
|
12
|
+
margin: (4 * $livingstyleguide--gap-width) auto;
|
13
|
+
width: $livingstyleguide--width;
|
14
|
+
}
|
15
|
+
|
16
|
+
.livingstyleguide--logo {
|
17
|
+
background: url('data:image/png;base64,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');
|
18
|
+
background-size: 100%;
|
19
|
+
display: block;
|
20
|
+
height: 100px;
|
21
|
+
margin: auto;
|
22
|
+
width: 203px;
|
23
|
+
@include hide-text;
|
24
|
+
|
25
|
+
&:hover {
|
26
|
+
-webkit-transform: translateZ(0);
|
27
|
+
@include filter(brightness(0.7));
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
File without changes
|
@@ -0,0 +1,9 @@
|
|
1
|
+
{
|
2
|
+
"source": "style.scss",
|
3
|
+
"title": "My Nice & Beautiful Living Style Guide",
|
4
|
+
"javascript-before": ["modernizr.js"],
|
5
|
+
"javascript-after": ["http://code.jquery.com/jquery-2.0.3.js", "application.js"],
|
6
|
+
"header": "<h1>Super Style Guide</h1>",
|
7
|
+
"footer": "<p>Made by me</p>"
|
8
|
+
}
|
9
|
+
|
@@ -54,7 +54,7 @@ class MarkdownTest < Minitest::Test
|
|
54
54
|
|
55
55
|
def test_text
|
56
56
|
assert_markdown <<-HTML, 'text.md'
|
57
|
-
<h2 class="livingstyleguide--headline" id="hello-world">Hello World</h2>
|
57
|
+
<h2 class="livingstyleguide--headline" id="hello-world"><a class="livingstyleguide--anchor" href="#hello-world"></a>Hello World</h2>
|
58
58
|
<p class="livingstyleguide--paragraph">Lorem ipsum <strong>dolor</strong> sit amet,
|
59
59
|
<code class="livingstyleguide--code-span livingstyleguide--code"><consectetur> adipiscing</code> elit.
|
60
60
|
Sed a pulvinar turpis.</p>
|
@@ -63,13 +63,13 @@ class MarkdownTest < Minitest::Test
|
|
63
63
|
<li class="livingstyleguide--unordered-list-item">Ipsum</li>
|
64
64
|
<li class="livingstyleguide--unordered-list-item">Dolor</li>
|
65
65
|
</ul>
|
66
|
-
<h3 class="livingstyleguide--sub-headline" id="more-lorem">More Lorem</h3>
|
66
|
+
<h3 class="livingstyleguide--sub-headline" id="more-lorem"><a class="livingstyleguide--anchor" href="#more-lorem"></a>More Lorem</h3>
|
67
67
|
<ol class="livingstyleguide--ordered-list">
|
68
68
|
<li class="livingstyleguide--ordered-list-item">Lorem</li>
|
69
69
|
<li class="livingstyleguide--ordered-list-item">Ipsum</li>
|
70
70
|
<li class="livingstyleguide--ordered-list-item">Dolor</li>
|
71
71
|
</ol>
|
72
|
-
<h4 class="livingstyleguide--sub-sub-headline" id="even-more-lorem">Even More Lorem</h4>
|
72
|
+
<h4 class="livingstyleguide--sub-sub-headline" id="even-more-lorem"><a class="livingstyleguide--anchor" href="#even-more-lorem"></a>Even More Lorem</h4>
|
73
73
|
HTML
|
74
74
|
end
|
75
75
|
|
@@ -106,7 +106,7 @@ class MarkdownTest < Minitest::Test
|
|
106
106
|
|
107
107
|
def test_variables
|
108
108
|
assert_markdown <<-HTML, 'variables.md'
|
109
|
-
<ul class="livingstyleguide--color-swatches">
|
109
|
+
<ul class="livingstyleguide--color-swatches -lsg-2-columns">
|
110
110
|
<li class="livingstyleguide--color-swatch $blue">$blue</li>
|
111
111
|
<li class="livingstyleguide--color-swatch $green">$green</li>
|
112
112
|
</ul>
|
@@ -10,6 +10,12 @@ class MarkdownTest < Minitest::Test
|
|
10
10
|
assert_match %r(<title>My Nice & Beautiful Living Style Guide</title>), html
|
11
11
|
end
|
12
12
|
|
13
|
+
def test_default_source
|
14
|
+
html = render('test/fixtures/standalone/style.html.lsg')
|
15
|
+
assert_match %r(background: red), html
|
16
|
+
assert_match %r(<button class="button">), html
|
17
|
+
end
|
18
|
+
|
13
19
|
def test_custom_styles
|
14
20
|
html = render('test/fixtures/standalone/styleguide-with-style.html.lsg')
|
15
21
|
assert_match %r(.livingstyleguide--ordered-list { color: red;), html
|
@@ -39,6 +45,20 @@ class MarkdownTest < Minitest::Test
|
|
39
45
|
assert_match %r(<p>Made by me</p>), html
|
40
46
|
end
|
41
47
|
|
48
|
+
def test_json
|
49
|
+
html = render('test/fixtures/standalone/styleguide-as-json.html.lsg')
|
50
|
+
assert_match %r(<title>My Nice & Beautiful Living Style Guide</title>), html
|
51
|
+
assert_match %r(<script src="modernizr.js"></script>.*</head>), html
|
52
|
+
assert_match %r(<script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script src="application.js"></script> </body>), html
|
53
|
+
assert_match %r(<h1>Super Style Guide</h1>), html
|
54
|
+
assert_match %r(<p>Made by me</p>), html
|
55
|
+
end
|
56
|
+
|
57
|
+
def test_variables
|
58
|
+
html = render('test/fixtures/standalone/styleguide.html.lsg')
|
59
|
+
assert_match %r(\.\\\$my-base-color), html
|
60
|
+
end
|
61
|
+
|
42
62
|
private
|
43
63
|
def render(file)
|
44
64
|
Tilt.new(file).render.gsub(/\s+/, ' ')
|
@@ -30,36 +30,4 @@ class VariablesImporterTest < Minitest::Test
|
|
30
30
|
css.strip!
|
31
31
|
%Q( #{css}\n)
|
32
32
|
end
|
33
|
-
|
34
|
-
def test_output_of_variables
|
35
|
-
css = render <<-SCSS
|
36
|
-
$livingstyleguide--color: black;
|
37
|
-
%livingstyleguide--code {
|
38
|
-
test: code;
|
39
|
-
}
|
40
|
-
%livingstyleguide--color-swatch {
|
41
|
-
test: color;
|
42
|
-
}
|
43
|
-
@import "variables/colors";
|
44
|
-
@import "variables:variables/colors";
|
45
|
-
SCSS
|
46
|
-
|
47
|
-
assert_equal <<-CSS, css
|
48
|
-
.\\$my-wonderful_red:after, .\\$blue:after {
|
49
|
-
test: code;
|
50
|
-
}
|
51
|
-
.\\$my-wonderful_red {
|
52
|
-
test: color;
|
53
|
-
}
|
54
|
-
.\\$my-wonderful_red:before {
|
55
|
-
background: red;
|
56
|
-
}
|
57
|
-
.\\$my-wonderful_red:after {
|
58
|
-
content: "red";
|
59
|
-
}
|
60
|
-
.\\$blue:after {
|
61
|
-
content: "blue";
|
62
|
-
}
|
63
|
-
CSS
|
64
|
-
end
|
65
33
|
end
|
@@ -0,0 +1,65 @@
|
|
1
|
+
# encoding: utf-8
|
2
|
+
|
3
|
+
require 'example_test_helper'
|
4
|
+
|
5
|
+
class ColorsTest < ExampleTestCase
|
6
|
+
|
7
|
+
def test_colors_of_file
|
8
|
+
LivingStyleGuide::VariablesImporter.stub :variables, %w(red blue) do
|
9
|
+
assert_render_equals <<-INPUT, <<-OUTPUT
|
10
|
+
@colors variables/colors
|
11
|
+
INPUT
|
12
|
+
<ul class="livingstyleguide--color-swatches -lsg-2-columns">
|
13
|
+
<li class="livingstyleguide--color-swatch $red">$red</li>
|
14
|
+
<li class="livingstyleguide--color-swatch $blue">$blue</li>
|
15
|
+
</ul>
|
16
|
+
OUTPUT
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
20
|
+
def test_defined_colors
|
21
|
+
assert_render_equals <<-INPUT, <<-OUTPUT
|
22
|
+
@colors
|
23
|
+
$orange $green
|
24
|
+
INPUT
|
25
|
+
<ul class="livingstyleguide--color-swatches -lsg-2-columns">
|
26
|
+
<li class="livingstyleguide--color-swatch $orange">$orange</li>
|
27
|
+
<li class="livingstyleguide--color-swatch $green">$green</li>
|
28
|
+
</ul>
|
29
|
+
OUTPUT
|
30
|
+
end
|
31
|
+
|
32
|
+
def test_rows
|
33
|
+
assert_render_equals <<-INPUT, <<-OUTPUT
|
34
|
+
@colors
|
35
|
+
$pink $purple $gray
|
36
|
+
$turquoise $cyan $black
|
37
|
+
INPUT
|
38
|
+
<ul class="livingstyleguide--color-swatches -lsg-3-columns">
|
39
|
+
<li class="livingstyleguide--color-swatch $pink">$pink</li>
|
40
|
+
<li class="livingstyleguide--color-swatch $purple">$purple</li>
|
41
|
+
<li class="livingstyleguide--color-swatch $gray">$gray</li>
|
42
|
+
<li class="livingstyleguide--color-swatch $turquoise">$turquoise</li>
|
43
|
+
<li class="livingstyleguide--color-swatch $cyan">$cyan</li>
|
44
|
+
<li class="livingstyleguide--color-swatch $black">$black</li>
|
45
|
+
</ul>
|
46
|
+
OUTPUT
|
47
|
+
end
|
48
|
+
|
49
|
+
def test_skipped_cells
|
50
|
+
assert_render_equals <<-INPUT, <<-OUTPUT
|
51
|
+
@colors
|
52
|
+
$pink $purple
|
53
|
+
- $turquoise
|
54
|
+
INPUT
|
55
|
+
<ul class="livingstyleguide--color-swatches -lsg-2-columns">
|
56
|
+
<li class="livingstyleguide--color-swatch $pink">$pink</li>
|
57
|
+
<li class="livingstyleguide--color-swatch $purple">$purple</li>
|
58
|
+
<li class="livingstyleguide--color-swatch -lsg-empty">-</li>
|
59
|
+
<li class="livingstyleguide--color-swatch $turquoise">$turquoise</li>
|
60
|
+
</ul>
|
61
|
+
OUTPUT
|
62
|
+
end
|
63
|
+
|
64
|
+
end
|
65
|
+
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: livingstyleguide
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.0
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Nico Hagenburger
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-02-
|
11
|
+
date: 2014-02-11 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: minisyntax
|
@@ -178,7 +178,8 @@ dependencies:
|
|
178
178
|
- - '>='
|
179
179
|
- !ruby/object:Gem::Version
|
180
180
|
version: '0'
|
181
|
-
description:
|
181
|
+
description: Automatically generate beautiful frontend style guides with Sass and
|
182
|
+
Markdown. See http://livingstyleguide.org for details.
|
182
183
|
email:
|
183
184
|
- nico@hagenburger.net
|
184
185
|
executables:
|
@@ -204,6 +205,7 @@ files:
|
|
204
205
|
- lib/livingstyleguide/filters.rb
|
205
206
|
- lib/livingstyleguide/filters/add_wrapper_class.rb
|
206
207
|
- lib/livingstyleguide/filters/coffee_script.rb
|
208
|
+
- lib/livingstyleguide/filters/colors.rb
|
207
209
|
- lib/livingstyleguide/filters/font_example.rb
|
208
210
|
- lib/livingstyleguide/filters/full_width.rb
|
209
211
|
- lib/livingstyleguide/filters/haml.rb
|
@@ -221,6 +223,7 @@ files:
|
|
221
223
|
- lib/livingstyleguide/variables_importer/content.erb
|
222
224
|
- lib/livingstyleguide/version.rb
|
223
225
|
- livingstyleguide.gemspec
|
226
|
+
- sache.json
|
224
227
|
- stylesheets/_livingstyleguide.scss
|
225
228
|
- stylesheets/livingstyleguide/_code.scss
|
226
229
|
- stylesheets/livingstyleguide/_color-swatches.scss
|
@@ -243,7 +246,9 @@ files:
|
|
243
246
|
- test/fixtures/standalone/config.rb
|
244
247
|
- test/fixtures/standalone/modules/_buttons.md
|
245
248
|
- test/fixtures/standalone/modules/_buttons.scss
|
249
|
+
- test/fixtures/standalone/style.html.lsg
|
246
250
|
- test/fixtures/standalone/style.scss
|
251
|
+
- test/fixtures/standalone/styleguide-as-json.html.lsg
|
247
252
|
- test/fixtures/standalone/styleguide-with-header-footer.html.lsg
|
248
253
|
- test/fixtures/standalone/styleguide-with-javascript.html.lsg
|
249
254
|
- test/fixtures/standalone/styleguide-with-sass.html.lsg
|
@@ -263,6 +268,7 @@ files:
|
|
263
268
|
- test/unit/filter_hooks_test.rb
|
264
269
|
- test/unit/filters/add_wrapper_class_test.rb
|
265
270
|
- test/unit/filters/coffee_script_test.rb
|
271
|
+
- test/unit/filters/colors_test.rb
|
266
272
|
- test/unit/filters/font_example_test.rb
|
267
273
|
- test/unit/filters/full_width_test.rb
|
268
274
|
- test/unit/filters/haml_test.rb
|
@@ -283,15 +289,15 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
283
289
|
version: '0'
|
284
290
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
285
291
|
requirements:
|
286
|
-
- - '
|
292
|
+
- - '>='
|
287
293
|
- !ruby/object:Gem::Version
|
288
|
-
version:
|
294
|
+
version: '0'
|
289
295
|
requirements: []
|
290
296
|
rubyforge_project:
|
291
297
|
rubygems_version: 2.1.11
|
292
298
|
signing_key:
|
293
299
|
specification_version: 4
|
294
|
-
summary:
|
300
|
+
summary: Generate beautiful frontend style guides
|
295
301
|
test_files:
|
296
302
|
- test/example_test_helper.rb
|
297
303
|
- test/fixtures/markdown/code-block-and-example.md
|
@@ -309,7 +315,9 @@ test_files:
|
|
309
315
|
- test/fixtures/standalone/config.rb
|
310
316
|
- test/fixtures/standalone/modules/_buttons.md
|
311
317
|
- test/fixtures/standalone/modules/_buttons.scss
|
318
|
+
- test/fixtures/standalone/style.html.lsg
|
312
319
|
- test/fixtures/standalone/style.scss
|
320
|
+
- test/fixtures/standalone/styleguide-as-json.html.lsg
|
313
321
|
- test/fixtures/standalone/styleguide-with-header-footer.html.lsg
|
314
322
|
- test/fixtures/standalone/styleguide-with-javascript.html.lsg
|
315
323
|
- test/fixtures/standalone/styleguide-with-sass.html.lsg
|
@@ -329,6 +337,7 @@ test_files:
|
|
329
337
|
- test/unit/filter_hooks_test.rb
|
330
338
|
- test/unit/filters/add_wrapper_class_test.rb
|
331
339
|
- test/unit/filters/coffee_script_test.rb
|
340
|
+
- test/unit/filters/colors_test.rb
|
332
341
|
- test/unit/filters/font_example_test.rb
|
333
342
|
- test/unit/filters/full_width_test.rb
|
334
343
|
- test/unit/filters/haml_test.rb
|