refills 0.1.0 → 0.2.0

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 (188) hide show
  1. checksums.yaml +4 -4
  2. data/.hound.yml +3 -2
  3. data/.ruby-version +1 -1
  4. data/.scss-lint.yml +97 -24
  5. data/CONTRIBUTING.md +4 -3
  6. data/Gemfile +13 -10
  7. data/README.md +31 -15
  8. data/circle.yml +7 -0
  9. data/config.rb +4 -13
  10. data/{lib → helpers}/snippet_helpers.rb +14 -6
  11. data/lib/refills/version.rb +1 -1
  12. data/refills.gemspec +2 -2
  13. data/sache.json +1 -1
  14. data/source/_badges.html.erb +1 -1
  15. data/source/_cards.html.erb +1 -1
  16. data/source/_centered_navigation.html.erb +5 -5
  17. data/source/_comment.html.erb +2 -2
  18. data/source/_device.html.erb +0 -1
  19. data/source/_expander.html.erb +2 -2
  20. data/source/_flex_boxes.html.erb +6 -6
  21. data/source/_footer.html.erb +1 -1
  22. data/source/_footer_2.html.erb +1 -1
  23. data/source/_grid_items.html.erb +7 -7
  24. data/source/_grid_items_lines.html.erb +8 -8
  25. data/source/_hero.html.erb +4 -9
  26. data/source/_icon_bullet_points.html.erb +6 -7
  27. data/source/_logo_section.html.erb +8 -0
  28. data/source/_modal.html.erb +2 -2
  29. data/source/_navigation.html.erb +2 -3
  30. data/source/_search_bar.html.erb +1 -1
  31. data/source/_search_tools.html.erb +54 -52
  32. data/source/_side_image.html.erb +0 -1
  33. data/source/_sliding_panel.html.erb +13 -0
  34. data/source/_type_system_geometric.html.erb +4 -3
  35. data/source/_type_system_rounded.html.erb +3 -3
  36. data/source/_type_system_sans.html.erb +3 -3
  37. data/source/_type_system_serif.html.erb +4 -4
  38. data/source/_type_system_slab.html.erb +3 -3
  39. data/source/_type_system_traditional.html.erb +3 -3
  40. data/source/components.html.erb +9 -5
  41. data/source/images/background-image.png +0 -0
  42. data/source/images/cosmin_capitanu_screen.jpg +0 -0
  43. data/source/images/new.svg +22 -0
  44. data/source/images/placeholder_square.png +0 -0
  45. data/source/images/placeholder_wide.png +0 -0
  46. data/source/images/placeholder_wider.png +0 -0
  47. data/source/index.html.erb +10 -3
  48. data/source/javascripts/jquery.erToc.js +1 -6
  49. data/source/javascripts/refills/accordion_base.js +5 -0
  50. data/source/javascripts/refills/accordion_tabs.js +1 -2
  51. data/source/javascripts/refills/accordion_tabs_minimal.js +1 -2
  52. data/source/javascripts/refills/base-accordion.js +5 -0
  53. data/source/javascripts/refills/centered_navigation.js +27 -9
  54. data/source/javascripts/refills/coffeescript/accordion.coffee +3 -4
  55. data/source/javascripts/refills/coffeescript/accordion_base.coffee +6 -0
  56. data/source/javascripts/refills/coffeescript/accordion_tabs.coffee +9 -12
  57. data/source/javascripts/refills/coffeescript/accordion_tabs_minimal.coffee +9 -12
  58. data/source/javascripts/refills/coffeescript/animate.coffee +4 -7
  59. data/source/javascripts/refills/coffeescript/base-accordion.coffee +5 -0
  60. data/source/javascripts/refills/coffeescript/centered_navigation.coffee +6 -8
  61. data/source/javascripts/refills/coffeescript/dropdown.coffee +6 -10
  62. data/source/javascripts/refills/coffeescript/expander.coffee +4 -6
  63. data/source/javascripts/refills/coffeescript/fade_in.coffee +6 -8
  64. data/source/javascripts/refills/coffeescript/modal.coffee +7 -11
  65. data/source/javascripts/refills/coffeescript/navigation.coffee +6 -8
  66. data/source/javascripts/refills/coffeescript/parallax.coffee +9 -8
  67. data/source/javascripts/refills/coffeescript/scroll_on_page.coffee +6 -11
  68. data/source/javascripts/refills/coffeescript/search_tools.coffee +0 -85
  69. data/source/javascripts/refills/coffeescript/sliding_panel.coffee +6 -0
  70. data/source/javascripts/refills/coffeescript/vertical_tabs.coffee +21 -21
  71. data/source/javascripts/refills/dropdown.js +8 -8
  72. data/source/javascripts/refills/expander.js +1 -4
  73. data/source/javascripts/refills/modal.js +1 -1
  74. data/source/javascripts/refills/navigation.js +26 -7
  75. data/source/javascripts/refills/navigation_centered.js +13 -0
  76. data/source/javascripts/refills/scroll_on_page.js +8 -5
  77. data/source/javascripts/refills/search_tools.js +2 -2
  78. data/source/javascripts/refills/sliding_panel.js +6 -0
  79. data/source/javascripts/refills/unstyled/accordion.js +5 -0
  80. data/source/javascripts/refills/unstyled/accordion_tabs.js +18 -0
  81. data/source/javascripts/refills/unstyled/dropdown.js +12 -0
  82. data/source/javascripts/refills/unstyled/expander.js +8 -0
  83. data/source/javascripts/refills/unstyled/modal.js +17 -0
  84. data/source/javascripts/refills/unstyled/navigation.js +13 -0
  85. data/source/javascripts/refills/unstyled/navigation_centered.js +13 -0
  86. data/source/javascripts/refills/unstyled/scroll_on_page.js +29 -0
  87. data/source/javascripts/refills/unstyled/sliding_panel.js +6 -0
  88. data/source/javascripts/refills/unstyled/vertical_tabs.js +32 -0
  89. data/source/layouts/layout.erb +3 -3
  90. data/source/refills-hero.html.erb +6 -3
  91. data/source/stylesheets/_bourbon-nav.scss +14 -7
  92. data/source/stylesheets/_refill.scss +215 -0
  93. data/source/stylesheets/_refills-footer.scss +62 -0
  94. data/source/stylesheets/_refills-header.scss +113 -0
  95. data/source/stylesheets/_refills-menu.scss +91 -0
  96. data/source/stylesheets/_refills-nav.scss +13 -13
  97. data/source/stylesheets/_refills-styles.scss +8 -644
  98. data/source/stylesheets/_refills-variables.scss +20 -0
  99. data/source/stylesheets/all.css.scss +78 -0
  100. data/source/stylesheets/refills/_accordion-tabs-minimal.scss +9 -14
  101. data/source/stylesheets/refills/_accordion-tabs.scss +11 -16
  102. data/source/stylesheets/refills/_accordion.scss +13 -29
  103. data/source/stylesheets/refills/_animate.scss +9 -10
  104. data/source/stylesheets/refills/_badges.scss +18 -35
  105. data/source/stylesheets/refills/_breadcrumbs.scss +15 -19
  106. data/source/stylesheets/refills/_button-group.scss +6 -12
  107. data/source/stylesheets/refills/_cards.scss +22 -31
  108. data/source/stylesheets/refills/_centered-navigation.scss +16 -13
  109. data/source/stylesheets/refills/_comment.scss +3 -6
  110. data/source/stylesheets/refills/_device.scss +29 -40
  111. data/source/stylesheets/refills/_dropdown.scss +17 -27
  112. data/source/stylesheets/refills/_expander.scss +14 -21
  113. data/source/stylesheets/refills/_fade-in.scss +7 -11
  114. data/source/stylesheets/refills/_flashes.scss +21 -33
  115. data/source/stylesheets/refills/_flex-boxes.scss +18 -26
  116. data/source/stylesheets/refills/_footer-2.scss +19 -33
  117. data/source/stylesheets/refills/_footer.scss +15 -38
  118. data/source/stylesheets/refills/_grid-items-lines.scss +12 -21
  119. data/source/stylesheets/refills/_grid-items.scss +31 -40
  120. data/source/stylesheets/refills/_hero.scss +22 -55
  121. data/source/stylesheets/refills/_hover-tile-animation.scss +8 -17
  122. data/source/stylesheets/refills/_icon-bullet-points.scss +26 -35
  123. data/source/stylesheets/refills/_image-gradient-dynamic.scss +31 -20
  124. data/source/stylesheets/refills/_logo-section.scss +25 -0
  125. data/source/stylesheets/refills/_maps.scss +2 -2
  126. data/source/stylesheets/refills/_modal.scss +32 -45
  127. data/source/stylesheets/refills/_navigation.scss +33 -39
  128. data/source/stylesheets/refills/_pagination.scss +10 -23
  129. data/source/stylesheets/refills/_progress-bar-indication.scss +8 -15
  130. data/source/stylesheets/refills/_progress-bar.scss +24 -26
  131. data/source/stylesheets/refills/_ribbon.scss +4 -5
  132. data/source/stylesheets/refills/_scroll-on-page.scss +12 -15
  133. data/source/stylesheets/refills/_search-bar.scss +6 -13
  134. data/source/stylesheets/refills/_search-tools.scss +41 -42
  135. data/source/stylesheets/refills/_side-image.scss +8 -20
  136. data/source/stylesheets/refills/_sliding-panel.scss +79 -0
  137. data/source/stylesheets/refills/_stats.scss +2 -3
  138. data/source/stylesheets/refills/_switch.scss +13 -16
  139. data/source/stylesheets/refills/_tables-minimal.scss +12 -24
  140. data/source/stylesheets/refills/_tables.scss +11 -20
  141. data/source/stylesheets/refills/_texture-legend.scss +17 -13
  142. data/source/stylesheets/refills/_textures.scss +13 -9
  143. data/source/stylesheets/refills/_tooltip.scss +9 -16
  144. data/source/stylesheets/refills/_type-system-geometric.scss +14 -17
  145. data/source/stylesheets/refills/_type-system-rounded.scss +19 -19
  146. data/source/stylesheets/refills/_type-system-sans.scss +26 -26
  147. data/source/stylesheets/refills/_type-system-serif.scss +17 -20
  148. data/source/stylesheets/refills/_type-system-slab.scss +14 -17
  149. data/source/stylesheets/refills/_type-system-traditional.scss +18 -21
  150. data/source/stylesheets/refills/_vertical-tabs.scss +26 -30
  151. data/source/stylesheets/refills/_video.scss +1 -1
  152. data/source/stylesheets/refills/unstyled/_accordion-tabs.scss +36 -0
  153. data/source/stylesheets/refills/unstyled/_accordion.scss +17 -0
  154. data/source/stylesheets/refills/unstyled/_button-group.scss +30 -0
  155. data/source/stylesheets/refills/unstyled/_cards.scss +20 -0
  156. data/source/stylesheets/refills/unstyled/_comment.scss +28 -0
  157. data/source/stylesheets/refills/unstyled/_dropdown.scss +42 -0
  158. data/source/stylesheets/refills/unstyled/_expander.scss +20 -0
  159. data/source/stylesheets/refills/unstyled/_footer.scss +64 -0
  160. data/source/stylesheets/refills/unstyled/_hover-menu.scss +60 -0
  161. data/source/stylesheets/refills/unstyled/_modal.scss +71 -0
  162. data/source/stylesheets/refills/unstyled/_navigation-centered.scss +92 -0
  163. data/source/stylesheets/refills/unstyled/_navigation.scss +82 -0
  164. data/source/stylesheets/refills/unstyled/_scroll-on-page.scss +22 -0
  165. data/source/stylesheets/refills/unstyled/_search-bar.scss +26 -0
  166. data/source/stylesheets/refills/unstyled/_sliding-panel.scss +36 -0
  167. data/source/stylesheets/refills/unstyled/_switch.scss +50 -0
  168. data/source/stylesheets/refills/unstyled/_tooltip.scss +36 -0
  169. data/source/stylesheets/refills/unstyled/_vertical-tabs.scss +53 -0
  170. data/source/stylesheets/vendor/prism.css +4 -4
  171. data/source/svgs/_menu_icon.html.erb +6 -0
  172. data/source/svgs/_refills_logo.html.erb +8 -0
  173. data/source/type-systems.html.erb +5 -1
  174. data/spec/refills/import_generator_spec.rb +1 -1
  175. metadata +59 -19
  176. data/.travis.yml +0 -8
  177. data/source/_sliding_menu.html.erb +0 -13
  178. data/source/images/placeholder_logo_1.png +0 -0
  179. data/source/images/placeholder_logo_1_dark.png +0 -0
  180. data/source/images/placeholder_logo_2.png +0 -0
  181. data/source/images/placeholder_logo_2_dark.png +0 -0
  182. data/source/images/placeholder_logo_3.png +0 -0
  183. data/source/images/placeholder_logo_3_dark.png +0 -0
  184. data/source/images/placeholder_logo_4.png +0 -0
  185. data/source/images/placeholder_logo_4_dark.png +0 -0
  186. data/source/javascripts/refills/sliding_menu.js +0 -6
  187. data/source/stylesheets/all.scss +0 -66
  188. data/source/stylesheets/refills/_sliding-menu.scss +0 -86
data/lib/refills/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Refills
2
- VERSION = "0.1.0"
2
+ VERSION = "0.2.0"
3
3
  end
data/refills.gemspec CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |s|
8
8
  s.version = Refills::VERSION
9
9
  s.authors = ['Christian Reuter', 'Joël Quenneville', 'Lisa Sy', 'Magnus Gyllensward', 'Paul Smith', 'Tyson Gach']
10
10
  s.email = 'design+bourbon@thoughtbot.com'
11
- s.description = 'Prepackaged patterns and components built with Bourbon, Neat and Bitters.'
12
- s.summary = 'Prepackaged patterns and components built with Bourbon, Neat and Bitters.'
11
+ s.description = 'Components and patterns built with Bourbon and Neat.'
12
+ s.summary = 'Components and patterns built with Bourbon and Neat.'
13
13
  s.homepage = 'http://refills.bourbon.io'
14
14
  s.license = 'MIT'
15
15
 
data/sache.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "Refills",
3
- "description": "Prepackaged patterns and components built with Bourbon, Neat and Bitters.",
3
+ "description": "Components and patterns built with Bourbon and Neat.",
4
4
  "tags": ["gui", "buttons", "patterns", "components", "templates", "navigation", "tabs", "framework", "elements", "neat", "bourbon", "bitters"]
5
5
  }
data/source/_badges.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <div>
2
- <span class="badge">4</span>
2
+ <span class="badge-default">4</span>
3
3
  <span class="badge-alert">4</span>
4
4
  <span class="badge-error">4</span>
5
5
  <span class="badge-notice">4</span>
data/source/_cards.html.erb CHANGED
@@ -31,7 +31,7 @@
31
31
  The Last Card
32
32
  </div>
33
33
  <div class="card-copy">
34
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
34
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
35
35
  </div>
36
36
  </div>
37
37
  </div>
data/source/_centered_navigation.html.erb CHANGED
@@ -1,7 +1,7 @@
1
1
  <header class="centered-navigation" role="banner">
2
2
  <div class="centered-navigation-wrapper">
3
3
  <a href="javascript:void(0)" class="mobile-logo">
4
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
5
5
  </a>
6
6
  <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
7
7
  <nav role="navigation">
@@ -11,22 +11,22 @@
11
11
  <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
12
12
  <li class="nav-link logo">
13
13
  <a href="javascript:void(0)" class="logo">
14
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
14
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
15
15
  </a>
16
16
  </li>
17
17
  <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
18
- <li class="nav-link more"><a href="javascript:void(0)">More</a>
18
+ <li id="js-centered-more" class="nav-link more"><a href="javascript:void(0)">More</a>
19
19
  <ul class="submenu">
20
20
  <li><a href="javascript:void(0)">Submenu Item</a></li>
21
21
  <li><a href="javascript:void(0)">Another Item</a></li>
22
22
  <li class="more"><a href="javascript:void(0)">Item with submenu</a>
23
- <ul class="submenu">
23
+ <ul class="submenu fly-out-right">
24
24
  <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
25
25
  <li><a href="javascript:void(0)">Another Item</a></li>
26
26
  </ul>
27
27
  </li>
28
28
  <li class="more"><a href="javascript:void(0)">Another submenu</a>
29
- <ul class="submenu">
29
+ <ul class="submenu fly-out-right">
30
30
  <li><a href="javascript:void(0)">Sub-submenu</a></li>
31
31
  <li><a href="javascript:void(0)">An Item</a></li>
32
32
  </ul>
data/source/_comment.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="comment">
2
2
  <div class="comment-image">
3
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png">
4
4
  </div>
5
5
  <div class="comment-content">
6
6
  <h1>First Comment Title or Author</h1>
@@ -11,7 +11,7 @@
11
11
 
12
12
  <div class="comment">
13
13
  <div class="comment-image">
14
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="Logo image">
14
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png">
15
15
  </div>
16
16
  <div class="comment-content">
17
17
  <h1>Another One</h1>
data/source/_device.html.erb CHANGED
@@ -2,7 +2,6 @@
2
2
  <div class="device-text">
3
3
  <h4>Text about App or Device</h4>
4
4
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
5
- <button>Learn More</button>
6
5
  </div>
7
6
  <div class="device">
8
7
  <div class="screen"></div>
data/source/_expander.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="expander">
2
- <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">Expandable section</a>
3
- <div id="js-expander-content" class="expander-content">
2
+ <a href="javascript:void(0)" class="expander-trigger expander-hidden">Expandable section</a>
3
+ <div class="expander-content">
4
4
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.</p>
5
5
  </div>
6
6
  </div>
data/source/_flex_boxes.html.erb CHANGED
@@ -1,31 +1,31 @@
1
1
  <div class="flex-boxes">
2
2
  <a href="javascript:void(0)" class="flex-box flex-box-big">
3
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
4
4
  <h1 class="flex-title">A Wide Flex Box Item</h1>
5
5
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nostrum, libero! Laborum distinctio necessitatibus voluptates eaque officiis, unde illo, earum voluptatum rerum, reiciendis ipsa ex dolorem a dicta, maxime aliquam.</p>
6
6
  </a>
7
7
  <a href="javascript:void(0)" class="flex-box">
8
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
8
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
9
9
  <h1 class="flex-title">Flex Box Item</h1>
10
10
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum molestiae fugiat tenetur fugit atque dignissimos, fugiat natus vitae.</p>
11
11
  </a>
12
12
  <a href="javascript:void(0)" class="flex-box">
13
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
14
14
  <h1 class="flex-title">A Flex Box Item</h1>
15
15
  <p>Lorem adipisicing elit. Voluptas consectetur tempora quis nam, officia tenetur blanditiis in illo dolor?</p>
16
16
  </a>
17
17
  <a href="javascript:void(0)" class="flex-box flex-box-big">
18
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
18
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
19
19
  <h1 class="flex-title">Another Wide Item</h1>
20
20
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quis ipsum, officia, aperiam tenetur dolor molestiae voluptate perferendis dolorem vel ex, unde fugit blanditiis sapiente.</p>
21
21
  </a>
22
22
  <a href="javascript:void(0)" class="flex-box">
23
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
24
24
  <h1 class="flex-title">Flex Box Item</h1>
25
25
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati in provident illo.</p>
26
26
  </a>
27
27
  <a href="javascript:void(0)" class="flex-box">
28
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
28
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
29
29
  <h1 class="flex-title">Last Flex Box Item</h1>
30
30
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
31
31
  </a>
data/source/_footer.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <footer class="footer" role="contentinfo">
2
2
  <div class="footer-logo">
3
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
4
4
  </div>
5
5
  <div class="footer-links">
6
6
  <ul>
data/source/_footer_2.html.erb CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <footer class="footer-2" role="contentinfo">
6
6
  <div class="footer-logo">
7
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
7
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
8
8
  </div>
9
9
  <ul>
10
10
  <li><a href="javascript:void(0)">About</a></li>
data/source/_grid_items.html.erb CHANGED
@@ -1,36 +1,36 @@
1
1
  <div class="grid-items">
2
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="">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
4
4
  <h1>Grid Item</h1>
5
5
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
6
6
  </a>
7
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="">
8
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
9
9
  <h1>Grid Item With an Image</h1>
10
10
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
11
11
  </a>
12
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="">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
14
14
  <h1>Another Wide Item</h1>
15
15
  <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
16
16
  </a>
17
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="">
18
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
19
19
  <h1>Last Grid Item</h1>
20
20
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
21
21
  </a>
22
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="">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
24
24
  <h1>Last Grid Item</h1>
25
25
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
26
26
  </a>
27
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="">
28
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
29
29
  <h1>A Grid Item</h1>
30
30
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
31
31
  </a>
32
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="">
33
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
34
34
  <h1>Item</h1>
35
35
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
36
36
  </a>
data/source/_grid_items_lines.html.erb CHANGED
@@ -1,41 +1,41 @@
1
1
  <div class="grid-items-lines">
2
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="">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
4
4
  <h1>Grid Item</h1>
5
5
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
6
6
  </a>
7
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="">
8
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
9
9
  <h1>Another Item</h1>
10
10
  <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.</p>
11
11
  </a>
12
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="">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
14
14
  <h1>Another Grid Item</h1>
15
15
  <p>Lorem ipsum dolor sit amet, elit.</p>
16
16
  </a>
17
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="">
18
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
19
19
  <h1>Grid Item</h1>
20
20
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
21
21
  </a>
22
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="">
23
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
24
24
  <h1>Wider Grid Item</h1>
25
25
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
26
26
  </a>
27
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="">
28
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
29
29
  <h1>A Grid Item</h1>
30
30
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
31
31
  </a>
32
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="">
33
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
34
34
  <h1>Item</h1>
35
35
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
36
36
  </a>
37
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="">
38
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
39
39
  <h1>Last Grid Item</h1>
40
40
  <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
41
41
  </a>
data/source/_hero.html.erb CHANGED
@@ -1,11 +1,6 @@
1
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>
2
+ <div class="hero-content">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo Image" class="hero-logo">
4
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni modi doloremque excepturi laudantium maxime explicabo cumque deleniti voluptate deserunt.</p>
5
+ </div>
11
6
  </div>
data/source/_icon_bullet_points.html.erb CHANGED
@@ -1,26 +1,25 @@
1
1
  <ul class="bullets">
2
- <li class="bullet three-col-bullet">
2
+ <li class="bullet">
3
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="">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
6
5
  </div>
7
6
  <div class="bullet-content">
8
7
  <h2>This Bullet Title</h2>
9
8
  <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
9
  </div>
11
10
  </li>
12
- <li class="bullet three-col-bullet">
11
+ <li class="bullet">
13
12
  <div class="bullet-icon bullet-icon-2">
14
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
15
14
  </div>
16
15
  <div class="bullet-content">
17
16
  <h2>Another Bullet Title</h2>
18
17
  <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
18
  </div>
20
19
  </li>
21
- <li class="bullet three-col-bullet">
20
+ <li class="bullet">
22
21
  <div class="bullet-icon bullet-icon-3">
23
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_4.png" alt="">
22
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
24
23
  </div>
25
24
  <div class="bullet-content">
26
25
  <h2>Last Bullet Title</h2>
data/source/_logo_section.html.erb ADDED
@@ -0,0 +1,8 @@
1
+ <ul class="logo-section">
2
+ <li><img class="wide-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_wide.png" alt=""></li>
3
+ <li><img class="square-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/49db8c0f2f8066c2c3a275781503fe3303a1a9fc/source/images/placeholder.png" alt=""></li>
4
+ <li><img class="square-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/49db8c0f2f8066c2c3a275781503fe3303a1a9fc/source/images/placeholder.png" alt=""></li>
5
+ <li><img class="wider-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_wider.png" alt=""></li>
6
+ <li><img class="square-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/49db8c0f2f8066c2c3a275781503fe3303a1a9fc/source/images/placeholder.png" alt=""></li>
7
+ <li><img class="wide-logo" src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_wide.png" alt=""></li>
8
+ </ul>
data/source/_modal.html.erb CHANGED
@@ -3,9 +3,9 @@
3
3
  <div class="modal-trigger">Click for Modal</div>
4
4
  </label>
5
5
  <input class="modal-state" id="modal-1" type="checkbox" />
6
- <div class="modal-window">
6
+ <div class="modal-fade-screen">
7
7
  <div class="modal-inner">
8
- <label class="modal-close" for="modal-1"></label>
8
+ <div class="modal-close" for="modal-1"></div>
9
9
  <h1>Modal Title</h1>
10
10
  <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p>
11
11
  <p class="modal-content">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. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
data/source/_navigation.html.erb CHANGED
@@ -1,7 +1,7 @@
1
1
  <header class="navigation" role="banner">
2
2
  <div class="navigation-wrapper">
3
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">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo Image">
5
5
  </a>
6
6
  <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
7
7
  <nav role="navigation">
@@ -9,7 +9,7 @@
9
9
  <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
10
10
  <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
11
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>
12
+ <li id="js-navigation-more" class="nav-link more"><a href="javascript:void(0)">More</a>
13
13
  <ul class="submenu">
14
14
  <li><a href="javascript:void(0)">Submenu Item</a></li>
15
15
  <li><a href="javascript:void(0)">Another Item</a></li>
@@ -38,7 +38,6 @@
38
38
  </button>
39
39
  </form>
40
40
  </div>
41
- <a href="javascript:void(0)" class="sign-up">Sign Up</a>
42
41
  </div>
43
42
  </div>
44
43
  </header>
data/source/_search_bar.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <form class="search-bar" role="search">
2
2
  <input type="search" placeholder="Enter Search" />
3
3
  <button type="submit">
4
- <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon-black.png" alt="Search Icon">
5
5
  </button>
6
6
  </form>
data/source/_search_tools.html.erb CHANGED
@@ -1,58 +1,60 @@
1
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>
2
+ <div class="filters">
3
+ <div class="filter">
4
+ <label>Colors</label>
5
+ <div>
6
+ <ol class="filter-list">
7
+ <li>
8
+ <input id="red" type="checkbox">
9
+ <label for="red">Red</label>
10
+ </li>
11
+ <li>
12
+ <input id="green" type="checkbox">
13
+ <label for="green">Green</label>
14
+ </li>
15
+ <li>
16
+ <input id="blue" type="checkbox">
17
+ <label for="blue">Blue</label>
18
+ </li>
19
+ </ol>
20
+ </div>
19
21
  </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>
22
+ <div class="filter">
23
+ <label>Sizes</label>
24
+ <div>
25
+ <ol class="filter-list">
26
+ <li>
27
+ <input id="small" type="checkbox">
28
+ <label for="small">Small</label>
29
+ </li>
30
+ <li>
31
+ <input id="medium" type="checkbox">
32
+ <label for="medium">Medium</label>
33
+ </li>
34
+ <li>
35
+ <input id="large" type="checkbox">
36
+ <label for="large">Large</label>
37
+ </li>
38
+ </ol>
39
+ </div>
38
40
  </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>
41
+ <div class="filter">
42
+ <label>Lengths</label>
43
+ <div>
44
+ <ol class="filter-list">
45
+ <li>
46
+ <input id="short" type="checkbox">
47
+ <label for="short">Short</label>
48
+ </li>
49
+ <li>
50
+ <input id="long" type="checkbox">
51
+ <label for="long">Long</label>
52
+ </li>
53
+ </ol>
54
+ </div>
55
+ </div>
56
+ <div class="filter trigger">
57
+ <button>Update</button>
53
58
  </div>
54
- </div>
55
- <div class="trigger">
56
- <button>Update</button>
57
59
  </div>
58
60
  </div>