From e946348eca928fa1c42dbb92c7a612543832dccc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Jan 2018 16:06:52 -0800 Subject: 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 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 _data/examples.yml (limited to '_data') diff --git a/_data/examples.yml b/_data/examples.yml new file mode 100644 index 000000000..673fde40b --- /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." -- cgit v1.2.3