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
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 63b52e06b84953c304bc12c3900e468a7965c90b
4
+ data.tar.gz: 99f5ea3402eb3c8b394ac4dc1d29e788bf909cac
5
+ SHA512:
6
+ metadata.gz: 2580c7ec2c307534532590151853423b3e26aaf71dfb4b69b85fbec0f102dc22f7d0789566058ad3ef560161ed28f8f9f0dcac46854b934c73a7d7be3d78544a
7
+ data.tar.gz: 982e99d469ee635f5f4927248a06f4c9d659079b4cee1848aaa06f74960ada2692b784d4cc6e790993ffbdd1fa99efa363323a56f35fd20b5ef59b743933fb68
data/.gitignore ADDED
@@ -0,0 +1,8 @@
1
+ .bundle
2
+ .DS_Store
3
+ .sass-cache
4
+ build
5
+ Gemfile.lock
6
+ pkg
7
+ tmp/
8
+ *.gem
data/Gemfile ADDED
@@ -0,0 +1,13 @@
1
+ source 'http://rubygems.org'
2
+
3
+ gem 'foundation-rails' #rails g foundation:install
4
+ gem 'simple_form' #rails g simple_form:install --foundation
5
+ gem 'slim-rails'
6
+ gem "font-awesome-rails"
7
+
8
+
9
+ group :test do
10
+ gem 'rspec'
11
+ gem 'generator_spec'
12
+ gem 'railties'
13
+ end
data/LICENSE.md ADDED
@@ -0,0 +1,23 @@
1
+ LICENSE
2
+
3
+ The MIT License
4
+
5
+ Copyright © 2014 centerian, llc.
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the “Software”), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in
15
+ all copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,51 @@
1
+ #Staple - COMING SOON
2
+
3
+ CSS platform in the spirit of thoughtbot/refills. Built on top of foundation.
4
+
5
+ ##Install
6
+ ```ruby
7
+ #Gemfile
8
+ gem 'staple'
9
+ bundle install
10
+ ```
11
+
12
+ or
13
+
14
+ ```ruby
15
+ gem install 'staple'
16
+ ```
17
+
18
+ ##Simple, Universal Markup
19
+ ```slim
20
+ section.row
21
+ nav.columns.small-3
22
+ ul.side-nav
23
+ li
24
+ a href="#" Link 1
25
+ li
26
+ a href="#" Link 2
27
+ article.columns.small-9
28
+ h1 Article title
29
+ h5.subheader Subheader
30
+ p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
31
+ ```
32
+
33
+ ##Modify Overall, Modular Style With Commands
34
+ ```console
35
+ staple theme:Flat
36
+ ```
37
+
38
+ ```console
39
+ staple typeface_primary:HelveticaNeau
40
+ ```
41
+
42
+ ```console
43
+ staple typeface_secondary:ComicSans
44
+ ```
45
+
46
+ ```console
47
+ staple color_scheme:Flatland
48
+ ```
49
+
50
+ gem build staple.gemspec
51
+ gem push staple-0.0.1.gem
data/Rakefile ADDED
File without changes
data/config.rb ADDED
@@ -0,0 +1,24 @@
1
+
2
+ # require 'lib/snippet_helpers'
3
+
4
+ # activate :directory_indexes
5
+
6
+ # set :css_dir, 'stylesheets'
7
+ # set :images_dir, 'images'
8
+ # set :js_dir, 'javascripts'
9
+
10
+ # helpers SnippetHelpers
11
+
12
+ # ready do
13
+ # sprockets.append_path 'vendor/stylesheets'
14
+ # sprockets.append_path 'vendor/javascripts'
15
+ # end
16
+
17
+ # configure :development do
18
+ # activate :livereload
19
+ # end
20
+
21
+ # configure :build do
22
+ # activate :relative_assets
23
+ # set :relative_links, true
24
+ # end
@@ -0,0 +1,69 @@
1
+ module SnippetHelpers
2
+ SOURCE_DIR = File.expand_path('../../source', __FILE__)
3
+
4
+ class Snippet
5
+ def initialize(name)
6
+ @name = name
7
+ end
8
+
9
+ def path
10
+ File.join(*path_segments)
11
+ end
12
+
13
+ private
14
+
15
+ attr_reader :name
16
+ end
17
+
18
+ class HtmlSnippet < Snippet
19
+ def path_segments
20
+ [SOURCE_DIR, "_#{name.underscore}.html.erb"]
21
+ end
22
+
23
+ def language
24
+ :markup
25
+ end
26
+ end
27
+
28
+ class ScssSnippet < Snippet
29
+ def path_segments
30
+ [SOURCE_DIR, 'stylesheets', 'staple', "_#{name.dasherize}.scss"]
31
+ end
32
+
33
+ def language
34
+ :scss
35
+ end
36
+ end
37
+
38
+ class JavaScriptSnippet < Snippet
39
+ def path_segments
40
+ [SOURCE_DIR, 'javascripts', 'staple', "#{name.underscore}.js"]
41
+ end
42
+
43
+ def language
44
+ :javascript
45
+ end
46
+ end
47
+
48
+ def code_for(snippet_name)
49
+ partial 'code', locals: { snippets: snippets_for(snippet_name) }
50
+ end
51
+
52
+ private
53
+
54
+ def snippets_for(name)
55
+ [HtmlSnippet, ScssSnippet, JavaScriptSnippet].map do |snippet_factory|
56
+ snippet = snippet_factory.new(name)
57
+ render_snippet snippet.path, snippet.language
58
+ end.join("\n")
59
+ end
60
+
61
+ def render_snippet(path, language)
62
+ if File.exists?(path)
63
+ partial 'snippet', locals: {
64
+ snippet: File.read(path),
65
+ language: language,
66
+ }
67
+ end
68
+ end
69
+ end
@@ -0,0 +1,50 @@
1
+ require 'rails/generators'
2
+
3
+ module Staple
4
+ class ImportGenerator < Rails::Generators::Base
5
+ desc 'Copy refills'
6
+ source_root File.expand_path("../../../source", __FILE__)
7
+ argument :snippet, type: :string, required: true
8
+
9
+ def copy_html
10
+ copy_file_if_exists(
11
+ partial_name,
12
+ File.join('app', 'views', 'refills', partial_name),
13
+ )
14
+ end
15
+
16
+ def copy_styles
17
+ copy_file_if_exists(
18
+ File.join('stylesheets', 'refills', stylesheet_name),
19
+ File.join('app', 'assets', 'stylesheets', 'refills', stylesheet_name),
20
+ )
21
+ end
22
+
23
+ def copy_javascripts
24
+ copy_file_if_exists(
25
+ File.join('javascripts', 'refills', javascript_name),
26
+ File.join('app', 'assets', 'javascripts', 'refills', javascript_name),
27
+ )
28
+ end
29
+
30
+ private
31
+
32
+ def copy_file_if_exists(source, destination)
33
+ if File.exists?(File.join(self.class.source_root, source))
34
+ copy_file source, destination
35
+ end
36
+ end
37
+
38
+ def partial_name
39
+ "_#{snippet.underscore}.html.erb"
40
+ end
41
+
42
+ def stylesheet_name
43
+ "_#{snippet.dasherize}.scss"
44
+ end
45
+
46
+ def javascript_name
47
+ "#{snippet.underscore}.js"
48
+ end
49
+ end
50
+ end
@@ -0,0 +1,22 @@
1
+ require 'rails/generators'
2
+
3
+ module Staple
4
+ class ListGenerator < Rails::Generators::Base
5
+ desc 'List Available Staples'
6
+
7
+ def list
8
+ puts 'Available Staples'
9
+ puts '================='
10
+ stylesheets.each do |file_name|
11
+ puts '- ' + file_name.gsub(/_|\.scss/, '')
12
+ end
13
+ end
14
+
15
+ private
16
+ def stylesheets
17
+ refills_dir = File.expand_path('../../../source/stylesheets/staple', __FILE__)
18
+ stylesheets = Dir.entries(refills_dir)
19
+ stylesheets.reject {|f| f == '.' || f == '..' }
20
+ end
21
+ end
22
+ end
data/lib/staple.rb ADDED
@@ -0,0 +1,2 @@
1
+ require 'staple/import_generator'
2
+ require 'staple/list_generator'
data/source/CNAME ADDED
@@ -0,0 +1 @@
1
+ refills.bourbon.io
@@ -0,0 +1,24 @@
1
+ <ul class="accordion">
2
+ <li>
3
+ <a href="javascript:void(0)" class="js-accordion-trigger">Accordion Item</a>
4
+ <ul class="submenu">
5
+ <li>
6
+ <a href="javascript:void(0)">Sub Item 1</a>
7
+ </li>
8
+ <li>
9
+ <a href="javascript:void(0)">Sub Item 2</a>
10
+ </li>
11
+ </ul>
12
+ </li>
13
+ <li>
14
+ <a href="javascript:void(0)" class="js-accordion-trigger">Another Item</a>
15
+ <ul class="submenu">
16
+ <li>
17
+ <a href="javascript:void(0)">Sub Item 1</a>
18
+ </li>
19
+ <li>
20
+ <a href="javascript:void(0)">Sub Item 2</a>
21
+ </li>
22
+ </ul>
23
+ </li>
24
+ </ul>
@@ -0,0 +1,26 @@
1
+ <ul class="accordion-tabs">
2
+ <li class="tab-header-and-content">
3
+ <a href="#" class="is-active tab-link">Tab Item</a>
4
+ <div class="tab-content">
5
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
6
+ </div>
7
+ </li>
8
+ <li class="tab-header-and-content">
9
+ <a href="#" class="tab-link">Another Tab</a>
10
+ <div class="tab-content">
11
+ <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
12
+ </div>
13
+ </li>
14
+ <li class="tab-header-and-content">
15
+ <a href="#" class="tab-link">Third</a>
16
+ <div class="tab-content">
17
+ <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>
18
+ </div>
19
+ </li>
20
+ <li class="tab-header-and-content">
21
+ <a href="#" class="tab-link">Last Item</a>
22
+ <div class="tab-content">
23
+ <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p>
24
+ </div>
25
+ </li>
26
+ </ul>
@@ -0,0 +1,26 @@
1
+ <ul class="accordion-tabs-minimal">
2
+ <li class="tab-header-and-content">
3
+ <a href="#" class="tab-link is-active">Tab Item</a>
4
+ <div class="tab-content">
5
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
6
+ </div>
7
+ </li>
8
+ <li class="tab-header-and-content">
9
+ <a href="#" class="tab-link">Another Tab</a>
10
+ <div class="tab-content">
11
+ <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
12
+ </div>
13
+ </li>
14
+ <li class="tab-header-and-content">
15
+ <a href="#" class="tab-link">Third</a>
16
+ <div class="tab-content">
17
+ <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>
18
+ </div>
19
+ </li>
20
+ <li class="tab-header-and-content">
21
+ <a href="#" class="tab-link">Last Item</a>
22
+ <div class="tab-content">
23
+ <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p>
24
+ </div>
25
+ </li>
26
+ </ul>
@@ -0,0 +1,7 @@
1
+ <div class="badges">
2
+ <span class="badge">4</span>
3
+ <span class="badge dark">4</span>
4
+ <span class="badge error">4</span>
5
+ <span class="badge notice">4</span>
6
+ <span class="badge success">4</span>
7
+ </div>
@@ -0,0 +1,7 @@
1
+ <div class="breadcrumb">
2
+ <a href="javascript:void(0)">One</a>
3
+ <a href="javascript:void(0)">Two</a>
4
+ <a href="javascript:void(0)">Three</a>
5
+ <a href="javascript:void(0)">Four</a>
6
+ <a href="javascript:void(0)">Five</a>
7
+ </div>
@@ -0,0 +1,29 @@
1
+ <div class = "browsers">
2
+ <div class = "browser">
3
+ <div class="browser-top-bar">
4
+ <div class="browser-circle"></div>
5
+ <div class="browser-circle"></div>
6
+ <div class="browser-circle"></div>
7
+ </div>
8
+ <div class="browser-content"></div>
9
+ </div>
10
+ <div class = "browser">
11
+ <div class="browser-top-bar">
12
+ <div class="browser-circle"></div>
13
+ <div class="browser-circle"></div>
14
+ <div class="browser-circle"></div>
15
+ </div>
16
+ <div class="browser-content">
17
+ </div>
18
+ </div>
19
+ <div class = "browser">
20
+ <div class="browser-top-bar">
21
+ <div class="browser-circle"></div>
22
+ <div class="browser-circle"></div>
23
+ <div class="browser-circle"></div>
24
+ </div>
25
+ <div class="browser-content"></div>
26
+ </div>
27
+ </div>
28
+
29
+ <div class="cover"></div>
@@ -0,0 +1,18 @@
1
+ <div class="button-group">
2
+ <label>
3
+ <input type="radio" name="button-group" value="item" checked>
4
+ <span class="button-group-item">Item</span>
5
+ </label>
6
+ <label>
7
+ <input type="radio" name="button-group" value="other-item">
8
+ <span class="button-group-item">Other But Longer Item</span>
9
+ </label>
10
+ <label>
11
+ <input type="radio" name="button-group" value="other-item">
12
+ <span class="button-group-item">Third</span>
13
+ </label>
14
+ <label>
15
+ <input type="radio" name="button-group" value="third">
16
+ <span class="button-group-item">Last Item</span>
17
+ </label>
18
+ </div>
@@ -0,0 +1,59 @@
1
+ <div class="cards">
2
+ <div class="card">
3
+ <div class="card-image">
4
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt="">
5
+ </div>
6
+ <div class="card-header">
7
+ First Card
8
+ </div>
9
+ <div class="card-copy">
10
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
11
+ </div>
12
+ <div class="card-stats">
13
+ <ul>
14
+ <li>98<span>Items</span></li>
15
+ <li>298<span>Things</span></li>
16
+ <li>923<span>Objects</span></li>
17
+ </ul>
18
+ </div>
19
+ </div>
20
+
21
+ <div class="card">
22
+ <div class="ribbon-wrapper"><div class="ribbon">RIBBON</div></div>
23
+ <div class="card-image">
24
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-4.png" alt="">
25
+ </div>
26
+ <div class="card-header">
27
+ Another Card
28
+ </div>
29
+ <div class="card-copy">
30
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
31
+ </div>
32
+ <div class="card-stats">
33
+ <ul>
34
+ <li>98<span>Items</span></li>
35
+ <li>298<span>Things</span></li>
36
+ <li>923<span>Objects</span></li>
37
+ </ul>
38
+ </div>
39
+ </div>
40
+
41
+ <div class="card">
42
+ <div class="card-image">
43
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-3.png" alt="">
44
+ </div>
45
+ <div class="card-header">
46
+ The Last Card
47
+ </div>
48
+ <div class="card-copy">
49
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
50
+ </div>
51
+ <div class="card-stats">
52
+ <ul>
53
+ <li>98<span>Items</span></li>
54
+ <li>298<span>Things</span></li>
55
+ <li>923<span>Objects</span></li>
56
+ </ul>
57
+ </div>
58
+ </div>
59
+ </div>
@@ -0,0 +1,38 @@
1
+ <header class="centered-navigation">
2
+ <div class="centered-navigation-wrapper">
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">
5
+ </a>
6
+ <a href="" class="centered-navigation-menu-button">MENU</a>
7
+ <ul class="centered-navigation-menu">
8
+ <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
9
+ <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
10
+ <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
11
+ <li class="nav-link logo">
12
+ <a href="javascript:void(0)" class="logo">
13
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
14
+ </a>
15
+ </li>
16
+ <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
17
+ <li class="nav-link more"><a href="javascript:void(0)">More</a>
18
+ <ul class="submenu">
19
+ <li><a href="javascript:void(0)">Submenu Item</a></li>
20
+ <li><a href="javascript:void(0)">Another Item</a></li>
21
+ <li class="more"><a href="javascript:void(0)">Item with submenu</a>
22
+ <ul class="submenu">
23
+ <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
24
+ <li><a href="javascript:void(0)">Another Item</a></li>
25
+ </ul>
26
+ </li>
27
+ <li class="more"><a href="javascript:void(0)">Another submenu</a>
28
+ <ul class="submenu">
29
+ <li><a href="javascript:void(0)">Sub-submenu</a></li>
30
+ <li><a href="javascript:void(0)">An Item</a></li>
31
+ </ul>
32
+ </li>
33
+ </ul>
34
+ </li>
35
+ <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
36
+ </ul>
37
+ </div>
38
+ </header>
@@ -0,0 +1,10 @@
1
+ <div class="refill-control">
2
+ <a href="#" class="js-show-code">Show Code</a>
3
+ <a href="#" class="js-hide-code">Hide Code</a>
4
+ </div>
5
+
6
+ <table class="snippets-table">
7
+ <tr>
8
+ <%= snippets %>
9
+ </tr>
10
+ </table>
@@ -0,0 +1,21 @@
1
+ <div class="comment">
2
+ <div class="comment-image">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
4
+ </div>
5
+ <div class="comment-content">
6
+ <h1>First Comment Title or Author</h1>
7
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
8
+ <p class="comment-detail">Date or details about this post</p>
9
+ </div>
10
+ </div>
11
+
12
+ <div class="comment">
13
+ <div class="comment-image">
14
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="Logo image">
15
+ </div>
16
+ <div class="comment-content">
17
+ <h1>Another One</h1>
18
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
19
+ <p class="comment-detail">Date or details about this post</p>
20
+ </div>
21
+ </div>
@@ -0,0 +1,10 @@
1
+ <div class="device-background">
2
+ <div class="device-text">
3
+ <h4>Text about App or Device</h4>
4
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
5
+ <button>Learn More</button>
6
+ </div>
7
+ <div class="device">
8
+ <div class="screen"></div>
9
+ </div>
10
+ </div>
@@ -0,0 +1,12 @@
1
+ <div class="dropdown">
2
+ <div class="dropdown-container">
3
+ <p class="dropdown-description">Description</p>
4
+ <p class="dropdown-button">Click to Select</p>
5
+ <ul class="menu">
6
+ <li>Dropdown Menu Item</li>
7
+ <li>Another Item</li>
8
+ <li>Item Three</li>
9
+ <li>The Last One</li>
10
+ </ul>
11
+ </div>
12
+ </div>
@@ -0,0 +1,6 @@
1
+ <div class="expander">
2
+ <a href="javascript:void(0)" class="expander-toggle">Expandable section</a>
3
+ <div class="expander-content">
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
+ </div>
6
+ </div>
@@ -0,0 +1,15 @@
1
+ <div class="flash-success">
2
+ <span>This is a success message <a href="#">with a link</a></span>
3
+ </div>
4
+
5
+ <div class="flash-error">
6
+ <span>This is an error message <a href="#">with a link</a></span>
7
+ </div>
8
+
9
+ <div class="flash-notice">
10
+ <span>This is an notice message <a href="#">with a link</a></span>
11
+ </div>
12
+
13
+ <div class="flash-alert">
14
+ <span>This is an alert message <a href="#">with a link</a></span>
15
+ </div>
@@ -0,0 +1,28 @@
1
+ <footer class="footer">
2
+ <div class="footer-logo">
3
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
4
+ </div>
5
+ <div class="footer-links">
6
+ <ul>
7
+ <li><h3>Content</h3></li>
8
+ <li><a href="javascript:void(0)">About</a></li>
9
+ <li><a href="javascript:void(0)">Contact</a></li>
10
+ <li><a href="javascript:void(0)">Products</a></li>
11
+ </ul>
12
+ <ul>
13
+ <li><h3>Follow Us</h3></li>
14
+ <li><a href="javascript:void(0)">Facebook</a></li>
15
+ <li><a href="javascript:void(0)">Twitter</a></li>
16
+ <li><a href="javascript:void(0)">YouTube</a></li>
17
+ </ul>
18
+ <ul>
19
+ <li><h3>Legal</h3></li>
20
+ <li><a href="javascript:void(0)">Terms and Conditions</a></li>
21
+ <li><a href="javascript:void(0)">Privacy Policy</a></li>
22
+ </ul>
23
+ </div>
24
+
25
+ <hr>
26
+
27
+ <p>Disclaimer area lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, nostrum repudiandae saepe.</p>
28
+ </footer>