staple 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (141) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +8 -0
  3. data/Gemfile +13 -0
  4. data/LICENSE.md +23 -0
  5. data/README.md +51 -0
  6. data/Rakefile +0 -0
  7. data/config.rb +24 -0
  8. data/lib/snippet_helpers.rb +69 -0
  9. data/lib/staple/import_generator.rb +50 -0
  10. data/lib/staple/list_generator.rb +22 -0
  11. data/lib/staple.rb +2 -0
  12. data/source/CNAME +1 -0
  13. data/source/_accordion.html.erb +24 -0
  14. data/source/_accordion_tabs.html.erb +26 -0
  15. data/source/_accordion_tabs_minimal.html.erb +26 -0
  16. data/source/_badges.html.erb +7 -0
  17. data/source/_breadcrumbs.html.erb +7 -0
  18. data/source/_browser.html.erb +29 -0
  19. data/source/_button_group.html.erb +18 -0
  20. data/source/_cards.html.erb +59 -0
  21. data/source/_centered_navigation.html.erb +38 -0
  22. data/source/_code.html.erb +10 -0
  23. data/source/_comment.html.erb +21 -0
  24. data/source/_device.html.erb +10 -0
  25. data/source/_dropdown.html.erb +12 -0
  26. data/source/_expander.html.erb +6 -0
  27. data/source/_flashes.html.erb +15 -0
  28. data/source/_footer.html.erb +28 -0
  29. data/source/_footer_2.html.erb +33 -0
  30. data/source/_grid_items.html.erb +37 -0
  31. data/source/_grid_items_lines.html.erb +44 -0
  32. data/source/_hero.html.erb +11 -0
  33. data/source/_hover_tile_animation.html.erb +11 -0
  34. data/source/_icon_bullet_points.html.erb +30 -0
  35. data/source/_image_gradient_dynamic.html.erb +7 -0
  36. data/source/_intro_text.html.erb +6 -0
  37. data/source/_label_alerts.html.erb +5 -0
  38. data/source/_modal.html.erb +14 -0
  39. data/source/_navigation.html.erb +44 -0
  40. data/source/_pagination.html.erb +17 -0
  41. data/source/_progress_bar.html.erb +3 -0
  42. data/source/_progress_bar_indication.html.erb +5 -0
  43. data/source/_search_bar.html.erb +8 -0
  44. data/source/_search_tools.html.erb +58 -0
  45. data/source/_side_image.html.erb +10 -0
  46. data/source/_sliding_menu.html.erb +13 -0
  47. data/source/_snippet.html.erb +4 -0
  48. data/source/_switch.html.erb +4 -0
  49. data/source/_tables.html.erb +31 -0
  50. data/source/_tables_minimal.html.erb +31 -0
  51. data/source/_texture-legend.html.erb +24 -0
  52. data/source/_textures.html.erb +4 -0
  53. data/source/_tooltip.html.erb +6 -0
  54. data/source/_type_system_geometric.html.erb +18 -0
  55. data/source/_type_system_rounded.html.erb +18 -0
  56. data/source/_type_system_sans.html.erb +18 -0
  57. data/source/_type_system_serif.html.erb +19 -0
  58. data/source/_type_system_slab.html.erb +18 -0
  59. data/source/_type_system_traditional.html.erb +18 -0
  60. data/source/_vertical_tabs.html.erb +30 -0
  61. data/source/_video.html.erb +5 -0
  62. data/source/components.html.erb +174 -0
  63. data/source/index.html.erb +162 -0
  64. data/source/javascripts/all.js +11 -0
  65. data/source/javascripts/jquery.erToc.js +477 -0
  66. data/source/javascripts/jquery.glide.js +941 -0
  67. data/source/javascripts/staple/accordion.js +5 -0
  68. data/source/javascripts/staple/accordion_tabs.js +19 -0
  69. data/source/javascripts/staple/accordion_tabs_minimal.js +19 -0
  70. data/source/javascripts/staple/centered_navigation.js +14 -0
  71. data/source/javascripts/staple/dropdown.js +9 -0
  72. data/source/javascripts/staple/expander.js +53 -0
  73. data/source/javascripts/staple/navigation.js +23 -0
  74. data/source/javascripts/staple/search_tools.js +110 -0
  75. data/source/javascripts/staple/sliding_menu.js +13 -0
  76. data/source/javascripts/staple/vertical_tabs.js +32 -0
  77. data/source/layouts/layout.erb +1 -0
  78. data/source/refills-hero.html.erb +7 -0
  79. data/source/refills-menu.html.erb +5 -0
  80. data/source/refills-page-scripts.html.erb +66 -0
  81. data/source/stylesheets/_bourbon-nav.scss +86 -0
  82. data/source/stylesheets/_normalize.scss +425 -0
  83. data/source/stylesheets/_refills-nav.scss +102 -0
  84. data/source/stylesheets/_refills-styles.scss +543 -0
  85. data/source/stylesheets/all.scss +61 -0
  86. data/source/stylesheets/staple/_accordion-tabs-minimal.scss +60 -0
  87. data/source/stylesheets/staple/_accordion-tabs.scss +88 -0
  88. data/source/stylesheets/staple/_accordion.scss +55 -0
  89. data/source/stylesheets/staple/_badges.scss +44 -0
  90. data/source/stylesheets/staple/_breadcrumbs.scss +84 -0
  91. data/source/stylesheets/staple/_browser.scss +141 -0
  92. data/source/stylesheets/staple/_button-group.scss +81 -0
  93. data/source/stylesheets/staple/_cards.scss +132 -0
  94. data/source/stylesheets/staple/_centered-navigation.scss +251 -0
  95. data/source/stylesheets/staple/_comment.scss +60 -0
  96. data/source/stylesheets/staple/_device.scss +83 -0
  97. data/source/stylesheets/staple/_dropdown.scss +127 -0
  98. data/source/stylesheets/staple/_expander.scss +30 -0
  99. data/source/stylesheets/staple/_flashes.scss +29 -0
  100. data/source/stylesheets/staple/_footer-2.scss +117 -0
  101. data/source/stylesheets/staple/_footer.scss +76 -0
  102. data/source/stylesheets/staple/_grid-items-lines.scss +86 -0
  103. data/source/stylesheets/staple/_grid-items.scss +97 -0
  104. data/source/stylesheets/staple/_hero.scss +54 -0
  105. data/source/stylesheets/staple/_hover-tile-animation.scss +52 -0
  106. data/source/stylesheets/staple/_icon-bullet-points.scss +63 -0
  107. data/source/stylesheets/staple/_image-gradient-dynamic.scss +59 -0
  108. data/source/stylesheets/staple/_intro-text.scss +67 -0
  109. data/source/stylesheets/staple/_label-alerts.scss +11 -0
  110. data/source/stylesheets/staple/_modal.scss +147 -0
  111. data/source/stylesheets/staple/_navigation.scss +329 -0
  112. data/source/stylesheets/staple/_pagination.scss +51 -0
  113. data/source/stylesheets/staple/_progress-bar-indication.scss +39 -0
  114. data/source/stylesheets/staple/_progress-bar.scss +83 -0
  115. data/source/stylesheets/staple/_search-bar.scss +40 -0
  116. data/source/stylesheets/staple/_search-tools.scss +67 -0
  117. data/source/stylesheets/staple/_side-image.scss +59 -0
  118. data/source/stylesheets/staple/_sliding-menu.scss +63 -0
  119. data/source/stylesheets/staple/_switch.scss +77 -0
  120. data/source/stylesheets/staple/_tables-minimal.scss +60 -0
  121. data/source/stylesheets/staple/_tables.scss +88 -0
  122. data/source/stylesheets/staple/_texture-legend.scss +182 -0
  123. data/source/stylesheets/staple/_textures.scss +119 -0
  124. data/source/stylesheets/staple/_tooltip.scss +57 -0
  125. data/source/stylesheets/staple/_type-system-geometric.scss +103 -0
  126. data/source/stylesheets/staple/_type-system-rounded.scss +107 -0
  127. data/source/stylesheets/staple/_type-system-sans.scss +110 -0
  128. data/source/stylesheets/staple/_type-system-serif.scss +111 -0
  129. data/source/stylesheets/staple/_type-system-slab.scss +107 -0
  130. data/source/stylesheets/staple/_type-system-traditional.scss +114 -0
  131. data/source/stylesheets/staple/_vertical-tabs.scss +105 -0
  132. data/source/stylesheets/staple/_video.scss +21 -0
  133. data/source/type-systems.html.erb +67 -0
  134. data/source/vendor/javascripts/ZeroClipboard.min.js +9 -0
  135. data/source/vendor/javascripts/fixedsticky.js +185 -0
  136. data/source/vendor/javascripts/prism.js +13 -0
  137. data/source/vendor/javascripts/smooth-scroll.js +125 -0
  138. data/source/vendor/stylesheets/fixedsticky.css +22 -0
  139. data/source/vendor/stylesheets/prism.css +126 -0
  140. data/staple.gemspec +19 -0
  141. metadata +184 -0
data/source/_footer_2.html.erb ADDED
@@ -0,0 +1,33 @@
1
+ <!--<div class="wrapper-for-content-outside-of-footer">
2
+ Uncomment this whole section for a sticky footer. The content of the page should be inside of this .wrapper-for-content-outside-of-footer
3
+ </div>-->
4
+
5
+ <footer class="footer-2">
6
+ <div class="footer-logo">
7
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
8
+ </div>
9
+ <ul>
10
+ <li><a href="javascript:void(0)">About</a></li>
11
+ <li><a href="javascript:void(0)">Contact</a></li>
12
+ <li><a href="javascript:void(0)">Products</a></li>
13
+ </ul>
14
+
15
+ <div class="footer-secondary-links">
16
+ <ul>
17
+ <li><a href="javascript:void(0)">Terms and Conditions</a></li>
18
+ <li><a href="javascript:void(0)">Privacy Policy</a></li>
19
+ </ul>
20
+
21
+ <ul class="footer-social">
22
+ <li><a href="javascript:void(0)">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png" alt="Facebook">
24
+ </a></li>
25
+ <li><a href="javascript:void(0)">
26
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png" alt="Twitter">
27
+ </a></li>
28
+ <li><a href="javascript:void(0)">
29
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png" alt="YouTube">
30
+ </a></li>
31
+ </ul>
32
+ </div>
33
+ </footer>
data/source/_grid_items.html.erb ADDED
@@ -0,0 +1,37 @@
1
+ <div class="grid-items">
2
+ <a href="javascript:void(0)" class="grid-item">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
4
+ <h1>Grid Item</h1>
5
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
6
+ </a>
7
+ <a href="javascript:void(0)" class="grid-item grid-item-big grid-item-image">
8
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
9
+ <h1>Grid Item With an Image</h1>
10
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
11
+ </a>
12
+ <a href="javascript:void(0)" class="grid-item grid-item-big">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
14
+ <h1>Another Wide Item</h1>
15
+ <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
16
+ </a>
17
+ <a href="javascript:void(0)" class="grid-item">
18
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
19
+ <h1>Last Grid Item</h1>
20
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
21
+ </a>
22
+ <a href="javascript:void(0)" class="grid-item">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
24
+ <h1>Last Grid Item</h1>
25
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
26
+ </a>
27
+ <a href="javascript:void(0)" class="grid-item">
28
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
29
+ <h1>A Grid Item</h1>
30
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
31
+ </a>
32
+ <a href="javascript:void(0)" class="grid-item">
33
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
34
+ <h1>Item</h1>
35
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
36
+ </a>
37
+ </div>
data/source/_grid_items_lines.html.erb ADDED
@@ -0,0 +1,44 @@
1
+ <div class="grid-items-lines">
2
+ <a href="javascript:void(0)" class="grid-item">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
4
+ <h1>Grid Item</h1>
5
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
6
+ </a>
7
+ <a href="javascript:void(0)" class="grid-item">
8
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
9
+ <h1>Another Item</h1>
10
+ <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.</p>
11
+ </a>
12
+ <a href="javascript:void(0)" class="grid-item">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
14
+ <h1>Another Grid Item</h1>
15
+ <p>Lorem ipsum dolor sit amet, elit.</p>
16
+ </a>
17
+ <a href="javascript:void(0)" class="grid-item">
18
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
19
+ <h1>Grid Item</h1>
20
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
21
+ </a>
22
+ <a href="javascript:void(0)" class="grid-item grid-item-big">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
24
+ <h1>Wider Grid Item</h1>
25
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
26
+ </a>
27
+ <a href="javascript:void(0)" class="grid-item">
28
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
29
+ <h1>A Grid Item</h1>
30
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
31
+ </a>
32
+ <a href="javascript:void(0)" class="grid-item">
33
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
34
+ <h1>Item</h1>
35
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
36
+ </a>
37
+ <a href="javascript:void(0)" class="grid-item">
38
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
39
+ <h1>Last Grid Item</h1>
40
+ <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
41
+ </a>
42
+ <div class="right-cover"></div>
43
+ <div class="bottom-cover"></div>
44
+ </div>
data/source/_hero.html.erb ADDED
@@ -0,0 +1,11 @@
1
+ <div class="hero">
2
+ <div class="hero-inner">
3
+ <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
4
+ " alt="Logo Image"></a>
5
+ <div class="hero-copy">
6
+ <h1>Short description of Product</h1>
7
+ <p>A few reasons why this product is worth using, who it's for and why they need it.</p>
8
+ </div>
9
+ <button>Learn More</button>
10
+ </div>
11
+ </div>
data/source/_hover_tile_animation.html.erb ADDED
@@ -0,0 +1,11 @@
1
+ <div class="hover-tile-outer">
2
+ <div class="hover-tile-container">
3
+ <div class="hover-tile hover-tile-visible">
4
+ Hover
5
+ </div>
6
+ <div class="hover-tile hover-tile-hidden">
7
+ <h4>Hidden Copy</h4>
8
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, hic, dolore, labore,provident eligendi fugiat ad exercitationem.</p>
9
+ </div>
10
+ </div>
11
+ </div>
data/source/_icon_bullet_points.html.erb ADDED
@@ -0,0 +1,30 @@
1
+ <ul class="bullets">
2
+ <li class="bullet three-col-bullet">
3
+ <div class="bullet-icon bullet-icon-1">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png
5
+ " alt="">
6
+ </div>
7
+ <div class="bullet-content">
8
+ <h2>This Bullet Title</h2>
9
+ <p>Lorem dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
10
+ </div>
11
+ </li>
12
+ <li class="bullet three-col-bullet">
13
+ <div class="bullet-icon bullet-icon-2">
14
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
15
+ </div>
16
+ <div class="bullet-content">
17
+ <h2>Another Bullet Title</h2>
18
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum.</p>
19
+ </div>
20
+ </li>
21
+ <li class="bullet three-col-bullet">
22
+ <div class="bullet-icon bullet-icon-3">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_4.png" alt="">
24
+ </div>
25
+ <div class="bullet-content">
26
+ <h2>Last Bullet Title</h2>
27
+ <p>Lorem ipsum sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
28
+ </div>
29
+ </li>
30
+ </ul>
data/source/_image_gradient_dynamic.html.erb ADDED
@@ -0,0 +1,7 @@
1
+ <div class="image-gradient-dynamic">
2
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt="">
3
+ <div class="overlay"></div>
4
+ <div class="copy">
5
+ <p>Dynamic height container</p>
6
+ </div>
7
+ </div>
data/source/_intro_text.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div class="intro-text">
2
+ <h3>Topic Label</h3>
3
+ <h2>Intro Text Heading</h2>
4
+ <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta rerum libero iste saepe.</h4>
5
+ <p>Lorem ipsum dolor sit amet, consectetur consectetur adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo. Amet, consectetur adipisicing. <a href="">Read more <span>&#187;</span></a></p>
6
+ </div>
data/source/_label_alerts.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <label class="label-success">This is a success label</label>
2
+ <label class="label-error">This is an error label</label>
3
+ <label class="label-notice">This is an notice label</label>
4
+ <label class="label-alert">This is an alert label</label>
5
+
data/source/_modal.html.erb ADDED
@@ -0,0 +1,14 @@
1
+ <div class="modal">
2
+ <label for="modal-1">
3
+ <div class="btn js-btn">Click for Modal</div>
4
+ </label>
5
+ <input class="modal-state" id="modal-1" type="checkbox" />
6
+ <div class="modal-window">
7
+ <div class="modal-inner">
8
+ <label class="modal-close" for="modal-1"></label>
9
+ <h1>Modal Title</h1>
10
+ <p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p>
11
+ <p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
12
+ </div>
13
+ </div>
14
+ </div>
data/source/_navigation.html.erb ADDED
@@ -0,0 +1,44 @@
1
+ <header class="navigation">
2
+ <div class="navigation-wrapper">
3
+ <a href="javascript:void(0)" class="logo">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo Image">
5
+ </a>
6
+ <a href="" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
7
+ <div class="nav">
8
+ <ul id="navigation-menu">
9
+ <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
10
+ <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
11
+ <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
12
+ <li class="nav-link more"><a href="javascript:void(0)">More</a>
13
+ <ul class="submenu">
14
+ <li><a href="javascript:void(0)">Submenu Item</a></li>
15
+ <li><a href="javascript:void(0)">Another Item</a></li>
16
+ <li class="more"><a href="javascript:void(0)">Item with submenu</a>
17
+ <ul class="submenu">
18
+ <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
19
+ <li><a href="javascript:void(0)">Another Item</a></li>
20
+ </ul>
21
+ </li>
22
+ <li class="more"><a href="javascript:void(0)">Another submenu</a>
23
+ <ul class="submenu">
24
+ <li><a href="javascript:void(0)">Sub-submenu</a></li>
25
+ <li><a href="javascript:void(0)">An Item</a></li>
26
+ </ul>
27
+ </li>
28
+ </ul>
29
+ </li>
30
+ </ul>
31
+ </div>
32
+ <div class="navigation-tools">
33
+ <div class="search-bar">
34
+ <div class="search-and-submit">
35
+ <input type="search" placeholder="Enter Search" />
36
+ <button type="submit">
37
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
38
+ </button>
39
+ </div>
40
+ </div>
41
+ <a href="javascript:void(0)" class="sign-up">Sign Up</a>
42
+ </div>
43
+ </div>
44
+ </header>
data/source/_pagination.html.erb ADDED
@@ -0,0 +1,17 @@
1
+ <div class="pagination">
2
+ <ul>
3
+ <li class="page-prev"><a href="javascript:void(0)">Prev</a></li>
4
+ <li>
5
+ <ul>
6
+ <li><a href="javascript:void(0)">1</a></li>
7
+ <li><a href="javascript:void(0)">2</a></li>
8
+ <li><a href="javascript:void(0)">3</a></li>
9
+ <li><a href="javascript:void(0)">4</a></li>
10
+ <li><a href="javascript:void(0)">5</a></li>
11
+ <li><a href="javascript:void(0)">6</a></li>
12
+ <li><a href="javascript:void(0)">7</a></li>
13
+ </ul>
14
+ </li>
15
+ <li class="page-next"><a href="javascript:void(0)">Next</a></li>
16
+ </ul>
17
+ </div>
data/source/_progress_bar.html.erb ADDED
@@ -0,0 +1,3 @@
1
+ <div class="progress-bar">
2
+ <span class="meter" style="width: 60%"></span>
3
+ </div>
data/source/_progress_bar_indication.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <div class="progress-bar-indication">
2
+ <span class="meter" style="width: 60%">
3
+ <p>60%</p>
4
+ </span>
5
+ </div>
data/source/_search_bar.html.erb ADDED
@@ -0,0 +1,8 @@
1
+ <div class="search-bar">
2
+ <div class="search-and-submit">
3
+ <input type="search" placeholder="Enter Search" />
4
+ <button type="submit">
5
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
6
+ </button>
7
+ </div>
8
+ </div>
data/source/_search_tools.html.erb ADDED
@@ -0,0 +1,58 @@
1
+ <div class="search-tools">
2
+ <div class="filter">
3
+ <label>Colors</label>
4
+ <div>
5
+ <ol>
6
+ <li>
7
+ <input id="red" type="checkbox">
8
+ <label for="red">Red</label>
9
+ </li>
10
+ <li>
11
+ <input id="green" type="checkbox">
12
+ <label for="green">Green</label>
13
+ </li>
14
+ <li>
15
+ <input id="blue" type="checkbox">
16
+ <label for="blue">Blue</label>
17
+ </li>
18
+ </ol>
19
+ </div>
20
+ </div>
21
+ <div class="filter">
22
+ <label>Sizes</label>
23
+ <div>
24
+ <ol>
25
+ <li>
26
+ <input id="small" type="checkbox">
27
+ <label for="small">Small</label>
28
+ </li>
29
+ <li>
30
+ <input id="medium" type="checkbox">
31
+ <label for="medium">Medium</label>
32
+ </li>
33
+ <li>
34
+ <input id="large" type="checkbox">
35
+ <label for="large">Large</label>
36
+ </li>
37
+ </ol>
38
+ </div>
39
+ </div>
40
+ <div class="filter">
41
+ <label>Lengths</label>
42
+ <div>
43
+ <ol>
44
+ <li>
45
+ <input id="short" type="checkbox">
46
+ <label for="short">Short</label>
47
+ </li>
48
+ <li>
49
+ <input id="long" type="checkbox">
50
+ <label for="long">Long</label>
51
+ </li>
52
+ </ol>
53
+ </div>
54
+ </div>
55
+ <div class="trigger">
56
+ <button>Update</button>
57
+ </div>
58
+ </div>
data/source/_side_image.html.erb ADDED
@@ -0,0 +1,10 @@
1
+ <div class="side-image">
2
+ <div class="images-wrapper"></div>
3
+ <div class="content">
4
+ <h4>Topic Name</h4>
5
+ <h1>Message with a gradient image</h1>
6
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
7
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.</p>
8
+ <button>Read more</button>
9
+ </div>
10
+ </div>
data/source/_sliding_menu.html.erb ADDED
@@ -0,0 +1,13 @@
1
+ <button type="button" class="js-menu-trigger sliding-menu-button">
2
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/menu-white.png" alt="Menu Icon">
3
+ </button>
4
+
5
+ <nav class="js-menu sliding-menu-content">
6
+ <ul>
7
+ <li><a href="javascript:void(0)">Item 1</a></li>
8
+ <li><a href="javascript:void(0)">Item 2</a></li>
9
+ <li><a href="javascript:void(0)">Item 3</a></li>
10
+ </ul>
11
+ </nav>
12
+
13
+ <div class="js-menu-screen menu-screen"></div>
data/source/_snippet.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <td class="snippet">
2
+ <a href="#" class="copy-source">Copy</a>
3
+ <pre><code class="language-<%= language %>"><%== snippet %></code></pre>
4
+ </td>
data/source/_switch.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <label class="label-switch">
2
+ <input type="checkbox" />
3
+ <div class="checkbox"></div>
4
+ </label>
data/source/_tables.html.erb ADDED
@@ -0,0 +1,31 @@
1
+ <table class="table-borders">
2
+ <thead>
3
+ <tr>
4
+ <th>Header Cell 1</th>
5
+ <th>Header Cell 2</th>
6
+ <th>Header Cell 3</th>
7
+ </tr>
8
+ </thead>
9
+ <tbody>
10
+ <tr>
11
+ <td>Row 1 Cell 1</td>
12
+ <td>Row 1 Cell 2</td>
13
+ <td><button>Confirm</button><button>Reject</button></td>
14
+ </tr>
15
+ <tr>
16
+ <td>Row 2 Cell 1</td>
17
+ <td>Row 2 Cell 2</td>
18
+ <td><button>Confirm</button><button>Reject</button></td>
19
+ </tr>
20
+ <tr>
21
+ <td>Row 3 Cell 1</td>
22
+ <td>Row 3 Cell 2</td>
23
+ <td><button>Confirm</button><button>Reject</button></td>
24
+ </tr>
25
+ <tr>
26
+ <td>Row 4 Cell 1</td>
27
+ <td>Row 4 Cell 2</td>
28
+ <td><button>Confirm</button><button>Reject</button></td>
29
+ </tr>
30
+ </tbody>
31
+ </table>
data/source/_tables_minimal.html.erb ADDED
@@ -0,0 +1,31 @@
1
+ <table class="table-minimal">
2
+ <thead>
3
+ <tr>
4
+ <th>Header Cell 1</th>
5
+ <th>Header Cell 2</th>
6
+ <th>Header Cell 3</th>
7
+ </tr>
8
+ </thead>
9
+ <tbody>
10
+ <tr>
11
+ <td>Row 1 Cell 1</td>
12
+ <td>Row 1 Cell 2</td>
13
+ <td><button>Confirm</button><button>Reject</button></td>
14
+ </tr>
15
+ <tr>
16
+ <td>Row 2 Cell 1</td>
17
+ <td>Row 2 Cell 2</td>
18
+ <td><button>Confirm</button><button>Reject</button></td>
19
+ </tr>
20
+ <tr>
21
+ <td>Row 3 Cell 1</td>
22
+ <td>Row 3 Cell 2</td>
23
+ <td><button>Confirm</button><button>Reject</button></td>
24
+ </tr>
25
+ <tr>
26
+ <td>Row 4 Cell 1</td>
27
+ <td>Row 4 Cell 2</td>
28
+ <td><button>Confirm</button><button>Reject</button></td>
29
+ </tr>
30
+ </tbody>
31
+ </table>
data/source/_texture-legend.html.erb ADDED
@@ -0,0 +1,24 @@
1
+ <div class="texture-examples">
2
+ <div class="texture-examples-container">
3
+ <h3>Legend</h3>
4
+
5
+ <script>
6
+ for (i = 1; i < 89; i++) {
7
+ document.write('<div class="texture-' + i + '">')
8
+ document.write('<h4>' + i + '</h4>')
9
+ document.write('<div class="examples">')
10
+ document.write('<div class="example-normal"></div>')
11
+ document.write('<div class="example-inverted"></div>')
12
+ document.write('</div>')
13
+ document.write('</div>')
14
+ }
15
+ </script>
16
+
17
+ <div class="instructions">
18
+ <b>Instructions</b>
19
+ <p>Each texture has two versions, shown in each box in the pattern; a normal version and an inverted one. Some versions work better on dark backgrounds, some on light. Switch between the two by changing between 0 and 1 for the final argument passed in the @include.</p>
20
+ <p>The mixin can change background color – or gradient colors – for the texture, along with gradient angle.</p>
21
+ <p>The two squares below is what will be rendered if you copy-paste the code. Use the numbers in the legend above to switch textures in the code. This is done by changing the texture number in the @include for .texture-normal or .texture-inverted. The default selection is texture number 67. Most of these textures are from <a href="http://subtlepatterns.com/">subtlepatterns.com</a></p>
22
+ </div>
23
+ </div>
24
+ </div>
data/source/_textures.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <div class="texture">
2
+ <div class="texture-normal"></div>
3
+ <div class="texture-inverted"></div>
4
+ </div>
data/source/_tooltip.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div class="tooltip-item">
2
+ Hover for Tooltip
3
+ <div class="tooltip">
4
+ <p>Lorem ipsum doloandae oluptate aperiam unde voluptates quas.</p>
5
+ </div>
6
+ </div>
data/source/_type_system_geometric.html.erb ADDED
@@ -0,0 +1,18 @@
1
+ <head>
2
+ <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
3
+ <link href='http://fonts.googleapis.com/css?family=Sanchez:400italic,400' rel='stylesheet' type='text/css'>
4
+ </head>
5
+
6
+ <article class="type-system-geometric">
7
+ <p class="type">Article Type</p>
8
+ <h1>Article Heading</h1>
9
+ <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
10
+ <p class="date">30 Mar 2014</p>
11
+ <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
12
+ <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
13
+ </p>
14
+ <h3>Subheading lorem</h3>
15
+ <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
16
+ <hr>
17
+ <p class="author">Author Name</p>
18
+ </article>
data/source/_type_system_rounded.html.erb ADDED
@@ -0,0 +1,18 @@
1
+ <head>
2
+ <link href='http://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
3
+ <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
4
+ </head>
5
+
6
+ <article class="type-system-rounded">
7
+ <p class="type">Article Type</p>
8
+ <h1>Article Heading</h1>
9
+ <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
10
+ <p class="date">30 Mar 2014</p>
11
+ <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
12
+ <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
13
+ </p>
14
+ <h3>Subheading lorem</h3>
15
+ <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
16
+ <hr>
17
+ <p class="author">Author Name</p>
18
+ </article>
data/source/_type_system_sans.html.erb ADDED
@@ -0,0 +1,18 @@
1
+ <head>
2
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
3
+ <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600italic,600,700,700italic,900,300italic,300,200italic,200' rel='stylesheet' type='text/css'>
4
+ </head>
5
+
6
+ <article class="type-system-sans">
7
+ <p class="type">Article Type</p>
8
+ <h1>Article Heading</h1>
9
+ <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
10
+ <p class="date">30 Mar 2014</p>
11
+ <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
12
+ <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
13
+ </p>
14
+ <h3>Subheading lorem</h3>
15
+ <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
16
+ <hr>
17
+ <p class="author">Author Name</p>
18
+ </article>
data/source/_type_system_serif.html.erb ADDED
@@ -0,0 +1,19 @@
1
+ <head>
2
+ <link href='http://fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>
3
+ <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
4
+ <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700italic,700,800,800italic' rel='stylesheet' type='text/css'>
5
+ </head>
6
+
7
+ <article class="type-system-serif">
8
+ <p class="type">Article Type</p>
9
+ <h1>Article Heading</h1>
10
+ <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
11
+ <p class="date">30 Mar 2014</p>
12
+ <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
13
+ <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
14
+ </p>
15
+ <h3>Subheading lorem</h3>
16
+ <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
17
+ <hr>
18
+ <p class="author">Author Name</p>
19
+ </article>
data/source/_type_system_slab.html.erb ADDED
@@ -0,0 +1,18 @@
1
+ <head>
2
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300' rel='stylesheet' type='text/css'>
3
+ <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700' rel='stylesheet' type='text/css'>
4
+ </head>
5
+
6
+ <article class="type-system-slab">
7
+ <p class="type">Article Type</p>
8
+ <h1>Article Heading</h1>
9
+ <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
10
+ <p class="date">30 Mar 2014</p>
11
+ <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
12
+ <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
13
+ </p>
14
+ <h3>Subheading lorem</h3>
15
+ <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
16
+ <hr>
17
+ <p class="author">Author Name</p>
18
+ </article>