refills 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
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/source/_side_image.html.erb CHANGED
@@ -5,6 +5,5 @@
5
5
  <h1>Message with a gradient image</h1>
6
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
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
8
  </div>
10
9
  </div>
data/source/_sliding_panel.html.erb ADDED
@@ -0,0 +1,13 @@
1
+ <button type="button" class="js-menu-trigger sliding-panel-button">
2
+ Click for Sliding Panel
3
+ </button>
4
+
5
+ <nav class="js-menu sliding-panel-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 sliding-panel-fade-screen"></div>
data/source/_type_system_geometric.html.erb CHANGED
@@ -1,12 +1,13 @@
1
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'>
2
+ <link href='//fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
3
+ <link href='//fonts.googleapis.com/css?family=Sanchez:400italic,400' rel='stylesheet' type='text/css'>
4
4
  </head>
5
5
 
6
6
  <article class="type-system-geometric">
7
7
  <p class="type">Article Type</p>
8
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>
9
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
10
+
10
11
  <p class="date">30 Mar 2014</p>
11
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.
12
13
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/_type_system_rounded.html.erb CHANGED
@@ -1,12 +1,12 @@
1
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'>
2
+ <link href='//fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
3
+ <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
4
4
  </head>
5
5
 
6
6
  <article class="type-system-rounded">
7
7
  <p class="type">Article Type</p>
8
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>
9
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
10
10
  <p class="date">30 Mar 2014</p>
11
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
12
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/_type_system_sans.html.erb CHANGED
@@ -1,12 +1,12 @@
1
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'>
2
+ <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
3
+ <link href='//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600italic,600,700,700italic,900,300italic,300,200italic,200' rel='stylesheet' type='text/css'>
4
4
  </head>
5
5
 
6
6
  <article class="type-system-sans">
7
7
  <p class="type">Article Type</p>
8
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>
9
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
10
10
  <p class="date">30 Mar 2014</p>
11
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
12
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/_type_system_serif.html.erb CHANGED
@@ -1,13 +1,13 @@
1
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'>
2
+ <link href='//fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>
3
+ <link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
4
+ <link href='//fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700italic,700,800,800italic' rel='stylesheet' type='text/css'>
5
5
  </head>
6
6
 
7
7
  <article class="type-system-serif">
8
8
  <p class="type">Article Type</p>
9
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>
10
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
11
11
  <p class="date">30 Mar 2014</p>
12
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
13
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/_type_system_slab.html.erb CHANGED
@@ -1,12 +1,12 @@
1
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'>
2
+ <link href='//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='//fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700' rel='stylesheet' type='text/css'>
4
4
  </head>
5
5
 
6
6
  <article class="type-system-slab">
7
7
  <p class="type">Article Type</p>
8
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>
9
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
10
10
  <p class="date">30 Mar 2014</p>
11
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
12
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/_type_system_traditional.html.erb CHANGED
@@ -1,12 +1,12 @@
1
1
  <head>
2
- <link href='http://fonts.googleapis.com/css?family=Radley:400,400italic' rel='stylesheet' type='text/css'>
3
- <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
2
+ <link href='//fonts.googleapis.com/css?family=Radley:400,400italic' rel='stylesheet' type='text/css'>
3
+ <link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
4
4
  </head>
5
5
 
6
6
  <article class="type-system-traditional">
7
7
  <p class="type">Article Type</p>
8
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>
9
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
10
10
  <p class="date">30 Mar 2014</p>
11
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
12
  <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
data/source/components.html.erb CHANGED
@@ -1,7 +1,11 @@
1
+ ---
2
+ title: Components
3
+ ---
4
+
1
5
  <div class="refills-components">
2
6
 
3
7
  <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
4
- <img src="/images/menu.png" alt="Menu icon">
8
+ <%= partial "svgs/menu_icon" %>
5
9
  </a>
6
10
  <div class="js-menu-screen-refills refills-menu-screen"></div>
7
11
 
@@ -175,12 +179,12 @@
175
179
  <div class="refill-snippet"><%= code_for("search_bar") %></div>
176
180
  </section>
177
181
 
178
- <section id="sliding-menu" class="refill">
182
+ <section id="sliding-panel" class="refill">
179
183
  <div class="refills-wrapper">
180
- <div class="line-behind-text"><h6>Sliding Menu</h6></div>
181
- <div class="refill-centering"><%= partial "sliding_menu" %></div>
184
+ <div class="line-behind-text"><h6>Sliding Panel</h6></div>
185
+ <div class="refill-centering"><%= partial "sliding_panel" %></div>
182
186
  </div>
183
- <div class="refill-snippet"><%= code_for("sliding_menu") %></div>
187
+ <div class="refill-snippet"><%= code_for("sliding_panel") %></div>
184
188
  </section>
185
189
 
186
190
  <section id="switch" class="refill">
data/source/images/new.svg ADDED
@@ -0,0 +1,22 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="97.102px" height="97.102px" viewBox="0 0 97.102 97.102" enable-background="new 0 0 97.102 97.102" xml:space="preserve">
6
+ <rect x="13.184" y="32.175" fill="#FFFFFF" width="71" height="31"/>
7
+ <polygon fill="#9BD4B5" points="91.295,52.878 97.437,44.412 89.829,37.243 92.519,27.137 82.827,23.174 81.68,12.773
8
+ 71.233,12.601 66.388,3.303 56.574,6.924 48.719,0 40.865,6.925 31.05,3.304 26.206,12.602 15.756,12.774 14.61,23.173
9
+ 4.918,27.136 7.611,37.242 0,44.412 6.141,52.878 1.639,62.324 10.447,68 9.666,78.423 19.919,80.528 22.954,90.536 33.277,88.799
10
+ 39.738,97.045 48.718,91.687 57.698,97.045 64.159,88.799 74.481,90.536 77.515,80.528 87.771,78.423 86.989,68 95.797,62.323 "/>
11
+ <g>
12
+ <path fill="#FFFFFF" d="M23.965,58.001V35.756h3.961l3.432,8.713c0.66,1.716,1.75,4.587,2.376,6.501h0.066
13
+ c-0.132-2.343-0.429-6.205-0.429-10.297v-4.917h3.795v22.245h-3.96l-3.399-8.449c-0.727-1.881-1.75-4.687-2.245-6.7h-0.066
14
+ c0.099,2.245,0.264,5.677,0.264,10.133v5.017H23.965z"/>
15
+ <path fill="#FFFFFF" d="M50.4,48.231h-5.083v6.007h5.743v3.763H40.993V35.756h9.67v3.763h-5.347v5.116H50.4V48.231z"/>
16
+ <path fill="#FFFFFF" d="M56.405,58.001l-3.796-22.245h4.488l1.09,8.878c0.297,2.541,0.495,5.083,0.759,7.789h0.099
17
+ c0.298-2.739,0.793-5.148,1.255-7.822l1.584-8.845h3.498l1.485,8.779c0.396,2.508,0.792,4.983,1.057,7.888h0.065
18
+ c0.298-2.904,0.562-5.28,0.858-7.855l1.089-8.812h4.225l-3.927,22.245h-4.456l-1.32-7.294c-0.363-2.046-0.693-4.588-0.99-7.294
19
+ h-0.065c-0.396,2.673-0.76,5.148-1.222,7.326l-1.485,7.262H56.405z"/>
20
+ </g>
21
+ <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="20.7" y1="64.7" x2="76.7" y2="64.7"/>
22
+ </svg>
data/source/index.html.erb CHANGED
@@ -1,10 +1,10 @@
1
1
  ---
2
- title: Refills
2
+ title: Patterns
3
3
  ---
4
4
 
5
5
  <div class="refills-patterns">
6
- <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
7
- <img src="/images/menu.png" alt="Menu icon">
6
+ <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky" aria-label="Menu">
7
+ <%= partial "svgs/menu_icon" %>
8
8
  </a>
9
9
  <div class="js-menu-screen-refills refills-menu-screen"></div>
10
10
 
@@ -115,6 +115,13 @@ title: Refills
115
115
  <div class="refill-snippet"><%= code_for("maps") %></div>
116
116
  </section>
117
117
 
118
+ <section id="logo-section" class="refill">
119
+ <div class="refills-wrapper">
120
+ <div class="line-behind-text"><h6>Logo Section</h6></div>
121
+ <%= partial "logo_section" %>
122
+ </div>
123
+ </section>
124
+
118
125
  <section id="navigation" class="refill">
119
126
  <div class="refills-wrapper">
120
127
  <div class="line-behind-text"><h6>Navigation</h6></div>
data/source/javascripts/jquery.erToc.js CHANGED
@@ -323,11 +323,6 @@
323
323
  }
324
324
 
325
325
  top = $('<a href="#" class="' + base.options.goTopClass + '" title="' + text + '">' + text + '</a>');
326
- goTop.append(top);
327
- goTop.children('a.' + base.options.goTopClass).click(function() {
328
- base.$body.animate({scrollTop: (base.$topNode.offset().top - base.options.goTopBaseHeight)}, base.options.scrollSpeed);
329
- return false;
330
- });
331
326
  };
332
327
 
333
328
  /*
@@ -474,4 +469,4 @@
474
469
  });
475
470
  };
476
471
 
477
- })(jQuery);
472
+ })(jQuery);
data/source/javascripts/refills/accordion_base.js ADDED
@@ -0,0 +1,5 @@
1
+ $('.accordion-base-trigger').bind('click', function(e){
2
+ jQuery(this).parent().find('.submenu').slideToggle('fast'); // apply the toggle to the ul
3
+ jQuery(this).parent().toggleClass('is-expanded');
4
+ e.preventDefault();
5
+ });
data/source/javascripts/refills/accordion_tabs.js CHANGED
@@ -2,8 +2,7 @@ $(document).ready(function () {
2
2
  $('.accordion-tabs').each(function(index) {
3
3
  $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
4
4
  });
5
-
6
- $('.accordion-tabs').on('click', 'li > a', function(event) {
5
+ $('.accordion-tabs').on('click', 'li > a.tab-link', function(event) {
7
6
  if (!$(this).hasClass('is-active')) {
8
7
  event.preventDefault();
9
8
  var accordionTabs = $(this).closest('.accordion-tabs');
data/source/javascripts/refills/accordion_tabs_minimal.js CHANGED
@@ -2,8 +2,7 @@ $(document).ready(function () {
2
2
  $('.accordion-tabs-minimal').each(function(index) {
3
3
  $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
4
4
  });
5
-
6
- $('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
5
+ $('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
7
6
  if (!$(this).hasClass('is-active')) {
8
7
  event.preventDefault();
9
8
  var accordionTabs = $(this).closest('.accordion-tabs-minimal');
data/source/javascripts/refills/base-accordion.js ADDED
@@ -0,0 +1,5 @@
1
+ $('.base-accordion-trigger').bind('click', function(e){
2
+ jQuery(this).parent().find('.submenu').slideToggle('fast');
3
+ jQuery(this).parent().toggleClass('is-expanded');
4
+ e.preventDefault();
5
+ });
data/source/javascripts/refills/centered_navigation.js CHANGED
@@ -1,13 +1,31 @@
1
- $(document).ready(function() {
2
- var menuToggle = $('#js-centered-navigation-mobile-menu').unbind();
3
- $('#js-centered-navigation-menu').removeClass("show");
4
-
5
- menuToggle.on('click', function(e) {
1
+ $(window).on("load resize",function(e) {
2
+ var more = document.getElementById("js-centered-more");
3
+
4
+ if ($(more).length > 0) {
5
+ var windowWidth = $(window).width();
6
+ var moreLeftSideToPageLeftSide = $(more).offset().left;
7
+ var moreLeftSideToPageRightSide = windowWidth - moreLeftSideToPageLeftSide;
8
+
9
+ if (moreLeftSideToPageRightSide < 330) {
10
+ $("#js-centered-more .submenu .submenu").removeClass("fly-out-right");
11
+ $("#js-centered-more .submenu .submenu").addClass("fly-out-left");
12
+ }
13
+
14
+ if (moreLeftSideToPageRightSide > 330) {
15
+ $("#js-centered-more .submenu .submenu").removeClass("fly-out-left");
16
+ $("#js-centered-more .submenu .submenu").addClass("fly-out-right");
17
+ }
18
+ }
19
+
20
+ var menuToggle = $("#js-centered-navigation-mobile-menu").unbind();
21
+ $("#js-centered-navigation-menu").removeClass("show");
22
+
23
+ menuToggle.on("click", function(e) {
6
24
  e.preventDefault();
7
- $('#js-centered-navigation-menu').slideToggle(function(){
8
- if($('#js-centered-navigation-menu').is(':hidden')) {
9
- $('#js-centered-navigation-menu').removeAttr('style');
25
+ $("#js-centered-navigation-menu").slideToggle(function(){
26
+ if($("#js-centered-navigation-menu").is(":hidden")) {
27
+ $("#js-centered-navigation-menu").removeAttr("style");
10
28
  }
11
29
  });
12
30
  });
13
- });
31
+ });
data/source/javascripts/refills/coffeescript/accordion.coffee CHANGED
@@ -1,6 +1,5 @@
1
- $(".js-accordion-trigger").bind "click", (e) ->
2
- jQuery(this).parent().find(".submenu").slideToggle "fast" # apply the toggle to the ul
3
- jQuery(this).parent().toggleClass "is-expanded"
1
+ $('.js-accordion-trigger').bind 'click', (e) ->
2
+ jQuery(this).parent().find('.submenu').slideToggle 'fast'
3
+ jQuery(this).parent().toggleClass 'is-expanded'
4
4
  e.preventDefault()
5
5
  return
6
-
data/source/javascripts/refills/coffeescript/accordion_base.coffee ADDED
@@ -0,0 +1,6 @@
1
+ $('.accordion-base-trigger').bind 'click', (e) ->
2
+ jQuery(this).parent().find('.submenu').slideToggle 'fast'
3
+ # apply the toggle to the ul
4
+ jQuery(this).parent().toggleClass 'is-expanded'
5
+ e.preventDefault()
6
+ return
data/source/javascripts/refills/coffeescript/accordion_tabs.coffee CHANGED
@@ -1,19 +1,16 @@
1
1
  $(document).ready ->
2
- $(".accordion-tabs").each (index) ->
3
- $(this).children("li").first().children("a").addClass("is-active").next().addClass("is-open").show()
2
+ $('.accordion-tabs').each ->
3
+ $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show()
4
4
  return
5
-
6
- $(".accordion-tabs").on "click", "li > a", (event) ->
7
- unless $(this).hasClass("is-active")
5
+ $('.accordion-tabs').on 'click', 'li > a.tab-link', (event) ->
6
+ if !$(this).hasClass('is-active')
8
7
  event.preventDefault()
9
- accordionTabs = $(this).closest(".accordion-tabs")
10
- accordionTabs.find(".is-open").removeClass("is-open").hide()
11
- $(this).next().toggleClass("is-open").toggle()
12
- accordionTabs.find(".is-active").removeClass "is-active"
13
- $(this).addClass "is-active"
8
+ accordionTabs = $(this).closest('.accordion-tabs')
9
+ accordionTabs.find('.is-open').removeClass('is-open').hide()
10
+ $(this).next().toggleClass('is-open').toggle()
11
+ accordionTabs.find('.is-active').removeClass 'is-active'
12
+ $(this).addClass 'is-active'
14
13
  else
15
14
  event.preventDefault()
16
15
  return
17
-
18
16
  return
19
-
data/source/javascripts/refills/coffeescript/accordion_tabs_minimal.coffee CHANGED
@@ -1,19 +1,16 @@
1
1
  $(document).ready ->
2
- $(".accordion-tabs-minimal").each (index) ->
3
- $(this).children("li").first().children("a").addClass("is-active").next().addClass("is-open").show()
2
+ $('.accordion-tabs-minimal').each (index) ->
3
+ $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show()
4
4
  return
5
-
6
- $(".accordion-tabs-minimal").on "click", "li > a", (event) ->
7
- unless $(this).hasClass("is-active")
5
+ $('.accordion-tabs-minimal').on 'click', 'li > a.tab-link', (event) ->
6
+ if !$(this).hasClass('is-active')
8
7
  event.preventDefault()
9
- accordionTabs = $(this).closest(".accordion-tabs-minimal")
10
- accordionTabs.find(".is-open").removeClass("is-open").hide()
11
- $(this).next().toggleClass("is-open").toggle()
12
- accordionTabs.find(".is-active").removeClass "is-active"
13
- $(this).addClass "is-active"
8
+ accordionTabs = $(this).closest('.accordion-tabs-minimal')
9
+ accordionTabs.find('.is-open').removeClass('is-open').hide()
10
+ $(this).next().toggleClass('is-open').toggle()
11
+ accordionTabs.find('.is-active').removeClass 'is-active'
12
+ $(this).addClass 'is-active'
14
13
  else
15
14
  event.preventDefault()
16
15
  return
17
-
18
16
  return
19
-
data/source/javascripts/refills/coffeescript/animate.coffee CHANGED
@@ -1,12 +1,9 @@
1
1
  $ ->
2
- animationClasses = "animated alternate iteration zoomOut"
3
- animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"
4
- $(".animate-trigger").on "click", ->
5
- $(".animate-target").addClass(animationClasses).one animationEnd, ->
2
+ animationClasses = 'animated alternate iteration zoomOut'
3
+ animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
4
+ $('.animate-trigger').on 'click', ->
5
+ $('.animate-target').addClass(animationClasses).one animationEnd, ->
6
6
  $(this).removeClass animationClasses
7
7
  return
8
-
9
8
  return
10
-
11
9
  return
12
-
data/source/javascripts/refills/coffeescript/base-accordion.coffee ADDED
@@ -0,0 +1,5 @@
1
+ $('.base-accordion-trigger').bind 'click', (e) ->
2
+ jQuery(this).parent().find('.submenu').slideToggle 'fast'
3
+ jQuery(this).parent().toggleClass 'is-expanded'
4
+ e.preventDefault()
5
+ return
data/source/javascripts/refills/coffeescript/centered_navigation.coffee CHANGED
@@ -1,13 +1,11 @@
1
1
  $(document).ready ->
2
- menuToggle = $("#js-centered-navigation-mobile-menu").unbind()
3
- $("#js-centered-navigation-menu").removeClass "show"
4
- menuToggle.on "click", (e) ->
2
+ menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
3
+ $('#js-centered-navigation-menu').removeClass 'show'
4
+ menuToggle.on 'click', (e) ->
5
5
  e.preventDefault()
6
- $("#js-centered-navigation-menu").slideToggle ->
7
- $("#js-centered-navigation-menu").removeAttr "style" if $("#js-centered-navigation-menu").is(":hidden")
6
+ $('#js-centered-navigation-menu').slideToggle ->
7
+ if $('#js-centered-navigation-menu').is(':hidden')
8
+ $('#js-centered-navigation-menu').removeAttr 'style'
8
9
  return
9
-
10
10
  return
11
-
12
11
  return
13
-
data/source/javascripts/refills/coffeescript/dropdown.coffee CHANGED
@@ -1,15 +1,11 @@
1
1
  $(document).ready ->
2
2
  $(".dropdown-button").click ->
3
- $(".dropdown-menu").toggleClass "show-menu"
4
- $(".dropdown-menu > li").click ->
5
- $(".dropdown-menu").removeClass "show-menu"
3
+ $button = $(this)
4
+ $menu = $button.siblings(".dropdown-menu")
5
+ $menu.toggleClass "show-menu"
6
+ $menu.children("li").click ->
7
+ $menu.removeClass "show-menu"
8
+ $button.html $(this).html()
6
9
  return
7
-
8
- $(".dropdown-menu.dropdown-select > li").click ->
9
- $(".dropdown-button").html $(this).html()
10
- return
11
-
12
10
  return
13
-
14
11
  return
15
-