livingstyleguide 2.0.0.pre.3 → 2.0.0.pre.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/bin/livingstyleguide +1 -1
  3. data/lib/livingstyleguide/command_line_interface.rb +14 -11
  4. data/lib/livingstyleguide/commands/colors.rb +16 -16
  5. data/lib/livingstyleguide/commands/default.rb +1 -1
  6. data/lib/livingstyleguide/commands/font_example.rb +2 -1
  7. data/lib/livingstyleguide/commands/full_width.rb +1 -1
  8. data/lib/livingstyleguide/commands/import_and_use.rb +16 -4
  9. data/lib/livingstyleguide/commands/layout.rb +22 -20
  10. data/lib/livingstyleguide/commands/options.rb +9 -9
  11. data/lib/livingstyleguide/commands/sass.rb +5 -11
  12. data/lib/livingstyleguide/commands/search_box.rb +6 -3
  13. data/lib/livingstyleguide/commands/style.rb +1 -1
  14. data/lib/livingstyleguide/document.rb +64 -41
  15. data/lib/livingstyleguide/integration/compass.rb +5 -2
  16. data/lib/livingstyleguide/integration/rails.rb +5 -3
  17. data/lib/livingstyleguide/integration/sass.rb +1 -1
  18. data/lib/livingstyleguide/integration/sprockets.rb +9 -4
  19. data/lib/livingstyleguide/markdown_extensions.rb +20 -11
  20. data/lib/livingstyleguide/templates/code.html.erb +1 -1
  21. data/lib/livingstyleguide/templates/example.html.erb +2 -2
  22. data/lib/livingstyleguide/templates/font-example.html.erb +3 -3
  23. data/lib/livingstyleguide/templates/javascript.html.erb +1 -1
  24. data/lib/livingstyleguide/templates/layout.html.erb +32 -38
  25. data/lib/livingstyleguide/templates/logo.html.erb +1 -1
  26. data/lib/livingstyleguide/templates/scripts/copy.js.erb +12 -12
  27. data/lib/livingstyleguide/templates/scripts/copy_code.js.erb +7 -7
  28. data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb +14 -14
  29. data/lib/livingstyleguide/templates/scripts/search.js.erb +30 -30
  30. data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb +23 -23
  31. data/lib/livingstyleguide/templates/search-box.html.erb +1 -1
  32. data/lib/livingstyleguide/templates/toggle-code.html.erb +1 -1
  33. data/lib/livingstyleguide/tilt_template.rb +17 -19
  34. data/lib/livingstyleguide/version.rb +1 -1
  35. data/lib/livingstyleguide.rb +12 -2
  36. data/stylesheets/_livingstyleguide.scss +76 -65
  37. data/stylesheets/livingstyleguide/_code.scss +51 -51
  38. data/stylesheets/livingstyleguide/_color-swatches.scss +38 -38
  39. data/stylesheets/livingstyleguide/_content.scss +73 -73
  40. data/stylesheets/livingstyleguide/_functions.scss +1 -1
  41. data/stylesheets/livingstyleguide/_layout.scss +22 -22
  42. data/stylesheets/livingstyleguide/_reset.scss +1 -1
  43. data/stylesheets/livingstyleguide/_search-box.scss +14 -14
  44. data/stylesheets/livingstyleguide/_toggle-code.scss +10 -11
  45. metadata +21 -6
data/stylesheets/livingstyleguide/_color-swatches.scss CHANGED
@@ -1,14 +1,14 @@
1
- .lsg--color-swatch {
2
- @extend %lsg--reset;
3
- color: $lsg--color-swatch-color;
1
+ .lsg-color-swatch {
2
+ @extend %lsg-reset;
3
+ color: $lsg-color-swatch-color;
4
4
  cursor: pointer;
5
5
  float: left;
6
- font-family: $lsg--code-font;
7
- font-size: $lsg--code-font-size;
8
- height: 4em * $lsg--base-line-height;
9
- line-height: 1em * $lsg--base-line-height;
6
+ font-family: $lsg-code-font-family;
7
+ font-size: $lsg-code-font-size;
8
+ height: 4em * $lsg-line-height;
9
+ line-height: 1em * $lsg-line-height;
10
10
  list-style: none;
11
- margin: 0 $lsg--gap-width $lsg--gap-width 0;
11
+ margin: 0 $lsg-gutter $lsg-gutter 0;
12
12
  position: relative;
13
13
  text-align: center;
14
14
  transition: transform 0.2s;
@@ -22,12 +22,12 @@
22
22
  }
23
23
 
24
24
  &::before {
25
- @extend %lsg--reset;
25
+ @extend %lsg-reset;
26
26
  border: {
27
- color: $lsg--color-swatch-border-color;
28
- radius: $lsg--color-swatch-border-radius;
27
+ color: $lsg-color-swatch-border-color;
28
+ radius: $lsg-color-swatch-border-radius;
29
29
  style: solid;
30
- width: $lsg--color-swatch-border-width;
30
+ width: $lsg-color-swatch-border-width;
31
31
  }
32
32
  content: "";
33
33
  height: 100%;
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  &:hover::before {
42
- background-image: $lsg--copy-background-image;
42
+ background-image: $lsg-copy-background-image;
43
43
  background-position: 50% 40%;
44
44
  background-repeat: no-repeat;
45
45
  background-size: 20%;
@@ -51,7 +51,7 @@
51
51
  display: none;
52
52
  }
53
53
 
54
- &.-lsg-empty {
54
+ &.lsg-empty {
55
55
  cursor: default;
56
56
  overflow: hidden;
57
57
  text-align: left;
@@ -64,8 +64,8 @@
64
64
  }
65
65
  }
66
66
 
67
- .lsg--color-swatch-source {
68
- @extend %lsg--reset;
67
+ .lsg-color-swatch-source {
68
+ @extend %lsg-reset;
69
69
  display: block;
70
70
 
71
71
  &:hover {
@@ -73,32 +73,32 @@
73
73
  }
74
74
  }
75
75
 
76
- .lsg--color-swatch-value {
77
- @extend %lsg--reset;
76
+ .lsg-color-swatch-value {
77
+ @extend %lsg-reset;
78
78
  cursor: pointer;
79
79
  display: block;
80
- margin-top: 1em * $lsg--base-line-height;
80
+ margin-top: 1em * $lsg-line-height;
81
81
  text-align: center;
82
82
 
83
- .lsg--color-swatch:hover & {
83
+ .lsg-color-swatch:hover & {
84
84
  text-decoration: underline;
85
85
  }
86
86
 
87
- .lsg--color-swatch-source + & {
87
+ .lsg-color-swatch-source + & {
88
88
  margin-top: 0;
89
89
  }
90
90
 
91
- .lsg--color-swatch-source:hover + & {
91
+ .lsg-color-swatch-source:hover + & {
92
92
  text-decoration: none;
93
93
  }
94
94
  }
95
95
 
96
96
  // scss-lint:disable VendorPrefix
97
- .lsg--color-swatches {
98
- @extend %lsg--reset;
99
- margin: (4 * $lsg--gap-width) auto (-$lsg--gap-width);
100
- max-width: $lsg--width + 2 * $lsg--gap-width;
101
- padding-left: $lsg--gap-width;
97
+ .lsg-color-swatches {
98
+ @extend %lsg-reset;
99
+ margin: (4 * $lsg-gutter) auto (-$lsg-gutter);
100
+ max-width: $lsg-width + 2 * $lsg-gutter;
101
+ padding-left: $lsg-gutter;
102
102
  -webkit-user-select: none;
103
103
  user-select: none;
104
104
 
@@ -110,35 +110,35 @@
110
110
  }
111
111
 
112
112
  @for $i from 1 through 12 {
113
- .lsg--color-swatches.-lsg-#{$i}-columns .lsg--color-swatch {
114
- $size: floor(($lsg--width - ($i - 1) * $lsg--gap-width) / $i);
113
+ .lsg-color-swatches.lsg-#{$i}-columns .lsg-color-swatch {
114
+ $size: floor(($lsg-width - ($i - 1) * $lsg-gutter) / $i);
115
115
  height: $size;
116
116
  padding-top: $size / 2 + ($size / 5 - 20px);
117
117
  width: $size;
118
118
  }
119
119
  }
120
120
 
121
- $lsg--colors: () !default;
121
+ $lsg-colors: () !default;
122
122
 
123
- @each $color-class, $value in $lsg--colors {
123
+ @each $color-class, $value in $lsg-colors {
124
124
  $value: null !default;
125
125
 
126
126
  @if $value != null {
127
127
  .#{$color-class} {
128
128
  @if (lightness($value) < 50%) {
129
- @if (lightness($lsg--background-color) > lightness($lsg--color)) {
130
- color: $lsg--background-color;
129
+ @if (lightness($lsg-background-color) > lightness($lsg-color)) {
130
+ color: $lsg-background-color;
131
131
  }
132
132
  @else {
133
- color: $lsg--color;
133
+ color: $lsg-color;
134
134
  }
135
135
  }
136
136
  @else {
137
- @if (lightness($lsg--background-color) > lightness($lsg--color)) {
138
- color: $lsg--color;
137
+ @if (lightness($lsg-background-color) > lightness($lsg-color)) {
138
+ color: $lsg-color;
139
139
  }
140
140
  @else {
141
- color: $lsg--background-color;
141
+ color: $lsg-background-color;
142
142
  }
143
143
  }
144
144
 
@@ -147,7 +147,7 @@ $lsg--colors: () !default;
147
147
  }
148
148
 
149
149
  &::after {
150
- @extend %lsg--code !optional;
150
+ @extend %lsg-code !optional;
151
151
  content: "#{inspect($value)}";
152
152
  }
153
153
  }
data/stylesheets/livingstyleguide/_content.scss CHANGED
@@ -1,55 +1,55 @@
1
- .lsg--paragraph,
2
- .lsg--code-block,
3
- .lsg--unordered-list,
4
- .lsg--ordered-list,
5
- .lsg--font-example {
6
- @extend %lsg--reset;
7
- color: $lsg--color;
8
- font-family: $lsg--base-font;
9
- font-size: $lsg--base-font-size;
1
+ .lsg-paragraph,
2
+ .lsg-code-block,
3
+ .lsg-unordered-list,
4
+ .lsg-ordered-list,
5
+ .lsg-font-example {
6
+ @extend %lsg-reset;
7
+ color: $lsg-color;
8
+ font-family: $lsg-font-family;
9
+ font-size: $lsg-font-size;
10
10
  -webkit-font-smoothing: antialiased;
11
- font-weight: $lsg--base-font-weight;
12
- line-height: round($lsg--base-font-size * $lsg--base-line-height);
13
- margin: (2 * $lsg--gap-width) auto;
14
- max-width: $lsg--width;
15
- text-align: $lsg--base-text-align;
11
+ font-weight: $lsg-font-weight;
12
+ line-height: round($lsg-font-size * $lsg-line-height);
13
+ margin: (2 * $lsg-gutter) auto;
14
+ max-width: $lsg-width;
15
+ text-align: $lsg-text-align;
16
16
  }
17
17
 
18
- .lsg--paragraph,
19
- .lsg--unordered-list-item,
20
- .lsg--ordered-list-item {
18
+ .lsg-paragraph,
19
+ .lsg-unordered-list-item,
20
+ .lsg-ordered-list-item {
21
21
  > a {
22
- color: $lsg--link-color;
22
+ color: $lsg-link-color;
23
23
  }
24
24
  }
25
25
 
26
- .lsg--unordered-list-item,
27
- .lsg--ordered-list-item {
28
- $margin: ceil($lsg--gap-width / 2);
29
- @extend %lsg--reset;
26
+ .lsg-unordered-list-item,
27
+ .lsg-ordered-list-item {
28
+ $margin: ceil($lsg-gutter / 2);
29
+ @extend %lsg-reset;
30
30
  display: list-item;
31
31
  list-style: disc;
32
- margin: $margin 0 $margin (2 * $lsg--gap-width);
32
+ margin: $margin 0 $margin (2 * $lsg-gutter);
33
33
  }
34
34
 
35
- .lsg--page-title,
36
- .lsg--headline,
37
- .lsg--sub-headline,
38
- .lsg--sub-sub-headline {
39
- @extend %lsg--reset;
40
- color: $lsg--color;
35
+ .lsg-page-title,
36
+ .lsg-headline,
37
+ .lsg-sub-headline,
38
+ .lsg-sub-sub-headline {
39
+ @extend %lsg-reset;
40
+ color: $lsg-color;
41
41
  display: block;
42
- font-family: $lsg--headline-font;
43
- font-size: $lsg--headline-font-size;
42
+ font-family: $lsg-headline-font-family;
43
+ font-size: $lsg-headline-font-size;
44
44
  -webkit-font-smoothing: antialiased;
45
- font-weight: $lsg--headline-font-weight;
46
- margin: (8 * $lsg--gap-width) auto (2 * $lsg--gap-width);
47
- max-width: $lsg--width;
48
- text-align: $lsg--headline-text-align;
45
+ font-weight: $lsg-headline-font-weight;
46
+ margin: (8 * $lsg-gutter) auto (2 * $lsg-gutter);
47
+ max-width: $lsg-width;
48
+ text-align: $lsg-headline-text-align;
49
49
  }
50
50
 
51
- .lsg--anchor {
52
- @extend %lsg--reset;
51
+ .lsg-anchor {
52
+ @extend %lsg-reset;
53
53
  color: inherit;
54
54
  display: inline;
55
55
  margin-left: -1.3em;
@@ -60,9 +60,9 @@
60
60
  text-decoration: none;
61
61
  width: 1.3em;
62
62
 
63
- .lsg--headline:hover &,
64
- .lsg--sub-headline:hover &,
65
- .lsg--sub-sub-headline:hover & {
63
+ .lsg-headline:hover &,
64
+ .lsg-sub-headline:hover &,
65
+ .lsg-sub-sub-headline:hover & {
66
66
  opacity: 0.5;
67
67
 
68
68
  &:hover {
@@ -80,49 +80,49 @@
80
80
  }
81
81
  }
82
82
 
83
- .lsg--page-title {
83
+ .lsg-page-title {
84
84
  display: block;
85
- font-size: $lsg--page-title-font-size;
86
- line-height: round($lsg--page-title-font-size * $lsg--base-line-height);
85
+ font-size: $lsg-page-title-font-size;
86
+ line-height: round($lsg-page-title-font-size * $lsg-line-height);
87
87
  }
88
88
 
89
- .lsg--sub-headline {
89
+ .lsg-sub-headline {
90
90
  display: block;
91
- font-size: $lsg--sub-headline-font-size;
92
- line-height: round($lsg--sub-headline-font-size * $lsg--base-line-height);
93
- margin-top: 4 * $lsg--gap-width;
91
+ font-size: $lsg-sub-headline-font-size;
92
+ line-height: round($lsg-sub-headline-font-size * $lsg-line-height);
93
+ margin-top: 4 * $lsg-gutter;
94
94
  }
95
95
 
96
- .lsg--sub-sub-headline {
96
+ .lsg-sub-sub-headline {
97
97
  display: block;
98
- font-size: $lsg--sub-sub-headline-font-size;
99
- line-height: round($lsg--sub-sub-headline-font-size * $lsg--base-line-height);
100
- margin-top: 4 * $lsg--gap-width;
98
+ font-size: $lsg-sub-sub-headline-font-size;
99
+ line-height: round($lsg-sub-sub-headline-font-size * $lsg-line-height);
100
+ margin-top: 4 * $lsg-gutter;
101
101
  }
102
102
 
103
- .lsg--example {
104
- @extend %lsg--reset;
105
- background: $lsg--example-background;
106
- border-top-left-radius: $lsg--border-radius;
107
- border-top-right-radius: $lsg--border-radius;
103
+ .lsg-example {
104
+ @extend %lsg-reset;
105
+ background: $lsg-example-background;
106
+ border-top-left-radius: $lsg-border-radius;
107
+ border-top-right-radius: $lsg-border-radius;
108
108
  display: block;
109
- margin: (2 * $lsg--gap-width) auto;
110
- max-width: $lsg--width;
109
+ margin: (2 * $lsg-gutter) auto;
110
+ max-width: $lsg-width;
111
111
  overflow: hidden;
112
112
  position: relative;
113
113
 
114
- &.-lsg-has-full-width {
115
- @extend #{$lsg--layout-selector} !optional;
114
+ &.lsg-has-full-width {
115
+ @extend #{$lsg-layout-selector} !optional;
116
116
  border-radius: 0;
117
117
  display: block;
118
118
  height: auto;
119
119
  margin: 0 auto;
120
120
  max-width: 100%;
121
121
  min-height: auto;
122
- padding: $lsg--full-width-padding;
122
+ padding: $lsg-full-width-padding;
123
123
  width: 100%;
124
124
 
125
- .lsg--code-block {
125
+ .lsg-code-block {
126
126
  z-index: 2;
127
127
 
128
128
  &::before {
@@ -139,33 +139,33 @@
139
139
  }
140
140
  }
141
141
 
142
- &.-lsg-for-javascript {
142
+ &.lsg-for-javascript {
143
143
  display: none;
144
144
  }
145
145
  }
146
146
 
147
147
  hr {
148
148
  border: 0;
149
- border-top: 1px mix($lsg--color, $lsg--background-color, 10%) solid;
150
- margin: (8 * $lsg--gap-width) (2 * $lsg--gap-width);
149
+ border-top: 1px mix($lsg-color, $lsg-background-color, 10%) solid;
150
+ margin: (8 * $lsg-gutter) (2 * $lsg-gutter);
151
151
  }
152
152
 
153
- .lsg--html {
153
+ .lsg-html {
154
154
  display: block;
155
- padding: $lsg--example-padding;
155
+ padding: $lsg-example-padding;
156
156
  }
157
157
 
158
- .lsg--font-example {
159
- @extend %lsg--reset;
158
+ .lsg-font-example {
159
+ @extend %lsg-reset;
160
160
  display: block;
161
161
  }
162
162
 
163
- .lsg--font-example-text {
164
- @extend %lsg--reset;
163
+ .lsg-font-example-text {
164
+ @extend %lsg-reset;
165
165
  display: block;
166
- margin-bottom: 2 * $lsg--gap-width;
166
+ margin-bottom: 2 * $lsg-gutter;
167
167
 
168
168
  &::first-line {
169
- font-size: $lsg--font-example-first-line;
169
+ font-size: $lsg-font-example-first-line;
170
170
  }
171
171
  }
data/stylesheets/livingstyleguide/_functions.scss CHANGED
@@ -1,4 +1,4 @@
1
- @function lsg--striped($color-a, $color-b: transparent, $size: 4px, $width: 25%) {
1
+ @function lsg-striped($color-a, $color-b: transparent, $size: 4px, $width: 25%) {
2
2
  @return linear-gradient(to top left,
3
3
  $color-a $width,
4
4
  $color-b 0, 50%,
data/stylesheets/livingstyleguide/_layout.scss CHANGED
@@ -1,53 +1,53 @@
1
- .livingstyleguide {
2
- @extend %lsg--reset;
3
- background: $lsg--background-color;
1
+ .lsg {
2
+ @extend %lsg-reset;
3
+ background: $lsg-background-color;
4
4
  display: block;
5
5
  }
6
6
 
7
- .lsg--container {
8
- @extend %lsg--reset;
7
+ .lsg-container {
8
+ @extend %lsg-reset;
9
9
  display: block;
10
10
  min-height: 50vh;
11
11
  }
12
12
 
13
- .lsg--footer {
14
- @extend %lsg--reset;
13
+ .lsg-footer {
14
+ @extend %lsg-reset;
15
15
  display: block;
16
- margin: (4 * $lsg--gap-width) auto;
17
- max-width: $lsg--width;
16
+ margin: (4 * $lsg-gutter) auto;
17
+ max-width: $lsg-width;
18
18
  }
19
19
 
20
- .lsg--logo {
21
- $logo-size: ceil($lsg--base-font-size / 3) * 9;
22
- @extend %lsg--reset;
20
+ .lsg-logo {
21
+ $logo-size: ceil($lsg-font-size / 3) * 9;
22
+ @extend %lsg-reset;
23
23
  color: transparent;
24
24
  display: block;
25
25
  font-size: 0;
26
26
  height: $logo-size * 2;
27
27
  line-height: $logo-size * 2;
28
- margin: 0 auto (2 * $lsg--gap-width);
28
+ margin: 0 auto (2 * $lsg-gutter);
29
29
  position: relative;
30
30
  text-align: center;
31
31
  width: $logo-size * 8;
32
32
  z-index: 2;
33
33
 
34
34
  &:hover {
35
- color: $lsg--color;
35
+ color: $lsg-color;
36
36
  }
37
37
 
38
38
  &::before {
39
39
  color: transparent;
40
40
  content: "Made with The LivingStyleGuide Gem";
41
41
  display: block;
42
- font-family: $lsg--base-font;
43
- font-size: $lsg--base-font-size;
42
+ font-family: $lsg-font-family;
43
+ font-size: $lsg-font-size;
44
44
  transform: scale(0.5);
45
45
  transition: all 0.1s;
46
46
  white-space: nowrap;
47
47
  }
48
48
 
49
49
  &:hover::before {
50
- color: $lsg--color;
50
+ color: $lsg-color;
51
51
  transform: scale(1);
52
52
  }
53
53
 
@@ -57,11 +57,11 @@
57
57
  $position-a: $unit;
58
58
  $position-b: 5 * $unit;
59
59
  background:
60
- linear-gradient(to top, $lsg--background-color, $lsg--background-color),
61
- linear-gradient(to top, $lsg--background-color, $lsg--background-color),
62
- linear-gradient(to top, $lsg--background-color, $lsg--background-color),
63
- linear-gradient(to top, $lsg--background-color, $lsg--background-color),
64
- $lsg--color;
60
+ linear-gradient(to top, $lsg-background-color, $lsg-background-color),
61
+ linear-gradient(to top, $lsg-background-color, $lsg-background-color),
62
+ linear-gradient(to top, $lsg-background-color, $lsg-background-color),
63
+ linear-gradient(to top, $lsg-background-color, $lsg-background-color),
64
+ $lsg-color;
65
65
  background-position:
66
66
  $position-a $position-a,
67
67
  $position-a $position-b,