From e946348eca928fa1c42dbb92c7a612543832dccc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Jan 2018 16:06:52 -0800 Subject: [PATCH] Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress --- _data/examples.yml | 55 ++++ _layouts/examples.html | 16 ++ docs/4.0/examples/album/album.css | 43 +-- docs/4.0/examples/album/index.html | 171 ++++++++--- docs/4.0/examples/blog/blog.css | 157 +++++----- docs/4.0/examples/blog/index.html | 120 ++++++-- .../4.0/examples/checkout/form-validation.css | 11 + docs/4.0/examples/checkout/index.html | 268 ++++++++++++++++++ docs/4.0/examples/cover/cover.css | 66 +---- docs/4.0/examples/cover/index.html | 63 ++-- docs/4.0/examples/dashboard/dashboard.css | 95 ++++--- docs/4.0/examples/dashboard/index.html | 231 ++++++++------- .../floating-labels/floating-labels.css | 87 ++++++ docs/4.0/examples/floating-labels/index.html | 46 +++ docs/4.0/examples/index.html | 22 ++ docs/4.0/examples/index.md | 174 ------------ docs/4.0/examples/justified-nav/index.html | 105 ------- .../examples/justified-nav/justified-nav.css | 50 ---- docs/4.0/examples/narrow-jumbotron/index.html | 79 ------ .../narrow-jumbotron/narrow-jumbotron.css | 82 ------ .../index.html | 0 .../navbar-top-fixed.css | 0 .../{navbar-top => navbar-static}/index.html | 0 .../navbar-top.css | 0 docs/4.0/examples/offcanvas/index.html | 172 ++++++----- docs/4.0/examples/offcanvas/offcanvas.css | 109 ++++--- docs/4.0/examples/offcanvas/offcanvas.js | 2 +- docs/4.0/examples/pricing/index.html | 142 ++++++++++ docs/4.0/examples/pricing/pricing.css | 25 ++ docs/4.0/examples/product/index.html | 178 ++++++++++++ docs/4.0/examples/product/product.css | 81 ++++++ docs/4.0/examples/screenshots/album.png | Bin 13122 -> 93136 bytes docs/4.0/examples/screenshots/blog.png | Bin 49368 -> 142010 bytes docs/4.0/examples/screenshots/carousel.png | Bin 23624 -> 89966 bytes docs/4.0/examples/screenshots/checkout.png | Bin 0 -> 113361 bytes docs/4.0/examples/screenshots/cover.png | Bin 14586 -> 30989 bytes docs/4.0/examples/screenshots/dashboard.png | Bin 23971 -> 164509 bytes .../examples/screenshots/floating-labels.png | Bin 0 -> 66351 bytes docs/4.0/examples/screenshots/grid.png | Bin 26116 -> 125080 bytes .../examples/screenshots/jumbotron-narrow.png | Bin 25020 -> 0 bytes docs/4.0/examples/screenshots/jumbotron.png | Bin 20278 -> 130670 bytes .../examples/screenshots/justified-nav.png | Bin 18724 -> 0 bytes .../examples/screenshots/navbar-bottom.png | Bin 8503 -> 52404 bytes .../4.0/examples/screenshots/navbar-fixed.png | Bin 10349 -> 61031 bytes .../examples/screenshots/navbar-static.png | Bin 10890 -> 63516 bytes docs/4.0/examples/screenshots/navbar.png | Bin 24840 -> 0 bytes docs/4.0/examples/screenshots/navbars.png | Bin 0 -> 133830 bytes docs/4.0/examples/screenshots/offcanvas.png | Bin 31561 -> 21095 bytes docs/4.0/examples/screenshots/pricing.png | Bin 0 -> 118759 bytes docs/4.0/examples/screenshots/product.png | Bin 0 -> 97442 bytes docs/4.0/examples/screenshots/sign-in.png | Bin 4231 -> 22124 bytes .../examples/screenshots/starter-template.png | Bin 8180 -> 41863 bytes .../screenshots/sticky-footer-navbar.png | Bin 11917 -> 61605 bytes .../examples/screenshots/sticky-footer.png | Bin 7342 -> 37080 bytes docs/4.0/examples/sign-in/index.html | 36 +++ .../examples/{signin => sign-in}/signin.css | 21 +- docs/4.0/examples/signin/index.html | 39 --- .../examples/sticky-footer-navbar/index.html | 4 +- docs/4.0/examples/sticky-footer/index.html | 4 +- 59 files changed, 1690 insertions(+), 1064 deletions(-) create mode 100644 _data/examples.yml create mode 100644 _layouts/examples.html create mode 100644 docs/4.0/examples/checkout/form-validation.css create mode 100644 docs/4.0/examples/checkout/index.html create mode 100644 docs/4.0/examples/floating-labels/floating-labels.css create mode 100644 docs/4.0/examples/floating-labels/index.html create mode 100644 docs/4.0/examples/index.html delete mode 100644 docs/4.0/examples/index.md delete mode 100644 docs/4.0/examples/justified-nav/index.html delete mode 100644 docs/4.0/examples/justified-nav/justified-nav.css delete mode 100644 docs/4.0/examples/narrow-jumbotron/index.html delete mode 100644 docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css rename docs/4.0/examples/{navbar-top-fixed => navbar-fixed}/index.html (100%) rename docs/4.0/examples/{navbar-top-fixed => navbar-fixed}/navbar-top-fixed.css (100%) rename docs/4.0/examples/{navbar-top => navbar-static}/index.html (100%) rename docs/4.0/examples/{navbar-top => navbar-static}/navbar-top.css (100%) create mode 100644 docs/4.0/examples/pricing/index.html create mode 100644 docs/4.0/examples/pricing/pricing.css create mode 100644 docs/4.0/examples/product/index.html create mode 100644 docs/4.0/examples/product/product.css create mode 100644 docs/4.0/examples/screenshots/checkout.png create mode 100644 docs/4.0/examples/screenshots/floating-labels.png delete mode 100644 docs/4.0/examples/screenshots/jumbotron-narrow.png delete mode 100644 docs/4.0/examples/screenshots/justified-nav.png delete mode 100644 docs/4.0/examples/screenshots/navbar.png create mode 100644 docs/4.0/examples/screenshots/navbars.png create mode 100644 docs/4.0/examples/screenshots/pricing.png create mode 100644 docs/4.0/examples/screenshots/product.png create mode 100644 docs/4.0/examples/sign-in/index.html rename docs/4.0/examples/{signin => sign-in}/signin.css (67%) delete mode 100644 docs/4.0/examples/signin/index.html 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 @@