diff --git a/site/content/docs/0.0/examples/album/index.html b/site/content/docs/0.0/examples/album/index.html new file mode 100644 index 0000000000..54b2c5bde1 --- /dev/null +++ b/site/content/docs/0.0/examples/album/index.html @@ -0,0 +1,208 @@ +--- +layout: examples +title: Album example +--- + +
+
+
+
+
+

About

+

Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.

+
+
+

Contact

+ +
+
+
+
+
+
+ + + Album + + +
+
+
+ +
+ +
+
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/0.0/examples/blog/blog.css b/site/content/docs/0.0/examples/blog/blog.css new file mode 100644 index 0000000000..86eedaf1de --- /dev/null +++ b/site/content/docs/0.0/examples/blog/blog.css @@ -0,0 +1,39 @@ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} diff --git a/site/content/docs/0.0/examples/blog/blog.rtl.css b/site/content/docs/0.0/examples/blog/blog.rtl.css new file mode 100644 index 0000000000..bd0c9d1f05 --- /dev/null +++ b/site/content/docs/0.0/examples/blog/blog.rtl.css @@ -0,0 +1,39 @@ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ + +.blog-header-logo { + font-family: Amiri, Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Amiri, Georgia, "Times New Roman", serif; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} diff --git a/site/content/docs/0.0/examples/blog/index.html b/site/content/docs/0.0/examples/blog/index.html new file mode 100644 index 0000000000..39535911e7 --- /dev/null +++ b/site/content/docs/0.0/examples/blog/index.html @@ -0,0 +1,309 @@ +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" + - "blog.css" +--- + + + + + + + + + + + + + + +
+
+
+
+ Subscribe +
+
+ +
+
+ + Search + + Sign up +
+
+
+ +
+ +
+
+ +
+
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+ +
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2021 by Mark

+ +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Blockquotes

+

This is an example blockquote in action:

+
+

Quoted text goes here.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example lists

+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

And this is an ordered list:

+
    +
  1. First list item
    2. +
  2. Second list item with a longer description
    3. +
  3. Third list item to close it out
    4. +
+

And this is a definition list:

+
+
HyperText Markup Language (HTML)
+
The language used to describe and define the content of a Web page
+
Cascading Style Sheets (CSS)
+
Used to describe the appearance of Web content
+
JavaScript (JS)
+
The programming language used to build advanced Web sites and applications
+
+

Inline HTML elements

+

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

+
    +
  • To bold text, use <strong>.
    • +
  • To italicize text, use <em>.
    • +
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
    • +
  • Citations, like — Mark Otto, should use <cite>.
    • +
  • Deleted text should use <del> and inserted text should use <ins>.
    • +
  • Superscript text uses <sup> and subscript text uses <sub>.
    • +
+

Most of these elements are styled by browsers with few modifications on our part.

+

Heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Sub-heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+ 
Example code block
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

Another blog post

+

December 23, 2020 by Jacob

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
+

Longer quote goes here, maybe with some emphasized text in the middle of it.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example table

+

And don't forget about tables in these posts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUpvotesDownvotes
Alice1011
Bob43
Charlie79
Totals2123
+ +

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

New feature

+

December 14, 2020 by Chris

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ + + +
+ +
+
+
+

About

+

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

+
+ +
+

Recent posts

+ +
+ +
+

Archives

+
    +
  1. March 2021
    2. +
  2. February 2021
    3. +
  3. January 2021
    4. +
  4. December 2020
    5. +
  5. November 2020
    6. +
  6. October 2020
    7. +
  7. September 2020
    8. +
  8. August 2020
    9. +
  9. July 2020
    10. +
  10. June 2020
    11. +
  11. May 2020
    12. +
  12. April 2020
    13. +
+
+ +
+

Elsewhere

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+
+
+ +
+ + diff --git a/site/content/docs/0.0/examples/carousel/carousel.css b/site/content/docs/0.0/examples/carousel/carousel.css new file mode 100644 index 0000000000..be0af524a6 --- /dev/null +++ b/site/content/docs/0.0/examples/carousel/carousel.css @@ -0,0 +1,82 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: rgb(var(--bs-tertiary-color-rgb)); +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +/* rtl:begin:remove */ +.featurette-heading { + letter-spacing: -.05rem; +} + +/* rtl:end:remove */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/0.0/examples/carousel/carousel.rtl.css b/site/content/docs/0.0/examples/carousel/carousel.rtl.css new file mode 100644 index 0000000000..9ff275d4ea --- /dev/null +++ b/site/content/docs/0.0/examples/carousel/carousel.rtl.css @@ -0,0 +1,74 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: rgb(var(--bs-tertiary-color-rgb)); +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/0.0/examples/carousel/index.html b/site/content/docs/0.0/examples/carousel/index.html new file mode 100644 index 0000000000..c76fec2207 --- /dev/null +++ b/site/content/docs/0.0/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

And lastly this, the third column of representative placeholder content.

+

View details »

+
+
+ + + + +
+ +
+
+

First featurette heading. It’ll blow your mind.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

Oh yeah, it’s that good. See for yourself.

+

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

And lastly, this one. Checkmate.

+

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/0.0/examples/checkout/checkout.css b/site/content/docs/0.0/examples/checkout/checkout.css new file mode 100644 index 0000000000..e5ea31c405 --- /dev/null +++ b/site/content/docs/0.0/examples/checkout/checkout.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/0.0/examples/checkout/checkout.js b/site/content/docs/0.0/examples/checkout/checkout.js new file mode 100644 index 0000000000..30ea0aa6b1 --- /dev/null +++ b/site/content/docs/0.0/examples/checkout/checkout.js @@ -0,0 +1,19 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(() => { + 'use strict' + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + const forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.from(forms).forEach(form => { + form.addEventListener('submit', event => { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) +})() diff --git a/site/content/docs/0.0/examples/checkout/index.html b/site/content/docs/0.0/examples/checkout/index.html new file mode 100644 index 0000000000..8fe01f02ec --- /dev/null +++ b/site/content/docs/0.0/examples/checkout/index.html @@ -0,0 +1,233 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "checkout.css" +extra_js: + - src: "checkout.js" + defer: true +body_class: "bg-body-tertiary" +--- + +
+
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+ +
+ + +
+ Valid last name is required. +
+
+ +
+ +
+ @ + +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+ + +
+ Please select a valid country. +
+
+ +
+ + +
+ Please provide a valid state. +
+
+ +
+ + +
+ Zip code required. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+ +
+ + +
+ Credit card number is required +
+
+ +
+ + +
+ Expiration date required +
+
+ +
+ + +
+ Security code required +
+
+
+ +
+ + +
+
+
+
+ + +
diff --git a/site/content/docs/0.0/examples/cover/cover.css b/site/content/docs/0.0/examples/cover/cover.css new file mode 100644 index 0000000000..2e7aef8f88 --- /dev/null +++ b/site/content/docs/0.0/examples/cover/cover.css @@ -0,0 +1,50 @@ +/* + * Globals + */ + + +/* Custom default button */ +.btn-light, +.btn-light:hover, +.btn-light:focus { + color: #333; + text-shadow: none; /* Prevent inheritance from `body` */ +} + + +/* + * Base structure + */ + +body { + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); +} + +.cover-container { + max-width: 42em; +} + + +/* + * Header + */ + +.nav-masthead .nav-link { + color: rgba(255, 255, 255, .5); + border-bottom: .25rem solid transparent; +} + +.nav-masthead .nav-link:hover, +.nav-masthead .nav-link:focus { + border-bottom-color: rgba(255, 255, 255, .25); +} + +.nav-masthead .nav-link + .nav-link { + margin-left: 1rem; +} + +.nav-masthead .active { + color: #fff; + border-bottom-color: #fff; +} diff --git a/site/content/docs/0.0/examples/cover/index.html b/site/content/docs/0.0/examples/cover/index.html new file mode 100644 index 0000000000..002a5c3100 --- /dev/null +++ b/site/content/docs/0.0/examples/cover/index.html @@ -0,0 +1,33 @@ +--- +layout: examples +title: Cover Template +extra_css: + - "cover.css" +html_class: "h-100" +body_class: "d-flex h-100 text-center text-bg-dark" +--- + +
+
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
diff --git a/site/content/docs/0.0/examples/dashboard/dashboard.css b/site/content/docs/0.0/examples/dashboard/dashboard.css new file mode 100644 index 0000000000..154940c90b --- /dev/null +++ b/site/content/docs/0.0/examples/dashboard/dashboard.css @@ -0,0 +1,48 @@ +.bi { + display: inline-block; + width: 1rem; + height: 1rem; +} + +/* + * Sidebar + */ + +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; + } +} + +.sidebar .nav-link { + font-size: .875rem; + font-weight: 500; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar-heading { + font-size: .75rem; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .form-control { + padding: .75rem 1rem; +} diff --git a/site/content/docs/0.0/examples/dashboard/dashboard.js b/site/content/docs/0.0/examples/dashboard/dashboard.js new file mode 100644 index 0000000000..a60b39356a --- /dev/null +++ b/site/content/docs/0.0/examples/dashboard/dashboard.js @@ -0,0 +1,49 @@ +/* globals Chart:false */ + +(() => { + 'use strict' + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } + } + } + }) +})() diff --git a/site/content/docs/0.0/examples/dashboard/dashboard.rtl.css b/site/content/docs/0.0/examples/dashboard/dashboard.rtl.css new file mode 100644 index 0000000000..5c8a7e2571 --- /dev/null +++ b/site/content/docs/0.0/examples/dashboard/dashboard.rtl.css @@ -0,0 +1,48 @@ +.bi { + display: inline-block; + width: 1rem; + height: 1rem; +} + +/* + * Sidebar + */ + +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; + } +} + +.sidebar .nav-link { + font-size: .875rem; + font-weight: 500; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar-heading { + font-size: .75rem; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .form-control { + padding: .75rem 1rem; +} diff --git a/site/content/docs/0.0/examples/dashboard/index.html b/site/content/docs/0.0/examples/dashboard/index.html new file mode 100644 index 0000000000..d8941f3684 --- /dev/null +++ b/site/content/docs/0.0/examples/dashboard/index.html @@ -0,0 +1,333 @@ +--- +layout: examples +title: Dashboard Template +extra_css: + - "dashboard.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" + integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" + defer: true + - src: "dashboard.js" + defer: true +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Company name + + + + +
+ +
+
+
+
+
+
Company name
+ +
+
+ + +
+ Saved reports + + + +
+ + +
+ + +
+
+
+ +
+
+

Dashboard

+
+
+ + +
+ +
+
+ + + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+
+
diff --git a/site/content/docs/0.0/examples/jumbotron/index.html b/site/content/docs/0.0/examples/jumbotron/index.html new file mode 100644 index 0000000000..049684df68 --- /dev/null +++ b/site/content/docs/0.0/examples/jumbotron/index.html @@ -0,0 +1,44 @@ +--- +layout: examples +title: Jumbotron example +--- + +
+
+
+ + Bootstrap + Jumbotron example + +
+ +
+
+

Custom jumbotron

+

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+ +
+
+ +
+
+
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ +
+
+
+
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ +
+
+
+ + +
+
diff --git a/site/content/docs/0.0/examples/pricing/index.html b/site/content/docs/0.0/examples/pricing/index.html new file mode 100644 index 0000000000..2f375b36d2 --- /dev/null +++ b/site/content/docs/0.0/examples/pricing/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: Pricing example +extra_css: + - "pricing.css" +--- + + + + Check + + + + +
+
+
+ + Bootstrap + Pricing example + + + +
+ +
+

Pricing

+

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

+
+
+ +
+
+
+
+
+

Free

+
+
+

$0/mo

+
    +
  • 10 users included
    • +
  • 2 GB of storage
    • +
  • Email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Pro

+
+
+

$15/mo

+
    +
  • 20 users included
    • +
  • 10 GB of storage
    • +
  • Priority email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Enterprise

+
+
+

$29/mo

+
    +
  • 30 users included
    • +
  • 15 GB of storage
    • +
  • Phone and email support
    • +
  • Help center access
    • +
+ +
+
+
+
+ +

Compare plans

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FreeProEnterprise
Public
Private
Permissions
Sharing
Unlimited members
Extra security
+
+
+ + +
diff --git a/site/content/docs/0.0/examples/pricing/pricing.css b/site/content/docs/0.0/examples/pricing/pricing.css new file mode 100644 index 0000000000..c65d0208f3 --- /dev/null +++ b/site/content/docs/0.0/examples/pricing/pricing.css @@ -0,0 +1,11 @@ +body { + background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); +} + +.container { + max-width: 960px; +} + +.pricing-header { + max-width: 700px; +} diff --git a/site/content/docs/0.0/examples/product/index.html b/site/content/docs/0.0/examples/product/index.html new file mode 100644 index 0000000000..fd4d498477 --- /dev/null +++ b/site/content/docs/0.0/examples/product/index.html @@ -0,0 +1,189 @@ +--- +layout: examples +title: Product example +extra_css: + - "product.css" +--- + + + + + + + + + + + + + + + + +
+
+
+

Designed for engineers

+

Build anything you want with Aperture

+
+ + Learn more + + + + Buy + + +
+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+ + diff --git a/site/content/docs/0.0/examples/product/product.css b/site/content/docs/0.0/examples/product/product.css new file mode 100644 index 0000000000..6c90ae51ec --- /dev/null +++ b/site/content/docs/0.0/examples/product/product.css @@ -0,0 +1,74 @@ +.container { + max-width: 960px; +} + +.icon-link > .bi { + width: .75em; + height: .75em; +} + +/* + * Custom translucent site header + */ + +.site-header { + background-color: rgba(0, 0, 0, .85); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); +} +.site-header a { + color: #8e8e8e; + transition: color .15s ease-in-out; +} +.site-header a:hover { + color: #fff; + text-decoration: none; +} + +/* + * Dummy devices (replace them with your own or something else entirely!) + */ + +.product-device { + position: absolute; + right: 10%; + bottom: -30%; + width: 300px; + height: 540px; + background-color: #333; + border-radius: 21px; + transform: rotate(30deg); +} + +.product-device::before { + position: absolute; + top: 10%; + right: 10px; + bottom: 10%; + left: 10px; + content: ""; + background-color: rgba(255, 255, 255, .1); + border-radius: 5px; +} + +.product-device-2 { + top: -25%; + right: auto; + bottom: 0; + left: 5%; + background-color: #e5e5e5; +} + + +/* + * Extra utilities + */ + +.flex-equal > * { + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + flex: 1; + } +} diff --git a/site/content/docs/0.0/examples/sign-in/index.html b/site/content/docs/0.0/examples/sign-in/index.html new file mode 100644 index 0000000000..8420c45274 --- /dev/null +++ b/site/content/docs/0.0/examples/sign-in/index.html @@ -0,0 +1,32 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "sign-in.css" +body_class: "d-flex align-items-center py-4 bg-body-tertiary" +--- + +
+
+ +

Please sign in

+ +
+ + +
+
+ + +
+ +
+ + +
+ +

© 2017–{{< year >}}

+
+
diff --git a/site/content/docs/0.0/examples/sign-in/sign-in.css b/site/content/docs/0.0/examples/sign-in/sign-in.css new file mode 100644 index 0000000000..641f6d906e --- /dev/null +++ b/site/content/docs/0.0/examples/sign-in/sign-in.css @@ -0,0 +1,25 @@ +html, +body { + height: 100%; +} + +.form-signin { + max-width: 330px; + padding: 1rem; +} + +.form-signin .form-floating:focus-within { + z-index: 2; +} + +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/site/content/docs/0.0/examples/sticky-footer-navbar/index.html b/site/content/docs/0.0/examples/sticky-footer-navbar/index.html new file mode 100644 index 0000000000..36bbff50e8 --- /dev/null +++ b/site/content/docs/0.0/examples/sticky-footer-navbar/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: + - "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +
+ + +
+ + +
+
+

Sticky footer with fixed navbar

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

+

Back to }}">the default sticky footer minus the navbar.

+
+
+ + diff --git a/site/content/docs/0.0/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/0.0/examples/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 0000000000..3087ead7db --- /dev/null +++ b/site/content/docs/0.0/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,7 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +main > .container { + padding: 60px 15px 0; +} diff --git a/site/content/docs/0.0/examples/sticky-footer/index.html b/site/content/docs/0.0/examples/sticky-footer/index.html new file mode 100644 index 0000000000..631addabe4 --- /dev/null +++ b/site/content/docs/0.0/examples/sticky-footer/index.html @@ -0,0 +1,23 @@ +--- +layout: examples +title: Sticky Footer Template +extra_css: + - "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + + +
+
+

Sticky footer

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Use }}">the sticky footer with a fixed navbar if need be, too.

+
+
+ + diff --git a/site/content/docs/0.0/examples/sticky-footer/sticky-footer.css b/site/content/docs/0.0/examples/sticky-footer/sticky-footer.css new file mode 100644 index 0000000000..f8be437294 --- /dev/null +++ b/site/content/docs/0.0/examples/sticky-footer/sticky-footer.css @@ -0,0 +1,9 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} diff --git a/site/data/examples.yml b/site/data/examples.yml index ac3b1c5e53..601e3c7098 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -37,6 +37,34 @@ url: /examples/tree/main/webpack indexPath: src/index.html +- category: Custom Components + description: "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." + examples: + - name: Album + description: "Simple one-page template for photo galleries, portfolios, and more." + - name: Pricing + description: "Example pricing page built with Cards and featuring a custom header and footer." + - name: Checkout + description: "Custom checkout form showing our form components and their validation features." + - name: Product + description: "Lean product-focused marketing page with extensive grid and image work." + - name: Cover + description: "A one-page template for building simple and beautiful home pages." + - name: Carousel + description: "Customize the navbar and carousel, then add some new components." + - name: Blog + description: "Magazine like blog template with header, navigation, featured content." + - name: Dashboard + description: "Basic admin dashboard shell with fixed sidebar and navbar." + - name: Sign-in + description: "Custom form layout and design for a simple sign in form." + - name: Sticky footer + description: "Attach a footer to the bottom of the viewport when page content is short." + - name: Sticky footer navbar + description: "Attach a footer to the bottom of the viewport with a fixed top navbar." + - name: Jumbotron + description: "Use utilities to recreate and enhance Bootstrap 4's jumbotron." + - category: Framework description: "Examples that focus on implementing uses of built-in components provided by OUDS Web." examples: diff --git a/site/static/docs/0.0/assets/img/examples/album.png b/site/static/docs/0.0/assets/img/examples/album.png new file mode 100644 index 0000000000..f0af624013 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/album.png differ diff --git a/site/static/docs/0.0/assets/img/examples/album@2x.png b/site/static/docs/0.0/assets/img/examples/album@2x.png new file mode 100644 index 0000000000..bd43a51e1a Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/album@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/blog.png b/site/static/docs/0.0/assets/img/examples/blog.png new file mode 100644 index 0000000000..3ce428418e Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/blog.png differ diff --git a/site/static/docs/0.0/assets/img/examples/blog@2x.png b/site/static/docs/0.0/assets/img/examples/blog@2x.png new file mode 100644 index 0000000000..f5480314b4 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/blog@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/carousel.png b/site/static/docs/0.0/assets/img/examples/carousel.png new file mode 100644 index 0000000000..e2bbba6c80 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/carousel.png differ diff --git a/site/static/docs/0.0/assets/img/examples/carousel@2x.png b/site/static/docs/0.0/assets/img/examples/carousel@2x.png new file mode 100644 index 0000000000..bc5d4a09d0 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/carousel@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/checkout.png b/site/static/docs/0.0/assets/img/examples/checkout.png new file mode 100644 index 0000000000..cb81ef2d7c Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/checkout.png differ diff --git a/site/static/docs/0.0/assets/img/examples/checkout@2x.png b/site/static/docs/0.0/assets/img/examples/checkout@2x.png new file mode 100644 index 0000000000..79c7b4bb82 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/checkout@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/cover.png b/site/static/docs/0.0/assets/img/examples/cover.png new file mode 100644 index 0000000000..5458ff11d3 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/cover.png differ diff --git a/site/static/docs/0.0/assets/img/examples/cover@2x.png b/site/static/docs/0.0/assets/img/examples/cover@2x.png new file mode 100644 index 0000000000..eacd82e983 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/cover@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/dashboard.png b/site/static/docs/0.0/assets/img/examples/dashboard.png new file mode 100644 index 0000000000..52988da739 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/dashboard.png differ diff --git a/site/static/docs/0.0/assets/img/examples/dashboard@2x.png b/site/static/docs/0.0/assets/img/examples/dashboard@2x.png new file mode 100644 index 0000000000..52b23dff69 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/dashboard@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/jumbotron.png b/site/static/docs/0.0/assets/img/examples/jumbotron.png new file mode 100644 index 0000000000..48e0c9c0e0 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/jumbotron.png differ diff --git a/site/static/docs/0.0/assets/img/examples/jumbotron@2x.png b/site/static/docs/0.0/assets/img/examples/jumbotron@2x.png new file mode 100644 index 0000000000..229b630076 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/jumbotron@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/pricing.png b/site/static/docs/0.0/assets/img/examples/pricing.png new file mode 100644 index 0000000000..ea7224615a Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/pricing.png differ diff --git a/site/static/docs/0.0/assets/img/examples/pricing@2x.png b/site/static/docs/0.0/assets/img/examples/pricing@2x.png new file mode 100644 index 0000000000..543b0a3f28 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/pricing@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/product.png b/site/static/docs/0.0/assets/img/examples/product.png new file mode 100644 index 0000000000..a95eff6221 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/product.png differ diff --git a/site/static/docs/0.0/assets/img/examples/product@2x.png b/site/static/docs/0.0/assets/img/examples/product@2x.png new file mode 100644 index 0000000000..1dfe454821 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/product@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sign-in.png b/site/static/docs/0.0/assets/img/examples/sign-in.png new file mode 100644 index 0000000000..8d57f561ca Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sign-in.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sign-in@2x.png b/site/static/docs/0.0/assets/img/examples/sign-in@2x.png new file mode 100644 index 0000000000..477335984d Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sign-in@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar.png b/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar.png new file mode 100644 index 0000000000..8417cc8300 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar@2x.png b/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar@2x.png new file mode 100644 index 0000000000..1abb382230 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sticky-footer-navbar@2x.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sticky-footer.png b/site/static/docs/0.0/assets/img/examples/sticky-footer.png new file mode 100644 index 0000000000..c5ea6ef820 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sticky-footer.png differ diff --git a/site/static/docs/0.0/assets/img/examples/sticky-footer@2x.png b/site/static/docs/0.0/assets/img/examples/sticky-footer@2x.png new file mode 100644 index 0000000000..5a008a0ac3 Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/sticky-footer@2x.png differ