├── .gitattributes ├── src ├── index.js ├── cable │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── abaculus │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── backstay │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── dalton │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── ectype │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── ferula │ ├── index.scss │ ├── index.pug │ ├── _overrides.scss │ └── _variables.scss ├── _ │ ├── badge.pug │ ├── card.pug │ ├── breadcrumb.pug │ ├── pagination.pug │ ├── progress.pug │ ├── index.scss │ ├── navbar.pug │ ├── dropdown.pug │ ├── alert.pug │ ├── table.pug │ ├── button.pug │ ├── index.pug │ ├── index.js │ ├── _use.pug │ └── form.pug ├── layout.pug ├── config.pug ├── analytics.html ├── index.scss ├── _after.scss ├── footer.pug ├── _before.scss ├── nav.pug └── index.pug ├── .gitignore ├── .htmlnanorc.js ├── cssnano.config.js ├── netlify.toml ├── README.md ├── Rakefile ├── postcss.config.js ├── LICENSE └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | /yarn.lock -diff 2 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.cache 2 | /dist 3 | /node_modules 4 | -------------------------------------------------------------------------------- /.htmlnanorc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mergeScripts: false, 3 | }; 4 | -------------------------------------------------------------------------------- /cssnano.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: ['default', { normalizePositions: false }], 3 | }; 4 | -------------------------------------------------------------------------------- /src/cable/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [Settings] 2 | ID = "8ee53f0e-de24-409a-a73e-7c6b9892d855" 3 | 4 | [Build] 5 | Publish = "" 6 | Functions = "" 7 | -------------------------------------------------------------------------------- /src/abaculus/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /src/backstay/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /src/dalton/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /src/ectype/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /src/ferula/index.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import '../../node_modules/bootstrap/scss/bootstrap'; 3 | @import "./overrides"; 4 | -------------------------------------------------------------------------------- /src/dalton/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Dalton', 4 | slug: 'dalton', 5 | tagline: 'unit of atomic mass', 6 | }; 7 | 8 | include ../_/index 9 | -------------------------------------------------------------------------------- /src/cable/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Cable', 4 | slug: 'cable', 5 | tagline: 'heavy rope or chain for mooring a ship', 6 | }; 7 | 8 | include ../_/index 9 | -------------------------------------------------------------------------------- /src/ectype/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Ectype', 4 | slug: 'ectype', 5 | tagline: 'reproduction or copy', 6 | isBackgroundLight: true, 7 | }; 8 | 9 | include ../_/index 10 | -------------------------------------------------------------------------------- /src/ferula/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Ferula', 4 | slug: 'ferula', 5 | tagline: 'flat piece of wood', 6 | isBackgroundLight: true, 7 | }; 8 | 9 | include ../_/index 10 | -------------------------------------------------------------------------------- /src/abaculus/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Abaculus', 4 | slug: 'abaculus', 5 | tagline: 'small tile for mosaic', 6 | isBackgroundLight: true, 7 | }; 8 | 9 | include ../_/index 10 | -------------------------------------------------------------------------------- /src/_/badge.pug: -------------------------------------------------------------------------------- 1 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 2 | for color in colors 3 | if isAlmostInvisibleOnBackground(color) 4 | - continue 5 | .badge(class=`badge-${color.class}`).mr-3.mb-2= color.name 6 | -------------------------------------------------------------------------------- /src/layout.pug: -------------------------------------------------------------------------------- 1 | include config 2 | doctype html 3 | html 4 | head 5 | block head 6 | meta(name="viewport" content="width=device-width, initial-scale=1") 7 | body 8 | block body 9 | include ./analytics.html 10 | -------------------------------------------------------------------------------- /src/backstay/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | const config = { 3 | name: 'Backstay', 4 | slug: 'backstay', 5 | tagline: 'stay extending from ship\'s mastheads to the side of the ship', 6 | isBackgroundLight: true, 7 | isPrimaryLight: true, 8 | }; 9 | 10 | include ../_/index 11 | -------------------------------------------------------------------------------- /src/cable/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | .alert-light { 5 | color: $dark; 6 | } 7 | 8 | // BADGE 9 | .badge { 10 | text-transform: uppercase; 11 | letter-spacing: 0.025em; 12 | } 13 | 14 | // TABLE 15 | .table-hover tbody tr:hover { 16 | color: inherit; 17 | } 18 | -------------------------------------------------------------------------------- /src/config.pug: -------------------------------------------------------------------------------- 1 | - 2 | const themes = [ 3 | {name: 'Abaculus', slug: 'abaculus'}, 4 | {name: 'Backstay', slug: 'backstay'}, 5 | {name: 'Cable', slug: 'cable'}, 6 | {name: 'Dalton', slug: 'dalton'}, 7 | {name: 'Ectype', slug: 'ectype'}, 8 | {name: 'Ferula', slug: 'ferula'}, 9 | ]; 10 | -------------------------------------------------------------------------------- /src/abaculus/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | @each $color, $value in $theme-colors { 5 | .alert-#{$color} { 6 | border: 1px solid $value; 7 | border-left-width: 5px; 8 | } 9 | } 10 | 11 | // BADGE 12 | .badge { 13 | text-transform: uppercase; 14 | letter-spacing: 0.025em; 15 | } 16 | -------------------------------------------------------------------------------- /src/backstay/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | @each $color, $value in $theme-colors { 5 | .alert-#{$color} { 6 | border: 1px solid $value; 7 | border-left-width: 5px; 8 | } 9 | } 10 | 11 | // BADGE 12 | .badge { 13 | text-transform: uppercase; 14 | letter-spacing: 0.025em; 15 | } 16 | -------------------------------------------------------------------------------- /src/analytics.html: -------------------------------------------------------------------------------- 1 | 5 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Themes 2 | 3 | > Open Source, MIT Licensed, Customizable Themes for Bootstrap 4. 4 | 5 | ## Getting Started 6 | 7 | For a complete updated list of themes with live demos, downloads, CDN links, 8 | and getting started instructions, check out our website at 9 | https://bootstrap-themes.com. 10 | 11 | ## License 12 | 13 | MIT 14 | -------------------------------------------------------------------------------- /src/dalton/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | .alert-light { 5 | color: $dark; 6 | } 7 | 8 | // BADGE 9 | .badge { 10 | text-transform: uppercase; 11 | letter-spacing: 0.025em; 12 | } 13 | 14 | // BUTTON 15 | .btn { 16 | text-transform: uppercase; 17 | letter-spacing: 0.05em; 18 | } 19 | 20 | // TABLE 21 | .table-hover tbody tr:hover { 22 | color: inherit; 23 | } 24 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap'; 2 | 3 | // UI 4 | $body-bg: #f5f8fb; 5 | $font-size-base: (14/16) * 1rem; 6 | $font-family-sans-serif: 'IBM Plex Sans', sans-serif; 7 | 8 | // COLORS 9 | $blue: #078fee; 10 | 11 | @import './before'; 12 | @import '../node_modules/bootstrap/scss/bootstrap'; 13 | @import './after'; 14 | 15 | img { 16 | max-width: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "parallel" 2 | 3 | task :default do 4 | names = FileList["src/*/"].sub("src/", "").sub(/\/$/, "").reject do |name| 5 | name == "_" 6 | end 7 | Parallel.each names do |name| 8 | system "rm", "-rf", "dist/#{name}" 9 | system "yarn", "node-sass", "--output", "dist/#{name}", "src/#{name}/index.scss" 10 | system "yarn", "postcss", "dist/#{name}/index.css", "-o", "dist/#{name}/index.min.css" 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const version = require('./package.json').version; 2 | 3 | module.exports = { 4 | plugins: [ 5 | require('cssnano')(), 6 | require('postcss-banner')({ 7 | banner: `\ 8 | Bootstrap-Themes.com v${version} (https://bootstrap-themes.com/) 9 | Copyright 2019 Utkarsh Kukreti 10 | Licensed under MIT (https://github.com/utkarshkukreti/bootstrap-themes/blob/master/LICENSE)`, 11 | important: true, 12 | }), 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /src/ferula/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | .alert { 5 | border: none; 6 | } 7 | 8 | @each $color, $value in $theme-colors { 9 | .alert-#{$color} { 10 | border: 1px solid $value; 11 | border-left-width: 5px; 12 | } 13 | } 14 | 15 | // BADGE 16 | .badge { 17 | text-transform: uppercase; 18 | letter-spacing: 0.025em; 19 | } 20 | 21 | // BUTTON 22 | .btn { 23 | text-transform: uppercase; 24 | letter-spacing: 0.025em; 25 | } 26 | -------------------------------------------------------------------------------- /src/_after.scss: -------------------------------------------------------------------------------- 1 | // Import $web-font-url if it's set. 2 | @if $web-font-url { 3 | @import url($web-font-url); 4 | } 5 | 6 | // Enable antialiasing. Defaults to true. 7 | $enable-antialiasing: true !default; 8 | @if $enable-antialiasing { 9 | html { 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | } 14 | 15 | // Fix vertical position of the shape. 16 | .dropdown-toggle::after { 17 | vertical-align: 0.15em; 18 | } 19 | -------------------------------------------------------------------------------- /src/footer.pug: -------------------------------------------------------------------------------- 1 | .bg-white.text-dark.py-3.px-2.border-top.text-center 2 | div. 3 | Code released under the 4 | MIT License. 5 | div. 6 | Made by Utkarsh Kukreti for 7 | Bootstrap-Themes.com. 8 | div. 9 | Built on Bootstrap with fonts from 10 | Google. 11 | -------------------------------------------------------------------------------- /src/_before.scss: -------------------------------------------------------------------------------- 1 | $dropdown-padding-y: 0rem !default; 2 | $dropdown-item-padding-y: 0.5rem !default; 3 | $dropdown-item-padding-x: 1rem !default; 4 | $dropdown-divider-margin-y: 0 !default; 5 | 6 | $table-hover-bg: rgba(#000, 0.04) !default; 7 | $table-dark-hover-bg: rgba(#fff, 0.05) !default; 8 | 9 | // BREADCRUMB 10 | $breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iIzU1NSIvPjwvc3ZnPg==) !default; 11 | $breadcrumb-bg: transparent !default; 12 | $breadcrumb-padding-y: 0.5rem !default; 13 | -------------------------------------------------------------------------------- /src/_/card.pug: -------------------------------------------------------------------------------- 1 | mixin card(title, klass) 2 | .col-sm-6 3 | .snippet 4 | .card.text-center(class=klass).mb-3 5 | .card-header #{title} Card 6 | .card-body 7 | h5.card-title Special title treatment 8 | p.card-text With supporting text below as a natural lead-in to additional content. 9 | a.btn(class=title === 'Default' || title==='Light' ? 'btn-primary' : 'btn-light' href='#') Do Something 10 | .card-footer Just Now 11 | 12 | .row 13 | +card('Default', 'text-dark') 14 | for color in colors 15 | +card(color.name, `bg-${color.class} text-${isLight(color) ? 'dark' : 'white'}`) 16 | -------------------------------------------------------------------------------- /src/_/breadcrumb.pug: -------------------------------------------------------------------------------- 1 | .snippet 2 | .d-flex.flex-column.bg-white.pt-3.px-3.rounded-sm.mb-3 3 | nav(aria-label='breadcrumb') 4 | ol.breadcrumb 5 | li.breadcrumb-item.active(aria-current='page') Home 6 | nav(aria-label='breadcrumb') 7 | ol.breadcrumb 8 | li.breadcrumb-item 9 | a(href='#') Home 10 | li.breadcrumb-item.active(aria-current='page') Library 11 | nav(aria-label='breadcrumb') 12 | ol.breadcrumb 13 | li.breadcrumb-item 14 | a(href='#') Home 15 | li.breadcrumb-item 16 | a(href='#') Library 17 | li.breadcrumb-item.active(aria-current='page') Data 18 | -------------------------------------------------------------------------------- /src/_/pagination.pug: -------------------------------------------------------------------------------- 1 | .snippet 2 | .d-flex.justify-content-center 3 | nav(aria-label='Pagination') 4 | ul.pagination 5 | li.page-item.disabled 6 | a.page-link(href='#' aria-disabled="true") Previous 7 | for i in [1, 2, 3, 4, 5] 8 | li.page-item(class=i === 3 ? 'active' : '') 9 | a.page-link(href='#')= i 10 | li.page-item 11 | a.page-link(href='#') Next 12 | 13 | .snippet 14 | .d-flex.justify-content-center 15 | nav(aria-label='Pagination') 16 | ul.pagination 17 | li.page-item 18 | a.page-link(href='#') Previous 19 | li.mx-3.align-self-center.text-muted Page 4 of 4 20 | li.page-item.disabled 21 | a.page-link(href='#' aria-disabled="true") Next 22 | -------------------------------------------------------------------------------- /src/ectype/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import '../after'; 2 | 3 | // ALERT 4 | @each $color, $value in $theme-colors { 5 | .alert-#{$color} { 6 | border: 1px solid $value; 7 | border-left-width: 5px; 8 | } 9 | } 10 | 11 | // BADGE 12 | .badge { 13 | text-transform: uppercase; 14 | letter-spacing: 0.025em; 15 | } 16 | 17 | // BUTTON 18 | .btn { 19 | letter-spacing: 0.025rem; 20 | } 21 | 22 | $box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06); 23 | @each $color, $value in $theme-colors { 24 | .btn-#{$color} { 25 | @if $color != 'light' { 26 | color: $value; 27 | } 28 | background: theme-color-level($color, -11); 29 | padding: 0.25rem 0.75rem; 30 | } 31 | } 32 | 33 | // ALL 34 | .card, 35 | .btn, 36 | .alert { 37 | box-shadow: $box-shadow; 38 | } 39 | -------------------------------------------------------------------------------- /src/_/progress.pug: -------------------------------------------------------------------------------- 1 | - 2 | const progress = index => [75, 25, 50, 100][index % 4] 3 | 4 | .h5.text-center Plain 5 | .snippet 6 | for color, index in colors 7 | if color.name === 'Light' 8 | - continue 9 | .progress.mb-2 10 | .progress-bar(class=`bg-${color.class}` role='progressbar', style=`width: ${progress(index)}%`, aria-valuenow=`${progress(index)}`, aria-valuemin='0', aria-valuemax='100') 11 | 12 | .h5.text-center.mt-3 With Label 13 | .snippet 14 | for color, index in colors 15 | if color.name === 'Light' 16 | - continue 17 | .progress.mb-2 18 | .progress-bar(class=`bg-${color.class} text-${isLight(color) ? 'dark' : 'white'}` role='progressbar', style=`width: ${progress(index)}%;`, aria-valuenow=`${progress(index)}`, aria-valuemin='0', aria-valuemax='100') #{progress(index)}% 19 | -------------------------------------------------------------------------------- /src/_/index.scss: -------------------------------------------------------------------------------- 1 | @media (min-width: 768px) { 2 | .container { 3 | max-width: 720px; 4 | } 5 | } 6 | 7 | .snippet { 8 | position: relative; 9 | .show-code { 10 | cursor: pointer; 11 | position: absolute; 12 | top: 2px; 13 | left: calc(100% - 1px); 14 | transform: rotate(90deg); 15 | @media (min-width: 576px) { 16 | top: 0; 17 | left: calc(100% + 7px); 18 | transform: none; 19 | } 20 | svg { 21 | display: block; 22 | } 23 | } 24 | } 25 | 26 | #code { 27 | textarea { 28 | white-space: pre; 29 | font-size: 0.8rem; 30 | } 31 | .modal-body { 32 | padding: 0; 33 | } 34 | .modal-footer { 35 | border: none; 36 | background: #e9e9e9; 37 | } 38 | pre { 39 | margin: 0; 40 | } 41 | code { 42 | padding: 1rem 1.5rem; 43 | max-height: calc(100vh - 12rem); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/ferula/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=Asap:400,700&display=swap' !default; 2 | $web-font: Asap !default; 3 | 4 | // UI 5 | $body-bg: #fefade !default; 6 | $font-size-base: (14/16) * 1rem !default; 7 | $font-family-sans-serif: $web-font, sans-serif !default; 8 | 9 | $btn-border-radius: 0.5rem !default; 10 | 11 | // COLORS 12 | $blue: #078fee !default; 13 | $green: #30b643 !default; 14 | $red: #ed534e !default; 15 | $orange: #f57400 !default; 16 | $purple: #815de6 !default; 17 | $magenta: #9b42a0 !default; 18 | 19 | $primary: $magenta !default; 20 | $secondary: #404346 !default; 21 | $info: $purple !default; 22 | $warning: $orange !default; 23 | 24 | // ALERT 25 | $alert-padding-x: 1rem !default; 26 | 27 | // BADGE 28 | $badge-padding-y: 0.5em !default; 29 | $badge-padding-x: 0.75em !default; 30 | $badge-font-weight: normal !default; 31 | 32 | @import '../before'; 33 | -------------------------------------------------------------------------------- /src/abaculus/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap' !default; 2 | $web-font: 'Work Sans' !default; 3 | 4 | // UI 5 | $body-bg: #f0f3f6 !default; 6 | $body-color: #212529 !default; 7 | $font-size-base: (14/16) * 1rem !default; 8 | $font-family-sans-serif: $web-font, sans-serif !default; 9 | 10 | $border-radius: 0.15rem !default; 11 | 12 | // COLORS 13 | $blue: #078fee !default; 14 | $green: #30b643 !default; 15 | $red: #ed534e !default; 16 | $orange: #f57400 !default; 17 | $purple: #815de6 !default; 18 | 19 | $secondary: #404346 !default; 20 | $info: $purple !default; 21 | $warning: $orange !default; 22 | 23 | // ALERT 24 | $alert-padding-x: 1rem !default; 25 | $alert-border-level: -5 !default; 26 | 27 | // BADGE 28 | $badge-padding-y: 0.5em !default; 29 | $badge-padding-x: 0.75em !default; 30 | $badge-font-weight: normal !default; 31 | 32 | @import '../before'; 33 | -------------------------------------------------------------------------------- /src/cable/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=Karla:400,700&display=swap' !default; 2 | $web-font: Karla !default; 3 | 4 | // UI 5 | $body-bg: #1d2937 !default; 6 | $body-color: #f7f7f7 !default; 7 | $font-size-base: (15/16) * 1rem !default; 8 | $font-family-sans-serif: $web-font, sans-serif !default; 9 | 10 | $border-radius: 0.1rem !default; 11 | 12 | // COLORS 13 | $blue: #078fee !default; 14 | $green: #30b643 !default; 15 | $red: #ed534e !default; 16 | $orange: #f57400 !default; 17 | $purple: #815de6 !default; 18 | 19 | $primary: $blue !default; 20 | $secondary: #404346 !default; 21 | $info: $purple !default; 22 | $warning: $orange !default; 23 | 24 | // ALERT 25 | $alert-bg-level: 0 !default; 26 | $alert-border-level: 0 !default; 27 | $alert-color-level: -12 !default; 28 | 29 | // BADGE 30 | $badge-padding-y: 0.5em !default; 31 | $badge-padding-x: 0.75em !default; 32 | $badge-font-weight: normal !default; 33 | 34 | @import '../before'; 35 | -------------------------------------------------------------------------------- /src/_/navbar.pug: -------------------------------------------------------------------------------- 1 | mixin nav(brand, id, klass) 2 | .snippet 3 | nav.navbar.navbar-expand-sm(class=klass).mb-3 4 | a.navbar-brand(href='#') Brand 5 | button.navbar-toggler(type='button', data-toggle='collapse', data-target=`#${id}`, aria-controls=id, aria-expanded='false', aria-label='Toggle Navigation') 6 | span.navbar-toggler-icon 7 | .collapse.navbar-collapse(id=id) 8 | .navbar-nav 9 | a.nav-item.nav-link.active(href='#') 10 | | Home 11 | span.sr-only (current) 12 | a.nav-item.nav-link(href='#') Documentation 13 | a.nav-item.nav-link(href='#') Examples 14 | a.nav-item.nav-link(href='#') Blog 15 | .navbar-nav.ml-auto 16 | a.nav-item.nav-link(href='#') Contact Us 17 | 18 | .d-flex.flex-column.mb-3 19 | for color, index in colors 20 | if isAlmostInvisibleOnBackground(color) 21 | - continue 22 | +nav(color.name, `navbar-${index}`, `navbar-${isLight(color) ? 'light' : 'dark'} bg-${color.class}`) 23 | -------------------------------------------------------------------------------- /src/ectype/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=Varela:400,700&display=swap' !default; 2 | $web-font: 'Varela' !default; 3 | 4 | // UI 5 | $body-bg: #f3f6f7 !default; 6 | $body-color: #0f2848 !default; 7 | $font-size-base: (14/16) * 1rem !default; 8 | $font-family-sans-serif: $web-font, sans-serif !default; 9 | 10 | $border-radius: 0.25rem !default; 11 | 12 | // COLORS 13 | $blue: #078fee !default; 14 | $green: #30b643 !default; 15 | $red: #ed534e !default; 16 | $orange: #f57400 !default; 17 | $purple: #815de6 !default; 18 | 19 | $primary: $blue !default; 20 | $secondary: #404346 !default; 21 | $info: $purple !default; 22 | $warning: $orange !default; 23 | 24 | // ALERT 25 | $alert-padding-x: 1rem !default; 26 | $alert-bg-level: -10 !default; 27 | $alert-color-level: 12 !default; 28 | $alert-border-level: 0 !default; 29 | 30 | // BADGE 31 | $badge-padding-y: 0.5em !default; 32 | $badge-padding-x: 0.75em !default; 33 | $badge-font-weight: normal !default; 34 | 35 | @import '../before'; 36 | -------------------------------------------------------------------------------- /src/backstay/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=Andika:400,700&display=swap' !default; 2 | $web-font: Andika !default; 3 | 4 | // UI 5 | $body-bg: #f9f5f2 !default; 6 | $body-color: #212529 !default; 7 | $font-size-base: (14/16) * 1rem !default; 8 | $font-family-sans-serif: $web-font, sans-serif !default; 9 | 10 | $btn-border-radius: 0.5rem !default; 11 | 12 | // COLORS 13 | $blue: #078fee !default; 14 | $green: #30b643 !default; 15 | $red: #ed534e !default; 16 | $orange: #f57400 !default; 17 | $purple: #815de6 !default; 18 | $yellow: #ffd400 !default; 19 | 20 | $primary: $yellow !default; 21 | $secondary: $blue !default; 22 | $info: $purple !default; 23 | $warning: $orange !default; 24 | 25 | // Slightly darker yellow for link. 26 | $link-color: darken($yellow, 3%) !default; 27 | 28 | // ALERT 29 | $alert-padding-x: 1rem !default; 30 | $alert-border-level: -5 !default; 31 | 32 | // BADGE 33 | $badge-padding-y: 0.5em !default; 34 | $badge-padding-x: 0.75em !default; 35 | $badge-font-weight: normal !default; 36 | 37 | @import '../before'; 38 | -------------------------------------------------------------------------------- /src/_/dropdown.pug: -------------------------------------------------------------------------------- 1 | mixin dropped(klass = '') 2 | .dropdown-menu(class=klass) 3 | a.dropdown-item(href='#') My Profile 4 | a.dropdown-item(href='#') My Settings 5 | .dropdown-divider 6 | a.dropdown-item(href='#') Logout 7 | 8 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 9 | for color in colors 10 | if isAlmostInvisibleOnBackground(color) 11 | - continue 12 | .btn-group.mr-3.mb-3 13 | button(class=`btn btn-${color.class} dropdown-toggle` type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false') 14 | | Jane Doe 15 | +dropped 16 | 17 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 18 | for color in colors 19 | if isAlmostInvisibleOnBackground(color) 20 | - continue 21 | .btn-group.mr-3.mb-3 22 | button.btn(class=`btn-${color.class}` type='button') Jane Doe 23 | button(class=`btn btn-${color.class} dropdown-toggle dropdown-toggle-split` type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false') 24 | span.sr-only Toggle Dropdown 25 | +dropped('dropdown-menu-right') 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Utkarsh Kukreti 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/_/alert.pug: -------------------------------------------------------------------------------- 1 | mixin alert(klass) 2 | .snippet 3 | .alert(class=`alert-${klass}`).fade.in.alert-dismissible.show 4 | button.close(type='button' data-dismiss='alert' aria-label='Close') 5 | span(aria-hidden='true') × 6 | block 7 | 8 | +alert("success") 9 | strong Success! 10 | | This alert box indicates a successful or positive action. 11 | 12 | +alert("info") 13 | strong Info! 14 | | This alert box indicates a neutral informative change or action. 15 | 16 | +alert("warning") 17 | strong Warning! 18 | | This alert box indicates a warning that might need attention. 19 | 20 | +alert("danger") 21 | strong Danger! 22 | | This alert box indicates a dangerous or potentially negative action. 23 | 24 | +alert("primary") 25 | strong Primary! 26 | | This alert box indicates an important action. 27 | 28 | +alert("secondary") 29 | strong Secondary! 30 | | This alert box indicates a less important action. 31 | 32 | if config.isBackgroundLight 33 | +alert("dark") 34 | strong Dark! 35 | | This alert box is Dark! 36 | 37 | if !config.isBackgroundLight 38 | +alert("light") 39 | strong Light! 40 | | This alert box is Light! 41 | -------------------------------------------------------------------------------- /src/dalton/_variables.scss: -------------------------------------------------------------------------------- 1 | $web-font-url: 'https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap' !default; 2 | $web-font: 'PT Sans' !default; 3 | 4 | // UI 5 | $body-bg: #4e406f !default; 6 | $body-color: #f7f7f7 !default; 7 | $font-size-base: (15/16) * 1rem !default; 8 | $font-size-sm: (12/16) * 1rem !default; 9 | $font-family-sans-serif: $web-font, sans-serif !default; 10 | 11 | // COLORS 12 | $blue: #078fee !default; 13 | $green: #30b643 !default; 14 | $red: #ed534e !default; 15 | $orange: #f57400 !default; 16 | $purple: #815de6 !default; 17 | $magenta: #9b42a0 !default; 18 | 19 | $primary: $purple !default; 20 | $secondary: $blue !default; 21 | $info: $magenta !default; 22 | $warning: $orange !default; 23 | 24 | $text-muted: rgba(255, 255, 255, 0.5) !default; 25 | 26 | // ALERT 27 | $alert-bg-level: 0 !default; 28 | $alert-border-level: 0 !default; 29 | $alert-color-level: -12 !default; 30 | 31 | // BADGE 32 | $badge-padding-y: 0.5em !default; 33 | $badge-padding-x: 0.75em !default; 34 | $badge-font-weight: normal !default; 35 | 36 | // BUTTON 37 | $btn-font-size: 0.75rem !default; 38 | $btn-font-weight: bold !default; 39 | $btn-border-radius: 1rem !default; 40 | 41 | @import '../before'; 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-themes", 3 | "version": "1.0.2", 4 | "files": [ 5 | "/dist/**/index{,.min}.css", 6 | "!/dist/{dev,prod}/**/*", 7 | "/src/**/*.scss", 8 | "!/src/_/*", 9 | "!/src/index.scss" 10 | ], 11 | "license": "MIT", 12 | "homepage": "https://github.com/utkarshkukreti/bootstrap-themes", 13 | "author": "Utkarsh Kukreti (https://utkar.sh)", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/utkarshkukreti/bootstrap-themes" 17 | }, 18 | "scripts": { 19 | "start": "parcel -d .cache/dev src/index.pug", 20 | "build": "yarn clean && yarn build:rake && yarn build:preview", 21 | "build:rake": "rake", 22 | "build:preview": "parcel build --no-cache --no-source-maps -d dist src/index.pug", 23 | "deploy": "yarn build && netlifyctl deploy -P dist", 24 | "clean": "rm -rf dist" 25 | }, 26 | "peerDependencies": { 27 | "bootstrap": "^4.3.1" 28 | }, 29 | "devDependencies": { 30 | "bootstrap": "^4.3.1", 31 | "clipboard-polyfill": "^2.8.1", 32 | "cssnano": "^4.1.10", 33 | "highlight.js": "^9.15.8", 34 | "jquery": "^3.4.1", 35 | "node-sass": "^4.12.0", 36 | "parcel-bundler": "^1.12.3", 37 | "popper.js": "^1.15.0", 38 | "postcss-banner": "^3.0.1", 39 | "postcss-cli": "^6.1.3", 40 | "pug": "^2.0.4" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/_/table.pug: -------------------------------------------------------------------------------- 1 | mixin table(title, klass, theadClass) 2 | .col-md-6.mb-3 3 | .mb-2.font-weight-bold.text-center= title 4 | .snippet 5 | table.table(class=klass) 6 | thead(class=theadClass) 7 | tr 8 | th(scope="col") # 9 | th(scope="col") Name 10 | th(scope="col") Stars 11 | th(scope="col") Forks 12 | tbody 13 | tr 14 | th(scope="row") 1 15 | td Bootstrap 16 | td 135k 17 | td 66k 18 | tr 19 | th(scope="row") 2 20 | td Semantic UI 21 | td 46k 22 | td 5k 23 | tr 24 | th(scope="row") 3 25 | td Bulma 26 | td 36k 27 | td 3k 28 | tr 29 | th(scope="row") 4 30 | td Foundation 31 | td 28k 32 | td 6k 33 | 34 | .row 35 | +table('Plain', 'bg-white text-dark', '') 36 | +table('Dark', 'table-dark', '') 37 | +table('Striped', 'bg-white text-dark table-striped', '') 38 | +table('Striped + Dark', 'table-striped table-dark', '') 39 | +table('Bordered', 'bg-white text-dark table-bordered', '') 40 | +table('Bordered + Dark', 'table-bordered table-dark', '') 41 | +table('Hover', 'bg-white text-dark table-hover', '') 42 | +table('Hover + Dark', 'table-hover table-dark', '') 43 | +table('Small', 'bg-white text-dark table-sm', '') 44 | +table('Small + Dark', 'table-sm table-dark', '') 45 | -------------------------------------------------------------------------------- /src/nav.pug: -------------------------------------------------------------------------------- 1 | - const isPrimaryLight = typeof config === 'undefined' ? false : config.isPrimaryLight 2 | nav.navbar.navbar-expand.mb-3(class=`navbar-${isPrimaryLight ? 'light' : 'dark'} bg-primary`) 3 | .container 4 | a.navbar-brand(href='/') Bootstrap-Themes.com 5 | ul.navbar-nav.mr-auto 6 | li.nav-item.dropdown 7 | a.nav-link.dropdown-toggle(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false') 8 | | Themes 9 | .dropdown-menu 10 | - const prefix = typeof config === 'undefined' ? '.' : '..'; 11 | for theme in themes 12 | a.dropdown-item(href=`${prefix}/${theme.slug}/index.pug`)= theme.name 13 | ul.navbar-nav.ml-auto 14 | li.nav-item 15 | a.nav-link.py-0(href='https://github.com/utkarshkukreti/bootstrap-themes') 16 | svg(role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' style='width: 24px; height: 24px;' fill=isPrimaryLight ? '#404346' : 'white') 17 | title GitHub Icon 18 | path(d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12') 19 | -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block head 4 | title Free Bootstrap Themes by Bootstrap-Themes.com 5 | link(rel="stylesheet" href="index.scss") 6 | meta(property="og:image" content="https://bootstrap-themes.nyc3.digitaloceanspaces.com/screenshots/abaculus.png") 7 | 8 | block body 9 | include ./nav 10 | .container.mt-4 11 | h1.h3.text-center Free Bootstrap Themes 12 | .h5.text-center.text-muted.mb-3 Lightweight, Customizable, Open Source#[br]Themes for Bootstrap 4. 13 | .d-flex.justify-content-center.mb-3 14 | .mr-1 15 | a.github-button(href='https://github.com/utkarshkukreti/bootstrap-themes/subscription', data-icon='octicon-eye', data-size='large', data-show-count='true', aria-label='Watch utkarshkukreti/bootstrap-themes on GitHub') Watch 16 | div 17 | a.github-button(href='https://github.com/utkarshkukreti/bootstrap-themes', data-icon='octicon-star', data-size='large', data-show-count='true', aria-label='Star utkarshkukreti/bootstrap-themes on GitHub') Star 18 | .d-flex.justify-content-center.mb-3 19 | a(href='https://www.producthunt.com/posts/bootstrap-themes-com?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-bootstrap-themes-com', target='_blank') 20 | img(src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=161406&theme=light', alt='Bootstrap-Themes.com - Six Lightweight Open Source Themes for Bootstrap 4 | Product Hunt Embed', style='width: 250px; height: 54px;', width='250px', height='54px') 21 | 22 | ul.list-unstyled.row 23 | for theme in themes 24 | li.col-lg-6.mb-4 25 | div.rounded.overflow-hidden.border.shadow-sm 26 | a(href=`${theme.slug}/index.pug`) 27 | img(src=`https://bootstrap-themes.nyc3.digitaloceanspaces.com/screenshots/${theme.slug}.png`) 28 | include ./footer 29 | script(src="index.js") 30 | script(async defer src="https://buttons.github.io/buttons.js") 31 | -------------------------------------------------------------------------------- /src/_/button.pug: -------------------------------------------------------------------------------- 1 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 2 | for color in colors 3 | if isAlmostInvisibleOnBackground(color) 4 | - continue 5 | button.btn(class=`btn-${color.class}`).mr-3.mb-3= color.name 6 | 7 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 8 | for color in colors 9 | if isAlmostInvisibleOnBackground(color) 10 | - continue 11 | button.btn(class=`btn-outline-${color.class}`).mr-3.mb-3= color.name 12 | 13 | .d-flex.flex-wrap.mb-2.justify-content-center.snippet 14 | for color in colors 15 | if isAlmostInvisibleOnBackground(color) 16 | - continue 17 | .btn-group(role='group' aria-label='Menu').mr-3.mb-3 18 | button.btn(class=`btn-${color.class}` type='button') File 19 | button.btn(class=`btn-${color.class}` type='button') Edit 20 | button.btn(class=`btn-${color.class}` type='button') View 21 | button.btn(class=`btn-${color.class}` type='button') History 22 | button.btn(class=`btn-${color.class}` type='button') Help 23 | for color in colors 24 | if isAlmostInvisibleOnBackground(color) 25 | - continue 26 | .d-flex.flex-wrap.justify-content-center.mb-1.snippet 27 | .mr-3.mb-2.btn-group.btn-group-toggle(data-toggle='buttons') 28 | label.btn(class=`btn-${color.class}`).active 29 | input(type='radio' name='options', checked) 30 | | Radio 31 | label.btn(class=`btn-${color.class}`) 32 | input(type='radio' name='options') 33 | | Radio 34 | label.btn(class=`btn-${color.class}`) 35 | input(type='radio' name='options') 36 | | Radio 37 | 38 | .mb-2.btn-group.btn-group-toggle(data-toggle='buttons') 39 | label.btn(class=`btn-${color.class}`).active 40 | input(type='checkbox' name='options', checked) 41 | | Checkbox 42 | label.btn(class=`btn-${color.class}`) 43 | input(type='checkbox' name='options') 44 | | Checkbox 45 | label.btn(class=`btn-${color.class}`) 46 | input(type='checkbox' name='options') 47 | | Checkbox 48 | -------------------------------------------------------------------------------- /src/_/index.pug: -------------------------------------------------------------------------------- 1 | extends ../layout 2 | 3 | block head 4 | title #{config.name} @ Bootstrap-Themes.com 5 | link(rel="stylesheet" href=`../${config.slug}/index.scss`) 6 | link(rel="stylesheet" href="../_/index.scss") 7 | link(rel="stylesheet" href="../../node_modules/highlight.js/styles/atom-one-light.css") 8 | 9 | block body 10 | - 11 | const colors = [ 12 | {name: 'Primary', class: 'primary'}, 13 | {name: 'Secondary', class: 'secondary'}, 14 | {name: 'Success', class: 'success'}, 15 | {name: 'Info', class: 'info'}, 16 | {name: 'Warning', class: 'warning'}, 17 | {name: 'Danger', class: 'danger'}, 18 | {name: 'Dark', class: 'dark'}, 19 | {name: 'Light', class: 'light'}, 20 | ]; 21 | const isLight = color => ( 22 | color.name === 'Light' || 23 | (color.name === 'Primary' && config.isPrimaryLight) || 24 | (color.name === 'Secondary' && config.isSecondaryLight) 25 | ); 26 | const isAlmostInvisibleOnBackground = color => ( 27 | (color.name === 'Light' && config.isBackgroundLight) || 28 | (color.name === 'Dark' && !config.isBackgroundLight) 29 | ); 30 | 31 | include ../nav 32 | 33 | .container.mb-3 34 | h1.text-center= config.name 35 | .h6.text-muted.text-center.mb-3= config.tagline 36 | 37 | mixin h 38 | h2.h3.my-4.text-center 39 | block 40 | 41 | include ./_use 42 | 43 | +h Button 44 | include ./button 45 | +h Dropdown 46 | include ./dropdown 47 | +h Badge 48 | include ./badge 49 | +h Alert 50 | include ./alert 51 | +h Form 52 | include ./form 53 | +h Navbar 54 | include ./navbar 55 | +h Table 56 | include ./table 57 | +h Breadcrumb 58 | include ./breadcrumb 59 | +h Pagination 60 | include ./pagination 61 | +h Progress 62 | include ./progress 63 | +h Card 64 | include ./card 65 | #code.modal.fade(tabindex='-1', role='dialog') 66 | .modal-dialog.modal-xl.modal-dialog-centered(role='document') 67 | .modal-content 68 | .modal-body 69 | pre 70 | code.html.rounded 71 | .modal-footer 72 | button.btn.btn-secondary(data-dismiss='modal') Close 73 | button.copy.btn.btn-primary(data-toggle="copy") Copy 74 | 75 | include ../footer 76 | 77 | script!= `window.config = ${JSON.stringify(config)};` 78 | script(src="../_/index.js") 79 | -------------------------------------------------------------------------------- /src/_/index.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | import 'bootstrap'; 3 | import * as clipboard from 'clipboard-polyfill'; 4 | 5 | // Highlight.js 6 | import hljs from 'highlight.js/lib/highlight'; 7 | import xml from 'highlight.js/lib/languages/xml'; 8 | hljs.registerLanguage('xml', xml); 9 | 10 | $(document).on('click', 'a[href="#"]', event => event.preventDefault()); 11 | 12 | $(document).on('click', '[data-toggle=copy]', function() { 13 | const $this = $(this); 14 | clipboard.writeText($this.data('text')); 15 | const html = $this.html(); 16 | $this.text('Copied!'); 17 | setTimeout(() => $this.html(html), 2000); 18 | }); 19 | 20 | $(document).on('submit', 'form:not([target])', event => event.preventDefault()); 21 | 22 | const indent = string => 23 | string 24 | .split('\n') 25 | .map(line => ` ${line}`) 26 | .join('\n'); 27 | 28 | const prettify = html => { 29 | const recur = node => { 30 | switch (node.nodeType) { 31 | case Node.ELEMENT_NODE: 32 | const name = node.tagName.toLowerCase(); 33 | const isSelfClosing = name === 'input'; 34 | let html = `<${name}`; 35 | for (const name of node.getAttributeNames()) { 36 | const value = node.getAttribute(name); 37 | html += value ? ` ${name}="${value}"` : ` ${name}`; 38 | } 39 | html += '>'; 40 | if (isSelfClosing) { 41 | return html; 42 | } 43 | for (const child of node.childNodes) { 44 | html += '\n' + indent(recur(child)); 45 | } 46 | html += `\n`; 47 | return html; 48 | case Node.TEXT_NODE: 49 | return node.textContent.trim(); 50 | default: 51 | return ''; 52 | } 53 | }; 54 | const t = document.createElement('template'); 55 | t.innerHTML = html; 56 | return [].map.call(t.content.childNodes, recur).join('\n'); 57 | }; 58 | 59 | const $code = $('#code'); 60 | $('.snippet').each(function() { 61 | const html = prettify($(this).html()); 62 | $(` 63 |
64 | 67 | 68 | 69 |
70 | `) 71 | .on('click', () => { 72 | hljs.highlightBlock($code.find('pre code').text(html)[0]); 73 | $code.find('.copy').data('text', html); 74 | $code.modal('show'); 75 | }) 76 | .appendTo(this); 77 | }); 78 | 79 | $('a[data-href]').each(function() { 80 | const $this = $(this); 81 | $this.attr('href', $this.data('href')); 82 | }); 83 | -------------------------------------------------------------------------------- /src/_/_use.pug: -------------------------------------------------------------------------------- 1 | .accordion 2 | - const cssUrl = `https://cdn.jsdelivr.net/npm/bootstrap-themes@^1.0.2/dist/${config.slug}/index.min.css`; 3 | - const linkHtml = ``; 4 | - const inputStyle = config.isBackgroundLight ? '' : 'border: none;'; 5 | .d-flex.justify-content-center.mb-2 6 | a.btn.btn-primary.btn-sm.mr-2(download=`${config.slug}.css` data-href="index.css" href="#") Download CSS → 7 | a.btn.btn-primary.btn-sm(download=`${config.slug}.min.css` data-href="index.min.css" href="#") Download Minified CSS → 8 | .input-group.mb-2 9 | .input-group-prepend 10 | button.btn.btn-secondary.btn-sm(tabindex=-1) CDN URL 11 | input.form-control.form-control-sm.text-monospace(readonly value=cssUrl style=inputStyle) 12 | .input-group-append 13 | button.btn.btn-primary.btn-sm(data-toggle="copy" data-text=cssUrl) Copy 14 | .input-group.mb-2 15 | .input-group-prepend 16 | button.btn.btn-secondary.btn-sm(tabindex=-1) HTML 17 | input.form-control.form-control-sm.text-monospace(readonly value=linkHtml style=inputStyle) 18 | .input-group-append 19 | button.btn.btn-primary.btn-sm(data-toggle="copy" data-text=linkHtml) Copy 20 | div.d-flex.justify-content-center.mb-2 21 | button.btn.btn-primary.btn-sm.mr-2(data-toggle="collapse" data-target="#other-ways") Other Ways To Download ↓ 22 | button.btn.btn-primary.btn-sm(data-toggle="collapse" data-target="#customize") Customize ↓ 23 | #other-ways.collapse.bg-white.rounded.border.shadow-sm.text-dark(data-parent=".accordion") 24 | .p-3 25 | .h4.text-center SCSS from NPM 26 | p. 27 | First, install the bootstrap and bootstrap-themes 28 | NPM packages into your Node.js project: 29 | .input-group.mb-3 30 | - const shellCommand = `npm install --save bootstrap bootstrap-themes` 31 | .input-group-prepend 32 | button.btn.btn-secondary.btn-sm(tabindex=-1) Shell 33 | input.form-control.form-control-sm.text-monospace(readonly value=shellCommand) 34 | .input-group-append 35 | button.btn.btn-primary.btn-sm(data-toggle="copy" data-text=shellCommand) Copy 36 | p. 37 | Now add the following to your .scss file (adjust the path to 38 | node_modules/ if your SCSS file is not in the root 39 | directory, e.g. ../node_modules/): 40 | .input-group.mb-3 41 | - 42 | const code = ` 43 | // Override variables here. 44 | @import "node_modules/bootstrap-themes/src/${config.slug}/variables"; 45 | @import "node_modules/bootstrap/scss/bootstrap"; 46 | @import "node_modules/bootstrap-themes/src/${config.slug}/overrides"; 47 | // Add additional styles here.`; 48 | .input-group-prepend 49 | button.btn.btn-secondary.btn-sm.d-flex.align-items-center(tabindex=-1) SCSS 50 | textarea.form-control.form-control-sm.text-monospace(readonly rows=code.split('\n').length - 1 style="white-space: pre;")= code 51 | .input-group-append 52 | button.btn.btn-primary.btn-sm.d-flex.align-items-center(data-toggle="copy" data-text=code) 53 | | Copy 54 | .h4.text-center Source Code 55 | p.mb-0. 56 | Download the complete source code of all our themes from 57 | our GitHub Repository. 58 | #customize.collapse.bg-white.rounded.border.shadow-sm.text-dark(data-parent=".accordion") 59 | mixin code(label, code) 60 | .input-group.mb-3 61 | .input-group-prepend 62 | button.btn.btn-secondary.btn-sm.d-flex.align-items-center(tabindex=-1)= label 63 | textarea.form-control.form-control-sm.text-monospace(readonly rows=code.split('\n').length - 1 style="white-space: pre;")= code 64 | .input-group-append 65 | button.btn.btn-primary.btn-sm.d-flex.align-items-center(data-toggle="copy" data-text=code) 66 | | Copy 67 | .p-3 68 | .h4.text-center Using SCSS 69 | p. 70 | Refer to the Theming Bootstrap Guide 71 | on how to customize Bootstrap using SCSS Variables. 72 | p. 73 | Customizing our themes is similar -- just make sure to change the value 74 | of the variables before importing #{config.slug}/variables. 75 | p. 76 | For example, here's how you can change the font to Fira Sans, 77 | the blue color value, the secondary color value, and the body background: 78 | - 79 | const scssCode = ` 80 | // Override variables here. 81 | $web-font-url: "https://fonts.googleapis.com/css?family=Fira+Sans:400,700&display=swap"; 82 | $web-font-name: "Fira Sans"; 83 | $blue: #1e90ff; 84 | $primary: #9b42a0; 85 | $body-bg: #f8f8f8; 86 | @import "node_modules/bootstrap-themes/src/${config.slug}/variables"; 87 | @import "node_modules/bootstrap/scss/bootstrap"; 88 | @import "node_modules/bootstrap-themes/src/${config.slug}/overrides"; 89 | // Add additional styles here.`; 90 | +code("SCSS", scssCode) 91 | p.mb-0. 92 | For a list of all the variables in our theme, refer to 93 | #{config.slug}/_variables.scss 94 | and 95 | #{config.slug}/_overrides.scss. 96 | -------------------------------------------------------------------------------- /src/_/form.pug: -------------------------------------------------------------------------------- 1 | mixin box 2 | .snippet 3 | .bg-white.text-dark.border.rounded-sm.p-4.mb-3 4 | block 5 | 6 | .row 7 | .col-md-6 8 | +box 9 | form 10 | .form-group 11 | label(for='form-1-email') Email address 12 | input#form-1-email.form-control(type='email', aria-describedby='form-1-email-help', placeholder='Enter email') 13 | small#form-1-email-help.form-text.text-muted We'll never share your email with anyone else. 14 | .form-group 15 | label(for='form-1-password') Password 16 | input#form-1-password.form-control(type='password', placeholder='Password') 17 | .form-group.form-check 18 | input#form-1-tos.form-check-input(type='checkbox') 19 | label.form-check-label(for='form-1-tos') I agree to the Terms of Service 20 | button.btn.btn-primary(type='submit') Sign up 21 | 22 | .col-md-6 23 | +box 24 | form 25 | .form-group 26 | label(for='form-2-email') Email address 27 | input#form-2-email.form-control(type='email', placeholder='Enter email') 28 | .form-group 29 | label(for='form-2-password') Password 30 | input#form-2-password.form-control(type='password',, aria-describedby='form-2-password-help' placeholder='Password') 31 | small#form-2-password-help.form-text.text-muted Remember: The password is case-sensitive. 32 | .form-group.form-check 33 | input#form-2-tos.form-check-input(type='checkbox') 34 | label.form-check-label(for='form-2-tos') Remember Me 35 | button.btn.btn-primary(type='submit') Sign In 36 | 37 | +box 38 | form 39 | .form-row 40 | .form-group.col-md-6 41 | label(for='form-3-email') Email 42 | input#form-3-email.form-control(type='email', placeholder='Email') 43 | .form-group.col-md-6 44 | label(for='form-3-password') Password 45 | input#form-3-password.form-control(type='password', placeholder='Password') 46 | .form-group 47 | label(for='form-3-address') Address 48 | input#form-3-address.form-control(type='text', placeholder='1234 Main St') 49 | .form-group 50 | label(for='form-3-address-2') Address 2 51 | input#form-3-address-2.form-control(type='text', placeholder='Apartment, Studio, or Floor') 52 | .form-row 53 | .form-group.col-md-6 54 | label(for='form-3-city') City 55 | input#form-3-city.form-control(type='text', placeholder='City') 56 | .form-group.col-md-4 57 | label(for='form-3-state') State 58 | select#form-3-state.form-control 59 | option(selected='') Choose... 60 | option ... 61 | .form-group.col-md-2 62 | label(for='form-3-zip') Zip 63 | input#form-3-zip.form-control(type='text', placeholder='Zip') 64 | .form-group 65 | .form-check 66 | input#form-3-tos.form-check-input(type='checkbox') 67 | label.form-check-label(for='form-3-tos') 68 | | I agree to the Terms of Service 69 | button.btn.btn-primary(type='submit') Sign Up 70 | 71 | +box 72 | form 73 | .form-row 74 | .col-md-4.mb-3 75 | label(for='form-4-first-name') First name 76 | input#form-4-first-name.form-control.is-valid(type='text', placeholder='First name', value='Jane', required='') 77 | .valid-feedback 78 | | Looks good! 79 | .col-md-4.mb-3 80 | label(for='form-4-last-name') Last name 81 | input#form-4-last-name.form-control.is-valid(type='text', placeholder='Last name', value='Doe', required='') 82 | .valid-feedback 83 | | Looks good! 84 | .col-md-4.mb-3 85 | label(for='form-4-username') Username 86 | .input-group 87 | .input-group-prepend 88 | span.input-group-text @ 89 | input#form-4-username.form-control.is-invalid(type='text', value='janedoe', required='') 90 | .invalid-feedback 91 | | This username is already taken! 92 | .form-row 93 | .col-md-4.mb-3 94 | label(for='form-4-city') City 95 | input#form-4-city.form-control.is-invalid(type='text', placeholder='City', required='') 96 | .invalid-feedback 97 | | Please provide a valid city. 98 | .col-md-4.mb-3 99 | label(for='form-4-state') State 100 | input#form-4-state.form-control.is-invalid(type='text', placeholder='State', required='') 101 | .invalid-feedback 102 | | Please provide a valid state. 103 | .col-md-4.mb-3 104 | label(for='form-4-zip') Zip 105 | input#form-4-zip.form-control.is-invalid(type='text', placeholder='Zip', required='') 106 | .invalid-feedback 107 | | Please provide a valid zip. 108 | .form-group 109 | .form-check 110 | input#form-4-tos.form-check-input.is-invalid(type='checkbox', value='', required='') 111 | label.form-check-label(for='form-4-tos') 112 | | I Agree to the Terms of Service 113 | .invalid-feedback 114 | | You must agree before submitting. 115 | button.btn.btn-primary(type='submit') Sign Up 116 | 117 | +box 118 | .input-group.mb-3 119 | .input-group-prepend 120 | span#form-5-at.input-group-text @ 121 | input.form-control(type='text', placeholder='Username', aria-label='Username', aria-describedby='form-5-at') 122 | .input-group.mb-3 123 | input.form-control(type='text', placeholder="Recipient's username", aria-label="Recipient's username", aria-describedby='form-5-email-domain') 124 | .input-group-append 125 | span#form-5-email-domain.input-group-text @example.com 126 | label(for='form-5-url') Your vanity URL 127 | .input-group.mb-3 128 | .input-group-prepend 129 | span#form-5-url-prefix.input-group-text https://example.com/users/ 130 | input#form-5-url.form-control(type='text', aria-describedby='form-5-url-prefix') 131 | .input-group.mb-3 132 | .input-group-prepend 133 | span.input-group-text $ 134 | input.form-control(type='text', aria-label='Amount (to the nearest dollar)') 135 | .input-group-append 136 | span.input-group-text .00 137 | .input-group 138 | .input-group-prepend 139 | span.input-group-text Notes 140 | textarea.form-control(aria-label='Notes' rows=3) 141 | 142 | +box 143 | .row 144 | .col-md-4 145 | .custom-control.custom-checkbox 146 | input#custom-checkbox-1.custom-control-input(type='checkbox') 147 | label.custom-control-label(for='custom-checkbox-1') A Custom Checkbox 148 | 149 | .custom-control.custom-checkbox 150 | input#custom-checkbox-2.custom-control-input(type='checkbox') 151 | label.custom-control-label(for='custom-checkbox-2') A Custom Checkbox 2 152 | 153 | .custom-control.custom-checkbox.mb-3 154 | input#custom-checkbox-3.custom-control-input(type='checkbox', disabled) 155 | label.custom-control-label(for='custom-checkbox-3') A Disabled Custom Checkbox 156 | 157 | .col-md-4 158 | .custom-control.custom-radio 159 | input#custom-radio-1.custom-control-input(type='radio', name='customRadio') 160 | label.custom-control-label(for='custom-radio-1') A Custom Radio 161 | 162 | .custom-control.custom-radio 163 | input#custom-radio-2.custom-control-input(type='radio', name='customRadio') 164 | label.custom-control-label(for='custom-radio-2') A Custom Radio 2 165 | 166 | .custom-control.custom-radio.mb-3 167 | input#custom-radio-3.custom-control-input(type='radio', name='customRadio', disabled) 168 | label.custom-control-label(for='custom-radio-3') A Disabled Custom Radio 169 | 170 | .col-md-4 171 | .custom-control.custom-switch 172 | input#custom-switch-1.custom-control-input(type='checkbox') 173 | label.custom-control-label(for='custom-switch-1') A Custom Switch 174 | 175 | .custom-control.custom-switch 176 | input#custom-switch-2.custom-control-input(type='checkbox') 177 | label.custom-control-label(for='custom-switch-2') A Custom Switch 2 178 | 179 | .custom-control.custom-switch.mb-3 180 | input#custom-switch-3.custom-control-input(type='checkbox', disabled='') 181 | label.custom-control-label(for='custom-switch-3') A Disabled Custom Switch 182 | 183 | .row 184 | .col-md-4 185 | select.custom-select.mb-3 186 | option(selected='') A Custom Select 187 | option(value='1') One 188 | option(value='2') Two 189 | option(value='3') Three 190 | 191 | .col-md-4 192 | select.custom-select(multiple='').mb-3.mb-md-0 193 | option(selected='') A Custom Multiple Select 194 | option(value='1') One 195 | option(value='2') Two 196 | option(value='3') Three 197 | 198 | .col-md-4 199 | label(for='custom-range-1') A Custom Range 200 | input#custom-range-1.custom-range(type='range') 201 | --------------------------------------------------------------------------------