bootstrap_styleguide 0.1.0

data/app/views/bootstrap_styleguide/utilities/borders.html.erb

@@ -0,0 +1,67 @@
+<h1 id="content">Borders</h1>
+<p class="bd-lead">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
+
+<h2>Additive</h2>
+
+<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
+
+<%= example_with_code do %>
+  <div class="border d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border-top d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border-end d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border-bottom d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border-start d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+<% end %>
+
+<h2>Subtractive</h2>
+
+<%= example_with_code do %>
+  <div class="border border-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-top-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-end-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-bottom-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-start-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+<% end %>
+
+<h2>Border color</h2>
+<p>Change the border color using utilities built on our theme colors.</p>
+
+<%= example_with_code do %>
+  <div class="border d-inline-block bg-light border-primary" style="height: 50px; width: 50px"></div>
+  <div class="border-top d-inline-block bg-light border-secondary" style="height: 50px; width: 50px"></div>
+  <div class="border-end d-inline-block bg-light border-success" style="height: 50px; width: 50px"></div>
+  <div class="border-bottom d-inline-block bg-light border-danger" style="height: 50px; width: 50px"></div>
+  <div class="border-start d-inline-block bg-light border-warning" style="height: 50px; width: 50px"></div>
+<% end %>
+
+<h2>Border width</h2>
+
+<%= example_with_code do %>
+  <div class="border border-1 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-2 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-3 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-4 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="border border-5 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+<% end %>
+
+<h2>Border radius</h2>
+<p>Add classes to an element to easily round its corners.</p>
+<%= example_with_code do %>
+  <div class="rounded d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-top d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-end d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-bottom d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-start d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-circle d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-pill d-inline-block bg-light" style="height: 50px; width: 100px"></div>
+<% end %>
+
+<h3>Sizes</h3>
+<p>Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API.</p>
+
+<%= example_with_code do %>
+  <div class="rounded-0 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-1 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-2 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+  <div class="rounded-3 d-inline-block bg-light" style="height: 50px; width: 50px"></div>
+<% end %>

data/app/views/bootstrap_styleguide/utilities/colors.html.erb

@@ -0,0 +1,26 @@
+<h2>Theme colors</h2>
+<p>Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
+
+<div class="row mt-4">
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-primary text-white">Primary</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-success text-white">Success</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-warning text-white">Warning</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-info text-white">Info</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-light text-dark">Light</div>
+  </div>
+  <div class="col-md-4">
+    <div class="p-3 mb-3 bg-dark text-white">Dark</div>
+  </div>
+</div>

data/app/views/bootstrap_styleguide/utilities/shadows.html.erb

@@ -0,0 +1,13 @@
+<h1 id="content">Shadows</h1>
+<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
+
+<h2>Example</h2>
+
+<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
+
+<%= example_with_code do %>
+  <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
+  <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
+  <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
+  <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
+<% end %>

data/app/views/bootstrap_styleguide/utilities/spacing.html.erb

@@ -0,0 +1,37 @@
+<h1 id="content">Spacing</h1>
+<p>Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.</p>
+
+<h2 id="examples" class="mt-4">Margings and Paddings</h2>
+
+<ul>
+  <li><code>0</code> - for classes that eliminate the <code>margin</code> or <code>padding</code> by setting it to <code>0</code></li>
+  <li><code>1</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .25</code></li>
+  <li><code>2</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .5</code></li>
+  <li><code>3</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer</code></li>
+  <li><code>4</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 1.5</code></li>
+  <li><code>5</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 3</code></li>
+  <li><code>auto</code> - for classes that set the <code>margin</code> to auto</li>
+</ul>
+
+<%= example_with_code do %>
+  <div class="d-inline-block" style="width: 50px;">
+    <div class="mb-2 text-center">5</div>
+    <div class="bg-primary"><div class="pt-5 me-5"></div></div>
+  </div>
+  <div class="d-inline-block" style="width: 50px;">
+    <div class="mb-2 text-center">4</div>
+    <div class="bg-primary"><div class="pt-4 me-4"></div></div>
+  </div>
+  <div class="d-inline-block" style="width: 50px;">
+    <div class="mb-2 text-center">3</div>
+    <div class="bg-primary"><div class="pt-3 me-3"></div></div>
+  </div>
+  <div class="d-inline-block" style="width: 50px;">
+    <div class="mb-2 text-center">2</div>
+    <div class="bg-primary"><div class="pt-2 me-2"></div></div>
+  </div>
+  <div class="d-inline-block" style="width: 50px;">
+    <div class="mb-2 text-center">1</div>
+    <div class="bg-primary"><div class="pt-1 me-1"></div></div>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/utilities/text.html.erb

@@ -0,0 +1,25 @@
+<h1 id="content">Texts</h1>
+
+<h2 id="examples" class="mt-4">Headings</h2>
+<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available.</p>
+
+<%= example_with_code do %>
+  <h1 class="d-block">h1. Bootstrap heading</h1>
+  <h2 class="d-block">h2. Bootstrap heading</h2>
+  <h3 class="d-block">h3. Bootstrap heading</h3>
+  <h4 class="d-block">h4. Bootstrap heading</h4>
+  <h5 class="d-block">h5. Bootstrap heading</h5>
+  <h6 class="d-block">h6. Bootstrap heading</h6>
+<% end %>
+
+<h2 id="examples" class="mt-4">Font size</h2>
+<p>Quickly change the <code>font-size</code> of text. While our heading classes (e.g., <code>.h1</code>–<code>.h6</code>) apply <code>font-size</code>, <code>font-weight</code>, and <code>line-height</code>, these utilities <em>only</em> apply <code>font-size</code>. Sizing for these utilities matches HTML’s heading elements, so as the number increases, their size decreases.</p>
+
+<%= example_with_code do %>
+  <p class="fs-1">.fs-1 text</p>
+  <p class="fs-2">.fs-2 text</p>
+  <p class="fs-3">.fs-3 text</p>
+  <p class="fs-4">.fs-4 text</p>
+  <p class="fs-5">.fs-5 text</p>
+  <p class="fs-6">.fs-6 text</p>
+<% end %>

data/app/views/layouts/_styleguide_header.html.erb

@@ -0,0 +1,71 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Styleguide</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Layout
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <% layout_items.each do |item| %>
+              <li>
+                <%= link_to item.to_s.humanize, send("layout_#{item}_path"), class: 'dropdown-item' %>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Content
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <% content_items.each do |item| %>
+              <li>
+                <%= link_to item.to_s.humanize, send("content_#{item}_path"), class: 'dropdown-item' %>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Forms
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <% forms_items.each do |item| %>
+              <li>
+                <%= link_to item.to_s.humanize, send("forms_#{item}_path"), class: 'dropdown-item' %>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Components
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <% components_items.each do |item| %>
+              <li>
+                <%= link_to item.to_s.humanize, send("components_#{item}_path"), class: 'dropdown-item' %>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Utilities
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <% utilities_items.each do |item| %>
+              <li>
+                <%= link_to item.to_s.humanize, send("utilities_#{item}_path"), class: 'dropdown-item' %>
+              </li>
+            <% end %>
+          </ul>
+      </ul>
+    </div>
+  </div>
+</nav>

data/app/views/layouts/styleguide.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Styleguide</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <%= render partial: 'layouts/styleguide_header' %>
+    <div class="container py-4">
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/config/routes.rb

@@ -0,0 +1,47 @@
+BootstrapStyleguide::Engine.routes.draw do
+  root 'styleguide#index'
+
+  get 'layout/breakpoints'
+  get 'layout/containers'
+  get 'layout/grid'
+
+  get 'content/typography'
+  get 'content/images'
+  get 'content/tables'
+
+  get 'forms/select'
+  get 'forms/checks_and_radios'
+  get 'forms/range'
+  get 'forms/input_group'
+  get 'forms/floating_labels'
+
+  get 'components/accordion'
+  get 'components/alerts'
+  get 'components/badge'
+  get 'components/breadcrumbs'
+  get 'components/buttons'
+  get 'components/button_group'
+  get 'components/cards'
+  get 'components/carousel'
+  get 'components/close_button'
+  get 'components/collapse'
+  get 'components/dropdowns'
+  get 'components/modal'
+  get 'components/navs_and_tabs'
+  get 'components/navbar'
+  get 'components/offcanvas'
+  get 'components/pagination'
+  get 'components/popovers'
+  get 'components/progress'
+  get 'components/spinners'
+  get 'components/toasts'
+  get 'components/tooltips'
+
+  get 'utilities/background'
+  get 'utilities/borders'
+  get 'utilities/colors'
+  get 'utilities/shadows'
+  get 'utilities/sizing'
+  get 'utilities/spacing'
+  get 'utilities/text'
+end

data/lib/bootstrap_styleguide/engine.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class Engine < ::Rails::Engine
+    isolate_namespace BootstrapStyleguide
+  end
+end

data/lib/bootstrap_styleguide/version.rb

@@ -0,0 +1,3 @@
+module BootstrapStyleguide
+  VERSION = '0.1.0'
+end

data/lib/bootstrap_styleguide.rb

@@ -0,0 +1,6 @@
+require "bootstrap_styleguide/version"
+require "bootstrap_styleguide/engine"
+
+module BootstrapStyleguide
+  # Your code goes here...
+end

data/lib/generators/bootstrap_styleguide/install_generator.rb

@@ -0,0 +1,22 @@
+require 'rails/generators'
+
+module BootstrapStyleguide
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('../../../app/views', __dir__)
+
+    def add_routes
+      styleguide_routes = "mount BootstrapStyleguide::Engine => '/bootstrap_styleguide'"
+      route styleguide_routes
+    end
+
+    def create_styleguide_layout
+      layout_path = File.expand_path('../../../app/views/layouts/styleguide.html.erb', __dir__)
+      copy_file layout_path, "app/views/layouts/styleguide.html.erb"
+    end
+
+    def copy_styleguide_views
+      styleguide_directory = File.expand_path('../../../app/views/bootstrap_styleguide', __dir__)
+      directory styleguide_directory, 'app/views/bootstrap_styleguide'
+    end
+  end
+end

data/lib/tasks/bootstrap_styleguide_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :bootstrap_styleguide do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: bootstrap_styleguide
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Santiago Bertinat
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2022-01-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Bootstrap Styleguide for you Rails application.
+email:
+- santiago@eagerworks.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/bootstrap_styleguide_manifest.js
+- app/assets/stylesheets/bootstrap_styleguide/application.css
+- app/controllers/bootstrap_styleguide/application_controller.rb
+- app/controllers/bootstrap_styleguide/components_controller.rb
+- app/controllers/bootstrap_styleguide/content_controller.rb
+- app/controllers/bootstrap_styleguide/forms_controller.rb
+- app/controllers/bootstrap_styleguide/layout_controller.rb
+- app/controllers/bootstrap_styleguide/styleguide_controller.rb
+- app/controllers/bootstrap_styleguide/utilities_controller.rb
+- app/helpers/bootstrap_styleguide/application_helper.rb
+- app/jobs/bootstrap_styleguide/application_job.rb
+- app/mailers/bootstrap_styleguide/application_mailer.rb
+- app/models/bootstrap_styleguide/application_record.rb
+- app/views/bootstrap_styleguide/components/accordion.html.erb
+- app/views/bootstrap_styleguide/components/alerts.html.erb
+- app/views/bootstrap_styleguide/components/badge.html.erb
+- app/views/bootstrap_styleguide/components/breadcrumbs.html.erb
+- app/views/bootstrap_styleguide/components/button_group.html.erb
+- app/views/bootstrap_styleguide/components/buttons.html.erb
+- app/views/bootstrap_styleguide/components/cards.html.erb
+- app/views/bootstrap_styleguide/components/carousel.html.erb
+- app/views/bootstrap_styleguide/components/close_button.html.erb
+- app/views/bootstrap_styleguide/components/collapse.html.erb
+- app/views/bootstrap_styleguide/components/dropdowns.html.erb
+- app/views/bootstrap_styleguide/components/modal.html.erb
+- app/views/bootstrap_styleguide/components/navbar.html.erb
+- app/views/bootstrap_styleguide/components/navs_and_tabs.html.erb
+- app/views/bootstrap_styleguide/components/offcanvas.html.erb
+- app/views/bootstrap_styleguide/components/pagination.html.erb
+- app/views/bootstrap_styleguide/components/popovers.html.erb
+- app/views/bootstrap_styleguide/components/progress.html.erb
+- app/views/bootstrap_styleguide/components/spinners.html.erb
+- app/views/bootstrap_styleguide/components/toasts.html.erb
+- app/views/bootstrap_styleguide/components/tooltips.html.erb
+- app/views/bootstrap_styleguide/content/images.html.erb
+- app/views/bootstrap_styleguide/content/tables.html.erb
+- app/views/bootstrap_styleguide/content/typography.html.erb
+- app/views/bootstrap_styleguide/forms/checks_and_radios.html.erb
+- app/views/bootstrap_styleguide/forms/floating_labels.html.erb
+- app/views/bootstrap_styleguide/forms/input_group.html.erb
+- app/views/bootstrap_styleguide/forms/range.html.erb
+- app/views/bootstrap_styleguide/forms/select.html.erb
+- app/views/bootstrap_styleguide/layout/breakpoints.html.erb
+- app/views/bootstrap_styleguide/layout/containers.html.erb
+- app/views/bootstrap_styleguide/layout/grid.html.erb
+- app/views/bootstrap_styleguide/styleguide/index.html.erb
+- app/views/bootstrap_styleguide/utilities/background.html.erb
+- app/views/bootstrap_styleguide/utilities/borders.html.erb
+- app/views/bootstrap_styleguide/utilities/colors.html.erb
+- app/views/bootstrap_styleguide/utilities/shadows.html.erb
+- app/views/bootstrap_styleguide/utilities/spacing.html.erb
+- app/views/bootstrap_styleguide/utilities/text.html.erb
+- app/views/layouts/_styleguide_header.html.erb
+- app/views/layouts/styleguide.html.erb
+- config/routes.rb
+- lib/bootstrap_styleguide.rb
+- lib/bootstrap_styleguide/engine.rb
+- lib/bootstrap_styleguide/version.rb
+- lib/generators/bootstrap_styleguide/install_generator.rb
+- lib/tasks/bootstrap_styleguide_tasks.rake
+homepage: https://github.com/eagerworks/bootstrap_styleguide
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/eagerworks/bootstrap_styleguide
+  source_code_uri: https://github.com/eagerworks/bootstrap_styleguide
+  changelog_uri: https://github.com/eagerworks/bootstrap_styleguide/commits/master
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.32
+signing_key:
+specification_version: 4
+summary: Bootstrap Styleguide for you Rails application.
+test_files: []