From 083f7186e26ae23389f3ce9fcb0db194ee762c6f Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Freeman <jeffrey.freeman@syncleus.com> Date: Tue, 29 Nov 2016 20:09:53 -0500 Subject: [PATCH] Reworked the menu generation. --- .gitignore | 2 + Gemfile | 1 + Gemfile.lock | 5 + config.rb | 145 +++++++++------- source/index.html.haml | 2 +- source/introduction/getting-started.html.haml | 4 + source/javascripts/search.js | 2 +- source/layout.html.haml | 49 ++---- .../patterns/components/alerts/default.html | 20 --- .../components/alerts/link-color.html | 20 --- .../progress/contextual-alternatives.html | 12 -- .../patterns/components/progress/default.html | 13 -- .../patterns/components/progress/striped.html | 14 -- source/patterns/elements/buttons/default.html | 25 --- .../patterns/elements/buttons/disabled.html | 8 - source/patterns/elements/buttons/outline.html | 16 -- source/patterns/elements/buttons/sizes.html | 12 -- .../elements/colors/color-palette.html | 155 ------------------ .../elements/typography/blockquotes.html | 8 - .../typography/customizing-headings.html | 9 - .../elements/typography/headings.html | 11 -- .../typography/inline-text-elements.html | 13 -- source/patterns/elements/typography/lead.html | 8 - source/template.html.haml | 32 ---- 24 files changed, 110 insertions(+), 476 deletions(-) create mode 100644 source/introduction/getting-started.html.haml delete mode 100644 source/patterns/components/alerts/default.html delete mode 100644 source/patterns/components/alerts/link-color.html delete mode 100644 source/patterns/components/progress/contextual-alternatives.html delete mode 100644 source/patterns/components/progress/default.html delete mode 100644 source/patterns/components/progress/striped.html delete mode 100644 source/patterns/elements/buttons/default.html delete mode 100644 source/patterns/elements/buttons/disabled.html delete mode 100644 source/patterns/elements/buttons/outline.html delete mode 100644 source/patterns/elements/buttons/sizes.html delete mode 100644 source/patterns/elements/colors/color-palette.html delete mode 100644 source/patterns/elements/typography/blockquotes.html delete mode 100644 source/patterns/elements/typography/customizing-headings.html delete mode 100644 source/patterns/elements/typography/headings.html delete mode 100644 source/patterns/elements/typography/inline-text-elements.html delete mode 100644 source/patterns/elements/typography/lead.html delete mode 100644 source/template.html.haml diff --git a/.gitignore b/.gitignore index a39026a..b7d6aa0 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ #bower components components/ +#navtree autogenerated folders +data/ diff --git a/Gemfile b/Gemfile index 8dc872d..0cfc7d9 100644 --- a/Gemfile +++ b/Gemfile @@ -13,6 +13,7 @@ gem 'middleman-livereload' gem 'middleman', '~> 4.0' gem 'middleman-sprockets', '~> 4.0.0' gem 'middleman-syntax', '~> 3.0.0' +gem 'middleman-navtree' # Markdown parser: gem 'redcarpet', '~> 3.3.4' diff --git a/Gemfile.lock b/Gemfile.lock index e3cd91e..cca6d8b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -77,6 +77,9 @@ GEM em-websocket (~> 0.5.1) middleman-core (>= 3.3) rack-livereload (~> 0.3.15) + middleman-navtree (0.1.11) + middleman-core (>= 3.3) + titleize (~> 1.3) middleman-sprockets (4.0.0) middleman-core (~> 4.0) sprockets (>= 3.0) @@ -108,6 +111,7 @@ GEM thor (0.19.4) thread_safe (0.3.5) tilt (2.0.5) + titleize (1.4.1) tzinfo (1.2.2) thread_safe (~> 0.1) uglifier (3.0.3) @@ -119,6 +123,7 @@ PLATFORMS DEPENDENCIES middleman (~> 4.0) middleman-livereload + middleman-navtree middleman-sprockets (~> 4.0.0) middleman-syntax (~> 3.0.0) redcarpet (~> 3.3.4) diff --git a/config.rb b/config.rb index 8cee11f..b9676ff 100644 --- a/config.rb +++ b/config.rb @@ -1,29 +1,3 @@ -patterns = resources.each_with_object({}) do |resource, result| - next unless resource.path.start_with?('patterns/') - - resource.path =~ /^patterns\/(.+)\/(.+)\/.+$/ - foldername = $1.downcase.parameterize - filename = $2.downcase.parameterize - path = "#{foldername}/#{filename}".to_sym - - result[path] ||= [] - result[path] << OpenStruct.new( - { - category: foldername.capitalize, - subcategory: filename.capitalize, - link: "/patterns/#{path}.html", - body: resource.render - }.merge(resource.data) - ) -end - -patterns.each do |path, patterns| - proxy "/patterns/#{path}.html", '/template.html', - locals: { patterns: patterns } -end - -collection :patterns, patterns - ### # Page options, layouts, aliases and proxies ### @@ -45,67 +19,112 @@ page '/*.txt', layout: false # General configuration # Reload the browser automatically whenever files change configure :development do - activate :livereload + activate :livereload end # Middleman-Sprockets - https://github.com/middleman/middleman-sprockets activate :sprockets # Middleman-Syntax - https://github.com/middleman/middleman-syntax -set :haml, { :ugly => false, :format => :html5 } +set :haml, {:ugly => false, :format => :html5} set :markdown_engine, :redcarpet set :markdown, fenced_code_blocks: true, smartypants: true, footnotes: true, - link_attributes: { rel: 'nofollow' }, tables: true + link_attributes: {rel: 'nofollow'}, tables: true activate :syntax +activate :navtree + ### # Helpers ### # Methods defined in the helpers block are available in templates helpers do - def navigation - navigation = {} - collection(:patterns).values.flatten.each do |pattern| - key = pattern.category - navigation[key] ||= [] - options = OpenStruct.new({ - name: pattern.subcategory, - link: pattern.link - }) - navigation[key] << options unless navigation[key].include?(options) + + def navigation(value, depth = Float::INFINITY, key = nil, level = 0) + html = '' + + if value.is_a?(String) + # This is a file. + # Get the Sitemap resource for this file. + # note: sitemap.extensionless_path converts the path to its 'post-build' extension. + + # Make sure the extension path ends with .html (in case we're parsing someting like .adoc) + extensionlessPath = sitemap.extensionless_path(value) + unless extensionlessPath.end_with? ".html" + extensionlessPath << ".html" + end + + this_resource = sitemap.find_resource_by_path(extensionlessPath) + if this_resource + # Define string for active states. + active = this_resource == current_page ? 'active' : '' + title = discover_title(this_resource) + link = link_to(title, this_resource) + html << "<li class='no-padding #{active}'>" + html << "<ul class='collapsible collapsible-accordion'>" + html << "<li class='bold'>" + html << "#{link}" + html << "</li></ul></li>" + # html << "<li class='child #{active}'>#{link}</li>" + end + else + # This is the first level source directory. We treat it special because + # it has no key and needs no list item. + if key.nil? + value.each do |newkey, child| + html << navigation(child, depth, newkey, level + 1) + end + # Continue rendering deeper levels of the tree, unless restricted by depth. + elsif depth >= (level + 1) + # This is a directory. + # The directory has a key and should be listed in the page hieararcy with HTML. + dir_name = format_directory_name(key) + html << "<li class='no-padding #{active}'>" + html << "<ul class='collapsible collapsible-accordion'>" + html << "<li class='bold'>" + html << "<a class='collapsible-header waves-effect waves-teal'>" + html << "#{dir_name}" + html << "</a>" + html << "<div class='collapsible-body'>" + html << "<ul>" + + # Loop through all the directory's contents. + value.each do |newkey, child| + html << navigation(child, depth, newkey, level + 1) + end + html << "</ul></div></li></ul></li>" + end + end + return html end - navigation - end - - def page_title - if current_page.data.title.present? - current_page.data.title - else - current_page.locals[:patterns].first.subcategory + + def page_title + if current_page.data.title.present? + current_page.data.title + end end - end end # Add bower's directory to sprockets asset path after_configuration do - @bower_config = JSON.parse(IO.read("#{root}/.bowerrc")) - sprockets.append_path File.join "#{root}", @bower_config["directory"] + @bower_config = JSON.parse(IO.read("#{root}/.bowerrc")) + sprockets.append_path File.join "#{root}", @bower_config["directory"] end # Build-specific configuration configure :build do - - # Minify CSS on build - # activate :minify_css - - # Minify Javascript on build - # activate :minify_javascript - - # Use relative URLs - # activate :relative_assets - # set :relative_links, true - - # Ignoring Files - ignore '/template.html' + + # Minify CSS on build + # activate :minify_css + + # Minify Javascript on build + # activate :minify_javascript + + # Use relative URLs + # activate :relative_assets + # set :relative_links, true + + # Ignoring Files + ignore '/template.html' end diff --git a/source/index.html.haml b/source/index.html.haml index be925b2..6e2455c 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -3,7 +3,7 @@ title: Overview --- - content_for :additional_header do .row.center - %a#download-button.btn-large.waves-effect.waves-light{:href => "http://materializecss.com/getting-started.html"} Get Started + %a#download-button.btn-large.waves-effect.waves-light{:href => "http://materializecss.com/getting-started.html.haml"} Get Started .row.center %a.red-text.text-lighten-4{:href => "https://github.com/Syncleus/aparapi"} beta release v1.0.0 .buysellads-header.buysellads-homepage.row.center diff --git a/source/introduction/getting-started.html.haml b/source/introduction/getting-started.html.haml new file mode 100644 index 0000000..5c9e521 --- /dev/null +++ b/source/introduction/getting-started.html.haml @@ -0,0 +1,4 @@ +--- +title: Getting Started +--- +<div>Hello World!</div> diff --git a/source/javascripts/search.js b/source/javascripts/search.js index 965648f..e414e76 100644 --- a/source/javascripts/search.js +++ b/source/javascripts/search.js @@ -98,7 +98,7 @@ }); window.index.add({ - href: 'http://materializecss.com/getting-started.html', + href: 'http://materializecss.com/getting-started.html.haml', title: 'Getting Started', body: 'Learn how to easily start using Materialize in your website.' }); diff --git a/source/layout.html.haml b/source/layout.html.haml index 09a434c..4f57734 100644 --- a/source/layout.html.haml +++ b/source/layout.html.haml @@ -9,15 +9,15 @@ %title Aparapi | #{page_title} / Favicons - %link{:href => "images/favicon/apple-touch-icon-152x152.png", :rel => "apple-touch-icon-precomposed"}/ + %link{:href => "/images/favicon/apple-touch-icon-152x152.png", :rel => "apple-touch-icon-precomposed"}/ %meta{:content => "#FFFFFF", :name => "msapplication-TileColor"}/ - %meta{:content => "images/favicon/mstile-144x144.png", :name => "msapplication-TileImage"}/ - %link{:href => "images/favicon/favicon-32x32.png", :rel => "icon", :sizes => "32x32"}/ + %meta{:content => "/images/favicon/mstile-144x144.png", :name => "msapplication-TileImage"}/ + %link{:href => "/images/favicon/favicon-32x32.png", :rel => "icon", :sizes => "32x32"}/ / Android 5 Chrome Color %meta{:content => "#EE6E73", :name => "theme-color"}/ / CSS - %link{:href => "stylesheets/prism.css", :rel => "stylesheet"}/ - %link{:href => "stylesheets/ghpages-materialize.css", :media => "screen,projection", :rel => "stylesheet", :type => "text/css"}/ + %link{:href => "/stylesheets/prism.css", :rel => "stylesheet"}/ + %link{:href => "/stylesheets/ghpages-materialize.css", :media => "screen,projection", :rel => "stylesheet", :type => "text/css"}/ %link{:href => "http://fonts.googleapis.com/css?family=Inconsolata", :rel => "stylesheet", :type => "text/css"}/ %link{:href => "http://fonts.googleapis.com/icon?family=Material+Icons", :rel => "stylesheet"}/ %body @@ -28,38 +28,17 @@ %ul#nav-mobile.side-nav.fixed %li.logo %a#logo-container.brand-logo{:href => "http://materializecss.com/"} - %object#front-page-logo{:data => "images/logo.svg", :type => "image/svg+xml"} Your browser does not support SVG + %object#front-page-logo{:data => "/images/logo.svg", :type => "image/svg+xml"} Your browser does not support SVG %li.search .search-wrapper.card %input#search/ %i.material-icons search .search-results - %li.no-padding - %ul.collapsible.collapsible-accordion - %li.bold - %a.waves-effect.waves-teal - = link_to 'Overview', '/index.html' - - - navigation.each_with_index do |(category, subcategories), index| - %li.no-padding - %ul.collapsible.collapsible-accordion - %li.bold - %a.collapsible-header.waves-effect.waves-teal - = category - .collapsible-body - %ul - - subcategories.each do |subcategory| - %li - = link_to subcategory[:name], subcategory.link, | - class: 'mdl-navigation__link', - data: { title: subcategory.name } - - unless index == navigation.size - 1 - %li - %div.divider + = navigation(data.tree) %main #index-banner.section.no-pad-bot .container - %h1.header.center-on-small-only Aparapi + %h1.header.center-on-small-only #{page_title} .row.center %h4.header.col.s12.light.center Open-source framework for executing native Java code on the GPU. = yield_content(:additional_header) if content_for?(:additional_header) @@ -96,12 +75,12 @@ %script{:src => "https://code.jquery.com/jquery-2.1.4.min.js"} :javascript if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); } - %script{:src => "javascripts/jquery.timeago.js"} - %script{:src => "javascripts/prism.js"} - %script{:src => "javascripts/lunr.min.js"} - %script{:src => "javascripts/search.js"} - %script{:src => "javascripts/materialize.js"} - %script{:src => "javascripts/init.js"} + %script{:src => "/javascripts/jquery.timeago.js"} + %script{:src => "/javascripts/prism.js"} + %script{:src => "/javascripts/lunr.min.js"} + %script{:src => "/javascripts/search.js"} + %script{:src => "/javascripts/materialize.js"} + %script{:src => "/javascripts/init.js"} / Twitter Button :javascript !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); diff --git a/source/patterns/components/alerts/default.html b/source/patterns/components/alerts/default.html deleted file mode 100644 index 59b15e9..0000000 --- a/source/patterns/components/alerts/default.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Default -description: "Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success)." ---- - -<div class="alert alert-success" role="alert"> - <strong>Well done!</strong> You successfully read this important alert message. -</div> - -<div class="alert alert-info" role="alert"> - <strong>Heads up!</strong> This alert needs your attention, but it's not super important. -</div> - -<div class="alert alert-warning" role="alert"> - <strong>Warning!</strong> Better check yourself, you're not looking too good. -</div> - -<div class="alert alert-danger" role="alert"> - <strong>Oh snap!</strong> Change a few things up and try submitting again. -</div> diff --git a/source/patterns/components/alerts/link-color.html b/source/patterns/components/alerts/link-color.html deleted file mode 100644 index ae9ad9e..0000000 --- a/source/patterns/components/alerts/link-color.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Link color -description: Use the .alert-link utility class to quickly provide matching colored links within any alert. ---- - -<div class="alert alert-success" role="alert"> - <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. -</div> - -<div class="alert alert-info" role="alert"> - <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. -</div> - -<div class="alert alert-warning" role="alert"> - <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>. -</div> - -<div class="alert alert-danger" role="alert"> - <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. -</div> diff --git a/source/patterns/components/progress/contextual-alternatives.html b/source/patterns/components/progress/contextual-alternatives.html deleted file mode 100644 index 67f52b0..0000000 --- a/source/patterns/components/progress/contextual-alternatives.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Contextual alternatives -description: Progress bars use some of the same button and alert classes for consistent styles. ---- - -<progress class="progress progress-success" value="25" max="100">25%</progress> - -<progress class="progress progress-info" value="50" max="100">50%</progress> - -<progress class="progress progress-warning" value="75" max="100">75%</progress> - -<progress class="progress progress-danger" value="100" max="100">100%</progress> diff --git a/source/patterns/components/progress/default.html b/source/patterns/components/progress/default.html deleted file mode 100644 index 7599a43..0000000 --- a/source/patterns/components/progress/default.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Default ---- - -<progress class="progress" value="0" max="100">0%</progress> - -<progress class="progress" value="25" max="100">25%</progress> - -<progress class="progress" value="50" max="100">50%</progress> - -<progress class="progress" value="75" max="100">75%</progress> - -<progress class="progress" value="100" max="100">100%</progress> diff --git a/source/patterns/components/progress/striped.html b/source/patterns/components/progress/striped.html deleted file mode 100644 index fc56845..0000000 --- a/source/patterns/components/progress/striped.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Striped -description: Uses a gradient to create a striped effect. ---- - -<progress class="progress progress-striped" value="10" max="100">10%</progress> - -<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress> - -<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress> - -<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress> - -<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress> diff --git a/source/patterns/elements/buttons/default.html b/source/patterns/elements/buttons/default.html deleted file mode 100644 index 9991d53..0000000 --- a/source/patterns/elements/buttons/default.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Default -description: Bootstrap includes six predefined button styles, each serving its own semantic purpose. ---- - -<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> -<button type="button" class="btn btn-primary">Primary</button> - -<!-- Secondary, outline button --> -<button type="button" class="btn btn-secondary">Secondary</button> - -<!-- Indicates a successful or positive action --> -<button type="button" class="btn btn-success">Success</button> - -<!-- Contextual button for informational alert messages --> -<button type="button" class="btn btn-info">Info</button> - -<!-- Indicates caution should be taken with this action --> -<button type="button" class="btn btn-warning">Warning</button> - -<!-- Indicates a dangerous or potentially negative action --> -<button type="button" class="btn btn-danger">Danger</button> - -<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> -<button type="button" class="btn btn-link">Link</button> diff --git a/source/patterns/elements/buttons/disabled.html b/source/patterns/elements/buttons/disabled.html deleted file mode 100644 index 5cd93bb..0000000 --- a/source/patterns/elements/buttons/disabled.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Disabled state -description: Make buttons look inactive by adding the disabled boolean attribute to any <button> element. ---- - -<button type="button" class="btn btn-primary" disabled>Primary button</button> - -<button type="button" class="btn btn-secondary" disabled>Button</button> diff --git a/source/patterns/elements/buttons/outline.html b/source/patterns/elements/buttons/outline.html deleted file mode 100644 index abb8f1b..0000000 --- a/source/patterns/elements/buttons/outline.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Outline buttons -description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline ones to remove all background images and colors on any button. ---- - -<button type="button" class="btn btn-outline-primary">Primary</button> - -<button type="button" class="btn btn-outline-secondary">Secondary</button> - -<button type="button" class="btn btn-outline-success">Success</button> - -<button type="button" class="btn btn-outline-info">Info</button> - -<button type="button" class="btn btn-outline-warning">Warning</button> - -<button type="button" class="btn btn-outline-danger">Danger</button> diff --git a/source/patterns/elements/buttons/sizes.html b/source/patterns/elements/buttons/sizes.html deleted file mode 100644 index bc9bf1f..0000000 --- a/source/patterns/elements/buttons/sizes.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Sizes -description: Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes. ---- - -<button type="button" class="btn btn-primary btn-lg">Large button</button> - -<button type="button" class="btn btn-secondary btn-lg">Large button</button> - -<button type="button" class="btn btn-primary btn-sm">Small button</button> - -<button type="button" class="btn btn-secondary btn-sm">Small button</button> diff --git a/source/patterns/elements/colors/color-palette.html b/source/patterns/elements/colors/color-palette.html deleted file mode 100644 index bfa265e..0000000 --- a/source/patterns/elements/colors/color-palette.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Color palette -description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -show_code: false -use_source: false ---- - -<div class="mpl-color-palette"> - <div class="mdl-card mdl-shadow--2dp" style="background-color: #F44336;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Red</h2> - </div> - <div class="mdl-card__menu">#F44336</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #E91E63;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Pink</h2> - </div> - <div class="mdl-card__menu">#E91E63</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #9C27B0;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Purple</h2> - </div> - <div class="mdl-card__menu">#9C27B0</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #673AB7;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Deep Purple</h2> - </div> - <div class="mdl-card__menu">#673AB7</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #3F51B5;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Indigo</h2> - </div> - <div class="mdl-card__menu">#3F51B5</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #2196F3;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Blue</h2> - </div> - <div class="mdl-card__menu">#2196F3</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #03A9F4;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Light Blue</h2> - </div> - <div class="mdl-card__menu">#03A9F4</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #00BCD4;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Cyan</h2> - </div> - <div class="mdl-card__menu">#00BCD4</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #009688;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Teal</h2> - </div> - <div class="mdl-card__menu">#009688</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #4CAF50;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Green</h2> - </div> - <div class="mdl-card__menu">#4CAF50</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #8BC34A;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Light Green</h2> - </div> - <div class="mdl-card__menu">#8BC34A</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #CDDC39;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Lime</h2> - </div> - <div class="mdl-card__menu">#CDDC39</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFEB3B;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Yellow</h2> - </div> - <div class="mdl-card__menu">#FFEB3B</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFC107;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Amber</h2> - </div> - <div class="mdl-card__menu">#FFC107</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #FF9800;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Orange</h2> - </div> - <div class="mdl-card__menu">#FF9800</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #FF5722;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Deep Orange</h2> - </div> - <div class="mdl-card__menu">#FF5722</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #795548;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Brown</h2> - </div> - <div class="mdl-card__menu">#795548</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #9E9E9E;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Grey</h2> - </div> - <div class="mdl-card__menu">#9E9E9E</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #607D8B;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Blue Grey</h2> - </div> - <div class="mdl-card__menu">#607D8B</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #000000;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">Black</h2> - </div> - <div class="mdl-card__menu">#000000</div> - </div> - - <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFFFFF;"> - <div class="mdl-card__title mdl-card--expand"> - <h2 class="mdl-card__title-text">White</h2> - </div> - <div class="mdl-card__menu">#FFFFFF</div> - </div> -</div> diff --git a/source/patterns/elements/typography/blockquotes.html b/source/patterns/elements/typography/blockquotes.html deleted file mode 100644 index 41cb62e..0000000 --- a/source/patterns/elements/typography/blockquotes.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Blockquotes -description: For quoting blocks of content from another source within your document. ---- - -<blockquote class="blockquote"> - <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> -</blockquote> diff --git a/source/patterns/elements/typography/customizing-headings.html b/source/patterns/elements/typography/customizing-headings.html deleted file mode 100644 index 0a69e44..0000000 --- a/source/patterns/elements/typography/customizing-headings.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Customizing headings -description: Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. ---- - -<h3> - Fancy display heading - <small class="text-muted">With faded secondary text</small> -</h3> diff --git a/source/patterns/elements/typography/headings.html b/source/patterns/elements/typography/headings.html deleted file mode 100644 index c0bcc1c..0000000 --- a/source/patterns/elements/typography/headings.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Headings -description: All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. ---- - -<h1>Heading 1</h1> -<h2>Heading 2</h2> -<h3>Heading 3</h3> -<h4>Heading 4</h4> -<h5>Heading 5</h5> -<h6>Heading 6</h6> diff --git a/source/patterns/elements/typography/inline-text-elements.html b/source/patterns/elements/typography/inline-text-elements.html deleted file mode 100644 index 71d406f..0000000 --- a/source/patterns/elements/typography/inline-text-elements.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Inline text elements -description: Styling for common inline HTML5 elements. ---- - -<p>You can use the mark tag to <mark>highlight</mark> text.</p> -<p><del>This line of text is meant to be treated as deleted text.</del></p> -<p><s>This line of text is meant to be treated as no longer accurate.</s></p> -<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> -<p><u>This line of text will render as underlined</u></p> -<p><small>This line of text is meant to be treated as fine print.</small></p> -<p><strong>This line rendered as bold text.</strong></p> -<p><em>This line rendered as italicized text.</em></p> diff --git a/source/patterns/elements/typography/lead.html b/source/patterns/elements/typography/lead.html deleted file mode 100644 index 044f0f2..0000000 --- a/source/patterns/elements/typography/lead.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Lead -description: Make a paragraph stand out by adding .lead. ---- - -<p class="lead"> - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. -</p> diff --git a/source/template.html.haml b/source/template.html.haml deleted file mode 100644 index a8c9a75..0000000 --- a/source/template.html.haml +++ /dev/null @@ -1,32 +0,0 @@ -- if patterns.size > 1 - - content_for :tab_navigation do - .mdl-layout__tab-bar.mdl-js-ripple-effect - - patterns.each_with_index do |pattern, index| - - css_class = %w(mdl-layout__tab) - - css_class << 'is-active' if index == 0 - %a{:class => css_class.join(' '), :href => "#tab-#{pattern.title.parameterize}"} - = pattern.title -- patterns.each_with_index do |pattern, index| - - css_class = %w(mdl-layout__tab-panel) - - css_class << 'is-active' if index == 0 - %section{:class => css_class.join(' '), :id => "tab-#{pattern.title.parameterize}"} - .page-content - .mpl-card-pattern.mdl-card.mdl-shadow--2dp - .mdl-card__title.mdl-card--expand - %h2.mdl-card__title-text - = pattern.title - .mdl-card__supporting-text - - if pattern.description.present? - = pattern.description - %hr/ - .mpl-layout__source - - if pattern.use_source == false - = pattern.body - - else - %div{"data-iframe" => ""} - = pattern.body - = stylesheet_link_tag 'base' - = javascript_include_tag 'base' - - if pattern.show_code != false - %hr/ - = code('html') { pattern.body } \ No newline at end of file -- GitLab