Module: Bootstrap::Generators::SnippetCatalog

Defined in:
lib/generators/bootstrap/snippets/snippet_catalog.rb

Overview

Every snippet published at https://getbootstrap.com/docs/5.3/examples/ Variants are listed in the order they appear on each docs page.

Constant Summary collapse

GENERATORS =

generator name => docs category

{
  "header" => "headers",
  "hero" => "heroes",
  "features" => "features",
  "sidebar" => "sidebars",
  "footer" => "footers",
  "dropdown" => "dropdowns",
  "list_group" => "list-groups",
  "modal" => "modals",
  "badge" => "badges",
  "breadcrumb" => "breadcrumbs",
  "button" => "buttons",
  "jumbotron" => "jumbotrons",
}.freeze
VARIANTS =
{
  "headers" => [
    { :name => "centered", :description => "Brand and centered nav pills with a bottom border", :icons => true, :images => false },
    { :name => "nav_pills", :description => "Bare centered nav pills", :icons => false, :images => false },
    { :name => "with_auth_buttons", :description => "Brand, nav, and Login / Sign-up buttons", :icons => true, :images => false },
    { :name => "dark_search", :description => "Dark bar with search box and user dropdown", :icons => true, :images => false },
    { :name => "light_search", :description => "Light bar with search box and user dropdown", :icons => true, :images => false },
    { :name => "grid_dropdown", :description => "Full-width grid header with a brand dropdown and search", :icons => true, :images => false },
    { :name => "double", :description => "Two-row header: utility links above, brand and nav below", :icons => true, :images => false },
    { :name => "dark_double", :description => "Dark two-row header with nav and search", :icons => true, :images => false },
  ],
  "heroes" => [
    { :name => "centered", :description => "Centered hero with heading, lead text, and buttons", :icons => false, :images => true },
    { :name => "centered_screenshot", :description => "Centered hero with a screenshot below the fold", :icons => false, :images => true },
    { :name => "with_image", :description => "Responsive left-aligned hero with an image", :icons => false, :images => true },
    { :name => "signup_form", :description => "Vertically centered hero with a sign-up form", :icons => false, :images => false },
    { :name => "cropped_image", :description => "Bordered hero with a cropped image and shadows", :icons => false, :images => true },
    { :name => "dark", :description => "Dark colour hero", :icons => false, :images => false },
  ],
  "features" => [
    { :name => "columns_with_icons", :description => "Three columns each led by an icon", :icons => true, :images => false },
    { :name => "hanging_icons", :description => "Rows with icons hanging to the left of the text", :icons => true, :images => false },
    { :name => "custom_cards", :description => "Feature cards with background images", :icons => true, :images => true },
    { :name => "icon_grid", :description => "Compact grid of icons with short descriptions", :icons => true, :images => false },
    { :name => "with_title", :description => "Left-aligned section title beside a feature grid", :icons => true, :images => false },
  ],
  "sidebars" => [
    { :name => "dark", :description => "Dark sidebar with nav and a user dropdown", :icons => true, :images => false },
    { :name => "light", :description => "Light sidebar with nav and a user dropdown", :icons => true, :images => false },
    { :name => "icon_only", :description => "Narrow icon-only sidebar", :icons => true, :images => false },
    { :name => "collapsible", :description => "Sidebar with collapsible nav sections", :icons => true, :images => false },
    { :name => "list_group", :description => "Sidebar built from a scrollable list group", :icons => true, :images => false },
  ],
  "footers" => [
    { :name => "simple", :description => "Copyright on the left, nav links on the right", :icons => true, :images => false },
    { :name => "with_brand", :description => "Brand mark, copyright, and social icons", :icons => true, :images => false },
    { :name => "with_nav", :description => "Centered nav above a centered copyright line", :icons => false, :images => false },
    { :name => "columns", :description => "Five columns of links with a brand column", :icons => true, :images => false },
    { :name => "with_newsletter", :description => "Link columns plus a newsletter sign-up form", :icons => true, :images => false },
  ],
  "dropdowns" => [
    { :name => "simple", :description => "Menu of plain items with a divider", :icons => false, :images => false },
    { :name => "with_search", :description => "Menu with a dark header and a search field", :icons => false, :images => false },
    { :name => "with_icons", :description => "Menu items each led by an icon", :icons => true, :images => false },
    { :name => "calendar", :description => "Date picker rendered inside a dropdown", :icons => true, :images => false },
    { :name => "mega_menu", :description => "Wide multi-column menu with descriptions", :icons => true, :images => false },
  ],
  "list-groups" => [
    { :name => "with_avatars", :description => "Items with an avatar, heading, text, and timestamp", :icons => false, :images => false },
    { :name => "checkboxes", :description => "Checkbox items with supporting text", :icons => false, :images => false },
    { :name => "checkboxes_expanded", :description => "Checkbox items that reveal more content when checked", :icons => true, :images => false },
    { :name => "checkable", :description => "Borderless checkable cards", :icons => false, :images => false },
    { :name => "radios", :description => "Radio cards with a selected state", :icons => false, :images => false },
  ],
  "modals" => [
    { :name => "sheet", :description => "Bottom-docked modal sheet with a list of actions", :icons => false, :images => false },
    { :name => "confirm", :description => "Small confirmation dialog with two buttons", :icons => false, :images => false },
    { :name => "whats_new", :description => "\"What's new\" dialog listing recent features", :icons => true, :images => false },
    { :name => "signup", :description => "Sign-up dialog with a form and third-party buttons", :icons => true, :images => false },
  ],
  "badges" => [
    { :name => "pills", :description => "Solid pill badges in every theme colour", :icons => false, :images => false },
    { :name => "subtle", :description => "Subtle background pill badges", :icons => false, :images => false },
    { :name => "subtle_bordered", :description => "Subtle pill badges with a matching border", :icons => false, :images => false },
    { :name => "with_avatar", :description => "Badges leading with a small round avatar", :icons => false, :images => false },
    { :name => "with_icons", :description => "Badges with a trailing icon", :icons => true, :images => false },
    { :name => "with_avatar_divider", :description => "Avatar badges split by a vertical divider", :icons => true, :images => false },
  ],
  "breadcrumbs" => [
    { :name => "basic", :description => "Breadcrumb on a tinted, rounded background", :icons => false, :images => false },
    { :name => "with_icons", :description => "Breadcrumb whose first crumb is a home icon", :icons => true, :images => false },
    { :name => "chevron", :description => "Chevron separators instead of slashes", :icons => true, :images => false },
    { :name => "custom", :description => "Arrow-shaped crumbs joined edge to edge", :icons => true, :images => false },
  ],
  "buttons" => [
    { :name => "pills", :description => "Pill buttons in every theme colour", :icons => false, :images => false },
    { :name => "grid", :description => "Full-width stacked buttons in a grid", :icons => false, :images => false },
    { :name => "with_icons", :description => "Buttons with a trailing icon", :icons => true, :images => false },
    { :name => "loading", :description => "Buttons with a spinner in the loading state", :icons => false, :images => false },
    { :name => "circle", :description => "Round icon-only buttons", :icons => true, :images => false },
  ],
  "jumbotrons" => [
    { :name => "with_icon", :description => "Jumbotron led by a large SVG icon", :icons => true, :images => false },
    { :name => "placeholder", :description => "Faded jumbotron for placeholder content", :icons => true, :images => false },
    { :name => "full_width", :description => "Edge-to-edge jumbotron with a contained body", :icons => false, :images => false },
    { :name => "basic", :description => "Simple jumbotron inside a container", :icons => false, :images => false },
  ],
}.freeze

Class Method Summary collapse

Class Method Details

.category_for(generator_name) ⇒ Object



113
114
115
# File 'lib/generators/bootstrap/snippets/snippet_catalog.rb', line 113

def category_for(generator_name)
  GENERATORS.fetch(generator_name)
end

.default_variant(category) ⇒ Object



129
130
131
# File 'lib/generators/bootstrap/snippets/snippet_catalog.rb', line 129

def default_variant(category)
  variants(category).first[:name]
end

.variant(category, name) ⇒ Object



121
122
123
# File 'lib/generators/bootstrap/snippets/snippet_catalog.rb', line 121

def variant(category, name)
  variants(category).find { |v| v[:name] == name }
end

.variant_names(category) ⇒ Object



125
126
127
# File 'lib/generators/bootstrap/snippets/snippet_catalog.rb', line 125

def variant_names(category)
  variants(category).map { |v| v[:name] }
end

.variants(category) ⇒ Object



117
118
119
# File 'lib/generators/bootstrap/snippets/snippet_catalog.rb', line 117

def variants(category)
  VARIANTS.fetch(category)
end