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.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +24 -2
  3. data/lib/generators/magic_stylez/install_generator.rb +56 -0
  4. data/lib/magic_stylez/version.rb +1 -1
  5. data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +43 -15
  6. data/test/dummy/app/assets/javascripts/views/content/{_box.jst.eco → box.jst.eco} +0 -0
  7. data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +8 -8
  8. data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +7 -2
  9. data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +6 -6
  10. data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco +7 -4
  11. data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +8 -1
  12. data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +12 -5
  13. data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +8 -1
  14. data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +8 -1
  15. data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +8 -1
  16. data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +8 -1
  17. data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +8 -1
  18. data/test/dummy/app/assets/stylesheets/application.css.scss +1 -3
  19. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss +28 -22
  20. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_fonts.scss +5 -0
  21. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss +14 -8
  22. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss +6 -0
  23. data/test/dummy/app/views/front/_aside.html.erb +3 -1
  24. data/test/dummy/app/views/front/start.html.erb +49 -27
  25. data/test/dummy/app/views/templates/fixed-header.html.erb +4 -4
  26. data/test/dummy/public/html/{fixed-header.html.erb → fixed-header.html} +6 -6
  27. data/test/dummy/public/html/index.html +65 -45
  28. data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} +2 -2
  29. data/vendor/assets/stylesheets/corporate/_colors.scss +285 -0
  30. data/vendor/assets/stylesheets/corporate/_fonts.scss +157 -0
  31. data/vendor/assets/stylesheets/corporate/_typo.scss +85 -0
  32. data/vendor/assets/stylesheets/corporate/_variables.scss +640 -0
  33. data/vendor/assets/stylesheets/magic-min.scss +62 -0
  34. data/vendor/assets/stylesheets/magic/content/_buttons.scss +25 -1
  35. data/vendor/assets/stylesheets/magic/content/_forms.scss +25 -0
  36. data/vendor/assets/stylesheets/magic/content/_inputs.scss +4 -0
  37. data/vendor/assets/stylesheets/magic/content/_navbar.scss +67 -0
  38. data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -20
  39. data/vendor/assets/stylesheets/magic/layout/_section.scss +33 -32
  40. data/vendor/assets/stylesheets/magic/lib/_helper.scss +68 -0
  41. data/vendor/assets/stylesheets/magic/lib/_twbs.scss +4 -4
  42. metadata +21 -11
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 6d3442d70a6ea2660f8759093ac39967d00eab40
4
- data.tar.gz: 5cdd96c5cef979a7233c4bc7f07abbda67a10592
3
+ metadata.gz: 2604b92598681e084f115c2c17583a37b798244e
4
+ data.tar.gz: b96a41ee41fe954be9b6916d5e7fe942e4cdf342
5
5
  SHA512:
6
- metadata.gz: 330833d8544a1cf9069a4465de0bfd85eb4cf62a923bceb495692b98eb4a8ef02ddc9f596a3af798a56f7f4f3007749d6a0fd263aae824d7ed84d2b3b741b6a2
7
- data.tar.gz: 276e3457e1f107c7b46395d700f21c76cfadae1e38fd96933d0680fcf7c4fa44a791bbf613c0035f3d05a7015e2f5776e103030bb668c1c7ec410852230add56
6
+ metadata.gz: 2bd6cf50f4d1c01b255f27f7393bfb8d319770c5cef81d80e033e06ccf4a9ca5ac94bb0ee815c104d476dd4460fb2102e0b99d88d94018d9975b927645dff46f
7
+ data.tar.gz: a1c023a289e79f62140f50d4c6b4a1a495632148975318c64188ec72ff04ab635bb8ace6d861522680328e57e5ec6fb60e24f57f61a8c7974b92ad27efb4133e
data/README.md CHANGED
@@ -9,8 +9,30 @@
9
9
  - [bourbon](http://bourbon.io/)
10
10
 
11
11
 
12
-
13
-
12
+ ## Usage
13
+
14
+ - add the gem
15
+ ```ruby
16
+ gem "magic_stylez"
17
+ ```
18
+ - run the generator
19
+ ```ruby
20
+ $ rails g magic_stylez:install
21
+ ```
22
+ - add to stylesheets
23
+ ```sass
24
+ @import 'magic-stylez'; // import all
25
+ @import 'magic-min'; // import basic
26
+ ```
27
+ ```css
28
+ //= 'magic-stylez'; /* import all */
29
+ //= 'magic-min'; /* import basic */
30
+ ```
31
+ - add to javascripts:
32
+ ```javascript
33
+ //= 'magic-stylez'; /* import all */
34
+ //= 'magic-min'; /* import basic */
35
+ ```
14
36
 
15
37
 
16
38
 
data/lib/generators/magic_stylez/install_generator.rb ADDED
@@ -0,0 +1,56 @@
1
+ # encoding: utf-8
2
+ module MagicStylez
3
+ module Generators
4
+ class InstallGenerator < ::Rails::Generators::Base
5
+ include Thor::Actions
6
+
7
+ desc "Creates a corporate folder to customize magic-stylez."
8
+
9
+ source_root("#{::MagicStylez::Rails::Engine.root}")
10
+ destination_root = "#{::Rails.root}"
11
+
12
+ def initial_desc
13
+ puts(' * * * * * * * * * * * * * * * * * * * * * * * * * * ')
14
+ puts(' - - - - - - - - - - M A G I C S T Y L E Z - - - - - - - - - - ')
15
+ puts(' * * * * * * * * * * * * * * * * * * * * * * * * * * ')
16
+ end
17
+
18
+ def copy_corporate
19
+ puts("...")
20
+ empty_directory "app/assets/stylesheets/corporate"
21
+ %w(colors fonts typo variables).each do |that|
22
+ copy_file "vendor/assets/stylesheets/corporate/_#{that}.scss", "app/assets/stylesheets/corporate/_#{that}.scss"
23
+ end
24
+ puts("...")
25
+ end
26
+
27
+ def end_desc
28
+ puts("========================================================================================================")
29
+ puts("- - - - - - - - M A G I C S T Y L E Z - - - - - - - -")
30
+ puts("--------------------------------------------------------------------------------------------------------")
31
+ puts(" . . . T O D O s: . . . ")
32
+ puts(" . . . . . . ")
33
+ puts(" . . . -> add magic-styles to your app's stylesheets! . . . ")
34
+ puts(" . . . . . . ")
35
+ puts(" . . . sass: @import 'magic-stylez'; // import all . . . ")
36
+ puts(" . . . @import 'magic-min'; // import basic . . . ")
37
+ puts(" . . . . . . ")
38
+ puts(" . . . css: //= 'magic-stylez'; // import all . . . ")
39
+ puts(" . . . //= 'magic-min'; // import basic . . . ")
40
+ puts(" . . . . . . ")
41
+ puts(" . . . . . . ")
42
+ puts(" . . . -> add magic-styles to your app's javascripts! . . . ")
43
+ puts(" . . . . . . ")
44
+ puts(" . . . //= 'magic-stylez'; // import all . . . ")
45
+ puts(" . . . //= 'magic-min'; // import basic . . . ")
46
+ puts(" . . . . . . ")
47
+ puts(" . . . -> check the documentation for possible stuff . . . ")
48
+ puts(" . . . . . . ")
49
+ puts(" . . . http://berlinmagic.github.io/magic_stylez/ . . . ")
50
+ puts(" . . . . . . ")
51
+ puts("========================================================================================================")
52
+ end
53
+
54
+ end
55
+ end
56
+ end
data/lib/magic_stylez/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.27"
2
+ VERSION = "0.0.0.28"
3
3
  end
data/test/dummy/app/assets/javascripts/views/app/start.jst.eco CHANGED
@@ -16,44 +16,72 @@
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 compact hard-top">
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, it is not used in a production app!</p>
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 compact hard-top">
34
- <div class="corset">
33
+ <div class="section hard-top">
34
+ <div class="corset tight">
35
35
  <h3>Dependencies</h3>
36
- <ul class="list">
36
+ <ul class="list loud">
37
37
  <li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
38
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 compact">
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 <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
48
- so thank you guys for the great work.<br>
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.
75
+ </p>
76
+ <p class="loud">
49
77
  Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
50
78
  </p>
51
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 compact">
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
87
  <li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
@@ -62,8 +90,8 @@
62
90
  </div>
63
91
  </div>
64
92
 
65
- <div class="section compact">
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,7 +102,7 @@
74
102
 
75
103
 
76
104
 
77
- <div class="section shine-top flat-bottom">
105
+ <div class="section shine-top flatted">
78
106
  <div class="corset">
79
107
  <p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
80
108
  </div>
data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco CHANGED
@@ -10,7 +10,7 @@
10
10
  <div class="corset tight">
11
11
 
12
12
 
13
- <div class="btn btn-success btn-lg btn-block btn-splited press">
13
+ <div class="btn btn-success btn-lg btn-splited">
14
14
  <div class="text">
15
15
  .btn-splited
16
16
  </div>
@@ -19,7 +19,7 @@
19
19
  </div>
20
20
  </div>
21
21
 
22
- <div class="btn btn-default btn-lg btn-block btn-splited half press">
22
+ <div class="btn btn-default btn-lg btn-block btn-splited half">
23
23
  <div class="icn">
24
24
  <i class="icomoon-globe"></i>
25
25
  </div>
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
  </div>
30
30
 
31
- <div class="btn btn-primary btn-lg btn-block btn-divided press">
31
+ <div class="btn btn-primary btn-lg btn-block btn-divided">
32
32
  <div class="icn">
33
33
  <i class="icomoon-globe"></i>
34
34
  </div>
@@ -37,7 +37,7 @@
37
37
  </div>
38
38
  </div>
39
39
 
40
- <div class="btn btn-warning btn-block btn-divided half press">
40
+ <div class="btn btn-warning btn-block btn-divided half">
41
41
  <div class="icn">
42
42
  <i class="icomoon-globe"></i>
43
43
  </div>
@@ -46,7 +46,7 @@
46
46
  </div>
47
47
  </div>
48
48
 
49
- <div class="btn btn-danger btn-sm btn-divided press">
49
+ <div class="btn btn-danger btn-sm btn-divided">
50
50
  <div class="icn">
51
51
  <i class="icomoon-rocket"></i>
52
52
  </div>
@@ -58,7 +58,7 @@
58
58
  </div>
59
59
  </div>
60
60
 
61
- <div class="btn btn-danger btn-xs btn-divided press">
61
+ <div class="btn btn-danger btn-xs btn-divided">
62
62
  <div class="icn">
63
63
  <i class="icomoon-rocket"></i>
64
64
  </div>
@@ -88,7 +88,7 @@
88
88
  <hr/>
89
89
  <% buttons = ["facebook", "google", "paypal", "twitter"]%>
90
90
  <% for btn, i in buttons: %>
91
- <div class="btn btn-<%= btn %> btn-lg btn-divided press">
91
+ <div class="btn btn-<%= btn %> btn-lg btn-divided">
92
92
  <div class="icn">
93
93
  <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
94
94
  </div>
@@ -103,7 +103,7 @@
103
103
  <hr/>
104
104
  <% buttons = ["facebook", "google", "paypal", "twitter"]%>
105
105
  <% for btn, i in buttons: %>
106
- <div class="btn btn-<%= btn %>-nice btn-lg btn-divided press">
106
+ <div class="btn btn-<%= btn %>-nice btn-lg btn-divided">
107
107
  <div class="icn">
108
108
  <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
109
109
  </div>
data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco CHANGED
@@ -4,9 +4,14 @@
4
4
  </div>
5
5
  </div>
6
6
 
7
+ <div class="section dark flatted">
8
+ <div class="corset">
9
+ <h4>dependency:</h4>
10
+ <code>@import "magic/elements/circle_diagram";</code>
11
+ </div>
12
+ </div>
7
13
 
8
-
9
- <div class="section">
14
+ <div class="section hard-top">
10
15
  <div class="corset tight">
11
16
 
12
17
  <div class="row">
data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco CHANGED
@@ -9,28 +9,28 @@
9
9
  <div class="section">
10
10
  <div class="corset tight">
11
11
 
12
- <div class="inpt-splited input-lg press">
12
+ <div class="inpt-splited input-lg">
13
13
  <span class="icn"><i class="icomoon-mail2"></i></span>
14
14
  <div class="inpt">
15
15
  <input placeholder="E-Mail" type="email" value="">
16
16
  </div>
17
17
  </div>
18
18
 
19
- <div class="inpt-splited press">
19
+ <div class="inpt-splited">
20
20
  <span class="icn"><i class="icomoon-mail2"></i></span>
21
21
  <div class="inpt">
22
22
  <input placeholder="E-Mail" type="email" value="">
23
23
  </div>
24
24
  </div>
25
25
 
26
- <div class="inpt-splited input-sm press">
26
+ <div class="inpt-splited input-sm">
27
27
  <span class="icn"><i class="icomoon-mail2"></i></span>
28
28
  <div class="inpt">
29
29
  <input placeholder="E-Mail" type="email" value="">
30
30
  </div>
31
31
  </div>
32
32
 
33
- <div class="inpt-splited input-xs half press">
33
+ <div class="inpt-splited input-xs half">
34
34
  <span class="icn"><i class="icomoon-mail2"></i></span>
35
35
  <div class="inpt">
36
36
  <input placeholder="E-Mail" type="email" value="">
@@ -133,7 +133,7 @@
133
133
  <div class="corset tight">
134
134
  <div class="row">
135
135
  <div class="col-sm-4">
136
- <div class="inpt-splited press">
136
+ <div class="inpt-splited">
137
137
  <span class="icn"><i class="icomoon-mail2"></i></span>
138
138
  <div class="inpt">
139
139
  <input placeholder="Email" type="email" value="">
@@ -141,7 +141,7 @@
141
141
  </div>
142
142
  </div>
143
143
  <div class="col-sm-4">
144
- <div class="inpt-splited press">
144
+ <div class="inpt-splited">
145
145
  <span class="icn"><i class="icomoon-lock"></i></span>
146
146
  <div class="inpt">
147
147
  <input placeholder="Password" type="password" value="">
data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco CHANGED
@@ -4,15 +4,18 @@
4
4
  </div>
5
5
  </div>
6
6
 
7
- <div class="section">
7
+ <div class="section dark flatted">
8
8
  <div class="corset">
9
-
9
+ <h4>dependency:</h4>
10
+ <code>@import "magic/helper/arrow_hints";</code>
10
11
  </div>
11
12
  </div>
12
13
 
13
- <div class="section fat">
14
+ <div class="section hard-top">
14
15
  <div class="corset center_text">
15
-
16
+ <br/>
17
+ <br/>
18
+ <br/>
16
19
  <button class="btn btn-success help_arrow" data-text=".help_arrow">
17
20
  Some element
18
21
  </button>
data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco CHANGED
@@ -4,7 +4,14 @@
4
4
  </div>
5
5
  </div>
6
6
 
7
- <div class="section fat">
7
+ <div class="section dark flatted">
8
+ <div class="corset">
9
+ <h4>dependency:</h4>
10
+ <code>@import "magic/helper/crossed";</code>
11
+ </div>
12
+ </div>
13
+
14
+ <div class="section hard-top fat">
8
15
  <div class="corset">
9
16
 
10
17
  <h2>Write your layouts faster with the <span class="crossed" data-text="power">help</span> of magic_stylez.</h2>
data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco CHANGED
@@ -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:</h4>
10
+ <code>@import "magic/helper/divider";</code>
11
+ </div>
12
+ </div>
13
+
14
+ <div class="section hard-top">
8
15
  <div class="corset center_text">
9
16
  <p class="loud press">Divider are a nice hr-like text divider:</p>
10
17
 
@@ -30,6 +37,8 @@
30
37
  </div>
31
38
  </div>
32
39
 
40
+
41
+
33
42
  <div class="section">
34
43
  <div class="corset tight center_text">
35
44
 
@@ -41,19 +50,17 @@
41
50
  Sign in with Facebook
42
51
  </div>
43
52
  </div>
44
- <br/>
45
53
  <div class="divider">
46
54
  <span>or</span>
47
55
  </div>
48
- <br/>
49
- <div class="inpt-splited input-lg press">
56
+ <div class="inpt-splited input-lg">
50
57
  <span class="icn"><i class="icomoon-mail2"></i></span>
51
58
  <div class="inpt">
52
59
  <input placeholder="Email" type="email" value="">
53
60
  </div>
54
61
  </div>
55
62
 
56
- <div class="inpt-splited input-lg press">
63
+ <div class="inpt-splited input-lg">
57
64
  <span class="icn"><i class="icomoon-key"></i></span>
58
65
  <div class="inpt">
59
66
  <input placeholder="Password" type="password" value="">
data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco CHANGED
@@ -4,7 +4,14 @@
4
4
  </div>
5
5
  </div>
6
6
 
7
- <div class="section flat-bottom">
7
+ <div class="section dark flatted">
8
+ <div class="corset">
9
+ <h4>dependency:</h4>
10
+ <code>@import "magic/helper/three_previews";</code>
11
+ </div>
12
+ </div>
13
+
14
+ <div class="section hard-top flat-bottom">
8
15
  <div class="corset tight">
9
16
 
10
17
  <div class="three-previews">