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.
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">