themepile-abstractio 1.0.4 → 4.1.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. checksums.yaml +8 -8
  2. data/.gitignore +1 -0
  3. data/CONTRIBUTING.md +7 -7
  4. data/Gemfile.lock +19 -0
  5. data/Gruntfile.js +27 -0
  6. data/README.md +38 -38
  7. data/abstractio.gemspec +20 -18
  8. data/docs/CHANGELOG.md +275 -0
  9. data/docs/Capfile +4 -0
  10. data/docs/Gemfile +13 -0
  11. data/docs/Gemfile.lock +45 -0
  12. data/docs/Procfile +2 -0
  13. data/docs/README.md +1 -0
  14. data/docs/_sidebar-components.html.erb +115 -0
  15. data/docs/_sidebar.html.erb +115 -0
  16. data/docs/changelog.html.erb +33 -0
  17. data/docs/compile.rb +34 -0
  18. data/docs/components/alert-boxes.html.erb +204 -0
  19. data/docs/components/block-grid.html.erb +132 -0
  20. data/docs/components/breadcrumbs.html.erb +156 -0
  21. data/docs/components/button-groups.html.erb +230 -0
  22. data/docs/components/buttons.html.erb +222 -0
  23. data/docs/components/clearing.html.erb +152 -0
  24. data/docs/components/custom-forms.html.erb +309 -0
  25. data/docs/components/dropdown-buttons.html.erb +235 -0
  26. data/docs/components/dropdown.html.erb +188 -0
  27. data/docs/components/flex-video.html.erb +95 -0
  28. data/docs/components/forms.html.erb +477 -0
  29. data/docs/components/global.html.erb +92 -0
  30. data/docs/components/grid.html.erb +366 -0
  31. data/docs/components/inline-lists.html.erb +91 -0
  32. data/docs/components/joyride.html.erb +183 -0
  33. data/docs/components/keystrokes.html.erb +76 -0
  34. data/docs/components/kitchen-sink.html.erb +870 -0
  35. data/docs/components/labels.html.erb +102 -0
  36. data/docs/components/magellan.html.erb +86 -0
  37. data/docs/components/orbit.html.erb +276 -0
  38. data/docs/components/pagination.html.erb +183 -0
  39. data/docs/components/panels.html.erb +123 -0
  40. data/docs/components/pricing-tables.html.erb +156 -0
  41. data/docs/components/progress-bars.html.erb +123 -0
  42. data/docs/components/reveal.html.erb +162 -0
  43. data/docs/components/section.html.erb +1023 -0
  44. data/docs/components/side-nav.html.erb +124 -0
  45. data/docs/components/split-buttons.html.erb +220 -0
  46. data/docs/components/sub-nav.html.erb +122 -0
  47. data/docs/components/switch.html.erb +290 -0
  48. data/docs/components/tables.html.erb +125 -0
  49. data/docs/components/thumbnails.html.erb +89 -0
  50. data/docs/components/tooltips.html.erb +76 -0
  51. data/docs/components/top-bar.html.erb +300 -0
  52. data/docs/components/type.html.erb +396 -0
  53. data/docs/components/visibility.html.erb +110 -0
  54. data/docs/config.ru +12 -0
  55. data/docs/config/deploy.rb +36 -0
  56. data/docs/controller.rb +49 -0
  57. data/docs/css/_coderay.scss +116 -0
  58. data/docs/css/_settings.scss +1 -0
  59. data/docs/css/docs.scss +239 -0
  60. data/docs/css/normalize.scss +396 -0
  61. data/docs/css/qunit-composite.css +13 -0
  62. data/docs/css/qunit.css +235 -0
  63. data/docs/faq.html.erb +63 -0
  64. data/docs/img/demos/demo1-th.jpg +0 -0
  65. data/docs/img/demos/demo1.jpg +0 -0
  66. data/docs/img/demos/demo2-th.jpg +0 -0
  67. data/docs/img/demos/demo2.jpg +0 -0
  68. data/docs/img/demos/demo3-th.jpg +0 -0
  69. data/docs/img/demos/demo3.jpg +0 -0
  70. data/docs/img/demos/demo4-th.jpg +0 -0
  71. data/docs/img/demos/demo4.jpg +0 -0
  72. data/docs/img/demos/demo5-th.jpg +0 -0
  73. data/docs/img/demos/demo5.jpg +0 -0
  74. data/docs/index.html.erb +298 -0
  75. data/docs/javascript.html.erb +138 -0
  76. data/docs/js/docs.js +3 -0
  77. data/docs/js/qunit-composite.js +105 -0
  78. data/docs/js/qunit.js +1977 -0
  79. data/docs/js/tests/tabs/simple_tabs.html +57 -0
  80. data/docs/js/tests/tabs/simple_tabs.js +54 -0
  81. data/docs/js/tests/tooltips/tooltips.html +39 -0
  82. data/docs/js/tests/tooltips/tooltips.js +11 -0
  83. data/docs/layout.html.erb +128 -0
  84. data/docs/media-queries.html.erb +96 -0
  85. data/docs/rails.html.erb +76 -0
  86. data/docs/rtl.html.erb +53 -0
  87. data/docs/sass.html.erb +1297 -0
  88. data/docs/support.html.erb +143 -0
  89. data/js/{foundation/foundation.alerts.js → abstractio/abstractio.alerts.js} +2 -2
  90. data/js/{foundation/foundation.clearing.js → abstractio/abstractio.clearing.js} +6 -6
  91. data/js/{foundation/foundation.cookie.js → abstractio/abstractio.cookie.js} +1 -1
  92. data/js/{foundation/foundation.dropdown.js → abstractio/abstractio.dropdown.js} +5 -5
  93. data/js/{foundation/foundation.forms.js → abstractio/abstractio.forms.js} +7 -7
  94. data/js/{foundation/foundation.joyride.js → abstractio/abstractio.joyride.js} +5 -5
  95. data/js/{foundation/foundation.js → abstractio/abstractio.js} +13 -13
  96. data/js/{foundation/foundation.magellan.js → abstractio/abstractio.magellan.js} +3 -3
  97. data/js/{foundation/foundation.orbit.js → abstractio/abstractio.orbit.js} +6 -6
  98. data/js/{foundation/foundation.placeholder.js → abstractio/abstractio.placeholder.js} +1 -1
  99. data/js/{foundation/foundation.reveal.js → abstractio/abstractio.reveal.js} +3 -3
  100. data/js/{foundation/foundation.section.js → abstractio/abstractio.section.js} +5 -5
  101. data/js/{foundation/foundation.tooltips.js → abstractio/abstractio.tooltips.js} +6 -6
  102. data/js/{foundation/foundation.topbar.js → abstractio/abstractio.topbar.js} +3 -3
  103. data/js/abstractio/index.js +16 -0
  104. data/js/vendor/jquery.js +3 -3
  105. data/lib/abstractio/generators/USAGE +1 -1
  106. data/lib/abstractio/version.rb +1 -1
  107. data/package.json +15 -0
  108. data/scss/abstractio.scss +37 -37
  109. data/scss/abstractio/_variables.scss +1 -1
  110. data/scss/abstractio/components/_alert-boxes.scss +1 -1
  111. data/scss/abstractio/components/_block-grid.scss +2 -2
  112. data/scss/abstractio/components/_dropdown.scss +1 -1
  113. data/scss/abstractio/components/_global.scss +2 -2
  114. data/scss/abstractio/components/_joyride.scss +1 -1
  115. data/scss/abstractio/components/_pagination.scss +1 -1
  116. data/scss/abstractio/components/_switch.scss +1 -1
  117. data/scss/abstractio/components/_visibility.scss +2 -2
  118. data/templates/project/.gitignore +1 -1
  119. data/templates/project/MIT-LICENSE.txt +1 -1
  120. data/templates/project/config.rb +1 -1
  121. data/templates/project/humans.txt +2 -2
  122. data/templates/project/index.html +11 -11
  123. data/templates/project/manifest.rb +1 -1
  124. data/templates/project/scss/app.scss +38 -38
  125. data/templates/upgrade/manifest.rb +2 -2
  126. metadata +104 -22
  127. data/Gemfile +0 -4
  128. data/Rakefile +0 -2
  129. data/js/foundation/index.js +0 -16
  130. data/lib/abstractio.rb +0 -17
data/docs/js/tests/tabs/simple_tabs.html ADDED
@@ -0,0 +1,57 @@
1
+ <!DOCTYPE html>
2
+ <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3
+ <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5
+ <head>
6
+ <meta charset="utf-8" />
7
+
8
+ <!-- Set the viewport width to device width for mobile -->
9
+ <meta name="viewport" content="width=device-width" />
10
+
11
+ <title>Abstractio Tabs Testing</title>
12
+
13
+ <!-- Included CSS Files -->
14
+ <link rel="stylesheet" href="../../../stylesheets/styles.css">
15
+ <link rel="stylesheet" href="../../../stylesheets/qunit.css">
16
+
17
+ <script src="../../../../lib/assets/javascripts/abstractio/modernizr.abstractio.js"></script>
18
+ </head>
19
+ <body>
20
+
21
+ <div class="row">
22
+ <div class="twelve columns">
23
+ <div id="qunit"></div>
24
+ <div id="qunit-fixture">
25
+
26
+ <div class="row">
27
+ <div class="twelve columns">
28
+ <ul id="tabs1" class="tabs">
29
+ <li class="active"><a href="#simple1">Simple Tab 1</a></li>
30
+ <li><a href="#simple2">Simple Tab 2</a></li>
31
+ <li><a href="#simple3">Simple Tab 3</a></li>
32
+ </ul>
33
+ <ul class="tabs-content">
34
+ <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
35
+ <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
36
+ <li id="simple3Tab">This is simple tab 3's content. It's only okay.</li>
37
+ </ul>
38
+ </div>
39
+ </div>
40
+
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Test Abstractio Components Here -->
46
+
47
+
48
+
49
+
50
+ <!-- Included JS Files -->
51
+ <script src="../../../../lib/assets/javascripts/abstractio/jquery.js"></script>
52
+ <script src="../../../../lib/assets/javascripts/abstractio/abstractio.js"></script>
53
+ <script src="../../../../lib/assets/javascripts/abstractio/jquery.abstractio.tabs.js"></script>
54
+ <script src="../../../javascripts/qunit.js"></script>
55
+ <script src="../../../javascripts/tests/tabs/simple_tabs.js"></script>
56
+ </body>
57
+ </html>
data/docs/js/tests/tabs/simple_tabs.js ADDED
@@ -0,0 +1,54 @@
1
+ module('core', {
2
+ setup: function () {
3
+ this.$tabs = $('#tabs1');
4
+ $(document).abstractio('tabs');
5
+ },
6
+ teardown: function () {
7
+
8
+ }
9
+ });
10
+ test('setup is correct', function () {
11
+ ok(this.$tabs.length == 1, 'one one set of tabs should be present');
12
+ strictEqual(this.$tabs.find('a:last').hasClass('active'), false, 'last tab should not be active');
13
+ });
14
+ test('click tab activates content pane', function () {
15
+ var $activeTab = this.$tabs.find('.active a'),
16
+ $activeTabContent = $($activeTab.attr('href') + 'Tab'),
17
+ $lastTab = this.$tabs.find('a:last'),
18
+ $lastTabContent = $($lastTab.attr('href') + 'Tab');
19
+
20
+ strictEqual($activeTabContent.hasClass('active'), true, 'active tab content should be active');
21
+
22
+ $lastTab.trigger('click');
23
+
24
+ strictEqual($activeTabContent.hasClass('active'), false, 'previous tab content should no longer be active');
25
+ strictEqual($lastTabContent.hasClass('active'), true, 'newly clicked tab should be active');
26
+ });
27
+
28
+ module('initialize with wrong scope', {
29
+ setup: function () {
30
+ this.$tabs = $('#tabs1');
31
+ $('#tabs2').abstractio('tabs');
32
+ },
33
+ teardown: function () {
34
+
35
+ }
36
+ });
37
+ test('setup is correct', function () {
38
+ ok(this.$tabs.length == 1, 'one one set of tabs should be present');
39
+ strictEqual(this.$tabs.find('a:last').hasClass('active'), false, 'last tab should not be active');
40
+ });
41
+ test('click tab activates content pane', function () {
42
+ var $activeTab = this.$tabs.find('.active a'),
43
+ $activeTabContent = $($activeTab.attr('href') + 'Tab'),
44
+ $lastTab = this.$tabs.find('a:last'),
45
+ $lastTabContent = $($lastTab.attr('href') + 'Tab');
46
+
47
+ strictEqual($activeTabContent.hasClass('active'), true, 'active tab content should be active');
48
+
49
+ // triggering an event on an uninitialized tabs should have no effect
50
+ $lastTab.trigger('click');
51
+
52
+ strictEqual($activeTabContent.hasClass('active'), true, 'previous tab should still be active');
53
+ strictEqual($lastTabContent.hasClass('active'), false, 'newly clicked tab should be NOT active');
54
+ });
data/docs/js/tests/tooltips/tooltips.html ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3
+ <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5
+ <head>
6
+ <meta charset="utf-8" />
7
+
8
+ <!-- Set the viewport width to device width for mobile -->
9
+ <meta name="viewport" content="width=device-width" />
10
+
11
+ <title>Abstractio Tooltips Testing</title>
12
+
13
+ <!-- Included CSS Files -->
14
+ <link rel="stylesheet" href="../../../stylesheets/styles.css">
15
+ <link rel="stylesheet" href="../../../stylesheets/qunit.css">
16
+
17
+ <script src="../../../../lib/assets/javascripts/abstractio/modernizr.abstractio.js"></script>
18
+ </head>
19
+ <body>
20
+
21
+ <div class="row">
22
+ <div class="twelve columns">
23
+ <div id="qunit"></div>
24
+ <div id="qunit-fixture">
25
+
26
+ <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">Tooltip</span>
27
+
28
+ </div>
29
+ </div>
30
+ </div>
31
+
32
+ <!-- Included JS Files -->
33
+ <script src="../../../../lib/assets/javascripts/abstractio/jquery.js"></script>
34
+ <script src="../../../../lib/assets/javascripts/abstractio/abstractio.js"></script>
35
+ <script src="../../../../lib/assets/javascripts/abstractio/jquery.abstractio.tooltips.js"></script>
36
+ <script src="../../../javascripts/qunit.js"></script>
37
+ <script src="../../../javascripts/tests/tooltips/tooltips.js"></script>
38
+ </body>
39
+ </html>
data/docs/js/tests/tooltips/tooltips.js ADDED
@@ -0,0 +1,11 @@
1
+ module('core', {
2
+ setup: function () {
3
+ $(document).abstractio('tooltips');
4
+ },
5
+ teardown: function () {
6
+
7
+ }
8
+ });
9
+ test('setup', function () {
10
+ ok(false, 'please test');
11
+ });
data/docs/layout.html.erb ADDED
@@ -0,0 +1,128 @@
1
+ <!doctype html>
2
+ <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
3
+ <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Abstractio Docs: <%= @page_title %></title>
8
+ <link rel="stylesheet" href="<%= asset_path %>/normalize.css" />
9
+ <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
10
+ <script src="<%= asset_path %>/vendor/custom.modernizr.js"></script>
11
+ </head>
12
+ <body class="antialiased">
13
+
14
+ <nav class="top-bar">
15
+ <ul class="title-area">
16
+ <!-- Title Area -->
17
+ <li class="name">
18
+ <h1><a href="/">Abstractio</a></h1>
19
+ </li>
20
+ <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
21
+ <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
22
+ </ul>
23
+
24
+ <section class="top-bar-section">
25
+ <!-- Right Nav Section -->
26
+ <ul class="right">
27
+ <li class="divider"></li>
28
+ <li><a href="<%= features_path %>">Features</a></li>
29
+ <li class="divider"></li>
30
+ <li><a href="<%= add_ons_path %>">Add-ons</a></li>
31
+ <li class="divider"></li>
32
+ <li><a href="<%= case_studies_path %>">Case Studies</a></li>
33
+ <li class="divider"></li>
34
+ <li><a href="<%= docs_path %>">Docs</a></li>
35
+ <li class="divider"></li>
36
+ <li><a href="<%= training_path %>">Training</a></li>
37
+ <li class="divider"></li>
38
+ <li class="has-form">
39
+ <a href="http://abstractio.themepile.co.uk/docs" class="button">Getting Started</a>
40
+ </li>
41
+ </ul>
42
+ </section>
43
+ </nav>
44
+
45
+ <% @page_title = "4 Documentation" %>
46
+ <div class="row">
47
+ <div class="large-12 columns">
48
+ <h1 class="docs header"><a href="http://abstractio.themepile.co.uk/docs/">Abstractio <%= @page_title %></a></h1>
49
+ <h6 class="docs subheader"><a href="http://abstractio.themepile.co.uk/old-docs/f3">Want F3 Docs?</a></h6>
50
+ <hr>
51
+ </div>
52
+ </div>
53
+
54
+ <%= yield %>
55
+
56
+ <footer class="row full-width">
57
+ <div class="large-5 columns">
58
+ <h6><strong>Made by ZURB</strong></h6>
59
+ <p>Abstractio is made by <a href="http://www.themepile.co.uk/">ZURB</a>, a product design company in Campbell, California. We've put more than 14 years of experience building web products, services and websites into this framework. <a href="http://abstractio.themepile.co.uk/about.php">Abstractio Info and Goodies &rarr;</a></p>
60
+ </div>
61
+
62
+ <div class="large-3 columns">
63
+ <h6><strong>Using Abstractio?</strong></h6>
64
+ <p>Let us know how you're using Abstractio and we might feature you as an example! <a href="mailto:abstractio@themepile.co.uk?subject=I'm%20using%20Abstractio">Get in touch &rarr;</a></p>
65
+ </div>
66
+
67
+ <div class="large-4 columns">
68
+ <h6><strong>Need some help?</strong></h6>
69
+ <p>For answers or help visit the <a href="http://abstractio.themepile.co.uk/docs/support.html">Support page</a>.</p>
70
+ </div>
71
+ </footer>
72
+
73
+ <div id="copyright">
74
+ <div class="row full-width">
75
+ <div class="large-4 columns">
76
+ <p>Site content &copy; <%= Time.now.year %> ZURB, inc.</p>
77
+ </div>
78
+ <div class="large-8 columns">
79
+ <ul class="inline-list right">
80
+ <li><a href="http://abstractio.themepile.co.uk">Home</a></li>
81
+ <li><a href="http://abstractio.themepile.co.uk/download.php">Download</a></li>
82
+ <li><a href="http://abstractio.themepile.co.uk/docs">Docs</a></li>
83
+ <li><a href="http://abstractio.themepile.co.uk/docs/changelog.html">Changelog</a></li>
84
+ <li><a href="http://abstractio.themepile.co.uk/about.php">About</a></li>
85
+ <li><a href="http://feeds.feedburner.com/themepile/blog">Subscribe to the ZURBlog</a></li>
86
+ </ul>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <script>
92
+
93
+ // Google Analytics
94
+ var _gaq = _gaq || [];
95
+ _gaq.push(
96
+ ['_setAccount', 'UA-2195009-2'],
97
+ ['_trackPageview'],
98
+ ['b._setAccount', 'UA-2195009-27'],
99
+ ['b._trackPageview']
100
+ );
101
+
102
+ (function() {
103
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
104
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
105
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
106
+ })();
107
+
108
+ document.write('<script src="<%= asset_path %>/vendor/'
109
+ + ('__proto__' in {} ? 'zepto' : 'jquery')
110
+ + '.js"><\/script>');
111
+ </script>
112
+ <script src="<%= asset_path %>/docs.js"></script>
113
+ <script>
114
+ $(document)
115
+ <% if @joyride %>
116
+ .abstractio()
117
+ .abstractio('joyride', 'start');
118
+ <% else %>
119
+ .abstractio();
120
+ <% end %>
121
+
122
+ // For Kitchen Sink Page
123
+ $('#start-jr').on('click', function() {
124
+ $(document).abstractio('joyride','start');
125
+ });
126
+ </script>
127
+ </body>
128
+ </html>
data/docs/media-queries.html.erb ADDED
@@ -0,0 +1,96 @@
1
+ <% @side_nav = "using" %>
2
+ <% @page_title = "Media Queries" %>
3
+ <div class="row">
4
+ <div class="large-9 push-3 columns">
5
+
6
+ <div class="row">
7
+ <div class="large-12 columns">
8
+ <h2><%= @page_title %></h2>
9
+ <h4 class="subheader">We keep media queries fairly simple in Abstractio and let the percentage-based grid do the heavy lifting across various screen sizes.</h4>
10
+
11
+ <hr>
12
+
13
+ <h4>Working with Media Queries and CSS</h4>
14
+ <p>In CSS, media queries are easily written with a specific syntax. We only use one major breakpoint for the grid in Abstractio to shift layouts for screens above 768px wide. The rest of the media queries are used for visibility classes. The following snippet shows you each of the media queries used in Abstractio:</p>
15
+
16
+ <%= code_example '
17
+ /* We use this media query to add styles to any device that supports media queries */
18
+ @media only screen { }
19
+
20
+ /* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
21
+ @media only screen and (min-width: 768px) {}
22
+
23
+ /* Used to alter styles for screens at least 1280px wide. */
24
+ @media only screen and (min-width: 1280px) {}
25
+
26
+ /* Used to alter styles for screens at least 1440px wide. */
27
+ @media only screen and (min-width: 1440px) {}
28
+
29
+ /* Apply styles to screens in landscape orientation */
30
+ @media only screen and (orientation: landscape) {}
31
+
32
+ /* Apply styles to screens in portrait orientation */
33
+ @media only screen and (orientation: portrait) {}
34
+
35
+ /* We also use Modernizr to add a .touch class to the body when applicable */
36
+ /* You can prepend this class to anything and it will style only for touch devices */
37
+ .touch .your-element {}
38
+ ', :css %>
39
+
40
+ <h4>Working with Media Queries and SCSS</h4>
41
+ <p>You can go ahead and use any of the CSS media queries in your SCSS files, but we've also made it easier with some handy variables you can use instead! Those variables are:</p>
42
+
43
+ <%= code_example '
44
+ /* Available Variables */
45
+ $small-screen: emCalc(768px);
46
+ $medium-screen: emCalc(1280px);
47
+ $large-screen: emCalc(1440px);
48
+
49
+ $screen: "only screen";
50
+ $small: "only screen and (min-width:"#{$small-screen}")";
51
+ $medium: "only screen and (min-width:"#{$medium-screen}")";
52
+ $large: "only screen and (min-width:"#{$large-screen}")";
53
+ $landscape: "only screen and (orientation: landscape)";
54
+ $portrait: "only screen and (orientation: portrait)";
55
+
56
+ /* We use this media query to add styles to any device that supports media queries */
57
+ @media #{$screen} { }
58
+
59
+ /* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
60
+ @media #{$small} { }
61
+
62
+ /* Used to alter styles for screens at least 1280px wide. */
63
+ @media #{$medium} { }
64
+
65
+ /* Used to alter styles for screens at least 1440px wide. */
66
+ @media #{$large} { }
67
+
68
+ /* Apply styles to screens in landscape orientation */
69
+ @media #{$landscape} { }
70
+
71
+ /* Apply styles to screens in portrait orientation */
72
+ @media #{$portrait} { }
73
+
74
+ /* We also use Modernizr to add a .touch class to the body when applicable */
75
+ /* You can prepend this class to anything and it will style only for touch devices */
76
+ .touch .your-element {}
77
+ ', :css %>
78
+
79
+ </div>
80
+ </div>
81
+
82
+
83
+ </div>
84
+
85
+ <div class="large-3 pull-9 columns">
86
+ <%= render "_sidebar.html.erb" %>
87
+ </div>
88
+ </div>
89
+
90
+
91
+
92
+
93
+
94
+
95
+
96
+
data/docs/rails.html.erb ADDED
@@ -0,0 +1,76 @@
1
+ <% @side_nav = "using" %>
2
+
3
+ <div class="row">
4
+ <div class="large-9 push-3 columns"
5
+ <% @page_title = "Rails" %>
6
+ <div class="row">
7
+ <div class="large-12 columns">
8
+ <h2><%= @page_title %></h2>
9
+ <h4 class="subheader">We use Rails to develop our <a href="http://themepile.co.uk/apps">apps</a> and Abstractio makes things so much quicker. Start using Abstractio in your Rails projects by following these instructions.</h4>
10
+ <hr>
11
+
12
+ <h4>Adding Abstractio to the Asset Pipeline</h4>
13
+ <p>First you'll want to add the following gems to the assets group in your <code>Gemfile</code> like so:</p>
14
+
15
+ <%= code_example "
16
+ group :assets do
17
+ gem 'sass-rails', '~> 3.2.3'
18
+ gem 'coffee-rails', '~> 3.2.1'
19
+ gem 'uglifier', '>= 1.0.3'
20
+ # Add Abstractio Here
21
+ gem 'themepile-abstractio', '~> 4.0.0'
22
+ end
23
+ ", :ruby %>
24
+
25
+ <p>Then run <code>bundle install</code> to finish installing Abstractio.</p>
26
+
27
+ <div class="panel">
28
+ <p><strong>NOTE:</strong> Make sure that your restart your server after running <code>bundle install</code>. Otherwise the asset pipeline may not recognize the new Abstractio files.</p>
29
+ </div>
30
+
31
+ <h4>Easy Install</h4>
32
+ <p>Simply run <code>rails g abstractio:install</code> to configure your application to use Abstractio. That's it!</p>
33
+
34
+ <h4>Manual Installation</h4>
35
+ <h5 class="subheader">Add Abstractio to your CSS</h5>
36
+ <p>Append the following line to your <code>app/assets/stylesheets/application.css</code> file:</p>
37
+
38
+ <%= code_example '
39
+ /*= require abstractio */
40
+ ', :css %>
41
+
42
+ <p>If you're planning on using <a href="http://sass-lang.com/" rel="nofollow">Sass</a> then you'll want to rename <code>application.css</code> to <code>application.scss</code>. That file should then look like:</p>
43
+
44
+ <%= code_example '
45
+ @import "abstractio";
46
+ ', :css %>
47
+
48
+ <h5 class="subheader">Add Abstractio to your JS</h5>
49
+ <p>Append the following lines to your <code>app/assets/javascripts/application.js</code> file:</p>
50
+
51
+ <%= code_example '
52
+ //= require abstractio
53
+ $(document).abstractio();
54
+ ', :js %>
55
+
56
+ <h5 class="subheader">Add Modernizr</h5>
57
+ <p>Make sure that <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> is included in the <code>&lt;head&gt;</code> of your page:</p>
58
+
59
+ <%= code_example '
60
+ javascript_include_tag "vendor/custom.modernizr"
61
+ ', :ruby %>
62
+
63
+ <h5 class="subheader">Set Viewport Width</h5>
64
+ <p>Add the following line to the <kbd>&lt;head&gt;</kbd> of your page layout:</p>
65
+
66
+ <%= code_example '
67
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
68
+ ', :html %>
69
+
70
+ </div>
71
+ </div>
72
+ <div class="large-3 pull-9 columns">
73
+ <%= render "_sidebar.html.erb" %>
74
+ </div>
75
+ </div>
76
+ </div>