style-guide 0.0.1 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. data/.gitignore +1 -0
  2. data/.rspec +2 -0
  3. data/.travis.yml +16 -0
  4. data/Gemfile +0 -2
  5. data/Gemfile.lock +19 -7
  6. data/Guardfile +12 -0
  7. data/Procfile +1 -0
  8. data/README.md +26 -1
  9. data/app/controllers/style_guide/application_controller.rb +6 -0
  10. data/app/controllers/style_guide/style_controller.rb +3 -6
  11. data/app/views/layouts/style_guide/application.html.erb +4 -2
  12. data/app/views/style_guide/style/_sidebar.erb +5 -0
  13. data/app/views/style_guide/style/index.html.erb +5 -14
  14. data/config/routes.rb +1 -0
  15. data/lib/style_guide.rb +1 -3
  16. data/lib/style_guide/config.rb +9 -0
  17. data/lib/style_guide/engine.rb +5 -7
  18. data/lib/style_guide/partial.rb +21 -0
  19. data/lib/style_guide/section.rb +29 -0
  20. data/lib/style_guide/version.rb +1 -1
  21. data/script/ci.sh +3 -0
  22. data/spec/controllers/style_guide/style_controller_spec.rb +16 -0
  23. data/spec/dummy/app/assets/stylesheets/application.css +0 -1
  24. data/spec/dummy/config/boot.rb +4 -1
  25. data/spec/dummy/config/routes.rb +1 -1
  26. data/spec/lib/style_guide/config_spec.rb +17 -0
  27. data/spec/lib/style_guide/partial_spec.rb +54 -0
  28. data/spec/lib/style_guide/section_spec.rb +56 -0
  29. data/spec/spec_helper.rb +9 -0
  30. data/style-guide.gemspec +6 -3
  31. metadata +57 -108
  32. data/.gitmodules +0 -3
  33. data/spec/dummy/app/assets/stylesheets/bootstrap/accordion.less +0 -34
  34. data/spec/dummy/app/assets/stylesheets/bootstrap/alerts.less +0 -65
  35. data/spec/dummy/app/assets/stylesheets/bootstrap/bootstrap.less +0 -63
  36. data/spec/dummy/app/assets/stylesheets/bootstrap/breadcrumbs.less +0 -24
  37. data/spec/dummy/app/assets/stylesheets/bootstrap/button-groups.less +0 -242
  38. data/spec/dummy/app/assets/stylesheets/bootstrap/buttons.less +0 -232
  39. data/spec/dummy/app/assets/stylesheets/bootstrap/carousel.less +0 -131
  40. data/spec/dummy/app/assets/stylesheets/bootstrap/close.less +0 -31
  41. data/spec/dummy/app/assets/stylesheets/bootstrap/code.less +0 -58
  42. data/spec/dummy/app/assets/stylesheets/bootstrap/component-animations.less +0 -22
  43. data/spec/dummy/app/assets/stylesheets/bootstrap/dropdowns.less +0 -237
  44. data/spec/dummy/app/assets/stylesheets/bootstrap/forms.less +0 -683
  45. data/spec/dummy/app/assets/stylesheets/bootstrap/grid.less +0 -21
  46. data/spec/dummy/app/assets/stylesheets/bootstrap/hero-unit.less +0 -25
  47. data/spec/dummy/app/assets/stylesheets/bootstrap/labels-badges.less +0 -74
  48. data/spec/dummy/app/assets/stylesheets/bootstrap/layouts.less +0 -16
  49. data/spec/dummy/app/assets/stylesheets/bootstrap/media.less +0 -55
  50. data/spec/dummy/app/assets/stylesheets/bootstrap/mixins.less +0 -687
  51. data/spec/dummy/app/assets/stylesheets/bootstrap/modals.less +0 -94
  52. data/spec/dummy/app/assets/stylesheets/bootstrap/navbar.less +0 -475
  53. data/spec/dummy/app/assets/stylesheets/bootstrap/navs.less +0 -385
  54. data/spec/dummy/app/assets/stylesheets/bootstrap/pager.less +0 -41
  55. data/spec/dummy/app/assets/stylesheets/bootstrap/pagination.less +0 -121
  56. data/spec/dummy/app/assets/stylesheets/bootstrap/popovers.less +0 -117
  57. data/spec/dummy/app/assets/stylesheets/bootstrap/progress-bars.less +0 -122
  58. data/spec/dummy/app/assets/stylesheets/bootstrap/reset.less +0 -138
  59. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-1200px-min.less +0 -28
  60. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-767px-max.less +0 -193
  61. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-768px-979px.less +0 -19
  62. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-navbar.less +0 -185
  63. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-utilities.less +0 -43
  64. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive.less +0 -48
  65. data/spec/dummy/app/assets/stylesheets/bootstrap/scaffolding.less +0 -52
  66. data/spec/dummy/app/assets/stylesheets/bootstrap/sprites.less +0 -193
  67. data/spec/dummy/app/assets/stylesheets/bootstrap/tables.less +0 -236
  68. data/spec/dummy/app/assets/stylesheets/bootstrap/thumbnails.less +0 -52
  69. data/spec/dummy/app/assets/stylesheets/bootstrap/tooltip.less +0 -70
  70. data/spec/dummy/app/assets/stylesheets/bootstrap/type.less +0 -227
  71. data/spec/dummy/app/assets/stylesheets/bootstrap/utilities.less +0 -30
  72. data/spec/dummy/app/assets/stylesheets/bootstrap/variables.less +0 -301
  73. data/spec/dummy/app/assets/stylesheets/bootstrap/wells.less +0 -29
  74. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap.css.less +0 -3
  75. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/_colors.scss +0 -10
  76. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/ars-maquette-web.css +0 -35
  77. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/button.less +0 -5
  78. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/layout.css.scss +0 -11
  79. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/typography.css.scss +0 -20
  80. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/variables.css.less +0 -10
  81. data/spec/dummy/app/controllers/home_controller.rb +0 -3
  82. data/spec/dummy/app/views/home/index.html.erb +0 -1
@@ -1,236 +0,0 @@
1
- //
2
- // Tables
3
- // --------------------------------------------------
4
-
5
-
6
- // BASE TABLES
7
- // -----------------
8
-
9
- table {
10
- max-width: 100%;
11
- background-color: @tableBackground;
12
- border-collapse: collapse;
13
- border-spacing: 0;
14
- }
15
-
16
- // BASELINE STYLES
17
- // ---------------
18
-
19
- .table {
20
- width: 100%;
21
- margin-bottom: @baseLineHeight;
22
- // Cells
23
- th,
24
- td {
25
- padding: 8px;
26
- line-height: @baseLineHeight;
27
- text-align: left;
28
- vertical-align: top;
29
- border-top: 1px solid @tableBorder;
30
- }
31
- th {
32
- font-weight: bold;
33
- }
34
- // Bottom align for column headings
35
- thead th {
36
- vertical-align: bottom;
37
- }
38
- // Remove top border from thead by default
39
- caption + thead tr:first-child th,
40
- caption + thead tr:first-child td,
41
- colgroup + thead tr:first-child th,
42
- colgroup + thead tr:first-child td,
43
- thead:first-child tr:first-child th,
44
- thead:first-child tr:first-child td {
45
- border-top: 0;
46
- }
47
- // Account for multiple tbody instances
48
- tbody + tbody {
49
- border-top: 2px solid @tableBorder;
50
- }
51
- }
52
-
53
-
54
-
55
- // CONDENSED TABLE W/ HALF PADDING
56
- // -------------------------------
57
-
58
- .table-condensed {
59
- th,
60
- td {
61
- padding: 4px 5px;
62
- }
63
- }
64
-
65
-
66
- // BORDERED VERSION
67
- // ----------------
68
-
69
- .table-bordered {
70
- border: 1px solid @tableBorder;
71
- border-collapse: separate; // Done so we can round those corners!
72
- *border-collapse: collapse; // IE7 can't round corners anyway
73
- border-left: 0;
74
- .border-radius(@baseBorderRadius);
75
- th,
76
- td {
77
- border-left: 1px solid @tableBorder;
78
- }
79
- // Prevent a double border
80
- caption + thead tr:first-child th,
81
- caption + tbody tr:first-child th,
82
- caption + tbody tr:first-child td,
83
- colgroup + thead tr:first-child th,
84
- colgroup + tbody tr:first-child th,
85
- colgroup + tbody tr:first-child td,
86
- thead:first-child tr:first-child th,
87
- tbody:first-child tr:first-child th,
88
- tbody:first-child tr:first-child td {
89
- border-top: 0;
90
- }
91
- // For first th or td in the first row in the first thead or tbody
92
- thead:first-child tr:first-child th:first-child,
93
- tbody:first-child tr:first-child td:first-child {
94
- -webkit-border-top-left-radius: 4px;
95
- border-top-left-radius: 4px;
96
- -moz-border-radius-topleft: 4px;
97
- }
98
- thead:first-child tr:first-child th:last-child,
99
- tbody:first-child tr:first-child td:last-child {
100
- -webkit-border-top-right-radius: 4px;
101
- border-top-right-radius: 4px;
102
- -moz-border-radius-topright: 4px;
103
- }
104
- // For first th or td in the first row in the first thead or tbody
105
- thead:last-child tr:last-child th:first-child,
106
- tbody:last-child tr:last-child td:first-child,
107
- tfoot:last-child tr:last-child td:first-child {
108
- .border-radius(0 0 0 4px);
109
- -webkit-border-bottom-left-radius: 4px;
110
- border-bottom-left-radius: 4px;
111
- -moz-border-radius-bottomleft: 4px;
112
- }
113
- thead:last-child tr:last-child th:last-child,
114
- tbody:last-child tr:last-child td:last-child,
115
- tfoot:last-child tr:last-child td:last-child {
116
- -webkit-border-bottom-right-radius: 4px;
117
- border-bottom-right-radius: 4px;
118
- -moz-border-radius-bottomright: 4px;
119
- }
120
-
121
- // Special fixes to round the left border on the first td/th
122
- caption + thead tr:first-child th:first-child,
123
- caption + tbody tr:first-child td:first-child,
124
- colgroup + thead tr:first-child th:first-child,
125
- colgroup + tbody tr:first-child td:first-child {
126
- -webkit-border-top-left-radius: 4px;
127
- border-top-left-radius: 4px;
128
- -moz-border-radius-topleft: 4px;
129
- }
130
- caption + thead tr:first-child th:last-child,
131
- caption + tbody tr:first-child td:last-child,
132
- colgroup + thead tr:first-child th:last-child,
133
- colgroup + tbody tr:first-child td:last-child {
134
- -webkit-border-top-right-radius: 4px;
135
- border-top-right-radius: 4px;
136
- -moz-border-radius-topright: 4px;
137
- }
138
-
139
- }
140
-
141
-
142
-
143
-
144
- // ZEBRA-STRIPING
145
- // --------------
146
-
147
- // Default zebra-stripe styles (alternating gray and transparent backgrounds)
148
- .table-striped {
149
- tbody {
150
- tr:nth-child(odd) td,
151
- tr:nth-child(odd) th {
152
- background-color: @tableBackgroundAccent;
153
- }
154
- }
155
- }
156
-
157
-
158
- // HOVER EFFECT
159
- // ------------
160
- // Placed here since it has to come after the potential zebra striping
161
- .table-hover {
162
- tbody {
163
- tr:hover td,
164
- tr:hover th {
165
- background-color: @tableBackgroundHover;
166
- }
167
- }
168
- }
169
-
170
-
171
- // TABLE CELL SIZING
172
- // -----------------
173
-
174
- // Reset default grid behavior
175
- table td[class*="span"],
176
- table th[class*="span"],
177
- .row-fluid table td[class*="span"],
178
- .row-fluid table th[class*="span"] {
179
- display: table-cell;
180
- float: none; // undo default grid column styles
181
- margin-left: 0; // undo default grid column styles
182
- }
183
-
184
- // Change the column widths to account for td/th padding
185
- .table td,
186
- .table th {
187
- &.span1 { .tableColumns(1); }
188
- &.span2 { .tableColumns(2); }
189
- &.span3 { .tableColumns(3); }
190
- &.span4 { .tableColumns(4); }
191
- &.span5 { .tableColumns(5); }
192
- &.span6 { .tableColumns(6); }
193
- &.span7 { .tableColumns(7); }
194
- &.span8 { .tableColumns(8); }
195
- &.span9 { .tableColumns(9); }
196
- &.span10 { .tableColumns(10); }
197
- &.span11 { .tableColumns(11); }
198
- &.span12 { .tableColumns(12); }
199
- }
200
-
201
-
202
-
203
- // TABLE BACKGROUNDS
204
- // -----------------
205
- // Exact selectors below required to override .table-striped
206
-
207
- .table tbody tr {
208
- &.success td {
209
- background-color: @successBackground;
210
- }
211
- &.error td {
212
- background-color: @errorBackground;
213
- }
214
- &.warning td {
215
- background-color: @warningBackground;
216
- }
217
- &.info td {
218
- background-color: @infoBackground;
219
- }
220
- }
221
-
222
- // Hover states for .table-hover
223
- .table-hover tbody tr {
224
- &.success:hover td {
225
- background-color: darken(@successBackground, 5%);
226
- }
227
- &.error:hover td {
228
- background-color: darken(@errorBackground, 5%);
229
- }
230
- &.warning:hover td {
231
- background-color: darken(@warningBackground, 5%);
232
- }
233
- &.info:hover td {
234
- background-color: darken(@infoBackground, 5%);
235
- }
236
- }
@@ -1,52 +0,0 @@
1
- //
2
- // Thumbnails
3
- // --------------------------------------------------
4
-
5
-
6
- // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
7
-
8
- // Make wrapper ul behave like the grid
9
- .thumbnails {
10
- margin-left: -@gridGutterWidth;
11
- list-style: none;
12
- .clearfix();
13
- }
14
- // Fluid rows have no left margin
15
- .row-fluid .thumbnails {
16
- margin-left: 0;
17
- }
18
-
19
- // Float li to make thumbnails appear in a row
20
- .thumbnails > li {
21
- float: left; // Explicity set the float since we don't require .span* classes
22
- margin-bottom: @baseLineHeight;
23
- margin-left: @gridGutterWidth;
24
- }
25
-
26
- // The actual thumbnail (can be `a` or `div`)
27
- .thumbnail {
28
- display: block;
29
- padding: 4px;
30
- line-height: @baseLineHeight;
31
- border: 1px solid #ddd;
32
- .border-radius(@baseBorderRadius);
33
- .box-shadow(0 1px 3px rgba(0,0,0,.055));
34
- .transition(all .2s ease-in-out);
35
- }
36
- // Add a hover state for linked versions only
37
- a.thumbnail:hover {
38
- border-color: @linkColor;
39
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
40
- }
41
-
42
- // Images and captions
43
- .thumbnail > img {
44
- display: block;
45
- max-width: 100%;
46
- margin-left: auto;
47
- margin-right: auto;
48
- }
49
- .thumbnail .caption {
50
- padding: 9px;
51
- color: @gray;
52
- }
@@ -1,70 +0,0 @@
1
- //
2
- // Tooltips
3
- // --------------------------------------------------
4
-
5
-
6
- // Base class
7
- .tooltip {
8
- position: absolute;
9
- z-index: @zindexTooltip;
10
- display: block;
11
- visibility: visible;
12
- padding: 5px;
13
- font-size: 11px;
14
- .opacity(0);
15
- &.in { .opacity(80); }
16
- &.top { margin-top: -3px; }
17
- &.right { margin-left: 3px; }
18
- &.bottom { margin-top: 3px; }
19
- &.left { margin-left: -3px; }
20
- }
21
-
22
- // Wrapper for the tooltip content
23
- .tooltip-inner {
24
- max-width: 200px;
25
- padding: 3px 8px;
26
- color: @tooltipColor;
27
- text-align: center;
28
- text-decoration: none;
29
- background-color: @tooltipBackground;
30
- .border-radius(@baseBorderRadius);
31
- }
32
-
33
- // Arrows
34
- .tooltip-arrow {
35
- position: absolute;
36
- width: 0;
37
- height: 0;
38
- border-color: transparent;
39
- border-style: solid;
40
- }
41
- .tooltip {
42
- &.top .tooltip-arrow {
43
- bottom: 0;
44
- left: 50%;
45
- margin-left: -@tooltipArrowWidth;
46
- border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
47
- border-top-color: @tooltipArrowColor;
48
- }
49
- &.right .tooltip-arrow {
50
- top: 50%;
51
- left: 0;
52
- margin-top: -@tooltipArrowWidth;
53
- border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
54
- border-right-color: @tooltipArrowColor;
55
- }
56
- &.left .tooltip-arrow {
57
- top: 50%;
58
- right: 0;
59
- margin-top: -@tooltipArrowWidth;
60
- border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
61
- border-left-color: @tooltipArrowColor;
62
- }
63
- &.bottom .tooltip-arrow {
64
- top: 0;
65
- left: 50%;
66
- margin-left: -@tooltipArrowWidth;
67
- border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
68
- border-bottom-color: @tooltipArrowColor;
69
- }
70
- }
@@ -1,227 +0,0 @@
1
- //
2
- // Typography
3
- // --------------------------------------------------
4
-
5
-
6
- // Body text
7
- // -------------------------
8
-
9
- p {
10
- margin: 0 0 @baseLineHeight / 2;
11
- }
12
- .lead {
13
- margin-bottom: @baseLineHeight;
14
- font-size: @baseFontSize * 1.5;
15
- font-weight: 200;
16
- line-height: @baseLineHeight * 1.5;
17
- }
18
-
19
-
20
- // Emphasis & misc
21
- // -------------------------
22
-
23
- small {
24
- font-size: 85%; // Ex: 14px base font * 85% = about 12px
25
- }
26
- strong {
27
- font-weight: bold;
28
- }
29
- em {
30
- font-style: italic;
31
- }
32
- cite {
33
- font-style: normal;
34
- }
35
-
36
- // Utility classes
37
- .muted {
38
- color: @grayLight;
39
- }
40
- .text-warning { color: @warningText; }
41
- a.text-warning:hover { color: darken(@warningText, 10%); }
42
-
43
- .text-error { color: @errorText; }
44
- a.text-error:hover { color: darken(@errorText, 10%); }
45
-
46
- .text-info { color: @infoText; }
47
- a.text-info:hover { color: darken(@infoText, 10%); }
48
-
49
- .text-success { color: @successText; }
50
- a.text-success:hover { color: darken(@successText, 10%); }
51
-
52
-
53
- // Headings
54
- // -------------------------
55
-
56
- h1, h2, h3, h4, h5, h6 {
57
- margin: (@baseLineHeight / 2) 0;
58
- font-family: @headingsFontFamily;
59
- font-weight: @headingsFontWeight;
60
- line-height: @baseLineHeight;
61
- color: @headingsColor;
62
- text-rendering: optimizelegibility; // Fix the character spacing for headings
63
- small {
64
- font-weight: normal;
65
- line-height: 1;
66
- color: @grayLight;
67
- }
68
- }
69
-
70
- h1,
71
- h2,
72
- h3 { line-height: @baseLineHeight * 2; }
73
-
74
- h1 { font-size: @baseFontSize * 2.75; } // ~38px
75
- h2 { font-size: @baseFontSize * 2.25; } // ~32px
76
- h3 { font-size: @baseFontSize * 1.75; } // ~24px
77
- h4 { font-size: @baseFontSize * 1.25; } // ~18px
78
- h5 { font-size: @baseFontSize; }
79
- h6 { font-size: @baseFontSize * 0.85; } // ~12px
80
-
81
- h1 small { font-size: @baseFontSize * 1.75; } // ~24px
82
- h2 small { font-size: @baseFontSize * 1.25; } // ~18px
83
- h3 small { font-size: @baseFontSize; }
84
- h4 small { font-size: @baseFontSize; }
85
-
86
-
87
- // Page header
88
- // -------------------------
89
-
90
- .page-header {
91
- padding-bottom: (@baseLineHeight / 2) - 1;
92
- margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
93
- border-bottom: 1px solid @grayLighter;
94
- }
95
-
96
-
97
-
98
- // Lists
99
- // --------------------------------------------------
100
-
101
- // Unordered and Ordered lists
102
- ul, ol {
103
- padding: 0;
104
- margin: 0 0 @baseLineHeight / 2 25px;
105
- }
106
- ul ul,
107
- ul ol,
108
- ol ol,
109
- ol ul {
110
- margin-bottom: 0;
111
- }
112
- li {
113
- line-height: @baseLineHeight;
114
- }
115
- ul.unstyled,
116
- ol.unstyled {
117
- margin-left: 0;
118
- list-style: none;
119
- }
120
-
121
- // Description Lists
122
- dl {
123
- margin-bottom: @baseLineHeight;
124
- }
125
- dt,
126
- dd {
127
- line-height: @baseLineHeight;
128
- }
129
- dt {
130
- font-weight: bold;
131
- }
132
- dd {
133
- margin-left: @baseLineHeight / 2;
134
- }
135
- // Horizontal layout (like forms)
136
- .dl-horizontal {
137
- .clearfix(); // Ensure dl clears floats if empty dd elements present
138
- dt {
139
- float: left;
140
- width: @horizontalComponentOffset - 20;
141
- clear: left;
142
- text-align: right;
143
- .text-overflow();
144
- }
145
- dd {
146
- margin-left: @horizontalComponentOffset;
147
- }
148
- }
149
-
150
- // MISC
151
- // ----
152
-
153
- // Horizontal rules
154
- hr {
155
- margin: @baseLineHeight 0;
156
- border: 0;
157
- border-top: 1px solid @hrBorder;
158
- border-bottom: 1px solid @white;
159
- }
160
-
161
- // Abbreviations and acronyms
162
- abbr[title],
163
- // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
164
- abbr[data-original-title] {
165
- cursor: help;
166
- border-bottom: 1px dotted @grayLight;
167
- }
168
- abbr.initialism {
169
- font-size: 90%;
170
- text-transform: uppercase;
171
- }
172
-
173
- // Blockquotes
174
- blockquote {
175
- padding: 0 0 0 15px;
176
- margin: 0 0 @baseLineHeight;
177
- border-left: 5px solid @grayLighter;
178
- p {
179
- margin-bottom: 0;
180
- #font > .shorthand(16px,300,@baseLineHeight * 1.25);
181
- }
182
- small {
183
- display: block;
184
- line-height: @baseLineHeight;
185
- color: @grayLight;
186
- &:before {
187
- content: '\2014 \00A0';
188
- }
189
- }
190
-
191
- // Float right with text-align: right
192
- &.pull-right {
193
- float: right;
194
- padding-right: 15px;
195
- padding-left: 0;
196
- border-right: 5px solid @grayLighter;
197
- border-left: 0;
198
- p,
199
- small {
200
- text-align: right;
201
- }
202
- small {
203
- &:before {
204
- content: '';
205
- }
206
- &:after {
207
- content: '\00A0 \2014';
208
- }
209
- }
210
- }
211
- }
212
-
213
- // Quotes
214
- q:before,
215
- q:after,
216
- blockquote:before,
217
- blockquote:after {
218
- content: "";
219
- }
220
-
221
- // Addresses
222
- address {
223
- display: block;
224
- margin-bottom: @baseLineHeight;
225
- font-style: normal;
226
- line-height: @baseLineHeight;
227
- }