staple 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +8 -0
- data/Gemfile +13 -0
- data/LICENSE.md +23 -0
- data/README.md +51 -0
- data/Rakefile +0 -0
- data/config.rb +24 -0
- data/lib/snippet_helpers.rb +69 -0
- data/lib/staple/import_generator.rb +50 -0
- data/lib/staple/list_generator.rb +22 -0
- data/lib/staple.rb +2 -0
- data/source/CNAME +1 -0
- data/source/_accordion.html.erb +24 -0
- data/source/_accordion_tabs.html.erb +26 -0
- data/source/_accordion_tabs_minimal.html.erb +26 -0
- data/source/_badges.html.erb +7 -0
- data/source/_breadcrumbs.html.erb +7 -0
- data/source/_browser.html.erb +29 -0
- data/source/_button_group.html.erb +18 -0
- data/source/_cards.html.erb +59 -0
- data/source/_centered_navigation.html.erb +38 -0
- data/source/_code.html.erb +10 -0
- data/source/_comment.html.erb +21 -0
- data/source/_device.html.erb +10 -0
- data/source/_dropdown.html.erb +12 -0
- data/source/_expander.html.erb +6 -0
- data/source/_flashes.html.erb +15 -0
- data/source/_footer.html.erb +28 -0
- data/source/_footer_2.html.erb +33 -0
- data/source/_grid_items.html.erb +37 -0
- data/source/_grid_items_lines.html.erb +44 -0
- data/source/_hero.html.erb +11 -0
- data/source/_hover_tile_animation.html.erb +11 -0
- data/source/_icon_bullet_points.html.erb +30 -0
- data/source/_image_gradient_dynamic.html.erb +7 -0
- data/source/_intro_text.html.erb +6 -0
- data/source/_label_alerts.html.erb +5 -0
- data/source/_modal.html.erb +14 -0
- data/source/_navigation.html.erb +44 -0
- data/source/_pagination.html.erb +17 -0
- data/source/_progress_bar.html.erb +3 -0
- data/source/_progress_bar_indication.html.erb +5 -0
- data/source/_search_bar.html.erb +8 -0
- data/source/_search_tools.html.erb +58 -0
- data/source/_side_image.html.erb +10 -0
- data/source/_sliding_menu.html.erb +13 -0
- data/source/_snippet.html.erb +4 -0
- data/source/_switch.html.erb +4 -0
- data/source/_tables.html.erb +31 -0
- data/source/_tables_minimal.html.erb +31 -0
- data/source/_texture-legend.html.erb +24 -0
- data/source/_textures.html.erb +4 -0
- data/source/_tooltip.html.erb +6 -0
- data/source/_type_system_geometric.html.erb +18 -0
- data/source/_type_system_rounded.html.erb +18 -0
- data/source/_type_system_sans.html.erb +18 -0
- data/source/_type_system_serif.html.erb +19 -0
- data/source/_type_system_slab.html.erb +18 -0
- data/source/_type_system_traditional.html.erb +18 -0
- data/source/_vertical_tabs.html.erb +30 -0
- data/source/_video.html.erb +5 -0
- data/source/components.html.erb +174 -0
- data/source/index.html.erb +162 -0
- data/source/javascripts/all.js +11 -0
- data/source/javascripts/jquery.erToc.js +477 -0
- data/source/javascripts/jquery.glide.js +941 -0
- data/source/javascripts/staple/accordion.js +5 -0
- data/source/javascripts/staple/accordion_tabs.js +19 -0
- data/source/javascripts/staple/accordion_tabs_minimal.js +19 -0
- data/source/javascripts/staple/centered_navigation.js +14 -0
- data/source/javascripts/staple/dropdown.js +9 -0
- data/source/javascripts/staple/expander.js +53 -0
- data/source/javascripts/staple/navigation.js +23 -0
- data/source/javascripts/staple/search_tools.js +110 -0
- data/source/javascripts/staple/sliding_menu.js +13 -0
- data/source/javascripts/staple/vertical_tabs.js +32 -0
- data/source/layouts/layout.erb +1 -0
- data/source/refills-hero.html.erb +7 -0
- data/source/refills-menu.html.erb +5 -0
- data/source/refills-page-scripts.html.erb +66 -0
- data/source/stylesheets/_bourbon-nav.scss +86 -0
- data/source/stylesheets/_normalize.scss +425 -0
- data/source/stylesheets/_refills-nav.scss +102 -0
- data/source/stylesheets/_refills-styles.scss +543 -0
- data/source/stylesheets/all.scss +61 -0
- data/source/stylesheets/staple/_accordion-tabs-minimal.scss +60 -0
- data/source/stylesheets/staple/_accordion-tabs.scss +88 -0
- data/source/stylesheets/staple/_accordion.scss +55 -0
- data/source/stylesheets/staple/_badges.scss +44 -0
- data/source/stylesheets/staple/_breadcrumbs.scss +84 -0
- data/source/stylesheets/staple/_browser.scss +141 -0
- data/source/stylesheets/staple/_button-group.scss +81 -0
- data/source/stylesheets/staple/_cards.scss +132 -0
- data/source/stylesheets/staple/_centered-navigation.scss +251 -0
- data/source/stylesheets/staple/_comment.scss +60 -0
- data/source/stylesheets/staple/_device.scss +83 -0
- data/source/stylesheets/staple/_dropdown.scss +127 -0
- data/source/stylesheets/staple/_expander.scss +30 -0
- data/source/stylesheets/staple/_flashes.scss +29 -0
- data/source/stylesheets/staple/_footer-2.scss +117 -0
- data/source/stylesheets/staple/_footer.scss +76 -0
- data/source/stylesheets/staple/_grid-items-lines.scss +86 -0
- data/source/stylesheets/staple/_grid-items.scss +97 -0
- data/source/stylesheets/staple/_hero.scss +54 -0
- data/source/stylesheets/staple/_hover-tile-animation.scss +52 -0
- data/source/stylesheets/staple/_icon-bullet-points.scss +63 -0
- data/source/stylesheets/staple/_image-gradient-dynamic.scss +59 -0
- data/source/stylesheets/staple/_intro-text.scss +67 -0
- data/source/stylesheets/staple/_label-alerts.scss +11 -0
- data/source/stylesheets/staple/_modal.scss +147 -0
- data/source/stylesheets/staple/_navigation.scss +329 -0
- data/source/stylesheets/staple/_pagination.scss +51 -0
- data/source/stylesheets/staple/_progress-bar-indication.scss +39 -0
- data/source/stylesheets/staple/_progress-bar.scss +83 -0
- data/source/stylesheets/staple/_search-bar.scss +40 -0
- data/source/stylesheets/staple/_search-tools.scss +67 -0
- data/source/stylesheets/staple/_side-image.scss +59 -0
- data/source/stylesheets/staple/_sliding-menu.scss +63 -0
- data/source/stylesheets/staple/_switch.scss +77 -0
- data/source/stylesheets/staple/_tables-minimal.scss +60 -0
- data/source/stylesheets/staple/_tables.scss +88 -0
- data/source/stylesheets/staple/_texture-legend.scss +182 -0
- data/source/stylesheets/staple/_textures.scss +119 -0
- data/source/stylesheets/staple/_tooltip.scss +57 -0
- data/source/stylesheets/staple/_type-system-geometric.scss +103 -0
- data/source/stylesheets/staple/_type-system-rounded.scss +107 -0
- data/source/stylesheets/staple/_type-system-sans.scss +110 -0
- data/source/stylesheets/staple/_type-system-serif.scss +111 -0
- data/source/stylesheets/staple/_type-system-slab.scss +107 -0
- data/source/stylesheets/staple/_type-system-traditional.scss +114 -0
- data/source/stylesheets/staple/_vertical-tabs.scss +105 -0
- data/source/stylesheets/staple/_video.scss +21 -0
- data/source/type-systems.html.erb +67 -0
- data/source/vendor/javascripts/ZeroClipboard.min.js +9 -0
- data/source/vendor/javascripts/fixedsticky.js +185 -0
- data/source/vendor/javascripts/prism.js +13 -0
- data/source/vendor/javascripts/smooth-scroll.js +125 -0
- data/source/vendor/stylesheets/fixedsticky.css +22 -0
- data/source/vendor/stylesheets/prism.css +126 -0
- data/staple.gemspec +19 -0
- 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
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
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,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,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>
|