plinth 0.0.1.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (237) hide show
  1. data/.codoopts +10 -0
  2. data/.env +1 -0
  3. data/.gitignore +23 -0
  4. data/.ruby-version +1 -0
  5. data/CHANGELOG.md +1 -0
  6. data/Capfile +4 -0
  7. data/Gemfile +52 -0
  8. data/Gemfile.lock +243 -0
  9. data/Guardfile +9 -0
  10. data/LICENSE +22 -0
  11. data/Procfile +1 -0
  12. data/README.md +79 -0
  13. data/Rakefile +35 -0
  14. data/app/assets/images/layouts/basic-marketing-site.png +0 -0
  15. data/app/assets/images/layouts/jumbotron-site.png +0 -0
  16. data/app/assets/images/rails.png +0 -0
  17. data/app/assets/javascripts/application.js +17 -0
  18. data/app/assets/javascripts/base.js.coffee +3 -0
  19. data/app/assets/javascripts/grids.js.coffee +3 -0
  20. data/app/assets/javascripts/javascript.js.coffee +3 -0
  21. data/app/assets/javascripts/lib/modernizr.js +4 -0
  22. data/app/assets/javascripts/modules.js.coffee +3 -0
  23. data/app/assets/stylesheets/application-old-ie.css.scss +10 -0
  24. data/app/assets/stylesheets/application.css.scss +57 -0
  25. data/app/assets/stylesheets/base/_all.scss +6 -0
  26. data/app/assets/stylesheets/base/_reset.css.scss +16 -0
  27. data/app/assets/stylesheets/base/_type.scss +16 -0
  28. data/app/assets/stylesheets/modules/_coderay.css.scss +171 -0
  29. data/app/assets/stylesheets/modules/_layout_examples.css.scss +13 -0
  30. data/app/assets/stylesheets/modules/_webfont_table.css.scss +47 -0
  31. data/app/assets/stylesheets/vanilla-normal-old-ie.css.scss +11 -0
  32. data/app/assets/stylesheets/vanilla-normal.css.scss +33 -0
  33. data/app/controllers/application_controller.rb +5 -0
  34. data/app/controllers/base_controller.rb +52 -0
  35. data/app/controllers/grids_controller.rb +48 -0
  36. data/app/controllers/javascript_controller.rb +20 -0
  37. data/app/controllers/javascripts_controller.rb +4 -0
  38. data/app/controllers/modules_controller.rb +43 -0
  39. data/app/controllers/ui_controller.rb +2 -0
  40. data/app/helpers/plinth_helper.rb +33 -0
  41. data/app/views/base/_webfonts_social_standard.html +429 -0
  42. data/app/views/base/_webfonts_ss_standard.html +2413 -0
  43. data/app/views/base/buttons.html.haml +20 -0
  44. data/app/views/base/forms.html.haml +40 -0
  45. data/app/views/base/images.html.haml +20 -0
  46. data/app/views/base/index.html.haml +68 -0
  47. data/app/views/base/labels.html.haml +22 -0
  48. data/app/views/base/lists.html.haml +20 -0
  49. data/app/views/base/webfonts.html.haml +17 -0
  50. data/app/views/grids/index.html.haml +73 -0
  51. data/app/views/grids/layouts/basic-marketing-site.haml +69 -0
  52. data/app/views/grids/layouts/jumbotron-site.haml +92 -0
  53. data/app/views/grids/layouts.html.haml +9 -0
  54. data/app/views/layouts/_main_nav.html.haml +15 -0
  55. data/app/views/layouts/application.html.haml +15 -0
  56. data/app/views/modules/alerts.html.haml +12 -0
  57. data/app/views/modules/footer.html.haml +2 -0
  58. data/app/views/modules/index.html.haml +5 -0
  59. data/app/views/modules/nav.html.haml +12 -0
  60. data/app/views/modules/panels.html.haml +3 -0
  61. data/app/views/modules/tabs.html.haml +58 -0
  62. data/app/views/old_javascript/close.html.haml +2 -0
  63. data/app/views/old_javascript/forms.html.haml +2 -0
  64. data/app/views/old_javascript/ga_events.html.haml +2 -0
  65. data/app/views/old_javascript/index.html.haml +2 -0
  66. data/app/views/old_javascript/responsive_resize.html.haml +2 -0
  67. data/app/views/old_javascript/switch.html.haml +2 -0
  68. data/app/views/parts/base/_button.haml +3 -0
  69. data/app/views/parts/base/_button_colours.haml +4 -0
  70. data/app/views/parts/base/_button_group.haml +4 -0
  71. data/app/views/parts/base/_button_sizing.haml +3 -0
  72. data/app/views/parts/base/_button_states.haml +3 -0
  73. data/app/views/parts/base/_form_example.haml +26 -0
  74. data/app/views/parts/base/_form_example_horizontal.haml +26 -0
  75. data/app/views/parts/base/_form_group.haml +10 -0
  76. data/app/views/parts/base/_form_location.haml +3 -0
  77. data/app/views/parts/base/_labels.haml +5 -0
  78. data/app/views/parts/base/_labels_sizing.haml +3 -0
  79. data/app/views/parts/base/_list.haml +10 -0
  80. data/app/views/parts/base/_list_action.haml +5 -0
  81. data/app/views/parts/base/_list_nav.haml +12 -0
  82. data/app/views/parts/base/_list_unset.haml +10 -0
  83. data/app/views/parts/base/_type_body.haml +2 -0
  84. data/app/views/parts/base/_type_headings.haml +5 -0
  85. data/app/views/parts/base/_type_helpers.haml +3 -0
  86. data/app/views/parts/base/_type_links.haml +9 -0
  87. data/app/views/parts/base/_type_shouts.haml +4 -0
  88. data/app/views/parts/grids/_example_layout_1.haml +10 -0
  89. data/app/views/parts/grids/_live_grid.haml +29 -0
  90. data/app/views/parts/modules/_alerts.haml +11 -0
  91. data/app/views/parts/modules/_nav_footer.haml +34 -0
  92. data/app/views/parts/modules/_nav_header.haml +18 -0
  93. data/app/views/parts/modules/_panels.haml +9 -0
  94. data/app/views/parts/modules/_tabs_minimal.haml +11 -0
  95. data/app/views/parts/modules/_tabs_simple_group.haml +11 -0
  96. data/app/views/parts/modules/_tabs_simple_group_toggle.haml +11 -0
  97. data/app/views/parts/modules/_tabs_toggle.haml +5 -0
  98. data/app/views/parts/modules/_tabs_traditional.haml +11 -0
  99. data/app/views/shared/_placeholder_text.html.haml +1 -0
  100. data/app/views/shared/_title.html.haml +8 -0
  101. data/app/views/shared/_ui_nav.html.haml +5 -0
  102. data/app/views/ui/alert.html.haml +35 -0
  103. data/app/views/ui/buttons.html.haml +116 -0
  104. data/app/views/ui/footer.html.haml +69 -0
  105. data/app/views/ui/forms/_vertical_form.haml +7 -0
  106. data/app/views/ui/forms.html.haml +59 -0
  107. data/app/views/ui/grids.html.haml +18 -0
  108. data/app/views/ui/index.html.haml +5 -0
  109. data/app/views/ui/labels.html.haml +15 -0
  110. data/app/views/ui/modules/panel.html.haml +3 -0
  111. data/app/views/ui/nav.html.haml +48 -0
  112. data/app/views/ui/tabs.html.haml +171 -0
  113. data/app/views/ui/typography.html.haml +118 -0
  114. data/db/development.sqlite3 +0 -0
  115. data/db/seeds.rb +7 -0
  116. data/doc/README_FOR_APP +2 -0
  117. data/lib/assets/.gitkeep +0 -0
  118. data/lib/plinth/version.rb +3 -0
  119. data/lib/plinth.rb +11 -0
  120. data/lib/tasks/.gitkeep +0 -0
  121. data/lib/templates/haml/scaffold/_form.html.haml +8 -0
  122. data/log/.gitkeep +0 -0
  123. data/plinth.gemspec +33 -0
  124. data/public/404.html +26 -0
  125. data/public/422.html +26 -0
  126. data/public/500.html +25 -0
  127. data/public/favicon.ico +0 -0
  128. data/public/javascripts/LICENSE.html +158 -0
  129. data/public/javascripts/README.md.html +163 -0
  130. data/public/javascripts/assets/codo.css +1 -0
  131. data/public/javascripts/assets/codo.js +21 -0
  132. data/public/javascripts/assets/search_data.js +1 -0
  133. data/public/javascripts/class_index.html +215 -0
  134. data/public/javascripts/class_list.html +58 -0
  135. data/public/javascripts/classes/Close.html +259 -0
  136. data/public/javascripts/classes/GAEvent.html +231 -0
  137. data/public/javascripts/classes/ResizeHandler.html +225 -0
  138. data/public/javascripts/classes/Switch.html +318 -0
  139. data/public/javascripts/classes/TBGForm.html +373 -0
  140. data/public/javascripts/extra_list.html +36 -0
  141. data/public/javascripts/file_list.html +74 -0
  142. data/public/javascripts/files/styleguide/plugins/tbg-close.js.coffee.html +160 -0
  143. data/public/javascripts/files/styleguide/plugins/tbg-forms.js.coffee.html +160 -0
  144. data/public/javascripts/files/styleguide/plugins/tbg-ga-events.js.coffee.html +160 -0
  145. data/public/javascripts/files/styleguide/plugins/tbg-respinsiveresize.js.coffee.html +160 -0
  146. data/public/javascripts/files/styleguide/plugins/tbg-switch.js.coffee.html +160 -0
  147. data/public/javascripts/index.html +14 -0
  148. data/public/javascripts/method_list.html +187 -0
  149. data/public/javascripts/mixin_list.html +28 -0
  150. data/public/robots.txt +5 -0
  151. data/script/rails +6 -0
  152. data/spec/javascripts/fixtures/plugins/tbg-close_fixture.html.haml +4 -0
  153. data/spec/javascripts/fixtures/plugins/tbg-forms_fixture.html.haml +12 -0
  154. data/spec/javascripts/fixtures/plugins/tbg-ga-events_fixture.html.haml +9 -0
  155. data/spec/javascripts/fixtures/plugins/tbg-switch_fixture.html.haml +11 -0
  156. data/spec/javascripts/plugins/tbg-close_spec.js.coffee +54 -0
  157. data/spec/javascripts/plugins/tbg-forms_spec.js.coffee +87 -0
  158. data/spec/javascripts/plugins/tbg-ga-events_spec.js.coffee +83 -0
  159. data/spec/javascripts/plugins/tbg-switch_spec.js.coffee +96 -0
  160. data/spec/javascripts/spec.js.coffee +2 -0
  161. data/vendor/assets/fonts/ss-social-circle.eot +0 -0
  162. data/vendor/assets/fonts/ss-social-circle.svg +139 -0
  163. data/vendor/assets/fonts/ss-social-circle.ttf +0 -0
  164. data/vendor/assets/fonts/ss-social-circle.woff +0 -0
  165. data/vendor/assets/fonts/ss-social-regular.eot +0 -0
  166. data/vendor/assets/fonts/ss-social-regular.svg +133 -0
  167. data/vendor/assets/fonts/ss-social-regular.ttf +0 -0
  168. data/vendor/assets/fonts/ss-social-regular.woff +0 -0
  169. data/vendor/assets/fonts/ss-social.js +75 -0
  170. data/vendor/assets/fonts/ss-standard.eot +0 -0
  171. data/vendor/assets/fonts/ss-standard.js +75 -0
  172. data/vendor/assets/fonts/ss-standard.svg +207 -0
  173. data/vendor/assets/fonts/ss-standard.ttf +0 -0
  174. data/vendor/assets/fonts/ss-standard.woff +0 -0
  175. data/vendor/assets/images/background.png +0 -0
  176. data/vendor/assets/images/logos/sb-logo-white.png +0 -0
  177. data/vendor/assets/images/logos/sb-logo-white.svg +5 -0
  178. data/vendor/assets/images/middleman.png +0 -0
  179. data/vendor/assets/index.html.haml +8 -0
  180. data/vendor/assets/javascripts/.gitkeep +0 -0
  181. data/vendor/assets/javascripts/plinth/lib/handlebars.js +3 -0
  182. data/vendor/assets/javascripts/plinth/lib/jquery.fitvids.js +81 -0
  183. data/vendor/assets/javascripts/plinth/lib/ss-social.js +75 -0
  184. data/vendor/assets/javascripts/plinth/lib/ss-standard.js +78 -0
  185. data/vendor/assets/javascripts/plinth/plugins/doc/assets/codo.css +1 -0
  186. data/vendor/assets/javascripts/plinth/plugins/doc/assets/codo.js +21 -0
  187. data/vendor/assets/javascripts/plinth/plugins/doc/assets/search_data.js +1 -0
  188. data/vendor/assets/javascripts/plinth/plugins/doc/class_index.html +194 -0
  189. data/vendor/assets/javascripts/plinth/plugins/doc/class_list.html +58 -0
  190. data/vendor/assets/javascripts/plinth/plugins/doc/classes/Close.html +215 -0
  191. data/vendor/assets/javascripts/plinth/plugins/doc/classes/GAEvent.html +235 -0
  192. data/vendor/assets/javascripts/plinth/plugins/doc/classes/ResizeHandler.html +192 -0
  193. data/vendor/assets/javascripts/plinth/plugins/doc/classes/Switch.html +233 -0
  194. data/vendor/assets/javascripts/plinth/plugins/doc/classes/TBGForm.html +318 -0
  195. data/vendor/assets/javascripts/plinth/plugins/doc/extra_list.html +30 -0
  196. data/vendor/assets/javascripts/plinth/plugins/doc/file_list.html +58 -0
  197. data/vendor/assets/javascripts/plinth/plugins/doc/files/tbg-close.js.coffee.html +154 -0
  198. data/vendor/assets/javascripts/plinth/plugins/doc/files/tbg-forms.js.coffee.html +154 -0
  199. data/vendor/assets/javascripts/plinth/plugins/doc/files/tbg-ga-events.js.coffee.html +154 -0
  200. data/vendor/assets/javascripts/plinth/plugins/doc/files/tbg-respinsiveresize.js.coffee.html +154 -0
  201. data/vendor/assets/javascripts/plinth/plugins/doc/files/tbg-switch.js.coffee.html +154 -0
  202. data/vendor/assets/javascripts/plinth/plugins/doc/index.html +14 -0
  203. data/vendor/assets/javascripts/plinth/plugins/doc/method_list.html +163 -0
  204. data/vendor/assets/javascripts/plinth/plugins/doc/mixin_list.html +28 -0
  205. data/vendor/assets/javascripts/plinth/plugins/tbg-close.js.coffee +97 -0
  206. data/vendor/assets/javascripts/plinth/plugins/tbg-forms.js.coffee +156 -0
  207. data/vendor/assets/javascripts/plinth/plugins/tbg-ga-events.js.coffee +107 -0
  208. data/vendor/assets/javascripts/plinth/plugins/tbg-respinsiveresize.js.coffee +73 -0
  209. data/vendor/assets/javascripts/plinth/plugins/tbg-switch.js.coffee +121 -0
  210. data/vendor/assets/stylesheets/.gitkeep +0 -0
  211. data/vendor/assets/stylesheets/_functions.scss +28 -0
  212. data/vendor/assets/stylesheets/_mixins.css.scss +273 -0
  213. data/vendor/assets/stylesheets/_settings.css.scss +120 -0
  214. data/vendor/assets/stylesheets/plinth/base/_all.css.scss +7 -0
  215. data/vendor/assets/stylesheets/plinth/base/_buttons.css.scss +166 -0
  216. data/vendor/assets/stylesheets/plinth/base/_form.css.scss +196 -0
  217. data/vendor/assets/stylesheets/plinth/base/_labels.css.scss +58 -0
  218. data/vendor/assets/stylesheets/plinth/base/_lists.css.scss +57 -0
  219. data/vendor/assets/stylesheets/plinth/base/_reset.css.scss +284 -0
  220. data/vendor/assets/stylesheets/plinth/base/_type.css.scss +328 -0
  221. data/vendor/assets/stylesheets/plinth/base/webfonts/_all.css.scss +2 -0
  222. data/vendor/assets/stylesheets/plinth/base/webfonts/ss-social.css.scss +57 -0
  223. data/vendor/assets/stylesheets/plinth/base/webfonts/ss-standard.css.scss +48 -0
  224. data/vendor/assets/stylesheets/plinth/grid/_grid.css.scss +127 -0
  225. data/vendor/assets/stylesheets/plinth/modules/_alert.css.scss +71 -0
  226. data/vendor/assets/stylesheets/plinth/modules/_all-grid.css.scss +1 -0
  227. data/vendor/assets/stylesheets/plinth/modules/_all-no-grid.css.scss +4 -0
  228. data/vendor/assets/stylesheets/plinth/modules/_footer.css.scss +93 -0
  229. data/vendor/assets/stylesheets/plinth/modules/_nav.css.scss +106 -0
  230. data/vendor/assets/stylesheets/plinth/modules/_panel.css.scss +28 -0
  231. data/vendor/assets/stylesheets/plinth/modules/_switch.css.scss +88 -0
  232. data/vendor/assets/stylesheets/plinth.css.scss +15 -0
  233. data/vendor/assets/views/buttons/_buttons.haml +9 -0
  234. data/vendor/assets/views/forms/_vertical_form.haml +7 -0
  235. data/vendor/assets/views/type/_headings.haml +6 -0
  236. data/vendor/assets/views/type/_paragraphs.haml +4 -0
  237. metadata +537 -0
data/app/views/base/buttons.html.haml ADDED
@@ -0,0 +1,20 @@
1
+ %h3#basic-buttons Basic Buttons
2
+ = example "base", "button"
3
+
4
+ %h3#button-sizing Button Sizing
5
+ = example "base", "button_sizing"
6
+ %hr
7
+
8
+ %h3#button-colors Button Colours
9
+ = example "base", "button_colours"
10
+ %hr
11
+
12
+ %h3#button-states Button States
13
+ = example "base", "button_states"
14
+ %hr
15
+
16
+ %h3#button-groups Button Groups
17
+ = example "base", "button_group"
18
+ %hr
19
+
20
+
data/app/views/base/forms.html.haml ADDED
@@ -0,0 +1,40 @@
1
+ :markdown
2
+ Our form markup is dictated by a rails gem called [formtastic](https://github.com/justinfrench/formtastic). The gem allows the forms to be
3
+ dynamically populated by rails and cuts out a lot of plumbing to models.
4
+
5
+ The downside to this approach is that we lose a lot of control over the forms. Whilst this is a pain, it is much less painful than manually creating
6
+ every detail of the form.
7
+
8
+ ##### Example formtastic markup
9
+
10
+ :coderay
11
+ #!HAML
12
+
13
+ = semantic_form_for @post do |f|
14
+ = f.inputs do
15
+ = f.input :title, input_html: { size: 10 }
16
+ = f.input :body, input_html: { class: 'autogrow', rows: 10, cols: 20, maxlength: 10 }
17
+ = f.input :created_at, input_html: { disabled: true }
18
+ = f.input :updated_at, input_html: { readonly: true }
19
+ = f.actions
20
+ %hr
21
+
22
+ %h3 Example markup of standard form
23
+ :markdown
24
+ This is some example markup you would expect formtastic to output.
25
+ = example "base", "form_example"
26
+ %hr
27
+
28
+ %h3 Example markup of horizontal form
29
+ :markdown
30
+ To make a form horizontal you need to add the class `.horizontal` to the form.
31
+ = example "base", "form_example_horizontal"
32
+ %hr
33
+
34
+ %h3#Location-input Location Input
35
+ = example "base", "form_location"
36
+ %hr
37
+
38
+ %h3#grouped-inputs Grouped Inputs
39
+ = example "base", "form_group"
40
+ %hr
data/app/views/base/images.html.haml ADDED
@@ -0,0 +1,20 @@
1
+ %h3#modular-scale Image sizes
2
+ :markdown
3
+ Image sizes are set with a 16:9 ratio
4
+ *(please note the 1280 x 720 image below is not to scale)*
5
+
6
+ %figure
7
+ %img{src: "http://placehold.it/1280x720"}
8
+ %figcaption This is the caption!
9
+
10
+ %figure
11
+ %img{src: "http://placehold.it/640x360"}
12
+ %figcaption This is the caption!
13
+
14
+ %figure
15
+ %img{src: "http://placehold.it/310x175"}
16
+ %figcaption This is the caption!
17
+
18
+ %figure
19
+ %img{src: "http://placehold.it/145x82"}
20
+ %figcaption This is the caption!
data/app/views/base/index.html.haml ADDED
@@ -0,0 +1,68 @@
1
+ -#
2
+ -# Type
3
+ -#
4
+
5
+ %h3#modular-scale Modular Scale
6
+ :markdown
7
+ The type and spacing is set using modular scale. Whilst this style guide will give some information
8
+ on how to change the defaults, it will *not* try to give an explaintion of modular scale.
9
+
10
+ The project uses [this mixin](https://github.com/scottkellum/modular-scale), it has some good documentaion in the README.md.
11
+ %hr
12
+
13
+ %h3#setting-modular-scale Setting Modular Scale
14
+ :markdown
15
+ To change the modular scale of the site you must define the folowing variables:
16
+ :coderay
17
+ #!SCSS
18
+
19
+ $baseFontSize: 16px;
20
+ $importantModNum: 145px;
21
+ :markdown
22
+ The default ratio for the scale is fifth (1:1.5). To change the ratio you should change
23
+ the variable `$ratio`. There are several predefined ratios to be found [here](https://github.com/Team-Sass/modular-scale):
24
+ :coderay
25
+ #!SCSS
26
+
27
+ // Perfect Fifth
28
+ $ratio: fifth();
29
+ %hr
30
+
31
+ %h3#setting-fonts Setting Fonts
32
+ :markdown
33
+ Changing font attributes is self explanatory…
34
+ :coderay
35
+ #!SCSS
36
+
37
+ $base-line-height: 1.5;
38
+ $base-line-height-px: 24px;
39
+
40
+ $base-font-family: "Helvetica Neue", helvetica, arial, sans-serif;
41
+ $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
42
+ $header-font-weight: bold;
43
+ $header-font-color: #4d4d4d;
44
+ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
45
+ $body-font-weight: normal;
46
+ $body-font-color: #4d4d4d;
47
+
48
+
49
+
50
+ %h3#Headings Headings
51
+ = example "base", "type_headings"
52
+ %hr
53
+
54
+ %h3#Body-text Body Text
55
+ = example "base", "type_body"
56
+ %hr
57
+
58
+ %h3#Text-helpers Text Helpers Classes
59
+ = example "base", "type_helpers"
60
+ %hr
61
+
62
+ %h3#Text-shouts Shout Helper Classes
63
+ = example "base", "type_shouts"
64
+ %hr
65
+
66
+ %h3#Text-link Links
67
+ = example "base", "type_links"
68
+ %hr
data/app/views/base/labels.html.haml ADDED
@@ -0,0 +1,22 @@
1
+ -#
2
+ -# Labels
3
+ -#
4
+
5
+ %h3#Standard-labels Standard Labels
6
+ = example "base", "labels"
7
+ %hr
8
+
9
+ %h3#Sizing-labels Sizing Labels
10
+ :markdown
11
+ Labels are simple classes that can be extended using the text helper classes we all ready have.
12
+ = example "base", "labels_sizing"
13
+ %hr
14
+
15
+
16
+ %h3#Sizing-labels Sizing Labels
17
+ :markdown
18
+ New label colours can be created easily using the `label-color` mixin.
19
+ :coderay
20
+ #!SCSS
21
+ @include label-color($color, $hover-color, $txt-color, [$hover-txt-color])
22
+ %hr
data/app/views/base/lists.html.haml ADDED
@@ -0,0 +1,20 @@
1
+ -#
2
+ -# Type
3
+ -#
4
+
5
+ %h3#Standard-lists Standard Lists
6
+ = example "base", "list"
7
+ %hr
8
+
9
+ %h3#Action-list Action List
10
+ = example "base", "list_action"
11
+ %hr
12
+
13
+ %h3#Nav-list Nav List
14
+ = example "base", "list_nav"
15
+ %hr
16
+
17
+ %h3#unset-list Unset List
18
+ = example "base", "list_unset"
19
+ %hr
20
+
data/app/views/base/webfonts.html.haml ADDED
@@ -0,0 +1,17 @@
1
+ %ul.tabs
2
+ %li.is-active= link_to "SS Standard", "#ss-standard", :data => { :switch => true , :"switch-group" => "ss-group" }
3
+ %li= link_to "SS Social", "#ss-social", :data => { :switch => true , :"switch-group" => "ss-group" }
4
+
5
+ %div.switch-content.is-active{:id => "ss-standard"}
6
+ %h3 SS Standard
7
+ :coderay
8
+ #!HAML
9
+ %a.ss-icon 
10
+ = render partial: "base/webfonts_ss_standard"
11
+
12
+ %div.switch-content{:id => "ss-social"}
13
+ %h3 SS Social
14
+ :coderay
15
+ #!HAML
16
+ %a.ss-icon.ss-social &#xF610
17
+ = render partial: "base/webfonts_social_standard"
data/app/views/grids/index.html.haml ADDED
@@ -0,0 +1,73 @@
1
+ -#
2
+ -# Introduction
3
+ -#
4
+ :markdown
5
+ This grid system is built to be flexible but still simple enough to read.
6
+ It can scale up and down, it can fold up and it can be pushed around.
7
+
8
+ This is only one rule to using this grid system. Try and keep it as *simple as possible*.
9
+ Rather than creating a 16 column grid, maybe thing about a 4 or 8 coumn grid and nest the element that need it.
10
+
11
+ Make it only as flexible as it needs be else it will quickly become a pain to maintain.
12
+ %hr
13
+
14
+
15
+ -#
16
+ -# Setting the Grid
17
+ -#
18
+
19
+ %h3#Setting-Grids Setting Grids
20
+ :markdown
21
+ Whilst there are defaults set for the grid system, grids should be set per-project.
22
+ The grids are set within the `application.css.scss` file of the project and should be defined before
23
+ importing any styles.
24
+
25
+ ##### Defining a Break point
26
+
27
+ Breakpoints must be defined as [SASS](http://sass-lang.com) variables and should be of the following format:
28
+
29
+ :coderay
30
+ #!SCSS
31
+ $[name]: '[prefix]', [columns], [gutter(px)], '[min/max]', [size(px)]
32
+ :markdown
33
+ The smallest break point for this site is defined as:
34
+
35
+ :coderay
36
+ #!SCSS
37
+ $sister: 'sister-', 4, 15px, "min", 655px;
38
+ :markdown
39
+ **NB.** As the grids are designed mobile first, the smallest (screen size) breakpoint should not have a media query set.
40
+
41
+ ##### Setting the break points
42
+
43
+ Once all breakpoints are defined they should be added to the `$grids` variable. The following is the
44
+ grid settings block from this site:
45
+ :coderay
46
+ #!SCSS
47
+ // Set maximum container width for site
48
+ $container-width: 800px;
49
+
50
+ $baby: 'baby-', 2, 10px;
51
+ $sister: 'sister-', 4, 15px, "min", 655px;
52
+ $mother: 'mother-', 8, 20px, "min", $container-width;
53
+
54
+ // Declare grid
55
+ $grids : $baby, $sister, $mother;
56
+ -#
57
+
58
+ :markdown
59
+ ##### Setting Maximum Width
60
+
61
+ To set the maximum width of the container you should set the variable, `$container-width`.
62
+
63
+ :coderay
64
+ #!SCSS
65
+ $container-width: 800px;
66
+ -#
67
+ %hr
68
+
69
+ %h3#Live-Grid-Example Live Grid Example
70
+ :markdown
71
+ This grid is using the example setting above and also the same grids that are used on this site.
72
+
73
+ = example "grids", "live_grid"
data/app/views/grids/layouts/basic-marketing-site.haml ADDED
@@ -0,0 +1,69 @@
1
+ !!!
2
+ %html
3
+ %head
4
+ %meta{:charset => "utf-8"}
5
+ %title= "Layout Example - SB Style Guide"
6
+ = javascript_include_tag "lib/modernizr"
7
+ = sassie_stylesheets "vanilla-normal"
8
+ %style(type="text/css")
9
+ :sass
10
+ [role='banner']
11
+ margin-top: 2em
12
+ .panel
13
+ padding: 1em 3em 2em
14
+ border-radius: 5px
15
+ footer
16
+ margin-top: 2em
17
+ border-top: 1px solid #ccc
18
+ p
19
+ padding-top: 1em
20
+
21
+ %body.page_classes
22
+
23
+ -# Standard navigation
24
+
25
+ %nav.nav-global
26
+ #nav-global-2.nav-collapse.mobile-switch-content<
27
+ %ul.nav-items.collapse><
28
+ %li.is-active><
29
+ %a{:href => "#Item-1"} Item 1
30
+ %li><
31
+ %a{:href => "#Item-2"} Item 2
32
+ %li><
33
+ %a{:href => "#Item-3"} Item 3
34
+
35
+ .nav-mobile-switch.mobile-only
36
+ %a{ :href => "#nav-global-2", :data => {:switch => true, :"switch-toggle" => true} }><
37
+ %span>< Show navigation
38
+ %i><
39
+ %i><
40
+ %i><
41
+
42
+ .container
43
+
44
+ -# Header banner
45
+
46
+ .row
47
+ %header.twelve.column{ role: "banner"}
48
+ %hgroup.panel
49
+ %h1 Basic Marketing Site
50
+ %p.standout Our version of the infamous twitter bootstrap marketing example. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
51
+ = link_to "Learn More", "Learn" , class: "large orange btn"
52
+
53
+ -# Featured content
54
+
55
+ .row
56
+ - 3.times do |n|
57
+ %article.four.column
58
+ %h2 Heading #{n}
59
+ %p Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
60
+ %a{ href: "view", class: "btn"}
61
+ View Details
62
+ %b.ss-icon.ss-navigateright
63
+
64
+ -# Footer
65
+
66
+ .row
67
+ %footer.twelve.column
68
+ %p.secondary &copy; Company 2013
69
+ = javascript_include_tag "application"
data/app/views/grids/layouts/jumbotron-site.haml ADDED
@@ -0,0 +1,92 @@
1
+ !!!
2
+ %html
3
+ %head
4
+ %meta{:charset => "utf-8"}
5
+ %title= "Layout Example - SB Style Guide"
6
+ = javascript_include_tag "lib/modernizr"
7
+ = sassie_stylesheets "vanilla-normal"
8
+ %style(type="text/css")
9
+ :sass
10
+ .jumbotron
11
+ padding-bottom: 2em
12
+ margin-bottom: 1em
13
+ background: url(http://placekitten.com/g/1200/400) center center
14
+ background-size: cover
15
+ color: #fff
16
+ text-shadow: 0 1px 1px rgba(0,0,0,.6)
17
+ .jumbotron-nav
18
+ margin-top: 2em
19
+ .nav-global
20
+ background-color: #222
21
+ border-radius: 5px
22
+ .nav-global .nav-items > li
23
+ border-color: #666
24
+ .nav-global .nav-items > li.is-active
25
+ border-color: #999
26
+ a
27
+ border-color: #999
28
+ article
29
+ text-align: center
30
+ [role='banner']
31
+ margin-top: 1em
32
+ margin-bottom: 1em
33
+ footer
34
+ margin-top: 2em
35
+ border-top: 1px solid #ccc
36
+ p
37
+ padding-top: 1em
38
+
39
+ %body
40
+
41
+ .jumbotron
42
+ .container
43
+
44
+ -# Standard navigation
45
+
46
+ .jumbotron-nav.twelve.column
47
+ %nav.nav-global
48
+ #nav-global-2.nav-collapse.mobile-switch-content<
49
+ %ul.nav-items.collapse><
50
+ %li.is-active><
51
+ %a{:href => "#Item-1"} Item 1
52
+ %li><
53
+ %a{:href => "#Item-2"} Item 2
54
+ %li><
55
+ %a{:href => "#Item-3"} Item 3
56
+
57
+ .nav-mobile-switch.mobile-only
58
+ %a{ :href => "#nav-global-2", :data => {:switch => true, :"switch-toggle" => true} }><
59
+ %span>< Show navigation
60
+ %i><
61
+ %i><
62
+ %i><
63
+
64
+
65
+ -# Header banner
66
+
67
+ .row
68
+ %header.twelve.column{ role: "banner"}
69
+ %hgroup
70
+ %h1 Basic Marketing Site
71
+ %p.standout Our version of the infamous twitter bootstrap marketing example. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
72
+ = link_to "Learn More", "Learn" , class: "orange btn"
73
+
74
+ .container
75
+
76
+ -# Featured content
77
+
78
+ .row
79
+ - 3.times do |n|
80
+ %article.four.column
81
+ %h2 Heading #{n}
82
+ %p Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
83
+ %a{ href: "view", class: "btn"}
84
+ View Details
85
+ %b.ss-icon.ss-navigateright
86
+
87
+ -# Footer
88
+
89
+ .row
90
+ %footer.twelve.column
91
+ %p.secondary &copy; Company 2013
92
+ = javascript_include_tag "application"
data/app/views/grids/layouts.html.haml ADDED
@@ -0,0 +1,9 @@
1
+ - @layouts.each do |layout|
2
+ %article.layout-example
3
+ %h2.h3= layout[1]
4
+ %figure
5
+ = image_tag "layouts/#{layout[0]}.png"
6
+ %ul.action-list
7
+ %li= link_to 'View Example', grid_layout_path( layout[0] ), class: "small green btn"
8
+ %li= link_to 'View HAML', grid_layout_path( layout[0], :haml), class: "small blue btn"
9
+ %hr
data/app/views/layouts/_main_nav.html.haml ADDED
@@ -0,0 +1,15 @@
1
+ %nav.nav-global
2
+ #nav-global.nav-collapse.baby-switch-content<
3
+ %ul.nav-items.collapse><
4
+ = nav_link "Home", root_path
5
+ = nav_link "Grids", grid_path
6
+ = nav_link "Base", base_path
7
+ = nav_link "Modules", modules_path
8
+ = nav_link "Javascript", javascripts_path
9
+ = nav_link "Github", github_path
10
+ .nav-mobile-switch.baby-only
11
+ %a{ :href => "#nav-global", :data => {:switch => true, :"switch-toggle" => true} }><
12
+ %span>< Show navigation
13
+ %i><
14
+ %i><
15
+ %i><
data/app/views/layouts/application.html.haml ADDED
@@ -0,0 +1,15 @@
1
+ !!!
2
+ %html
3
+ %head
4
+ %meta{:charset => "utf-8"}
5
+ %title= strip_tags(@page_title) || "Plinth"
6
+ = javascript_include_tag "lib/modernizr"
7
+ = sassie_stylesheets "application"
8
+ %body.page_classes
9
+ = render :partial => "layouts/main_nav"
10
+ .container
11
+ = render :partial => "shared/title"
12
+ .row
13
+ .mother-three.sister-four.column= render :partial => "shared/ui_nav"
14
+ .mother-five.sister-four.column= yield
15
+ = javascript_include_tag "application"
data/app/views/modules/alerts.html.haml ADDED
@@ -0,0 +1,12 @@
1
+ :markdown
2
+ Ruby on Rails makes great use of [flash messages](http://guides.rubyonrails.org/action_controller_overview.html#the-flash) to give the
3
+ users important information as they navigate the site.
4
+
5
+ Within each project we **need** to have an alert for standard messages, success messages and alert messages.
6
+
7
+ Alerts depend on the `Close` plugin.
8
+ %hr
9
+
10
+ %h3#Standard-alerts Standard Alerts
11
+ = example "modules", "alerts"
12
+ %hr
data/app/views/modules/footer.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Modules#footer
2
+ %p Find me in app/views/modules/footer.html.haml
data/app/views/modules/index.html.haml ADDED
@@ -0,0 +1,5 @@
1
+ :markdown
2
+ The rule is, if we find ourselves building a module twice, then it belongs
3
+ in the style guide.
4
+
5
+ %h3 The structure of a module
data/app/views/modules/nav.html.haml ADDED
@@ -0,0 +1,12 @@
1
+ %h3 Header Navigation
2
+ :markdown
3
+ This is a responsive header navigation that folds down on the smallest media query.
4
+ = example "modules", "nav_header"
5
+ %hr
6
+
7
+
8
+ %h3 Footer Navigation
9
+ :markdown
10
+ It's down there; at the bottom of the page.
11
+ = example "modules", "nav_footer"
12
+ %hr
data/app/views/modules/panels.html.haml ADDED
@@ -0,0 +1,3 @@
1
+ %h3 Panel
2
+ = example "modules", "panels"
3
+ %hr
data/app/views/modules/tabs.html.haml ADDED
@@ -0,0 +1,58 @@
1
+ :markdown
2
+ This module is names `Tabs` in the style guide for convenience only. In mark-up and
3
+ code it is called `Switch` as it does much more than traditional tabs.
4
+
5
+ Tabs use the `Switch` plugin to manage active state.
6
+
7
+ %h3.h5 data-switch options
8
+
9
+ %dl
10
+ %dt
11
+ %code data-switch="true"
12
+ %dd An event listener will initalise the switch plugin when an element with this attribute is clicked.
13
+ %dt
14
+ %code data-switch-group="[group name]"
15
+ %dd By giving an element a group name then the plugin can change the state of other switches within the same group.
16
+ %dt
17
+ %code data-switch-toggle
18
+ %dd This option enables a switch to toggle it's state upon click.
19
+
20
+ %ul.shout
21
+ %li= link_to "View the Switch Plugin ", "/jasmine?spec=Switch%3A"
22
+ %li= link_to "View Switch Plugin Tests", "/jasmine?spec=Switch%3A"
23
+ %hr
24
+
25
+ %h3#minimal-switch Minimal Switch
26
+ :markdown
27
+ Simplest form of the switch. This version of the switch is a simple reveal with no off state.
28
+ = example "modules", "tabs_minimal"
29
+ %hr
30
+
31
+
32
+ %h3#toggle-switch Toogle Switch
33
+ :markdown
34
+ Using the data attribute `data-switch-toggle`, content can be toggled and it's state has no effect on other elements.
35
+ = example "modules", "tabs_toggle"
36
+ %hr
37
+
38
+ %h3#simple-group Simple Groups
39
+ :markdown
40
+ By adding the `switch-group` data element we can make groups of switches reactive to each others state.
41
+ = example "modules", "tabs_simple_group"
42
+ %hr
43
+
44
+
45
+ %h3#simple-group-toggle Simple Groups With Toggle
46
+ :markdown
47
+ If you add to the switch link then
48
+ the content will toggle open and shut when the user clicks.
49
+ = example "modules", "tabs_simple_group_toggle"
50
+ %hr
51
+
52
+ %h3#Traditional-tabs Traditional Tabs
53
+ :markdown
54
+ Creating a tabbed module is easy. Simply add the class `.tab` to the links `ul` of a grouped switch.
55
+
56
+ If you wish for a tab to be open on load then add `.is-active` to the tab `li` and corresponding `.switch-content`.
57
+ = example "modules", "tabs_traditional"
58
+ %hr
data/app/views/old_javascript/close.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#close
2
+ %p Find me in app/views/javascript/close.html.haml
data/app/views/old_javascript/forms.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#forms
2
+ %p Find me in app/views/javascript/forms.html.haml
data/app/views/old_javascript/ga_events.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#ga-events
2
+ %p Find me in app/views/javascript/ga-events.html.haml
data/app/views/old_javascript/index.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#index
2
+ %p Find me in app/views/javascript/index.html.haml
data/app/views/old_javascript/responsive_resize.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#responsive-resize
2
+ %p Find me in app/views/javascript/responsive-resize.html.haml
data/app/views/old_javascript/switch.html.haml ADDED
@@ -0,0 +1,2 @@
1
+ %h1 Javascript#switch
2
+ %p Find me in app/views/javascript/switch.html.haml
data/app/views/parts/base/_button.haml ADDED
@@ -0,0 +1,3 @@
1
+ %a{:href=>"stuff", :class=>"btn"} Link Button
2
+ %button{ :class=>"btn"} Button
3
+ %input{ :type => "submit", :value => "Submit Button", :class=>"btn"}
data/app/views/parts/base/_button_colours.haml ADDED
@@ -0,0 +1,4 @@
1
+ %a{:href=>"a-link", :class=>"small btn"} Link Button
2
+ %a{:href=>"a-link", :class=>"small btn orange"} Link Button
3
+ %a{:href=>"a-link", :class=>"small btn blue"} Link Button
4
+ %a{:href=>"a-link", :class=>"small btn green"} Link Button
data/app/views/parts/base/_button_group.haml ADDED
@@ -0,0 +1,4 @@
1
+ .btn-group
2
+ %a{:href=>"link", :class=>"btn prefix"}>< Button 1
3
+ %a{:href=>"link", :class=>"btn prefix suffix"}>< Button 2
4
+ %a{:href=>"link", :class=>"btn suffix"}>< Button 3
data/app/views/parts/base/_button_sizing.haml ADDED
@@ -0,0 +1,3 @@
1
+ %a{:href=>"a-link", :class=>"btn small"} Link Button
2
+ %a{:href=>"a-link", :class=>"btn medium"} Link Button
3
+ %a{:href=>"a-link", :class=>"btn large"} Link Button
data/app/views/parts/base/_button_states.haml ADDED
@@ -0,0 +1,3 @@
1
+ %a{:href=>"a-link", :class=>"small btn green is-active"} Active/Hover Link Button
2
+ %a{:href=>"a-link", :class=>"small btn green disabled"} Disabled Link Button
3
+ %a{:href=>"a-link", :class=>"small btn green", :disabled => true } Disabled Link Button