magic_stylez 0.0.0.27 → 0.0.0.28
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.
- checksums.yaml +4 -4
- data/README.md +24 -2
- data/lib/generators/magic_stylez/install_generator.rb +56 -0
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +43 -15
- data/test/dummy/app/assets/javascripts/views/content/{_box.jst.eco → box.jst.eco} +0 -0
- data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +8 -8
- data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +7 -2
- data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +6 -6
- data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco +7 -4
- data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +12 -5
- data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +8 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -3
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss +28 -22
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_fonts.scss +5 -0
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss +14 -8
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss +6 -0
- data/test/dummy/app/views/front/_aside.html.erb +3 -1
- data/test/dummy/app/views/front/start.html.erb +49 -27
- data/test/dummy/app/views/templates/fixed-header.html.erb +4 -4
- data/test/dummy/public/html/{fixed-header.html.erb → fixed-header.html} +6 -6
- data/test/dummy/public/html/index.html +65 -45
- data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} +2 -2
- data/vendor/assets/stylesheets/corporate/_colors.scss +285 -0
- data/vendor/assets/stylesheets/corporate/_fonts.scss +157 -0
- data/vendor/assets/stylesheets/corporate/_typo.scss +85 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +640 -0
- data/vendor/assets/stylesheets/magic-min.scss +62 -0
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +25 -1
- data/vendor/assets/stylesheets/magic/content/_forms.scss +25 -0
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +4 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +67 -0
- data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -20
- data/vendor/assets/stylesheets/magic/layout/_section.scss +33 -32
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +68 -0
- data/vendor/assets/stylesheets/magic/lib/_twbs.scss +4 -4
- metadata +21 -11
|
@@ -4,7 +4,14 @@
|
|
|
4
4
|
</div>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div class="section">
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency: <small>(packable)</small></h4>
|
|
10
|
+
<code>@import "magic/icons/glyphicons";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
8
15
|
<div class="corset">
|
|
9
16
|
|
|
10
17
|
<% for icon, i in glyphicons: %>
|
|
@@ -4,7 +4,14 @@
|
|
|
4
4
|
</div>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div class="section">
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency: <small>(packable)</small></h4>
|
|
10
|
+
<code>@import "magic/icons/icomoon";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
8
15
|
<div class="corset">
|
|
9
16
|
|
|
10
17
|
<% for icon, i in icomoons: %>
|
|
@@ -4,7 +4,14 @@
|
|
|
4
4
|
</div>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div class="section">
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency: <small>(packable)</small></h4>
|
|
10
|
+
<code>@import "magic/icons/magicons";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
8
15
|
<div class="corset">
|
|
9
16
|
|
|
10
17
|
<% for icon, i in magicons: %>
|
|
@@ -4,7 +4,14 @@
|
|
|
4
4
|
</div>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div class="section">
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency: <small>(packable)</small></h4>
|
|
10
|
+
<code>@import "magic/icons/olicons";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
8
15
|
<div class="corset">
|
|
9
16
|
|
|
10
17
|
<% for icon, i in olicons: %>
|
data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss
RENAMED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Magic-Stylez - Colors
|
|
3
|
+
//
|
|
4
|
+
// if you like to change values, remove the '!default' flag!
|
|
5
|
+
//
|
|
6
|
+
//
|
|
1
7
|
//== Colors
|
|
2
8
|
//
|
|
3
|
-
|
|
9
|
+
// -------------------------
|
|
10
|
+
// Gray colors
|
|
4
11
|
// -------------------------
|
|
5
12
|
$black: #1c1c1c !default;
|
|
6
13
|
$gray-darker: lighten(#000, 13.5%) !default; // #222
|
|
@@ -11,7 +18,6 @@ $gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
|
|
11
18
|
$gray-soft: #f0f0f0 !default;
|
|
12
19
|
$gray-softer: #f9f9f9 !default;
|
|
13
20
|
$white: #ffffff !default;
|
|
14
|
-
|
|
15
21
|
// -------------------------
|
|
16
22
|
// Accent colors
|
|
17
23
|
// -------------------------
|
|
@@ -28,10 +34,10 @@ $orange: #ff6600 !default;
|
|
|
28
34
|
$pink: #c3325f !default;
|
|
29
35
|
$purple: #7a43b6 !default;
|
|
30
36
|
$violett: #ac4d83 !default;
|
|
31
|
-
|
|
32
37
|
// -------------------------
|
|
33
38
|
// Brand colors
|
|
34
39
|
// -------------------------
|
|
40
|
+
$brand-color: #a0c775 !default;
|
|
35
41
|
$brand-primary: #336699 !default; // twbs-default: #428bca
|
|
36
42
|
$brand-success: #006600 !default; // twbs-default: #5cb85c
|
|
37
43
|
$brand-info: #0099cc !default; // twbs-default: #5bc0de
|
|
@@ -39,33 +45,32 @@ $brand-warning: #f0ad4e !default; // twbs-default: #f0ad4e
|
|
|
39
45
|
$brand-danger: #d9534f !default; // twbs-default: #d9534f
|
|
40
46
|
|
|
41
47
|
|
|
42
|
-
// M A G I C - S T Y L E Z
|
|
43
48
|
|
|
44
|
-
//** Global Highlight color.
|
|
45
|
-
// $main-active-color: #a0c775;
|
|
46
|
-
$brand-color: #a0c775;
|
|
47
49
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
|
|
51
|
+
// -------------------------
|
|
52
|
+
// Global Background colors.
|
|
53
|
+
// -------------------------
|
|
54
|
+
$main-bg: darken(#fff, 5%) !default; // result: #f2f2f2
|
|
55
|
+
$body-bg: $main-bg; //** Background color for `<body>`
|
|
50
56
|
$dark-bg: #e5e5e5 !default;
|
|
51
57
|
$soft-bg: #f8f8f8 !default;
|
|
52
58
|
$blue-bg: $blue-soft !default;
|
|
53
59
|
$brand-bg: $brand-color !default;
|
|
60
|
+
$bright-bg: $white !default;
|
|
54
61
|
|
|
55
62
|
|
|
56
|
-
|
|
63
|
+
// -------------------------
|
|
64
|
+
// Global Border color
|
|
65
|
+
// -------------------------
|
|
57
66
|
$main-border-color: #ccc !default;
|
|
58
67
|
|
|
59
68
|
|
|
60
|
-
|
|
61
|
-
//
|
|
62
|
-
|
|
63
|
-
//** Background color for `<body>`.
|
|
64
|
-
$body-bg: $main-bg;
|
|
65
|
-
|
|
69
|
+
// -------------------------
|
|
70
|
+
// Global Text colors
|
|
71
|
+
// -------------------------
|
|
66
72
|
//** Global text color on `<body>`.
|
|
67
73
|
$text-color: $gray-dark !default;
|
|
68
|
-
|
|
69
74
|
//** Global textual link color.
|
|
70
75
|
$link-color: $brand-primary !default;
|
|
71
76
|
//** Link hover color set via `darken()` function.
|
|
@@ -85,9 +90,9 @@ $component-active-bg: $brand-primary !default;
|
|
|
85
90
|
|
|
86
91
|
|
|
87
92
|
|
|
88
|
-
|
|
89
|
-
//
|
|
90
|
-
|
|
93
|
+
// -------------------------
|
|
94
|
+
// Buttons
|
|
95
|
+
// -------------------------
|
|
91
96
|
$btn-default-color: #333 !default;
|
|
92
97
|
$btn-default-bg: #fff !default;
|
|
93
98
|
$btn-default-border: #ccc !default;
|
|
@@ -115,8 +120,9 @@ $btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
|
|
115
120
|
$btn-link-disabled-color: $gray-light !default;
|
|
116
121
|
|
|
117
122
|
|
|
118
|
-
|
|
119
|
-
//
|
|
123
|
+
// -------------------------
|
|
124
|
+
// Social Buttons
|
|
125
|
+
// -------------------------
|
|
120
126
|
// Flat Colors
|
|
121
127
|
$btn-facebook-color: #fff !default;
|
|
122
128
|
$btn-facebook-bg: #3b5998 !default;
|
data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss
RENAMED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Magic-Stylez - Typo
|
|
3
|
+
//
|
|
4
|
+
// if you like to change values, remove the '!default' flag!
|
|
5
|
+
//
|
|
6
|
+
//
|
|
1
7
|
//== Typography
|
|
2
8
|
//
|
|
3
9
|
//## Font, line-height, and color for body text, headings, and more.
|
|
@@ -51,23 +57,23 @@ $btn-font-weight: normal !default;
|
|
|
51
57
|
|
|
52
58
|
$loud-factor: 1.25;
|
|
53
59
|
|
|
54
|
-
h1.loud, .h1.loud { font-size: $font-size-h1 * $loud-factor; }
|
|
55
|
-
h2.loud, .h2.loud { font-size: $font-size-h2 * $loud-factor; }
|
|
56
|
-
h3.loud, .h3.loud { font-size: $font-size-h3 * $loud-factor; }
|
|
57
|
-
h4.loud, .h4.loud { font-size: $font-size-h4 * $loud-factor; }
|
|
58
|
-
h5.loud, .h5.loud { font-size: $font-size-h5 * $loud-factor; }
|
|
59
|
-
h6.loud, .h6.loud { font-size: $font-size-h6 * $loud-factor; }
|
|
60
|
+
h1.loud, .h1.loud { font-size: ceil($font-size-h1 * $loud-factor); }
|
|
61
|
+
h2.loud, .h2.loud { font-size: ceil($font-size-h2 * $loud-factor); }
|
|
62
|
+
h3.loud, .h3.loud { font-size: ceil($font-size-h3 * $loud-factor); }
|
|
63
|
+
h4.loud, .h4.loud { font-size: ceil($font-size-h4 * $loud-factor); }
|
|
64
|
+
h5.loud, .h5.loud { font-size: ceil($font-size-h5 * $loud-factor); }
|
|
65
|
+
h6.loud, .h6.loud { font-size: ceil($font-size-h6 * $loud-factor); }
|
|
60
66
|
|
|
61
67
|
|
|
62
68
|
div, ul, ol, li, p, span {
|
|
63
69
|
&.loud {
|
|
64
70
|
@include sansCondensedThin;
|
|
65
|
-
font-size: $font-size-base * $loud-factor;
|
|
71
|
+
font-size: ceil($font-size-base * $loud-factor);
|
|
66
72
|
}
|
|
67
73
|
&.highlight {
|
|
68
74
|
@include sansCondensedThin;
|
|
69
75
|
font-weight: 600;
|
|
70
|
-
font-size: $font-size-base * $loud-factor;
|
|
76
|
+
font-size: ceil($font-size-base * $loud-factor);
|
|
71
77
|
}
|
|
72
78
|
}
|
|
73
79
|
|
data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss
RENAMED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Magic-Stylez - variables (everything else)
|
|
3
|
+
//
|
|
4
|
+
// if you like to change values, remove the '!default' flag!
|
|
5
|
+
//
|
|
6
|
+
//
|
|
1
7
|
// a flag to toggle asset pipeline / compass integration
|
|
2
8
|
// defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
|
|
3
9
|
// in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
|
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
<li><%= link_to main.titleize, "#", class: "lst_lnk" %>
|
|
18
18
|
<ul class="sub_nav">
|
|
19
19
|
<% sub.each do |lnk, path| %>
|
|
20
|
-
|
|
20
|
+
<% unless Rails.env.production? && %w(reflections slide_boxes).include?( lnk.to_s ) %>
|
|
21
|
+
<li><%= link_to lnk, "#", class: "app_lnk lst_lnk", data: {target: path} %></li>
|
|
22
|
+
<% end %>
|
|
21
23
|
<% end %>
|
|
22
24
|
</ul>
|
|
23
25
|
</li>
|
|
@@ -16,54 +16,82 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
<div class="section flatted">
|
|
19
|
-
<div class="corset">
|
|
19
|
+
<div class="corset tight">
|
|
20
20
|
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
|
-
<div class="section
|
|
24
|
+
<div class="section hard-top">
|
|
25
25
|
<div class="corset center_text">
|
|
26
26
|
<h2>Warning</h2>
|
|
27
|
-
<p class="loud">This Gem is still work in process
|
|
27
|
+
<p class="loud">This Gem is still work in process!</p>
|
|
28
28
|
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
|
|
29
29
|
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
|
|
33
|
-
<div class="section
|
|
34
|
-
<div class="corset">
|
|
33
|
+
<div class="section hard-top">
|
|
34
|
+
<div class="corset tight">
|
|
35
35
|
<h3>Dependencies</h3>
|
|
36
|
-
<ul class="list">
|
|
37
|
-
<li
|
|
38
|
-
<li
|
|
36
|
+
<ul class="list loud">
|
|
37
|
+
<li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
|
|
38
|
+
<li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
|
|
39
39
|
</ul>
|
|
40
|
+
<p>(both are allready included)</p>
|
|
40
41
|
</div>
|
|
41
42
|
</div>
|
|
42
43
|
|
|
43
|
-
<div class="section
|
|
44
|
-
<div class="corset">
|
|
44
|
+
<div class="section hard-top">
|
|
45
|
+
<div class="corset tight">
|
|
46
|
+
<h3 class="loud">Usage</h3>
|
|
47
|
+
<hr/>
|
|
48
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add the gem to your applications gemfile</p>
|
|
49
|
+
<pre><code>gem "magic_stylez"</code></pre>
|
|
50
|
+
<br/>
|
|
51
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> run the generator</p>
|
|
52
|
+
<pre><code>$ rails g magic_stylez:install</code></pre>
|
|
53
|
+
<br/>
|
|
54
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to stylesheets</p>
|
|
55
|
+
<pre><code>SASS:
|
|
56
|
+
@import 'magic-stylez'; // import all
|
|
57
|
+
@import 'magic-min'; // import basic
|
|
58
|
+
CSS:
|
|
59
|
+
//= 'magic-stylez'; /* import all */
|
|
60
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
|
61
|
+
<br/>
|
|
62
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to javascripts</p>
|
|
63
|
+
<pre><code> //= 'magic-stylez'; /* import all */
|
|
64
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
<div class="section hard-top">
|
|
70
|
+
<div class="corset tight">
|
|
45
71
|
<h3>Thanks</h3>
|
|
46
72
|
<p class="loud">
|
|
47
|
-
A lot of code for this gem is taken from
|
|
48
|
-
so thank you guys for the great work
|
|
49
|
-
Same goes for <%= link_to "bourbon", "http://bourbon.io/", target: "_blank" %> thanks for a lightweight helper set.
|
|
73
|
+
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
|
|
74
|
+
so thank you guys for the great work.
|
|
50
75
|
</p>
|
|
51
|
-
<p class="loud">
|
|
76
|
+
<p class="loud">
|
|
77
|
+
Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
|
|
78
|
+
</p>
|
|
79
|
+
<p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
|
|
52
80
|
</div>
|
|
53
81
|
</div>
|
|
54
82
|
|
|
55
|
-
<div class="section
|
|
56
|
-
<div class="corset">
|
|
83
|
+
<div class="section hard-top">
|
|
84
|
+
<div class="corset tight">
|
|
57
85
|
<h3>Authors</h3>
|
|
58
86
|
<ul class="list">
|
|
59
|
-
<li
|
|
87
|
+
<li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
|
|
60
88
|
<li>many others ...</li>
|
|
61
89
|
</ul>
|
|
62
90
|
</div>
|
|
63
91
|
</div>
|
|
64
92
|
|
|
65
|
-
<div class="section
|
|
66
|
-
<div class="corset">
|
|
93
|
+
<div class="section hard-top">
|
|
94
|
+
<div class="corset tight">
|
|
67
95
|
<h3>License</h3>
|
|
68
96
|
<p class="loud">MIT-License</p>
|
|
69
97
|
</div>
|
|
@@ -74,14 +102,8 @@
|
|
|
74
102
|
|
|
75
103
|
|
|
76
104
|
|
|
77
|
-
<div class="section shine-top
|
|
105
|
+
<div class="section shine-top flatted">
|
|
78
106
|
<div class="corset">
|
|
79
|
-
<p class="center_text"
|
|
107
|
+
<p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
|
|
80
108
|
</div>
|
|
81
109
|
</div>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
1
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
|
|
2
2
|
<div class="corset">
|
|
3
3
|
|
|
4
4
|
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div class="main_content fixed-nav">
|
|
38
|
+
<div class="main_content fixed-nav-xl">
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
<div class="section brand">
|
|
42
42
|
<div class="corset">
|
|
43
|
-
<h1>usual twbs header</h1>
|
|
43
|
+
<h1>usual twbs header plus some improvements</h1>
|
|
44
44
|
<br/>
|
|
45
|
-
<p>just niced up
|
|
45
|
+
<p class="loud">just niced up button alignment (no <em>.navbar-btn</em> needed) .. add sizes: <em>.navbar-xs, .navbar-sm, .navbar-lg, .navbar-xl</em></p>
|
|
46
46
|
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-30d990160e44c5b6df4f8af9d27cb74e.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-dabc2fee75a487407fe0cb5afbceec09.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="2QEaNnpTAPmpIpX0chCJ9EFDgbgs6uOKuOtBgNx56h4=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
</script>
|
|
15
15
|
</head>
|
|
16
16
|
<body class="blank">
|
|
17
|
-
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
|
|
18
18
|
<div class="corset">
|
|
19
19
|
|
|
20
20
|
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
52
|
|
|
53
|
-
<div class="main_content fixed-nav">
|
|
53
|
+
<div class="main_content fixed-nav-xl">
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
<div class="section brand">
|
|
57
57
|
<div class="corset">
|
|
58
|
-
<h1>usual twbs header</h1>
|
|
58
|
+
<h1>usual twbs header plus some improvements</h1>
|
|
59
59
|
<br/>
|
|
60
|
-
<p>just niced up
|
|
60
|
+
<p class="loud">just niced up button alignment (no <em>.navbar-btn</em> needed) .. add sizes: <em>.navbar-xs, .navbar-sm, .navbar-lg, .navbar-xl</em></p>
|
|
61
61
|
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-30d990160e44c5b6df4f8af9d27cb74e.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-5bfdaead3644bf60f3ae444124e55ff2.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="2QEaNnpTAPmpIpX0chCJ9EFDgbgs6uOKuOtBgNx56h4=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -20,50 +20,48 @@
|
|
|
20
20
|
<li class="current active"><a class="app_lnk lst_lnk" data-target="" href="#">Magic-Stylez</a></li>
|
|
21
21
|
<li><a class="lst_lnk" href="#">Content</a>
|
|
22
22
|
<ul class="sub_nav">
|
|
23
|
-
|
|
23
|
+
<li><a class="app_lnk lst_lnk" data-target="content/box" href="#">box</a></li>
|
|
24
24
|
</ul>
|
|
25
25
|
</li>
|
|
26
26
|
<li><a class="lst_lnk" href="#">Effects</a>
|
|
27
27
|
<ul class="sub_nav">
|
|
28
|
-
|
|
29
|
-
<li><a class="app_lnk lst_lnk" data-target="effects/shadows" href="#">Shadows</a></li>
|
|
28
|
+
<li><a class="app_lnk lst_lnk" data-target="effects/shadows" href="#">shadows</a></li>
|
|
30
29
|
</ul>
|
|
31
30
|
</li>
|
|
32
31
|
<li><a class="lst_lnk" href="#">Elements</a>
|
|
33
32
|
<ul class="sub_nav">
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
<li><a class="app_lnk lst_lnk" data-target="elements/buttons" href="#">buttons</a></li>
|
|
34
|
+
<li><a class="app_lnk lst_lnk" data-target="elements/circle_diagram" href="#">circle_diagram</a></li>
|
|
35
|
+
<li><a class="app_lnk lst_lnk" data-target="elements/inputs" href="#">inputs</a></li>
|
|
37
36
|
</ul>
|
|
38
37
|
</li>
|
|
39
38
|
<li><a class="lst_lnk" href="#">Helper</a>
|
|
40
39
|
<ul class="sub_nav">
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
<li><a class="app_lnk lst_lnk" data-target="helper/arrow_infos" href="#">arrow_infos</a></li>
|
|
41
|
+
<li><a class="app_lnk lst_lnk" data-target="helper/crossed_text" href="#">crossed_text</a></li>
|
|
42
|
+
<li><a class="app_lnk lst_lnk" data-target="helper/divider" href="#">divider</a></li>
|
|
43
|
+
<li><a class="app_lnk lst_lnk" data-target="helper/three_previews" href="#">three_previews</a></li>
|
|
45
44
|
</ul>
|
|
46
45
|
</li>
|
|
47
46
|
<li><a class="lst_lnk" href="#">Icons</a>
|
|
48
47
|
<ul class="sub_nav">
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
<li><a class="app_lnk lst_lnk" data-target="icons/glyphicons" href="#">glyphicons</a></li>
|
|
49
|
+
<li><a class="app_lnk lst_lnk" data-target="icons/icomoon" href="#">icomoon</a></li>
|
|
50
|
+
<li><a class="app_lnk lst_lnk" data-target="icons/magicons" href="#">magicons</a></li>
|
|
51
|
+
<li><a class="app_lnk lst_lnk" data-target="icons/olicons" href="#">olicons</a></li>
|
|
53
52
|
</ul>
|
|
54
53
|
</li>
|
|
55
54
|
<li><a class="lst_lnk" href="#">Layout</a>
|
|
56
55
|
<ul class="sub_nav">
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<li><a class="app_lnk lst_lnk" data-target="layout/slide_boxes" href="#">Slide Boxes</a></li>
|
|
56
|
+
<li><a class="app_lnk lst_lnk" data-target="layout/corset" href="#">corset</a></li>
|
|
57
|
+
<li><a class="app_lnk lst_lnk" data-target="layout/fullpage_table" href="#">fullpage_table</a></li>
|
|
58
|
+
<li><a class="app_lnk lst_lnk" data-target="layout/section" href="#">section</a></li>
|
|
61
59
|
</ul>
|
|
62
60
|
</li>
|
|
63
61
|
<li><a class="lst_lnk" href="#">Templates</a>
|
|
64
62
|
<ul class="sub_nav">
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/fixed_header" href="#">fixed_header</a></li>
|
|
64
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/responsive_slidebar" href="#">responsive_slidebar</a></li>
|
|
67
65
|
</ul>
|
|
68
66
|
</li>
|
|
69
67
|
</ul>
|
|
@@ -97,44 +95,72 @@
|
|
|
97
95
|
|
|
98
96
|
|
|
99
97
|
<div class="section flatted">
|
|
100
|
-
<div class="corset">
|
|
98
|
+
<div class="corset tight">
|
|
101
99
|
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
|
|
102
100
|
</div>
|
|
103
101
|
</div>
|
|
104
102
|
|
|
105
|
-
<div class="section
|
|
103
|
+
<div class="section hard-top">
|
|
106
104
|
<div class="corset center_text">
|
|
107
105
|
<h2>Warning</h2>
|
|
108
|
-
<p class="loud">This Gem is still work in process
|
|
106
|
+
<p class="loud">This Gem is still work in process!</p>
|
|
109
107
|
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
|
|
110
108
|
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
|
111
109
|
</div>
|
|
112
110
|
</div>
|
|
113
111
|
|
|
114
|
-
<div class="section
|
|
115
|
-
<div class="corset">
|
|
112
|
+
<div class="section hard-top">
|
|
113
|
+
<div class="corset tight">
|
|
116
114
|
<h3>Dependencies</h3>
|
|
117
|
-
<ul class="list">
|
|
115
|
+
<ul class="list loud">
|
|
118
116
|
<li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
|
|
119
117
|
<li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
|
|
120
118
|
</ul>
|
|
119
|
+
<p>(both are allready included)</p>
|
|
121
120
|
</div>
|
|
122
121
|
</div>
|
|
123
122
|
|
|
124
|
-
<div class="section
|
|
125
|
-
<div class="corset">
|
|
123
|
+
<div class="section hard-top">
|
|
124
|
+
<div class="corset tight">
|
|
125
|
+
<h3 class="loud">Usage</h3>
|
|
126
|
+
<hr/>
|
|
127
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add the gem to your applications gemfile</p>
|
|
128
|
+
<pre><code>gem "magic_stylez"</code></pre>
|
|
129
|
+
<br/>
|
|
130
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> run the generator</p>
|
|
131
|
+
<pre><code>$ rails g magic_stylez:install</code></pre>
|
|
132
|
+
<br/>
|
|
133
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to stylesheets</p>
|
|
134
|
+
<pre><code>SASS:
|
|
135
|
+
@import 'magic-stylez'; // import all
|
|
136
|
+
@import 'magic-min'; // import basic
|
|
137
|
+
CSS:
|
|
138
|
+
//= 'magic-stylez'; /* import all */
|
|
139
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
|
140
|
+
<br/>
|
|
141
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to javascripts</p>
|
|
142
|
+
<pre><code> //= 'magic-stylez'; /* import all */
|
|
143
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
<div class="section hard-top">
|
|
149
|
+
<div class="corset tight">
|
|
126
150
|
<h3>Thanks</h3>
|
|
127
151
|
<p class="loud">
|
|
128
|
-
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
|
|
129
|
-
so thank you guys for the great work
|
|
152
|
+
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
|
|
153
|
+
so thank you guys for the great work.
|
|
154
|
+
</p>
|
|
155
|
+
<p class="loud">
|
|
130
156
|
Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
|
|
131
157
|
</p>
|
|
132
158
|
<p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
|
|
133
159
|
</div>
|
|
134
160
|
</div>
|
|
135
161
|
|
|
136
|
-
<div class="section
|
|
137
|
-
<div class="corset">
|
|
162
|
+
<div class="section hard-top">
|
|
163
|
+
<div class="corset tight">
|
|
138
164
|
<h3>Authors</h3>
|
|
139
165
|
<ul class="list">
|
|
140
166
|
<li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
|
|
@@ -143,8 +169,8 @@
|
|
|
143
169
|
</div>
|
|
144
170
|
</div>
|
|
145
171
|
|
|
146
|
-
<div class="section
|
|
147
|
-
<div class="corset">
|
|
172
|
+
<div class="section hard-top">
|
|
173
|
+
<div class="corset tight">
|
|
148
174
|
<h3>License</h3>
|
|
149
175
|
<p class="loud">MIT-License</p>
|
|
150
176
|
</div>
|
|
@@ -155,18 +181,12 @@
|
|
|
155
181
|
|
|
156
182
|
|
|
157
183
|
|
|
158
|
-
<div class="section shine-top
|
|
184
|
+
<div class="section shine-top flatted">
|
|
159
185
|
<div class="corset">
|
|
160
|
-
<p class="center_text"
|
|
186
|
+
<p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
|
|
161
187
|
</div>
|
|
162
188
|
</div>
|
|
163
189
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
190
|
</div>
|
|
171
191
|
<div class="clearfix"></div>
|
|
172
192
|
</body>
|