diff --git a/Gruntfile.js b/Gruntfile.js index 717c0395..7bd711d2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -543,7 +543,8 @@ module.exports = function (grunt) { 'exec:rollup-umd', 'exec:rollup-es6', 'stamp', - 'uglify:dist' + 'uglify:dist', + 'copy:dist-to-docs' ]); grunt.registerTask('docs-js', [ 'clean:docs-dist-js', @@ -571,7 +572,8 @@ module.exports = function (grunt) { 'sass-compile', 'postcss:core', 'csscomb:dist', - 'cssmin:core' + 'cssmin:core', + 'copy:dist-to-docs' ]); grunt.registerTask('docs-css', [ diff --git a/docs/_includes/footer-example.html b/docs/_includes/footer-example.html index b28af1ba..927a801a 100644 --- a/docs/_includes/footer-example.html +++ b/docs/_includes/footer-example.html @@ -15,5 +15,5 @@ diff --git a/docs/examples/album/album.css b/docs/examples/album/album.css deleted file mode 100644 index 66380c0e..00000000 --- a/docs/examples/album/album.css +++ /dev/null @@ -1,85 +0,0 @@ -body { - min-height: 75rem; /* Can be removed; just added for demo purposes */ -} - -.navbar { - margin-bottom: 0; -} - -.navbar-collapse .container-fluid { - padding: 2rem 2.5rem; - border-bottom: 1px solid #55595c; -} - -.navbar-collapse h4 { - color: #818a91; -} - -.navbar-collapse .text-muted { - color: #818a91; -} - -.about { - float: left; - max-width: 30rem; - margin-right: 3rem; -} - -.social a { - font-weight: 500; - color: #eceeef; -} -.social a:hover { - color: #fff; -} - -.jumbotron { - padding-top: 6rem; - padding-bottom: 6rem; - margin-bottom: 0; - background-color: #fff; -} - -.jumbotron p:last-child { - margin-bottom: 0; -} - -.jumbotron-heading { - font-weight: 300; -} - -.jumbotron .container { - 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; -} - -footer p { - margin-bottom: .25rem; -} diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html deleted file mode 100644 index 0337d33b..00000000 --- a/docs/examples/album/index.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - - - - - - Album example for Bootstrap - - - - - - - - - - - - - -
-
-

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 -

-
-
- -
-
- -
-
- Card image cap -

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

-
-
- Card image cap -

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

-
-
- Card image cap -

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

-
- -
- Card image cap -

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

-
-
- Card image cap -

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

-
-
- Card image cap -

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

-
- -
- Card image cap -

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

-
-
- Card image cap -

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

-
-
- Card image cap -

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

-
-
- -
-
- - - - - - - - - - - - - - - diff --git a/docs/examples/blog/blog.css b/docs/examples/blog/blog.css deleted file mode 100644 index da14fce9..00000000 --- a/docs/examples/blog/blog.css +++ /dev/null @@ -1,170 +0,0 @@ -/* - * Globals - */ - -@media (min-width: 48em) { - html { - font-size: 18px; - } -} - -body { - font-family: Georgia, "Times New Roman", Times, serif; - color: #555; -} - -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - color: #333; -} - - -/* - * Override Bootstrap's default container. - */ - -.container { - max-width: 60rem; -} - - -/* - * Masthead for nav - */ - -.blog-masthead { - margin-bottom: 3rem; - background-color: #428bca; - -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); - box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); -} - -/* Nav links */ -.nav-link { - position: relative; - padding: 1rem; - font-weight: 500; - color: #cdddeb; -} -.nav-link:hover, -.nav-link:focus { - color: #fff; - background-color: transparent; -} - -/* Active state gets a caret at the bottom */ -.nav-link.active { - color: #fff; -} -.nav-link.active:after { - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 0; - margin-left: -.3rem; - vertical-align: middle; - content: ""; - border-right: .3rem solid transparent; - border-bottom: .3rem solid; - border-left: .3rem solid transparent; -} - - -/* - * Blog name and description - */ - -.blog-header { - padding-bottom: 1.25rem; - margin-bottom: 2rem; - border-bottom: .05rem solid #eee; -} -.blog-title { - margin-bottom: 0; - font-size: 2rem; - font-weight: normal; -} -.blog-description { - font-size: 1.1rem; - color: #999; -} - -@media (min-width: 40em) { - .blog-title { - font-size: 3.5rem; - } -} - - -/* - * Main column and sidebar layout - */ - -/* Sidebar modules for boxing content */ -.sidebar-module { - padding: 1rem; - /*margin: 0 -1rem 1rem;*/ -} -.sidebar-module-inset { - padding: 1rem; - background-color: #f5f5f5; - border-radius: .25rem; -} -.sidebar-module-inset p:last-child, -.sidebar-module-inset ul:last-child, -.sidebar-module-inset ol:last-child { - margin-bottom: 0; -} - - -/* Pagination */ -.pager { - margin-bottom: 4rem; - text-align: left; -} -.pager > li > a { - width: 8rem; - padding: .75rem 1.25rem; - text-align: center; - border-radius: 2rem; -} - - -/* - * Blog posts - */ - -.blog-post { - margin-bottom: 4rem; -} -.blog-post-title { - margin-bottom: .25rem; - font-size: 2.5rem; -} -.blog-post-meta { - margin-bottom: 1.25rem; - color: #999; -} - - -/* - * Footer - */ - -.blog-footer { - padding: 2.5rem 0; - color: #999; - text-align: center; - background-color: #f9f9f9; - border-top: .05rem solid #e5e5e5; -} -.blog-footer p:last-child { - margin-bottom: 0; -} diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html deleted file mode 100644 index 57cfafac..00000000 --- a/docs/examples/blog/index.html +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - Blog Template for Bootstrap - - - - - - - - - - -
-
- -
-
- -
-
-

The Bootstrap Blog

-

An example blog template built with Bootstrap.

-
-
- -
- -
- -
- -
-

Sample blog post

- - -

This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.

-
-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

-
-

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

-
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

Heading

-

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Sub-heading

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-
Example code block
-

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

-

Sub-heading

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
    -
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • -
  • Donec id elit non mi porta gravida at eget metus.
  • -
  • Nulla vitae elit libero, a pharetra augue.
  • -
-

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

-
    -
  1. Vestibulum id ligula porta felis euismod semper.
  2. -
  3. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  4. -
  5. Maecenas sed diam eget risus varius blandit sit amet non magna.
  6. -
-

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

-
- -
-

Another blog post

- - -

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

-
-

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

-
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-
- -
-

New feature

- - -

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
    -
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • -
  • Donec id elit non mi porta gravida at eget metus.
  • -
  • Nulla vitae elit libero, a pharetra augue.
  • -
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

-
- - - -
- -
- - - -
- -
- -
- - - - - - - - - - - - - - diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css deleted file mode 100644 index 4bf83737..00000000 --- a/docs/examples/carousel/carousel.css +++ /dev/null @@ -1,113 +0,0 @@ -/* GLOBAL STYLES -------- - -[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs - -{% callout info %} -**Bootstrap Reference Documentation** -This is a part of the reference documentation from Bootstrap. -It is included here to demonstrate rendering with Material Design for Bootstrap default styling. -See the Material Design section for more elements and customization options. -{% endcallout %} - -------------------------------------------- */ -/* Padding below the footer and lighter body text */ - -body { - padding-bottom: 3rem; - color: #5a5a5a; -} - - -/* CUSTOMIZE THE CAROUSEL --------------------------------------------------- */ - -/* Carousel base class */ -.carousel { - margin-bottom: 4rem; -} -/* Since positioning the image, we need to help out the caption */ -.carousel-caption { - z-index: 10; -} - -/* Declare heights because of positioning of img element */ -.carousel-item { - height: 32rem; - background-color: #777; -} -.carousel-item > img { - position: absolute; - top: 0; - left: 0; - min-width: 100%; - height: 32rem; -} - -.carousel-indicators { - top: 1.5rem; - right: 1.5rem; - bottom: auto; - left: auto; - width: 1rem; - margin-left: 0; -} - -.carousel-indicators > li { - margin-bottom: .25rem; -} - - -/* 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 h2 { - font-weight: normal; -} -.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 */ -.featurette-heading { - font-weight: 300; - line-height: 1; - letter-spacing: -.05rem; -} - - -/* 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/docs/examples/carousel/index.html b/docs/examples/carousel/index.html deleted file mode 100644 index b2faa546..00000000 --- a/docs/examples/carousel/index.html +++ /dev/null @@ -1,186 +0,0 @@ - - - - - - - - - - - - Carousel Template for Bootstrap - - - - - - - - - - - - - - - - - - - -
- - -
-
- Generic placeholder image -

Heading

-

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

-

View details »

-
-
- Generic placeholder image -

Heading

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

-

View details »

-
-
- Generic placeholder image -

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
- - - - -
- -
-
-

First featurette heading. It'll blow your mind.

-

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
-
- Generic placeholder image -
-
- -
- -
-
-

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

-

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
-
- Generic placeholder image -
-
- -
- -
-
-

And lastly, this one. Checkmate.

-

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
-
- Generic placeholder image -
-
- -
- - - - - - - -
- - - - - - - - - - - - - - diff --git a/docs/examples/cover/cover.css b/docs/examples/cover/cover.css deleted file mode 100644 index 8a89cde5..00000000 --- a/docs/examples/cover/cover.css +++ /dev/null @@ -1,160 +0,0 @@ -/* - * Globals - */ - -/* Links */ -a, -a:focus, -a:hover { - color: #fff; -} - -/* Custom default button */ -.btn-secondary, -.btn-secondary:hover, -.btn-secondary:focus { - color: #333; - text-shadow: none; /* Prevent inheritance from `body` */ - background-color: #fff; - border: .05rem solid #fff; -} - - -/* - * Base structure - */ - -html, -body { - height: 100%; - background-color: #333; -} -body { - color: #fff; - text-align: center; - text-shadow: 0 .05rem .1rem rgba(0,0,0,.5); -} - -/* Extra markup and styles for table-esque vertical and horizontal centering */ -.site-wrapper { - display: table; - width: 100%; - height: 100%; /* For at least Firefox */ - min-height: 100%; - -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5); - box-shadow: inset 0 0 5rem rgba(0,0,0,.5); -} -.site-wrapper-inner { - display: table-cell; - vertical-align: top; -} -.cover-container { - margin-right: auto; - margin-left: auto; -} - -/* Padding for spacing */ -.inner { - padding: 2rem; -} - - -/* - * Header - */ - -.masthead { - margin-bottom: 2rem; -} - -.masthead-brand { - margin-bottom: 0; -} - -.nav-masthead .nav-link { - padding: .25rem 0; - font-weight: bold; - color: rgba(255,255,255,.5); - background-color: transparent; - 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; -} - -@media (min-width: 48em) { - .masthead-brand { - float: left; - } - .nav-masthead { - float: right; - } -} - - -/* - * Cover - */ - -.cover { - padding: 0 1.5rem; -} -.cover .btn-lg { - padding: .75rem 1.25rem; - font-weight: bold; -} - - -/* - * Footer - */ - -.mastfoot { - color: rgba(255,255,255,.5); -} - - -/* - * Affix and center - */ - -@media (min-width: 40em) { - /* Pull out the header and footer */ - .masthead { - position: fixed; - top: 0; - } - .mastfoot { - position: fixed; - bottom: 0; - } - /* Start the vertical centering */ - .site-wrapper-inner { - vertical-align: middle; - } - /* Handle the widths */ - .masthead, - .mastfoot, - .cover-container { - width: 100%; /* Must be percentage or pixels for horizontal alignment */ - } -} - -@media (min-width: 62em) { - .masthead, - .mastfoot, - .cover-container { - width: 42rem; - } -} diff --git a/docs/examples/cover/index.html b/docs/examples/cover/index.html deleted file mode 100644 index 71c38429..00000000 --- a/docs/examples/cover/index.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - Cover Template for Bootstrap - - - - - - - - - - -
- -
- -
- -
-
-

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 -

-
- -
-
-

Cover template for Bootstrap, by @mdo.

-
-
- -
- -
- -
- - - - - - - - - - - diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css deleted file mode 100644 index e0e3632b..00000000 --- a/docs/examples/dashboard/dashboard.css +++ /dev/null @@ -1,105 +0,0 @@ -/* - * Base structure - */ - -/* Move down content because we have a fixed navbar that is 50px tall */ -body { - padding-top: 50px; -} - - -/* - * Global add-ons - */ - -.sub-header { - padding-bottom: 10px; - border-bottom: 1px solid #eee; -} - -/* - * Top navigation - * Hide default border to remove 1px line. - */ -.navbar-fixed-top { - border: 0; -} - -/* - * Sidebar - */ - -/* Hide for mobile, show later */ -.sidebar { - display: none; -} -@media (min-width: 768px) { - .sidebar { - position: fixed; - top: 51px; - bottom: 0; - left: 0; - z-index: 1000; - display: block; - padding: 20px; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ - background-color: #f5f5f5; - border-right: 1px solid #eee; - } -} - -/* Sidebar navigation */ -.nav-sidebar { - margin-right: -21px; /* 20px padding + 1px border */ - margin-bottom: 20px; - margin-left: -20px; -} -.nav-sidebar > li > a { - padding-right: 20px; - padding-left: 20px; -} -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #fff; - background-color: #428bca; -} - - -/* - * Main content - */ - -.main { - padding: 20px; -} -@media (min-width: 768px) { - .main { - padding-right: 40px; - padding-left: 40px; - } -} -.main .page-header { - margin-top: 0; -} - - -/* - * Placeholder dashboard ideas - */ - -.placeholders { - margin-bottom: 30px; - text-align: center; -} -.placeholders h4 { - margin-bottom: 0; -} -.placeholder { - margin-bottom: 20px; -} -.placeholder img { - display: inline-block; - border-radius: 50%; -} diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html deleted file mode 100644 index 31f6e8be..00000000 --- a/docs/examples/dashboard/index.html +++ /dev/null @@ -1,236 +0,0 @@ - - - - - - - - - - - - Dashboard Template for Bootstrap - - - - - - - - - - - - -
-
- -
-

Dashboard

- -
-
- Generic placeholder thumbnail -

Label

- Something else -
-
- Generic placeholder thumbnail -

Label

- Something else -
-
- Generic placeholder thumbnail -

Label

- Something else -
-
- Generic placeholder thumbnail -

Label

- Something else -
-
- -

Section title

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit
1,002ametconsecteturadipiscingelit
1,003IntegernecodioPraesent
1,003liberoSedcursusante
1,004dapibusdiamSednisi
1,005Nullaquissemat
1,006nibhelementumimperdietDuis
1,007sagittisipsumPraesentmauris
1,008Fuscenectellussed
1,009auguesemperportaMauris
1,010massaVestibulumlaciniaarcu
1,011egetnullaClassaptent
1,012tacitisociosquadlitora
1,013torquentperconubianostra
1,014perinceptoshimenaeosCurabitur
1,015sodalesligulainlibero
-
-
-
-
- - - - - - - - - - - - - diff --git a/docs/examples/grid/grid.css b/docs/examples/grid/grid.css deleted file mode 100644 index 5f7e1af6..00000000 --- a/docs/examples/grid/grid.css +++ /dev/null @@ -1,27 +0,0 @@ -body { - padding-top: 2rem; - padding-bottom: 2rem; -} - -h3 { - margin-top: 2rem; -} - -.row { - margin-bottom: 1rem; -} -.row .row { - margin-top: 1rem; - margin-bottom: 0; -} -[class*="col-"] { - padding-top: 1rem; - padding-bottom: 1rem; - background-color: rgba(86,61,124,.15); - border: 1px solid rgba(86,61,124,.2); -} - -hr { - margin-top: 2rem; - margin-bottom: 2rem; -} diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html deleted file mode 100644 index cafbb4fc..00000000 --- a/docs/examples/grid/index.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - - - - - - - - Grid Template for Bootstrap - - - - - - - - - -
- - - -

Five grid tiers

-

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

- -
-
.col-xs-4
-
.col-xs-4
-
.col-xs-4
-
- -
-
.col-sm-4
-
.col-sm-4
-
.col-sm-4
-
- -
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
- -
-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
-
- -
-
.col-xl-4
-
.col-xl-4
-
.col-xl-4
-
- -

Three equal columns

-

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
- -

Three unequal columns

-

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

-
-
.col-md-3
-
.col-md-6
-
.col-md-3
-
- -

Two columns

-

Get two columns starting at desktops and scaling to large desktops.

-
-
.col-md-8
-
.col-md-4
-
- -

Full width, single column

-

No grid classes are necessary for full-width elements.

- -
- -

Two columns with two nested columns

-

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

-

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

-
-
- .col-md-8 -
-
.col-md-6
-
.col-md-6
-
-
-
.col-md-4
-
- -
- -

Mixed: mobile and desktop

-

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

-

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
-
-
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
-
-
.col-xs-6
-
.col-xs-6
-
- -
- -

Mixed: mobile, tablet, and desktop

-

-
-
.col-xs-12 .col-sm-6 .col-lg-8
-
.col-xs-6 .col-lg-4
-
-
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
- -
- -

Column clearing

-

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

-
-
- .col-xs-6 .col-sm-3 -
- Resize your viewport or check it out on your phone for an example. -
-
.col-xs-6 .col-sm-3
- - -
- -
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
- -
- -

Offset, push, and pull resets

-

Reset offsets, pushes, and pulls at specific breakpoints.

-
-
.col-sm-5 .col-md-6
-
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
-
-
-
.col-sm-6 .col-md-5 .col-lg-6
-
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
-
- - -
- - - - - - - - diff --git a/docs/examples/index.md b/docs/examples/index.md index aa5028f9..457a8f7b 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -12,151 +12,32 @@ Examples that focus on implementing uses of built-in components provided by Boot

Starter Template

Nothing but the basics: compiled CSS and JavaScript.

- - launch Launch + launch Launch
- + + -
- - - -

Grids

-

Multiple examples of grid layouts with all four tiers, nesting, and more.

-
-
- -
- - - -

Jumbotron

-

Build around the jumbotron with a navbar and some basic grid columns.

-
-
- - - -

Narrow jumbotron

-

Build a more custom page by narrowing the default container and jumbotron.

-
- - -## Navbars - -Taking the default navbar component and showing how it can be moved, placed, and extended. - -
-
- - - -

Navbar

-

Super basic template that includes the navbar along with some additional content.

-
-
- - - -

Static top navbar

-

Super basic template with a static top navbar along with some additional content.

-
-
- -
- - - -

Fixed navbar

-

Super basic template with a fixed top navbar along with some additional content.

-
## Custom components -Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework. +Brand new components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework.
-
- - - -

Album

-

Simple one-page template for photo galleries, portfolios, and more.

-
-
- - - -

Cover

-

A one-page template for building simple and beautiful home pages.

-
-
-
- - - -

Carousel

-

Customize the navbar and carousel, then add some new components.

-
-
- - - -

Blog

-

Simple two-column blog layout with custom navigation, header, and type.

-
-
+
+

Sign-in page

+

Custom form layout and design for a simple sign in form.

+ launch Launch +
-
- - - -

Dashboard

-

Basic admin dashboard shell with fixed sidebar and navbar.

-
-
- - - -

Sign-in page

-

Custom form layout and design for a simple sign in form.

-
-
- -
- - - -

Justified nav

-

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

-
-
- - - -

Sticky footer

-

Attach a footer to the bottom of the viewport when the content is shorter than it.

-
-
- -
- - - -

Sticky footer w/ navbar

-

Attach a footer to the bottom of the viewport with a fixed top navbar.

-
## Experiments @@ -164,11 +45,9 @@ Brand new components and templates to help folks quickly get started with Bootst Examples that focus on future-friendly features or techniques.
-
- - - -

Offcanvas

-

Build a toggleable off-canvas navigation menu for use with Bootstrap.

+
+

Offcanvas

+

Build a toggleable off-canvas navigation menu for use with Bootstrap.

+ launch Launch
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html deleted file mode 100644 index f57cf7df..00000000 --- a/docs/examples/jumbotron/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - Jumbotron Template for Bootstrap - - - - - - - - - - - - - -
-
-

Hello, world!

-

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

-

Learn more »

-
-
- -
- -
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
- -
- -
-

© Company 2016

-
-
- - - - - - - - - - - - diff --git a/docs/examples/jumbotron/jumbotron.css b/docs/examples/jumbotron/jumbotron.css deleted file mode 100644 index ccf96fe4..00000000 --- a/docs/examples/jumbotron/jumbotron.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Move down content because we have a fixed navbar that is 50px tall */ -body { - padding-bottom: 2rem; -} diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html deleted file mode 100644 index 3fe6e29f..00000000 --- a/docs/examples/justified-nav/index.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - Justified Nav Template for Bootstrap - - - - - - - - - - -
- - -
-

Project name

- -
- - -
-

Marketing stuff!

-

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.

-

Get started today

-
- - -
-
-

Safari bug warning!

-

As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

-

View details »

-
-
- - -
-

© Company 2014

-
- -
- - - - - - - - diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css deleted file mode 100644 index 31e25e14..00000000 --- a/docs/examples/justified-nav/justified-nav.css +++ /dev/null @@ -1,91 +0,0 @@ -body { - padding-top: 20px; -} - -.footer { - padding-top: 40px; - padding-bottom: 40px; - margin-top: 40px; - border-top: 1px solid #eee; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - background-color: transparent; -} -.jumbotron .btn { - padding: 14px 24px; - font-size: 21px; -} - -/* Customize the nav-justified links to be fill the entire space of the .navbar */ - -.nav-justified { - background-color: #eee; - border: 1px solid #ccc; - border-radius: 5px; -} -.nav-justified > li > a { - padding-top: 15px; - padding-bottom: 15px; - margin-bottom: 0; - font-weight: bold; - color: #777; - text-align: center; - background-color: #e5e5e5; /* Old browsers */ - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); - background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ - background-repeat: repeat-x; /* Repeat the gradient */ - border-bottom: 1px solid #d5d5d5; -} -.nav-justified > .active > a, -.nav-justified > .active > a:hover, -.nav-justified > .active > a:focus { - background-color: #ddd; - background-image: none; - -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); - box-shadow: inset 0 3px 7px rgba(0,0,0,.15); -} -.nav-justified > li:first-child > a { - border-radius: 5px 5px 0 0; -} -.nav-justified > li:last-child > a { - border-bottom: 0; - border-radius: 0 0 5px 5px; -} - -@media (min-width: 768px) { - .nav-justified { - max-height: 52px; - } - .nav-justified > li > a { - border-right: 1px solid #d5d5d5; - border-left: 1px solid #fff; - } - .nav-justified > li:first-child > a { - border-left: 0; - border-radius: 5px 0 0 5px; - } - .nav-justified > li:last-child > a { - border-right: 0; - border-radius: 0 5px 5px 0; - } -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Remove the padding we set earlier */ - .masthead, - .marketing, - .footer { - padding-right: 0; - padding-left: 0; - } -} diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html deleted file mode 100644 index 210daf5f..00000000 --- a/docs/examples/narrow-jumbotron/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - Narrow Jumbotron Template for Bootstrap - - - - - - - - - - -
-
- -

Project name

-
- -
-

Jumbotron heading

-

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

Sign up today

-
- -
-
-

Subheading

-

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

- -

Subheading

-

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

- -

Subheading

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-
- -
-

Subheading

-

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

- -

Subheading

-

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

- -

Subheading

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-
-
- -
-

© Company 2014

-
- -
- - - - - - - - diff --git a/docs/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/examples/narrow-jumbotron/narrow-jumbotron.css deleted file mode 100644 index 28cf7738..00000000 --- a/docs/examples/narrow-jumbotron/narrow-jumbotron.css +++ /dev/null @@ -1,79 +0,0 @@ -/* Space out content a bit */ -body { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -/* Everything but the jumbotron gets side spacing for mobile first views */ -.header, -.marketing, -.footer { - padding-right: 1rem; - padding-left: 1rem; -} - -/* Custom page header */ -.header { - padding-bottom: 1rem; - border-bottom: .05rem solid #e5e5e5; -} -/* Make the masthead heading the same height as the navigation */ -.header h3 { - margin-top: 0; - margin-bottom: 0; - line-height: 3rem; -} - -/* Custom page footer */ -.footer { - padding-top: 1.5rem; - color: #777; - border-top: .05rem solid #e5e5e5; -} - -/* Customize container */ -@media (min-width: 48em) { - .container { - max-width: 46rem; - } -} -.container-narrow > hr { - margin: 2rem 0; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: .05rem solid #e5e5e5; -} -.jumbotron .btn { - padding: .75rem 1.5rem; - font-size: 1.5rem; -} - -/* Supporting marketing content */ -.marketing { - margin: 3rem 0; -} -.marketing p + h4 { - margin-top: 1.5rem; -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 48em) { - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-right: 0; - padding-left: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 2rem; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html deleted file mode 100644 index 24c706a3..00000000 --- a/docs/examples/navbar-top-fixed/index.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - Fixed top navbar example for Bootstrap - - - - - - - - - - -
- - -
- -
-
-

Navbar example

-

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

- View navbar docs » -
-
- - - - - - - - - - - - diff --git a/docs/examples/navbar-top-fixed/navbar-top-fixed.css b/docs/examples/navbar-top-fixed/navbar-top-fixed.css deleted file mode 100644 index 3e4f59f4..00000000 --- a/docs/examples/navbar-top-fixed/navbar-top-fixed.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - /* Show it's not fixed to the top */ - min-height: 75rem; - padding-top: 6rem; -} diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html deleted file mode 100644 index ea2c409d..00000000 --- a/docs/examples/navbar-top/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - Top navbar example for Bootstrap - - - - - - - - - - - - - -
-
-

Navbar example

-

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

- View navbar docs » -
-
- - - - - - - - - - - - diff --git a/docs/examples/navbar-top/navbar-top.css b/docs/examples/navbar-top/navbar-top.css deleted file mode 100644 index 25bbdde0..00000000 --- a/docs/examples/navbar-top/navbar-top.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Show it's not fixed to the top */ -body { - min-height: 75rem; -} diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html deleted file mode 100644 index abaf8ad7..00000000 --- a/docs/examples/navbar/index.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - - - Navbar Template for Bootstrap - - - - - - - - - - -
- - - -
-

Navbar example

-

This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a .container to limit its width and will scroll with the rest of the page's content.

-

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

-

- View navbar docs » -

-
- -
- - - - - - - - - - - - diff --git a/docs/examples/navbar/navbar.css b/docs/examples/navbar/navbar.css deleted file mode 100644 index d2195240..00000000 --- a/docs/examples/navbar/navbar.css +++ /dev/null @@ -1,8 +0,0 @@ -body { - padding-top: 20px; - padding-bottom: 20px; -} - -.navbar { - margin-bottom: 20px; -} diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html deleted file mode 100644 index fcba6888..00000000 --- a/docs/examples/offcanvas/index.html +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - - - - - - - Off Canvas Template for Bootstrap - - - - - - - - - - - -
- -
- -
-

- -

-
-

Hello, world!

-

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

-
-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-
- - -
- -
- -
-

© Company 2014

-
- -
- - - - - - - - - - - - - diff --git a/docs/examples/offcanvas/index.md b/docs/examples/offcanvas/index.md new file mode 100644 index 00000000..35d2fd38 --- /dev/null +++ b/docs/examples/offcanvas/index.md @@ -0,0 +1,109 @@ +--- +layout: example +title: Offcanvas +group: material-design +--- + + + + + + + +
+ +
+ +
+

+ +

+
+
Not sure this will be useful
+

Hello, world!

+

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+ + +
+ +
+ +
+

© Company 2016

+
+ +
+ + + + + + diff --git a/docs/examples/offcanvas/offcanvas.js b/docs/examples/offcanvas/offcanvas.js deleted file mode 100644 index d14cd68b..00000000 --- a/docs/examples/offcanvas/offcanvas.js +++ /dev/null @@ -1,5 +0,0 @@ -$(document).ready(function () { - $('[data-toggle="offcanvas"]').click(function () { - $('.row-offcanvas').toggleClass('active') - }); -}); diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.scss similarity index 62% rename from docs/examples/offcanvas/offcanvas.css rename to docs/examples/offcanvas/offcanvas.scss index ac647426..196d4d99 100644 --- a/docs/examples/offcanvas/offcanvas.css +++ b/docs/examples/offcanvas/offcanvas.scss @@ -1,17 +1,6 @@ /* * Style tweaks * ------- - -[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs - -{% callout info %} -**Bootstrap Reference Documentation** -This is a part of the reference documentation from Bootstrap. -It is included here to demonstrate rendering with Material Design for Bootstrap default styling. -See the Material Design section for more elements and customization options. -{% endcallout %} - -------------------------------------------- */ html, body { diff --git a/docs/examples/screenshots/album.jpg b/docs/examples/screenshots/album.jpg deleted file mode 100644 index a0848161..00000000 Binary files a/docs/examples/screenshots/album.jpg and /dev/null differ diff --git a/docs/examples/screenshots/blog.jpg b/docs/examples/screenshots/blog.jpg deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/examples/screenshots/carousel.jpg b/docs/examples/screenshots/carousel.jpg deleted file mode 100644 index 6c145c4a..00000000 Binary files a/docs/examples/screenshots/carousel.jpg and /dev/null differ diff --git a/docs/examples/screenshots/cover.jpg b/docs/examples/screenshots/cover.jpg deleted file mode 100644 index 4b0deca6..00000000 Binary files a/docs/examples/screenshots/cover.jpg and /dev/null differ diff --git a/docs/examples/screenshots/dashboard.jpg b/docs/examples/screenshots/dashboard.jpg deleted file mode 100644 index cd857af4..00000000 Binary files a/docs/examples/screenshots/dashboard.jpg and /dev/null differ diff --git a/docs/examples/screenshots/equal-height-columns.jpg b/docs/examples/screenshots/equal-height-columns.jpg deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/examples/screenshots/grid.jpg b/docs/examples/screenshots/grid.jpg deleted file mode 100644 index 7df41358..00000000 Binary files a/docs/examples/screenshots/grid.jpg and /dev/null differ diff --git a/docs/examples/screenshots/jumbotron-narrow.jpg b/docs/examples/screenshots/jumbotron-narrow.jpg deleted file mode 100644 index aef49c9e..00000000 Binary files a/docs/examples/screenshots/jumbotron-narrow.jpg and /dev/null differ diff --git a/docs/examples/screenshots/jumbotron.jpg b/docs/examples/screenshots/jumbotron.jpg deleted file mode 100644 index f63cc7ed..00000000 Binary files a/docs/examples/screenshots/jumbotron.jpg and /dev/null differ diff --git a/docs/examples/screenshots/justified-nav.jpg b/docs/examples/screenshots/justified-nav.jpg deleted file mode 100644 index 5ec40703..00000000 Binary files a/docs/examples/screenshots/justified-nav.jpg and /dev/null differ diff --git a/docs/examples/screenshots/navbar-fixed.jpg b/docs/examples/screenshots/navbar-fixed.jpg deleted file mode 100644 index 0b6d217d..00000000 Binary files a/docs/examples/screenshots/navbar-fixed.jpg and /dev/null differ diff --git a/docs/examples/screenshots/navbar-static.jpg b/docs/examples/screenshots/navbar-static.jpg deleted file mode 100644 index 144b1a05..00000000 Binary files a/docs/examples/screenshots/navbar-static.jpg and /dev/null differ diff --git a/docs/examples/screenshots/navbar.jpg b/docs/examples/screenshots/navbar.jpg deleted file mode 100644 index 97cf2c5b..00000000 Binary files a/docs/examples/screenshots/navbar.jpg and /dev/null differ diff --git a/docs/examples/screenshots/non-responsive.jpg b/docs/examples/screenshots/non-responsive.jpg deleted file mode 100644 index 2b330140..00000000 Binary files a/docs/examples/screenshots/non-responsive.jpg and /dev/null differ diff --git a/docs/examples/screenshots/offcanvas.jpg b/docs/examples/screenshots/offcanvas.jpg deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/examples/screenshots/sign-in.jpg b/docs/examples/screenshots/sign-in.jpg deleted file mode 100644 index 7875b0b1..00000000 Binary files a/docs/examples/screenshots/sign-in.jpg and /dev/null differ diff --git a/docs/examples/screenshots/starter-template.jpg b/docs/examples/screenshots/starter-template.jpg deleted file mode 100644 index 2ebd3df7..00000000 Binary files a/docs/examples/screenshots/starter-template.jpg and /dev/null differ diff --git a/docs/examples/screenshots/sticky-footer-navbar.jpg b/docs/examples/screenshots/sticky-footer-navbar.jpg deleted file mode 100644 index 1dea9c07..00000000 Binary files a/docs/examples/screenshots/sticky-footer-navbar.jpg and /dev/null differ diff --git a/docs/examples/screenshots/sticky-footer.jpg b/docs/examples/screenshots/sticky-footer.jpg deleted file mode 100644 index 38062ffe..00000000 Binary files a/docs/examples/screenshots/sticky-footer.jpg and /dev/null differ diff --git a/docs/examples/screenshots/theme.jpg b/docs/examples/screenshots/theme.jpg deleted file mode 100644 index 626a1251..00000000 Binary files a/docs/examples/screenshots/theme.jpg and /dev/null differ diff --git a/docs/examples/signin/index.html b/docs/examples/signin/index.html deleted file mode 100644 index 70ed3b98..00000000 --- a/docs/examples/signin/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - - - Signin Template for Bootstrap - - - - - - - - - - -
- - - -
- - - - - - - - diff --git a/docs/examples/signin/index.md b/docs/examples/signin/index.md new file mode 100644 index 00000000..3dbf0bf0 --- /dev/null +++ b/docs/examples/signin/index.md @@ -0,0 +1,50 @@ +--- +layout: example +title: Signin Template +group: material-design +--- + + + + +
+ + + +
+ + + + diff --git a/docs/examples/signin/signin.css b/docs/examples/signin/signin.css deleted file mode 100644 index 7c1fa419..00000000 --- a/docs/examples/signin/signin.css +++ /dev/null @@ -1,39 +0,0 @@ -body { - padding-top: 40px; - padding-bottom: 40px; - background-color: #eee; -} - -.form-signin { - max-width: 330px; - padding: 15px; - margin: 0 auto; -} -.form-signin .form-signin-heading, -.form-signin .checkbox { - margin-bottom: 10px; -} -.form-signin .checkbox { - font-weight: normal; -} -.form-signin .form-control { - position: relative; - height: auto; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { - 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/docs/examples/signin/signin.scss b/docs/examples/signin/signin.scss new file mode 100644 index 00000000..f1bff426 --- /dev/null +++ b/docs/examples/signin/signin.scss @@ -0,0 +1,13 @@ +--- +--- + +body { + padding: 3rem 0; + background-color: #eee; +} + +.form-signin { + max-width: 25rem; + padding: 1rem; + margin: 0 auto; +} diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html deleted file mode 100644 index ed64a7d9..00000000 --- a/docs/examples/sticky-footer-navbar/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - - - Sticky Footer Navbar Template for Bootstrap - - - - - - - - - - - -
- - -
- - -
- -

Pin a fixed-height 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 body > .container.

-

Back to the default sticky footer minus the navbar.

-
- - - - - - - - - - - - - - diff --git a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css deleted file mode 100644 index e0c6698e..00000000 --- a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css +++ /dev/null @@ -1,48 +0,0 @@ -/* Sticky footer styles -------- - -[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs - -{% callout info %} -**Bootstrap Reference Documentation** -This is a part of the reference documentation from Bootstrap. -It is included here to demonstrate rendering with Material Design for Bootstrap default styling. -See the Material Design section for more elements and customization options. -{% endcallout %} - -------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} -body { - /* Margin bottom by footer height */ - margin-bottom: 60px; -} -.footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; - line-height: 60px; /* Vertically center the text there */ - background-color: #f5f5f5; -} - - -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -body > .container { - padding: 60px 15px 0; -} - -.footer > .container { - padding-right: 15px; - padding-left: 15px; -} - -code { - font-size: 80%; -} diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html deleted file mode 100644 index 3af8b13f..00000000 --- a/docs/examples/sticky-footer/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - Sticky Footer Template for Bootstrap - - - - - - - - - - - -
- -

Pin a fixed-height 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/docs/examples/sticky-footer/sticky-footer.css b/docs/examples/sticky-footer/sticky-footer.css deleted file mode 100644 index 217082d2..00000000 --- a/docs/examples/sticky-footer/sticky-footer.css +++ /dev/null @@ -1,41 +0,0 @@ -/* Sticky footer styles -------- - -[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs - -{% callout info %} -**Bootstrap Reference Documentation** -This is a part of the reference documentation from Bootstrap. -It is included here to demonstrate rendering with Material Design for Bootstrap default styling. -See the Material Design section for more elements and customization options. -{% endcallout %} - -------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} -body { - /* Margin bottom by footer height */ - margin-bottom: 60px; -} -.footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; - line-height: 60px; /* Vertically center the text there */ - background-color: #f5f5f5; -} - - -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -.container { - width: auto; - max-width: 680px; - padding: 0 15px; -} diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html deleted file mode 100644 index c50a0742..00000000 --- a/docs/examples/tooltip-viewport/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - Tooltip Viewport Example for Bootstrap - - - - - - - - - - - - - - - - -
- - - - - - -
- - - - - - - - - - - - - - diff --git a/docs/examples/tooltip-viewport/tooltip-viewport.css b/docs/examples/tooltip-viewport/tooltip-viewport.css deleted file mode 100644 index 26aa2e34..00000000 --- a/docs/examples/tooltip-viewport/tooltip-viewport.css +++ /dev/null @@ -1,26 +0,0 @@ -body { - height: 1200px; -} -.tooltip { - min-width: 250px; - max-width: 500px; -} -.tooltip .tooltip-inner { - min-width: 250px; - max-width: 500px; - min-height: 100px; - text-align: left; -} -.container-viewport { - position: absolute; - top: 100px; - right: 250px; - left: 250px; - height: 300px; - background-color: #eee; -} -.btn-bottom { - position: absolute; - bottom: 0; - left: 0; -} diff --git a/docs/examples/tooltip-viewport/tooltip-viewport.js b/docs/examples/tooltip-viewport/tooltip-viewport.js deleted file mode 100644 index e87f4eec..00000000 --- a/docs/examples/tooltip-viewport/tooltip-viewport.js +++ /dev/null @@ -1,18 +0,0 @@ -$(document).ready(function () { - $('.tooltip-right').tooltip({ - placement: 'right', - viewport: {selector: 'body', padding: 2} - }) - $('.tooltip-bottom').tooltip({ - placement: 'bottom', - viewport: {selector: 'body', padding: 2} - }) - $('.tooltip-viewport-right').tooltip({ - placement: 'right', - viewport: {selector: '.container-viewport', padding: 2} - }) - $('.tooltip-viewport-bottom').tooltip({ - placement: 'bottom', - viewport: {selector: '.container-viewport', padding: 2} - }) -}) diff --git a/js/src/autofill.js b/js/src/autofill.js index 317834de..eba5a7a9 100644 --- a/js/src/autofill.js +++ b/js/src/autofill.js @@ -49,7 +49,7 @@ const Autofill = (($) => { $('input[type!=checkbox]').each((index, element) => { let $element = $(element) if ($element.val() && $element.val() !== $element.attr('value')) { - $element.triggerStart('change') + $element.trigger('change') } }) }, 100) @@ -66,7 +66,7 @@ const Autofill = (($) => { $inputs.each((index, element) => { let $element = $(element) if ($element.val() !== $element.attr('value')) { - $element.triggerStart('change') + $element.trigger('change') } }) }, 100) diff --git a/js/src/ripples.js b/js/src/ripples.js index c96cdf26..5b62d34c 100644 --- a/js/src/ripples.js +++ b/js/src/ripples.js @@ -264,7 +264,7 @@ const Ripples = (($) => { 'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1), opacity: 0.2 }, this.config.duration, () => { - this.$decorator.triggerStart('transitionend') + this.$decorator.trigger('transitionend') }) } } diff --git a/scss/_forms.scss b/scss/_forms.scss index 36da966d..f59ee13a 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -147,9 +147,8 @@ form { } } -// FIXME: remove the following, I don't think it is necessary any longer and just adds more rules that are already matched above. -// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) -//@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $line-height, $mdb-label-as-placeholder-shim-base); +// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch +@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height); select { &, diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index e41896bc..e81c8731 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -131,7 +131,7 @@ $label-static-top: $label-top-margin; $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y; - @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; + //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; //Label height: 72dp //Padding above label text: 16dp @@ -144,6 +144,18 @@ // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). padding-top: ($label-top-margin + $static-font-size); // note: bottom-margin of this is determined by $spacer. @see _spacer.scss + //margin-bottom: (1.5 * $help-font-size); + } @else { + + // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that + // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups + .radio, + label.radio-inline, + .checkbox, + label.checkbox-inline, + .switch { + padding-top: $spacer-y; + } } // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space