diff --git a/_data/examples.yml b/_data/examples.yml new file mode 100644 index 0000000000..673fde40b6 --- /dev/null +++ b/_data/examples.yml @@ -0,0 +1,55 @@ +- 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." + +- category: Framework + description: "Examples that focus on implementing uses of built-in components provided by Bootstrap." + examples: + - name: "Starter template" + description: "Nothing but the basics: compiled CSS and JavaScript." + - name: Grid + description: "Multiple examples of grid layouts with all four tiers, nesting, and more." + - name: Jumbotron + description: "Build around the jumbotron with a navbar and some basic grid columns." + +- category: Navbars + description: "Taking the default navbar component and showing how it can be moved, placed, and extended." + examples: + - name: Navbars + description: "Demonstration of all responsive and container options for the navbar." + - name: Navbar static + description: "Single navbar example of a static top navbar along with some additional content." + - name: Navbar fixed + description: "Single navbar example with a fixed top navbar along with some additional content." + - name: Navbar bottom + description: "Single navbar example with a bottom navbar along with some additional content." + +- category: Experiments + description: "Examples that focus on future-friendly features or techniques." + examples: + - name: Floating labels + description: "Beautifully simple forms with floating labels over your inputs." + - name: Offcanvas + description: "Turn your expandable navbar into a sliding offcanvas menu." diff --git a/_layouts/examples.html b/_layouts/examples.html new file mode 100644 index 0000000000..768f577fb4 --- /dev/null +++ b/_layouts/examples.html @@ -0,0 +1,16 @@ +--- +layout: default +--- + +
+
+

{{ page.title | smartify }}

+

{{ page.description | smartify }}

+ Download source code +
+ {% include ads.html %} +
+ +
+ {{ content }} +
diff --git a/docs/4.0/examples/album/album.css b/docs/4.0/examples/album/album.css index 1d052298da..7eabbf9b2f 100644 --- a/docs/4.0/examples/album/album.css +++ b/docs/4.0/examples/album/album.css @@ -1,17 +1,19 @@ -body { - min-height: 75rem; /* Can be removed; just added for demo purposes */ -} - -.navbar { - margin-bottom: 0; +:root { + --jumbotron-padding-y: 3rem; } .jumbotron { - padding-top: 6rem; - padding-bottom: 6rem; + padding-top: var(--jumbotron-padding-y); + padding-bottom: var(--jumbotron-padding-y); margin-bottom: 0; background-color: #fff; } +@media (min-width: 768px) { + .jumbotron { + padding-top: calc(var(--jumbotron-padding-y) * 2); + padding-bottom: calc(var(--jumbotron-padding-y) * 2); + } +} .jumbotron p:last-child { margin-bottom: 0; @@ -25,29 +27,6 @@ body { max-width: 40rem; } -.album { - min-height: 50rem; /* Can be removed; just added for demo purposes */ - padding-top: 3rem; - padding-bottom: 3rem; - background-color: #f7f7f7; -} - -.card { - float: left; - width: 33.333%; - padding: .75rem; - margin-bottom: 2rem; - border: 0; -} - -.card > img { - margin-bottom: .75rem; -} - -.card-text { - font-size: 85%; -} - footer { padding-top: 3rem; padding-bottom: 3rem; @@ -56,3 +35,5 @@ footer { footer p { margin-bottom: .25rem; } + +.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html index 6e5fc61731..391baca26f 100644 --- a/docs/4.0/examples/album/index.html +++ b/docs/4.0/examples/album/index.html @@ -22,11 +22,11 @@