magic_stylez 0.0.0.27 → 0.0.0.28
Sign up to get free protection for your applications and to get access to all the features.
- 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>
|