From: Mark Otto Date: Mon, 15 Jan 2018 00:06:52 +0000 (-0800) Subject: Examples updates (#24898) X-Git-Tag: v4.0.0~28 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e946348eca928fa1c42dbb92c7a612543832dccc;p=thirdparty%2Fbootstrap.git 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 --- 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 @@