sb-styleguide 0.0.9 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.codoopts +10 -0
- data/.env +1 -0
- data/.gitignore +1 -0
- data/.ruby-version +1 -0
- data/Gemfile +10 -3
- data/Gemfile.lock +134 -94
- data/Procfile +1 -0
- data/README.md +3 -5
- data/Rakefile +3 -0
- data/app/assets/images/layouts/basic-marketing-site.png +0 -0
- data/app/assets/images/layouts/jumbotron-site.png +0 -0
- data/app/assets/javascripts/base.js.coffee +3 -0
- data/app/assets/javascripts/grids.js.coffee +3 -0
- data/app/assets/javascripts/javascript.js.coffee +3 -0
- data/app/assets/javascripts/modules.js.coffee +3 -0
- data/app/assets/stylesheets/application-old-ie.css.scss +11 -0
- data/app/assets/stylesheets/application.css.scss +33 -30
- data/app/assets/stylesheets/base/_all.scss +6 -0
- data/app/assets/stylesheets/base/_reset.css.scss +16 -0
- data/app/assets/stylesheets/base/_type.scss +16 -0
- data/app/assets/stylesheets/{coderay_githubish.css.scss → modules/_coderay.css.scss} +40 -0
- data/app/assets/stylesheets/modules/_layout_examples.css.scss +13 -0
- data/app/assets/stylesheets/modules/_webfont_table.css.scss +47 -0
- data/app/assets/stylesheets/vanilla-normal-old-ie.css.scss +11 -0
- data/app/assets/stylesheets/vanilla-normal.css.scss +33 -0
- data/app/controllers/application_controller.rb +2 -0
- data/app/controllers/base_controller.rb +52 -0
- data/app/controllers/grids_controller.rb +48 -0
- data/app/controllers/javascript_controller.rb +20 -0
- data/app/controllers/modules_controller.rb +43 -0
- data/app/helpers/styleguide_helper.rb +33 -0
- data/app/views/base/_webfonts_social_standard.html +429 -0
- data/app/views/base/_webfonts_ss_standard.html +2413 -0
- data/app/views/base/buttons.html.haml +20 -0
- data/app/views/base/forms.html.haml +40 -0
- data/app/views/base/images.html.haml +1 -0
- data/app/views/base/index.html.haml +68 -0
- data/app/views/base/labels.html.haml +22 -0
- data/app/views/base/lists.html.haml +20 -0
- data/app/views/base/webfonts.html.haml +17 -0
- data/app/views/grids/index.html.haml +73 -0
- data/app/views/grids/layouts.html.haml +9 -0
- data/app/views/grids/layouts/basic-marketing-site.haml +69 -0
- data/app/views/grids/layouts/jumbotron-site.haml +92 -0
- data/app/views/layouts/_main_nav.html.haml +6 -6
- data/app/views/layouts/application.html.haml +6 -32
- data/app/views/modules/alerts.html.haml +12 -0
- data/app/views/modules/footer.html.haml +2 -0
- data/app/views/modules/index.html.haml +5 -0
- data/app/views/modules/nav.html.haml +12 -0
- data/app/views/modules/panels.html.haml +3 -0
- data/app/views/modules/tabs.html.haml +58 -0
- data/app/views/old_javascript/close.html.haml +2 -0
- data/app/views/old_javascript/forms.html.haml +2 -0
- data/app/views/old_javascript/ga_events.html.haml +2 -0
- data/app/views/old_javascript/index.html.haml +2 -0
- data/app/views/old_javascript/responsive_resize.html.haml +2 -0
- data/app/views/old_javascript/switch.html.haml +2 -0
- data/app/views/parts/base/_button.haml +3 -0
- data/app/views/parts/base/_button_colours.haml +4 -0
- data/app/views/parts/base/_button_group.haml +4 -0
- data/app/views/parts/base/_button_sizing.haml +3 -0
- data/app/views/parts/base/_button_states.haml +3 -0
- data/app/views/parts/base/_form_example.haml +26 -0
- data/app/views/parts/base/_form_example_horizontal.haml +26 -0
- data/app/views/parts/base/_form_group.haml +10 -0
- data/app/views/parts/base/_form_location.haml +3 -0
- data/app/views/parts/base/_labels.haml +5 -0
- data/app/views/parts/base/_labels_sizing.haml +3 -0
- data/app/views/parts/base/_list.haml +10 -0
- data/app/views/parts/base/_list_action.haml +5 -0
- data/app/views/parts/base/_list_nav.haml +12 -0
- data/app/views/parts/base/_list_unset.haml +10 -0
- data/app/views/parts/base/_type_body.haml +2 -0
- data/app/views/parts/base/_type_headings.haml +5 -0
- data/app/views/parts/base/_type_helpers.haml +3 -0
- data/app/views/parts/base/_type_links.haml +9 -0
- data/app/views/parts/base/_type_shouts.haml +4 -0
- data/app/views/parts/grids/_example_layout_1.haml +10 -0
- data/app/views/parts/grids/_live_grid.haml +29 -0
- data/app/views/parts/modules/_alerts.haml +11 -0
- data/app/views/parts/modules/_nav_footer.haml +34 -0
- data/app/views/parts/modules/_nav_header.haml +18 -0
- data/app/views/parts/modules/_panels.haml +9 -0
- data/app/views/parts/modules/_tabs_minimal.haml +11 -0
- data/app/views/parts/modules/_tabs_simple_group.haml +11 -0
- data/app/views/parts/modules/_tabs_simple_group_toggle.haml +11 -0
- data/app/views/parts/modules/_tabs_toggle.haml +5 -0
- data/app/views/parts/modules/_tabs_traditional.haml +11 -0
- data/app/views/shared/_title.html.haml +8 -0
- data/app/views/shared/_ui_nav.html.haml +5 -0
- data/app/views/ui/typography.html.haml +86 -96
- data/lib/sb-styleguide.rb +1 -1
- data/lib/sb-styleguide/version.rb +1 -1
- data/lib/templates/haml/scaffold/_form.html.haml +8 -0
- data/public/javascripts/LICENSE.html +158 -0
- data/public/javascripts/README.md.html +164 -0
- data/public/javascripts/assets/codo.css +1 -0
- data/public/javascripts/assets/codo.js +21 -0
- data/public/javascripts/assets/search_data.js +1 -0
- data/public/javascripts/class_index.html +215 -0
- data/public/javascripts/class_list.html +58 -0
- data/public/javascripts/classes/Close.html +259 -0
- data/public/javascripts/classes/GAEvent.html +231 -0
- data/public/javascripts/classes/ResizeHandler.html +225 -0
- data/public/javascripts/classes/Switch.html +318 -0
- data/public/javascripts/classes/TBGForm.html +373 -0
- data/public/javascripts/extra_list.html +36 -0
- data/public/javascripts/file_list.html +74 -0
- data/public/javascripts/files/styleguide/plugins/tbg-close.js.coffee.html +160 -0
- data/public/javascripts/files/styleguide/plugins/tbg-forms.js.coffee.html +160 -0
- data/public/javascripts/files/styleguide/plugins/tbg-ga-events.js.coffee.html +160 -0
- data/public/javascripts/files/styleguide/plugins/tbg-respinsiveresize.js.coffee.html +160 -0
- data/public/javascripts/files/styleguide/plugins/tbg-switch.js.coffee.html +160 -0
- data/public/javascripts/index.html +14 -0
- data/public/javascripts/method_list.html +187 -0
- data/public/javascripts/mixin_list.html +28 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/assets/codo.css +1 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/assets/codo.js +21 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/assets/search_data.js +1 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/class_index.html +194 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/class_list.html +58 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/classes/Close.html +215 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/classes/GAEvent.html +235 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/classes/ResizeHandler.html +192 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/classes/Switch.html +233 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/classes/TBGForm.html +318 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/extra_list.html +30 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/file_list.html +58 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/files/tbg-close.js.coffee.html +154 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/files/tbg-forms.js.coffee.html +154 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/files/tbg-ga-events.js.coffee.html +154 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/files/tbg-respinsiveresize.js.coffee.html +154 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/files/tbg-switch.js.coffee.html +154 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/index.html +14 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/method_list.html +163 -0
- data/vendor/assets/javascripts/styleguide/plugins/doc/mixin_list.html +28 -0
- data/vendor/assets/javascripts/styleguide/plugins/tbg-close.js.coffee +28 -4
- data/vendor/assets/javascripts/styleguide/plugins/tbg-forms.js.coffee +52 -5
- data/vendor/assets/javascripts/styleguide/plugins/tbg-ga-events.js.coffee +28 -8
- data/vendor/assets/javascripts/styleguide/plugins/tbg-respinsiveresize.js.coffee +21 -2
- data/vendor/assets/javascripts/styleguide/plugins/tbg-switch.js.coffee +37 -2
- data/vendor/assets/stylesheets/_mixins.css.scss +128 -35
- data/vendor/assets/stylesheets/_settings.css.scss +7 -4
- data/vendor/assets/stylesheets/styleguide/base/_labels.css.scss +22 -6
- data/vendor/assets/stylesheets/styleguide/base/_lists.css.scss +23 -18
- data/vendor/assets/stylesheets/styleguide/base/_type.css.scss +11 -5
- data/vendor/assets/stylesheets/styleguide/grid/_grid.css.scss +9 -9
- data/vendor/assets/stylesheets/styleguide/modules/_switch.css.scss +32 -16
- metadata +134 -18
- data/.rvmrc +0 -1
- data/app/helpers/application_helper.rb +0 -13
- data/app/helpers/javascripts_helper.rb +0 -2
- data/app/helpers/ui_helper.rb +0 -2
- data/app/mailers/.gitkeep +0 -0
- data/app/models/.gitkeep +0 -0
- data/app/views/javascripts/_js_nav.html.haml +0 -5
- data/app/views/javascripts/index.html.haml +0 -45
- data/app/views/type/_headings.haml +0 -6
- data/app/views/type/_paragraphs.haml +0 -4
- data/app/views/ui/_ui_nav.html.haml +0 -13
- data/vendor/assets/stylesheets/styleguide/layout/_all.css.scss +0 -5
- data/vendor/plugins/.gitkeep +0 -0
|
@@ -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
|
+
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
%h1 Hello Barrie
|
|
@@ -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: 14px;
|
|
20
|
+
$importantModNum: 300px;
|
|
21
|
+
:markdown
|
|
22
|
+
The default ratio for the scale is the golden section (1:1.618). To change the ratio you should change
|
|
23
|
+
the variable `$ratio`. There are several predefined ration to be found [here](https://github.com/scottkellum/modular-scale#ratios):
|
|
24
|
+
:coderay
|
|
25
|
+
#!SCSS
|
|
26
|
+
|
|
27
|
+
// Minor Seventh
|
|
28
|
+
$ratio: 1.778;
|
|
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.57;
|
|
38
|
+
$base-line-height-px: 22px;
|
|
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: #222;
|
|
44
|
+
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
|
45
|
+
$body-font-weight: normal;
|
|
46
|
+
$body-font-color: #444;
|
|
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
|
|
@@ -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
|
|
@@ -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
|
+
|
|
@@ -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 
|
|
17
|
+
= render partial: "base/webfonts_social_standard"
|
|
@@ -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"
|
|
@@ -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
|
|
@@ -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 © Company 2013
|
|
69
|
+
= javascript_include_tag "application"
|
|
@@ -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 © Company 2013
|
|
92
|
+
= javascript_include_tag "application"
|