livingstyleguide 1.0.2 → 1.0.3

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.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/lib/livingstyleguide/version.rb +1 -1
  3. data/stylesheets/_livingstyleguide.scss +26 -0
  4. data/stylesheets/livingstyleguide/_code.scss +8 -5
  5. data/stylesheets/livingstyleguide/_color-swatches.scss +8 -9
  6. data/stylesheets/livingstyleguide/_content.scss +11 -8
  7. data/stylesheets/livingstyleguide/_layout.scss +6 -2
  8. metadata +31 -161
  9. data/.gitignore +0 -19
  10. data/.travis.yml +0 -5
  11. data/CHANGELOG.md +0 -95
  12. data/Gemfile +0 -4
  13. data/MIT-LICENSE.md +0 -11
  14. data/README.md +0 -111
  15. data/Rakefile +0 -25
  16. data/livingstyleguide.gemspec +0 -33
  17. data/sache.json +0 -6
  18. data/test/example_test_helper.rb +0 -22
  19. data/test/fixtures/markdown/code-block-and-example.md +0 -8
  20. data/test/fixtures/markdown/code-with-highlight-block.md +0 -6
  21. data/test/fixtures/markdown/code-with-highlight.md +0 -4
  22. data/test/fixtures/markdown/code.md +0 -6
  23. data/test/fixtures/markdown/example-with-highlight.md +0 -5
  24. data/test/fixtures/markdown/example.md +0 -4
  25. data/test/fixtures/markdown/font-example.md +0 -4
  26. data/test/fixtures/markdown/full-width-example.md +0 -5
  27. data/test/fixtures/markdown/haml-example-with-highlight.md +0 -5
  28. data/test/fixtures/markdown/haml-example.md +0 -5
  29. data/test/fixtures/markdown/text.md +0 -15
  30. data/test/fixtures/markdown/variables.md +0 -4
  31. data/test/fixtures/standalone/config.rb +0 -0
  32. data/test/fixtures/standalone/modules/_buttons.md +0 -6
  33. data/test/fixtures/standalone/modules/_buttons.scss +0 -4
  34. data/test/fixtures/standalone/style.html.lsg +0 -0
  35. data/test/fixtures/standalone/style.scss +0 -5
  36. data/test/fixtures/standalone/styleguide-as-json.html.lsg +0 -9
  37. data/test/fixtures/standalone/styleguide-with-header-footer.html.lsg +0 -7
  38. data/test/fixtures/standalone/styleguide-with-javascript.html.lsg +0 -8
  39. data/test/fixtures/standalone/styleguide-with-sass.html.lsg +0 -6
  40. data/test/fixtures/standalone/styleguide-with-scss.html.lsg +0 -7
  41. data/test/fixtures/standalone/styleguide-with-style.html.lsg +0 -7
  42. data/test/fixtures/standalone/styleguide.html.lsg +0 -3
  43. data/test/fixtures/stylesheets/variables/_more-other-colors.sass +0 -2
  44. data/test/fixtures/stylesheets/variables/colors.scss +0 -2
  45. data/test/fixtures/stylesheets/variables/other-colors.sass +0 -2
  46. data/test/integration/command_line_test.rb +0 -12
  47. data/test/integration/markdown_test.rb +0 -136
  48. data/test/integration/sprockets_test.rb +0 -19
  49. data/test/integration/standalone_test.rb +0 -68
  50. data/test/integration/variables_test.rb +0 -33
  51. data/test/test_helper.rb +0 -28
  52. data/test/unit/code_block_test.rb +0 -53
  53. data/test/unit/example_test.rb +0 -142
  54. data/test/unit/filter_hooks_test.rb +0 -46
  55. data/test/unit/filters/add_wrapper_class_test.rb +0 -15
  56. data/test/unit/filters/coffee_script_test.rb +0 -19
  57. data/test/unit/filters/colors_test.rb +0 -65
  58. data/test/unit/filters/font_example_test.rb +0 -47
  59. data/test/unit/filters/full_width_test.rb +0 -16
  60. data/test/unit/filters/haml_test.rb +0 -20
  61. data/test/unit/filters/highlights_test.rb +0 -26
  62. data/test/unit/filters/javascript_test.rb +0 -18
  63. data/test/unit/sass_extensions_test.rb +0 -28
  64. data/website/.gitignore +0 -22
  65. data/website/Gemfile +0 -13
  66. data/website/README.md +0 -32
  67. data/website/config.rb +0 -37
  68. data/website/source/.htaccess +0 -144
  69. data/website/source/changelog.html.md +0 -95
  70. data/website/source/images/graphics-2x/example-project.png +0 -0
  71. data/website/source/images/graphics-2x/github.png +0 -0
  72. data/website/source/images/graphics-2x/hagenburger.png +0 -0
  73. data/website/source/images/graphics-2x/issues.png +0 -0
  74. data/website/source/images/graphics-2x/livingstyleguide.png +0 -0
  75. data/website/source/images/graphics-2x/made-in-berlin.png +0 -0
  76. data/website/source/images/graphics-2x/rubygems.png +0 -0
  77. data/website/source/images/graphics-2x/twitter.png +0 -0
  78. data/website/source/images/graphics/example-project.png +0 -0
  79. data/website/source/images/graphics/github.png +0 -0
  80. data/website/source/images/graphics/hagenburger.png +0 -0
  81. data/website/source/images/graphics/issues.png +0 -0
  82. data/website/source/images/graphics/livingstyleguide.png +0 -0
  83. data/website/source/images/graphics/made-in-berlin.png +0 -0
  84. data/website/source/images/graphics/rubygems.png +0 -0
  85. data/website/source/images/graphics/twitter.png +0 -0
  86. data/website/source/index.html.haml +0 -49
  87. data/website/source/layouts/markdown.html.haml +0 -40
  88. data/website/source/style/components/_markdown.md +0 -23
  89. data/website/source/style/components/_markdown.sass +0 -52
  90. data/website/source/style/styles.sass +0 -286
  91. data/website/source/styleguide.html.lsg +0 -11
@@ -1,23 +0,0 @@
1
- Markdown
2
- ========
3
-
4
-
5
- ```
6
- @haml
7
- ***.markdown***
8
- :markdown
9
- # Big Headline
10
-
11
- ## Medium Headline
12
-
13
- Lorem ipsum dolor **sit amet,** consectetur adipiscing elit.
14
- Aenean porta, `nunc at pulvinar porta`, erat lorem congue magna,
15
- sit amet egestas ante erat in neque. _Suspendisse_ vitae sapien
16
- et ante feugiat [posuere vitae](#) sit amet urna. Suspendisse
17
- vestibulum elit nulla, id venenatis enim ultricies quis.
18
-
19
- * List item
20
- * Another list item
21
- * Last list item
22
- ```
23
-
@@ -1,52 +0,0 @@
1
- .markdown
2
- @extend %text-align-left
3
-
4
- h1
5
- color: $turquoise
6
- font-size: 3em
7
- margin: 0 0 0.5em
8
-
9
- h2
10
- color: $pink
11
- font-size: 2em
12
- margin: 0 0 0.5em
13
-
14
- p
15
- margin: 0 0 0.75em
16
-
17
- a
18
- color: darken($turquoise, 20%)
19
- display: inline
20
-
21
- &:hover
22
- color: darken($turquoise, 30%)
23
-
24
- strong
25
- @extend %display-inline
26
- @extend %font-weight-bold
27
-
28
- em
29
- @extend %display-inline
30
- @extend %font-style-italic
31
-
32
- ul
33
- margin: 0 0 0.75em
34
-
35
- li
36
- margin-left: 3em
37
-
38
- &:before
39
- background: $yellow
40
- content: ""
41
- height: 6px
42
- margin: 0.35em 0 0 -0.9em
43
- position: absolute
44
- width: 6px
45
- @include transform(rotateZ(45deg))
46
-
47
- code
48
- background: $yellow
49
- display: inline
50
- font-family: "courier new", courier, monospace
51
-
52
-
@@ -1,286 +0,0 @@
1
- @import "compass"
2
- @import "compass-placeholders"
3
-
4
- //// FONTS ////
5
-
6
- @include font-face("Gubia", font-files("GubiaLight.otf"), $weight: 200)
7
- @include font-face("Gubia", font-files("GubiaRegular.otf"), $weight: normal)
8
- @include font-face("Gubia", font-files("GubiaBold.otf"), $weight: bold)
9
- @include font-face("Gubia", font-files("GubiaBlack.otf"), $weight: 800)
10
-
11
- //// METRICS ////
12
-
13
- $grid: 4px
14
- $column-width: 45 * $grid
15
- $gap-width: 3 * $grid
16
-
17
-
18
- //// COLORS ////
19
-
20
- $white: white
21
- $black: black
22
- $gray: #7f7f7f
23
- $pink: #CA1F70
24
- $light-pink: #FFABC2
25
- $yellow: #FAFF8C
26
- $turquoise: #2EF1BD
27
-
28
- //// SPRITES ////
29
-
30
- $graphics-spacing: 5 * $grid
31
- @import "graphics/*.png"
32
-
33
- $graphics-2x-spacing: 10 * $grid
34
- @import "graphics-2x/*.png"
35
-
36
- .graphics-sprite
37
- background-size: graphics-sprite-width(livingstyleguide)
38
-
39
-
40
- //// MIXINS ////
41
-
42
- @mixin for-phones
43
- @media all and (max-width: 640px)
44
- @content
45
-
46
- @mixin for-phones-portrait
47
- @media all and (max-width: 480px)
48
- @content
49
-
50
- @mixin for-phones-landscape
51
- @media all and (min-width: 481px) and (max-width: 640px)
52
- @content
53
-
54
- @mixin for-tablets
55
- @media all and (min-width: 641px) and (max-width: 1024px)
56
- @content
57
-
58
- @mixin for-tablets-portrait
59
- @media all and (min-width: 641px) and (max-width: 768px)
60
- @content
61
-
62
- @mixin for-tablets-landscape
63
- @media all and (min-width: 769px) and (max-width: 1024px)
64
- @content
65
-
66
- @mixin for-tablets-landscape-and-desktops
67
- @media all and (min-width: 1024px)
68
- @content
69
-
70
- @mixin for-desktops
71
- @media all and (min-width: 1025px)
72
- @content
73
-
74
- @mixin for-hires
75
- @media only all and (-webkit-min-device-pixel-ratio: 1.3), only all and (min--moz-device-pixel-ratio: 1.3), only all and (-o-min-device-pixel-ratio: 1.3/1), only all and (min-device-pixel-ratio: 1.3), only all and (min-resolution: 1.3dppx)
76
- @content
77
-
78
-
79
- //// RESET EVERYTHING ////
80
-
81
- *
82
- border: none
83
- border-collapse: collapse
84
- border-spacing: 0
85
- color: inherit
86
- display: block
87
- font-size: inherit
88
- font-style: inherit
89
- font-weight: inherit
90
- line-height: inherit
91
- list-style: none
92
- margin: 0
93
- padding: 0
94
- text-align: inherit
95
- text-decoration: none
96
- vertical-align: middle
97
- @include box-sizing(border-box)
98
-
99
-
100
- head,
101
- script,
102
- style
103
- display: none
104
-
105
-
106
- //// LAYOUT ////
107
-
108
- .layout
109
- background: $white
110
- color: $black
111
- font-family: Gubia, "helvetica neue", helvetica, arial, sans-serif
112
- font-size: 4 * $grid
113
- line-height: 1.25
114
- margin: 0 auto (5 * $grid)
115
- text-align: center
116
- -webkit-font-smoothing: antialiased
117
- @include for-tablets-landscape-and-desktops
118
- width: 5 * ($column-width + $gap-width)
119
- @include for-tablets
120
- margin-top: 20 * $grid
121
- @include for-phones-landscape
122
- margin-top: 28 * $grid
123
- @include for-phones-portrait
124
- margin-top: 34 * $grid
125
-
126
-
127
- //// HEADER ////
128
-
129
- .header--logo
130
- display: block
131
- margin-left: -32px
132
- position: relative
133
- @include graphics-sprite(livingstyleguide, $dimensions: true)
134
-
135
-
136
- .header--version
137
- color: $gray
138
- display: none
139
- font-size: 1.5rem
140
- font-weight: bold
141
- position: absolute
142
- right: -1em
143
- top: 0
144
- @include for-phones
145
- right: 0
146
- top: -1em
147
-
148
-
149
- .header--slogan
150
- color: $light-pink
151
- font-weight: bold
152
- padding-top: 220px
153
- margin: auto
154
- width: 300px
155
-
156
-
157
- //// INSTALLATION ////
158
-
159
- .installation
160
- color: $turquoise
161
- font-family: "courier new", courier, monospace
162
- font-size: 1.5rem
163
- left: 550px
164
- margin: 2em 0
165
- position: absolute
166
- text-align: left
167
- top: 250px
168
-
169
- &:before
170
- color: mix($turquoise, $white, 30%)
171
- content: ">"
172
- margin: 1px 0 0 -1em
173
- position: absolute
174
-
175
-
176
- //// LINKS ////
177
-
178
- .links
179
- @extend %pie-clearfix
180
-
181
-
182
- .links--item
183
- background: $yellow
184
- color: $black
185
- font-size: 24px
186
- font-weight: bold
187
- margin: floor($gap-width / 2)
188
- text-align: left
189
- padding: (5 * $grid) 0
190
- position: relative
191
- @include transition(all 0, background 0.2s)
192
- @include for-tablets-landscape-and-desktops
193
- background: transparent
194
- float: left
195
- height: $column-width
196
- text-align: center
197
- width: $column-width
198
-
199
- &:hover
200
- z-index: 5
201
-
202
- &:after
203
- background: $yellow
204
- bottom: 0
205
- content: ""
206
- left: 0
207
- position: absolute
208
- right: 0
209
- top: 0
210
- z-index: -1
211
- @include transform(rotateZ(45deg))
212
- @include transition(transform, 0.15s)
213
-
214
- &:hover:after
215
- background: $turquoise
216
- @include transform(rotateZ(-315deg))
217
-
218
- &:before
219
- content: ""
220
- display: inline-block
221
- margin-right: 3 * $grid
222
- vertical-align: middle
223
- z-index: 10
224
- @include graphics-sprite(rubygems, $dimensions: true)
225
- @include transition(transform, 0.15s)
226
- @include for-hires
227
- background-image: $graphics-2x-sprites
228
- @include for-tablets-landscape-and-desktops
229
- display: block
230
- margin: 0 auto (5 * $grid)
231
-
232
- &:hover:before
233
- @include transform(rotateZ(360deg))
234
-
235
- @each $name in github, issues, twitter, example-project
236
- &.-#{$name}:before
237
- @include graphics-sprite-position($name)
238
-
239
-
240
-
241
-
242
- //// FOOTER ////
243
-
244
- .footer
245
- margin: (16 * $grid) 0
246
-
247
-
248
- .footer--made-in-berlin
249
- display: inline-block
250
- margin: 0 45px
251
- opacity: 0.7
252
- vertical-align: bottom
253
- @include graphics-sprite(made-in-berlin, $dimensions: true)
254
- @include transition(opacity, 0.2s)
255
- @include hide-text
256
- @include for-hires
257
- background-image: $graphics-2x-sprites
258
-
259
- &:hover
260
- opacity: 1
261
-
262
-
263
- .footer--made-by-hagenburger
264
- @extend .footer--made-in-berlin
265
- @include graphics-sprite(hagenburger, $dimensions: true)
266
-
267
-
268
- .footer--contact
269
- color: $gray
270
- display: block
271
- font-weight: normal
272
- font-size: 1rem
273
- letter-spacing: 1px
274
- margin: (5 * $grid) auto 0
275
- text-transform: uppercase
276
- width: 10em
277
- @include transition(color, 0.2s)
278
-
279
- &:hover
280
- color: $turquoise
281
-
282
-
283
- //// COMPONENTS ////
284
-
285
- @import "components/markdown"
286
-
@@ -1,11 +0,0 @@
1
- source: style/styles.sass
2
- title: "The LivingStyleGuide’s Front-end Style Guide"
3
- style:
4
- layout-selector: '".layout"'
5
- color: $pink
6
- base-font: 'Courier, "Courier New", monospace'
7
- headline-font: 'Gubia, "Helvetica Neue", Helvetica, Arial'
8
- styleguide-sass: |
9
- .livingstyleguide--example
10
- @extend .layout
11
-