From bf51e24700627b17df5041f3a369f6f6b4a4bfbb Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:17:01 -0700 Subject: change file names to example names --- carousel/carousel.css | 134 ++++++++++++++++++++++++++ carousel/example.css | 134 -------------------------- carousel/index.html | 2 +- grid/example.css | 21 ---- grid/grid.css | 21 ++++ grid/index.html | 2 +- jumbotron-narrow/example.css | 78 --------------- jumbotron-narrow/index.html | 2 +- jumbotron-narrow/jumbotron-narrow.css | 78 +++++++++++++++ jumbotron/example.css | 30 ------ jumbotron/index.html | 2 +- jumbotron/jumbotron.css | 30 ++++++ justified-nav/example.css | 81 ---------------- justified-nav/index.html | 2 +- justified-nav/justified-nav.css | 81 ++++++++++++++++ navbar-fixed-top/example.css | 7 -- navbar-fixed-top/index.html | 2 +- navbar-fixed-top/navbar-fixed-top.css | 7 ++ navbar-static-top/example.css | 3 - navbar-static-top/index.html | 2 +- navbar-static-top/navbar-static-top.css | 3 + navbar/example.css | 7 -- navbar/index.html | 2 +- navbar/navbar.css | 7 ++ offcanvas/example.css | 100 ------------------- offcanvas/example.js | 5 - offcanvas/index.html | 2 +- offcanvas/offcanvas.css | 100 +++++++++++++++++++ offcanvas/offcanvas.js | 5 + signin/example.css | 42 -------- signin/index.html | 2 +- signin/signin.css | 42 ++++++++ starter-template/example.css | 7 -- starter-template/index.html | 2 +- starter-template/starter-template.css | 7 ++ sticky-footer-navbar/example.css | 52 ---------- sticky-footer-navbar/index.html | 2 +- sticky-footer-navbar/sticky-footer-navbar.css | 52 ++++++++++ sticky-footer/example.css | 48 --------- sticky-footer/index.html | 2 +- sticky-footer/sticky-footer.css | 48 +++++++++ 41 files changed, 628 insertions(+), 628 deletions(-) create mode 100644 carousel/carousel.css delete mode 100644 carousel/example.css delete mode 100644 grid/example.css create mode 100644 grid/grid.css delete mode 100644 jumbotron-narrow/example.css create mode 100644 jumbotron-narrow/jumbotron-narrow.css delete mode 100644 jumbotron/example.css create mode 100644 jumbotron/jumbotron.css delete mode 100644 justified-nav/example.css create mode 100644 justified-nav/justified-nav.css delete mode 100644 navbar-fixed-top/example.css create mode 100644 navbar-fixed-top/navbar-fixed-top.css delete mode 100644 navbar-static-top/example.css create mode 100644 navbar-static-top/navbar-static-top.css delete mode 100644 navbar/example.css create mode 100644 navbar/navbar.css delete mode 100644 offcanvas/example.css delete mode 100644 offcanvas/example.js create mode 100644 offcanvas/offcanvas.css create mode 100644 offcanvas/offcanvas.js delete mode 100644 signin/example.css create mode 100644 signin/signin.css delete mode 100644 starter-template/example.css create mode 100644 starter-template/starter-template.css delete mode 100644 sticky-footer-navbar/example.css create mode 100644 sticky-footer-navbar/sticky-footer-navbar.css delete mode 100644 sticky-footer/example.css create mode 100644 sticky-footer/sticky-footer.css diff --git a/carousel/carousel.css b/carousel/carousel.css new file mode 100644 index 000000000..3d997481e --- /dev/null +++ b/carousel/carousel.css @@ -0,0 +1,134 @@ + +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; +} + + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + z-index: 10; +} + + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 60px; + + /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ + margin-top: -90px; +} +/* 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: 500px; +} +.carousel img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Pad the edges of the mobile views a bit */ +.marketing { + padding-left: 15px; + padding-right: 15px; +} + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + text-align: center; + margin-bottom: 20px; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-left: 10px; + margin-right: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap
more */ +} +.featurette { + padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ + overflow: hidden; /* Vertically center images part 2: clear their floats. */ +} +.featurette-image { + margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ +} + +/* Give some space on the sides of the floated elements so text doesn't run right into it. */ +.featurette-image.pull-left { + margin-right: 40px; +} +.featurette-image.pull-right { + margin-left: 40px; +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-size: 50px; + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 768px) { + + /* Remve the edge padding needed for mobile */ + .marketing { + padding-left: 0; + padding-right: 0; + } + + /* Navbar positioning foo */ + .navbar-wrapper { + margin-top: 20px; + } + /* The navbar becomes detached from the top, so we round the corners */ + .navbar-wrapper .navbar { + border-radius: 4px; + } + + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 20px; + font-size: 21px; + line-height: 1.4; + } + +} diff --git a/carousel/example.css b/carousel/example.css deleted file mode 100644 index 3d997481e..000000000 --- a/carousel/example.css +++ /dev/null @@ -1,134 +0,0 @@ - -/* GLOBAL STYLES --------------------------------------------------- */ -/* Padding below the footer and lighter body text */ - -body { - padding-bottom: 40px; - color: #5a5a5a; -} - - - -/* CUSTOMIZE THE NAVBAR --------------------------------------------------- */ - -/* Special class on .container surrounding .navbar, used for positioning it into place. */ -.navbar-wrapper { - z-index: 10; -} - - - -/* CUSTOMIZE THE CAROUSEL --------------------------------------------------- */ - -/* Carousel base class */ -.carousel { - margin-bottom: 60px; - - /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ - margin-top: -90px; -} -/* 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: 500px; -} -.carousel img { - position: absolute; - top: 0; - left: 0; - min-width: 100%; - height: 500px; -} - - - -/* MARKETING CONTENT --------------------------------------------------- */ - -/* Pad the edges of the mobile views a bit */ -.marketing { - padding-left: 15px; - padding-right: 15px; -} - -/* Center align the text within the three columns below the carousel */ -.marketing .col-lg-4 { - text-align: center; - margin-bottom: 20px; -} -.marketing h2 { - font-weight: normal; -} -.marketing .col-lg-4 p { - margin-left: 10px; - margin-right: 10px; -} - - -/* Featurettes -------------------------- */ - -.featurette-divider { - margin: 80px 0; /* Space out the Bootstrap
more */ -} -.featurette { - padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ - overflow: hidden; /* Vertically center images part 2: clear their floats. */ -} -.featurette-image { - margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ -} - -/* Give some space on the sides of the floated elements so text doesn't run right into it. */ -.featurette-image.pull-left { - margin-right: 40px; -} -.featurette-image.pull-right { - margin-left: 40px; -} - -/* Thin out the marketing headings */ -.featurette-heading { - font-size: 50px; - font-weight: 300; - line-height: 1; - letter-spacing: -1px; -} - - - -/* RESPONSIVE CSS --------------------------------------------------- */ - -@media (min-width: 768px) { - - /* Remve the edge padding needed for mobile */ - .marketing { - padding-left: 0; - padding-right: 0; - } - - /* Navbar positioning foo */ - .navbar-wrapper { - margin-top: 20px; - } - /* The navbar becomes detached from the top, so we round the corners */ - .navbar-wrapper .navbar { - border-radius: 4px; - } - - /* Bump up size of carousel content */ - .carousel-caption p { - margin-bottom: 20px; - font-size: 21px; - line-height: 1.4; - } - -} diff --git a/carousel/index.html b/carousel/index.html index 295e47bca..f9b2358c2 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -6,7 +6,7 @@ - Carousel template for Bootstrap + Carousel Template for Bootstrap diff --git a/grid/example.css b/grid/example.css deleted file mode 100644 index c213ac6a7..000000000 --- a/grid/example.css +++ /dev/null @@ -1,21 +0,0 @@ -.container { - padding-left: 15px; - padding-right: 15px; -} - -h4 { - margin-top: 25px; -} -.row { - margin-bottom: 20px; -} -.row .row { - margin-top: 10px; - margin-bottom: 0; -} -[class*="col-lg-"] { - padding-top: 15px; - padding-bottom: 15px; - background-color: rgba(185,74,72,.15); - border: 1px solid rgba(185,74,72,.2); -} diff --git a/grid/grid.css b/grid/grid.css new file mode 100644 index 000000000..c213ac6a7 --- /dev/null +++ b/grid/grid.css @@ -0,0 +1,21 @@ +.container { + padding-left: 15px; + padding-right: 15px; +} + +h4 { + margin-top: 25px; +} +.row { + margin-bottom: 20px; +} +.row .row { + margin-top: 10px; + margin-bottom: 0; +} +[class*="col-lg-"] { + padding-top: 15px; + padding-bottom: 15px; + background-color: rgba(185,74,72,.15); + border: 1px solid rgba(185,74,72,.2); +} diff --git a/grid/index.html b/grid/index.html index 81ef11883..b3d634c91 100644 --- a/grid/index.html +++ b/grid/index.html @@ -6,7 +6,7 @@ - Grid template for Bootstrap + Grid Template for Bootstrap diff --git a/jumbotron-narrow/example.css b/jumbotron-narrow/example.css deleted file mode 100644 index 36a1d7cae..000000000 --- a/jumbotron-narrow/example.css +++ /dev/null @@ -1,78 +0,0 @@ -/* Space out content a bit */ -body { - padding-top: 20px; - padding-bottom: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile-first views */ -.header, -.marketing, -.footer { - padding-left: 15px; - padding-right: 15px; -} - -/* Custom page header */ -.header { - border-bottom: 1px solid #e5e5e5; -} -/* Make the masthead heading the same height as the navigation */ -.header h3 { - margin-top: 0; - margin-bottom: 0; - line-height: 40px; - padding-bottom: 19px; -} - -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; -} - -/* Custom container */ -.container-narrow { - margin: 0 auto; - max-width: 700px; -} -.container-narrow > hr { - margin: 30px 0; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: 1px solid #e5e5e5; -} -.jumbotron .btn { - font-size: 21px; - padding: 14px 24px; -} - -/* Supporting marketing content */ -.marketing { - margin: 40px 0; -} -.marketing p + h4 { - margin-top: 28px; -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} diff --git a/jumbotron-narrow/index.html b/jumbotron-narrow/index.html index 3dd27ea7d..1f4b96bdb 100644 --- a/jumbotron-narrow/index.html +++ b/jumbotron-narrow/index.html @@ -6,7 +6,7 @@ - Narrow Jumbotron template for Bootstrap + Narrow Jumbotron Template for Bootstrap diff --git a/jumbotron-narrow/jumbotron-narrow.css b/jumbotron-narrow/jumbotron-narrow.css new file mode 100644 index 000000000..36a1d7cae --- /dev/null +++ b/jumbotron-narrow/jumbotron-narrow.css @@ -0,0 +1,78 @@ +/* Space out content a bit */ +body { + padding-top: 20px; + padding-bottom: 20px; +} + +/* Everything but the jumbotron gets side spacing for mobile-first views */ +.header, +.marketing, +.footer { + padding-left: 15px; + padding-right: 15px; +} + +/* Custom page header */ +.header { + border-bottom: 1px solid #e5e5e5; +} +/* Make the masthead heading the same height as the navigation */ +.header h3 { + margin-top: 0; + margin-bottom: 0; + line-height: 40px; + padding-bottom: 19px; +} + +/* Custom page footer */ +.footer { + padding-top: 19px; + color: #777; + border-top: 1px solid #e5e5e5; +} + +/* Custom container */ +.container-narrow { + margin: 0 auto; + max-width: 700px; +} +.container-narrow > hr { + margin: 30px 0; +} + +/* Main marketing message and sign up button */ +.jumbotron { + text-align: center; + border-bottom: 1px solid #e5e5e5; +} +.jumbotron .btn { + font-size: 21px; + padding: 14px 24px; +} + +/* Supporting marketing content */ +.marketing { + margin: 40px 0; +} +.marketing p + h4 { + margin-top: 28px; +} + +/* Responsive: Portrait tablets and up */ +@media screen and (min-width: 768px) { + /* Remove the padding we set earlier */ + .header, + .marketing, + .footer { + padding-left: 0; + padding-right: 0; + } + /* Space out the masthead */ + .header { + margin-bottom: 30px; + } + /* Remove the bottom border on the jumbotron for visual effect */ + .jumbotron { + border-bottom: 0; + } +} diff --git a/jumbotron/example.css b/jumbotron/example.css deleted file mode 100644 index 17d253be4..000000000 --- a/jumbotron/example.css +++ /dev/null @@ -1,30 +0,0 @@ -/* Move down content because we have a fixed navbar that is 50px tall */ -body { - padding-top: 50px; - padding-bottom: 20px; -} - -/* Set widths on the navbar form inputs since otherwise they're 100% wide */ -.navbar-form input[type="text"], -.navbar-form input[type="password"] { - width: 180px; -} - -/* Wrapping element */ -/* Set some basic padding to keep content from hitting the edges */ -.body-content { - padding-left: 15px; - padding-right: 15px; -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Let the jumbotron breathe */ - .jumbotron { - margin-top: 20px; - } - /* Remove padding from wrapping element since we kick in the grid classes here */ - .body-content { - padding: 0; - } -} \ No newline at end of file diff --git a/jumbotron/index.html b/jumbotron/index.html index ab81bc06a..8dc30fbf8 100644 --- a/jumbotron/index.html +++ b/jumbotron/index.html @@ -6,7 +6,7 @@ - Jumbotron template for Bootstrap + Jumbotron Template for Bootstrap diff --git a/jumbotron/jumbotron.css b/jumbotron/jumbotron.css new file mode 100644 index 000000000..17d253be4 --- /dev/null +++ b/jumbotron/jumbotron.css @@ -0,0 +1,30 @@ +/* Move down content because we have a fixed navbar that is 50px tall */ +body { + padding-top: 50px; + padding-bottom: 20px; +} + +/* Set widths on the navbar form inputs since otherwise they're 100% wide */ +.navbar-form input[type="text"], +.navbar-form input[type="password"] { + width: 180px; +} + +/* Wrapping element */ +/* Set some basic padding to keep content from hitting the edges */ +.body-content { + padding-left: 15px; + padding-right: 15px; +} + +/* Responsive: Portrait tablets and up */ +@media screen and (min-width: 768px) { + /* Let the jumbotron breathe */ + .jumbotron { + margin-top: 20px; + } + /* Remove padding from wrapping element since we kick in the grid classes here */ + .body-content { + padding: 0; + } +} \ No newline at end of file diff --git a/justified-nav/example.css b/justified-nav/example.css deleted file mode 100644 index 89822eca2..000000000 --- a/justified-nav/example.css +++ /dev/null @@ -1,81 +0,0 @@ -body { - padding-top: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile-first views */ -.masthead, -.body-content, -.footer { - padding-left: 15px; - padding-right: 15px; -} - -.footer { - border-top: 1px solid #ddd; - margin-top: 30px; - padding-top: 29px; - padding-bottom: 30px; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - background-color: transparent; -} -.jumbotron .btn { - font-size: 21px; - padding: 14px 24px; -} - -/* Customize the nav-justified links to be fill the entire space of the .navbar */ -.nav-justified { - max-height: 50px; - background-color: #eee; - border-radius: 5px; - border: 1px solid #ccc; -} -.nav-justified > li > a { - padding-top: 15px; - padding-bottom: 15px; - color: #777; - font-weight: bold; - text-align: center; - border-left: 1px solid rgba(255,255,255,.75); - border-right: 1px solid rgba(0,0,0,.1); - background-color: #e5e5e5; /* Old browsers */ - background-repeat: repeat-x; /* Repeat the gradient */ - background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */ - background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */ - background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ - background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ -} -.nav-justified > .active > a { - background-color: #ddd; - background-image: none; - box-shadow: inset 0 3px 7px rgba(0,0,0,.15); -} -.nav-justified > li:first-child > a { - border-left: 0; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} -.nav-justified > li:last-child > a { - border-right: 0; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} - - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Remove the padding we set earlier */ - .masthead, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } -} diff --git a/justified-nav/index.html b/justified-nav/index.html index ca7b66838..8b9d60dce 100644 --- a/justified-nav/index.html +++ b/justified-nav/index.html @@ -6,7 +6,7 @@ - Justified nav template for Bootstrap + Justified Nav Template for Bootstrap diff --git a/justified-nav/justified-nav.css b/justified-nav/justified-nav.css new file mode 100644 index 000000000..89822eca2 --- /dev/null +++ b/justified-nav/justified-nav.css @@ -0,0 +1,81 @@ +body { + padding-top: 20px; +} + +/* Everything but the jumbotron gets side spacing for mobile-first views */ +.masthead, +.body-content, +.footer { + padding-left: 15px; + padding-right: 15px; +} + +.footer { + border-top: 1px solid #ddd; + margin-top: 30px; + padding-top: 29px; + padding-bottom: 30px; +} + +/* Main marketing message and sign up button */ +.jumbotron { + text-align: center; + background-color: transparent; +} +.jumbotron .btn { + font-size: 21px; + padding: 14px 24px; +} + +/* Customize the nav-justified links to be fill the entire space of the .navbar */ +.nav-justified { + max-height: 50px; + background-color: #eee; + border-radius: 5px; + border: 1px solid #ccc; +} +.nav-justified > li > a { + padding-top: 15px; + padding-bottom: 15px; + color: #777; + font-weight: bold; + text-align: center; + border-left: 1px solid rgba(255,255,255,.75); + border-right: 1px solid rgba(0,0,0,.1); + background-color: #e5e5e5; /* Old browsers */ + background-repeat: repeat-x; /* Repeat the gradient */ + background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ + background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */ + background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */ + background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ + background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ +} +.nav-justified > .active > a { + background-color: #ddd; + background-image: none; + box-shadow: inset 0 3px 7px rgba(0,0,0,.15); +} +.nav-justified > li:first-child > a { + border-left: 0; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.nav-justified > li:last-child > a { + border-right: 0; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + + +/* Responsive: Portrait tablets and up */ +@media screen and (min-width: 768px) { + /* Remove the padding we set earlier */ + .masthead, + .marketing, + .footer { + padding-left: 0; + padding-right: 0; + } +} diff --git a/navbar-fixed-top/example.css b/navbar-fixed-top/example.css deleted file mode 100644 index 1e23e9e5f..000000000 --- a/navbar-fixed-top/example.css +++ /dev/null @@ -1,7 +0,0 @@ -body { -padding-top: 60px; -} - -.jumbotron { -margin-top: 20px; -} \ No newline at end of file diff --git a/navbar-fixed-top/index.html b/navbar-fixed-top/index.html index 468f54d96..403e2ac5c 100644 --- a/navbar-fixed-top/index.html +++ b/navbar-fixed-top/index.html @@ -6,7 +6,7 @@ - Fixed top navbar example for Bootstrap + Fixed Top Navbar Example for Bootstrap diff --git a/navbar-fixed-top/navbar-fixed-top.css b/navbar-fixed-top/navbar-fixed-top.css new file mode 100644 index 000000000..1e23e9e5f --- /dev/null +++ b/navbar-fixed-top/navbar-fixed-top.css @@ -0,0 +1,7 @@ +body { +padding-top: 60px; +} + +.jumbotron { +margin-top: 20px; +} \ No newline at end of file diff --git a/navbar-static-top/example.css b/navbar-static-top/example.css deleted file mode 100644 index 0e34ecc69..000000000 --- a/navbar-static-top/example.css +++ /dev/null @@ -1,3 +0,0 @@ -.jumbotron { -margin-top: 30px; -} \ No newline at end of file diff --git a/navbar-static-top/index.html b/navbar-static-top/index.html index f6d313328..1d2b5febd 100644 --- a/navbar-static-top/index.html +++ b/navbar-static-top/index.html @@ -6,7 +6,7 @@ - Static top navbar example for Bootstrap + Static Top Navbar Example for Bootstrap diff --git a/navbar-static-top/navbar-static-top.css b/navbar-static-top/navbar-static-top.css new file mode 100644 index 000000000..0e34ecc69 --- /dev/null +++ b/navbar-static-top/navbar-static-top.css @@ -0,0 +1,3 @@ +.jumbotron { +margin-top: 30px; +} \ No newline at end of file diff --git a/navbar/example.css b/navbar/example.css deleted file mode 100644 index f593a6bfc..000000000 --- a/navbar/example.css +++ /dev/null @@ -1,7 +0,0 @@ -body { -padding: 30px; -} - -.navbar { -margin-bottom: 30px; -} \ No newline at end of file diff --git a/navbar/index.html b/navbar/index.html index 8d6837b99..82da7b2a6 100644 --- a/navbar/index.html +++ b/navbar/index.html @@ -6,7 +6,7 @@ - Navbar template for Bootstrap + Navbar Template for Bootstrap diff --git a/navbar/navbar.css b/navbar/navbar.css new file mode 100644 index 000000000..f593a6bfc --- /dev/null +++ b/navbar/navbar.css @@ -0,0 +1,7 @@ +body { +padding: 30px; +} + +.navbar { +margin-bottom: 30px; +} \ No newline at end of file diff --git a/offcanvas/example.css b/offcanvas/example.css deleted file mode 100644 index 6dcd5ece1..000000000 --- a/offcanvas/example.css +++ /dev/null @@ -1,100 +0,0 @@ -body { - padding-top: 80px; -} -footer { - padding-left: 15px; - padding-right: 15px; -} - -/* - * Off canvas - * -------------------------------------------------- */ - -.row-offcanvas { - position: relative; - overflow: hidden; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.row-offcanvas.active { - overflow: visible; -} -.row-offcanvas-right .sidebar-offcanvas { - right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left .sidebar-offcanvas { - left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-right.active { - right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left.active { - left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.sidebar-offcanvas { - position: absolute; - top: 0; -} - -@media screen and (max-width: 319px) { - /* This is here instead of being outside the media queries because when - * we exit "mobile land", the sidebar needs to be able to restore its - * originally authored ".col-lg-X" width. */ - .sidebar-offcanvas { - width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ - } -} - -@media screen and (min-width: 320px) and (max-width: 480px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-right.active { - right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left.active { - left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .sidebar-offcanvas { - width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } -} - -/* Landscape phone to tablets - * -------------------------- */ -@media screen and (min-width: 481px) and (max-width: 767px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-right.active { - right: 480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left.active { - left: 480px; /* 60px * 8 = Tablets and wider */ - } - .sidebar-offcanvas { - width: 480px; /* 60px * 8 = Tablets and wider */ - } -} - -/* Tablets & above - * ---------------- */ -@media screen and (min-width: 768px) { - .row-offcanvas { - position: static; - overflow: visible; - } - .sidebar-offcanvas { - position: static; - } - .btn-offcanvas { - display: none; - } -} \ No newline at end of file diff --git a/offcanvas/example.js b/offcanvas/example.js deleted file mode 100644 index 12f2dff51..000000000 --- a/offcanvas/example.js +++ /dev/null @@ -1,5 +0,0 @@ -$(document).ready(function() { - $('[data-toggle=offcanvas]').click(function() { - $('.row-offcanvas').toggleClass('active'); - }); -}); \ No newline at end of file diff --git a/offcanvas/index.html b/offcanvas/index.html index 319fcac70..350e83931 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -6,7 +6,7 @@ - Off canvas template for Bootstrap + Off Canvas Template for Bootstrap diff --git a/offcanvas/offcanvas.css b/offcanvas/offcanvas.css new file mode 100644 index 000000000..6dcd5ece1 --- /dev/null +++ b/offcanvas/offcanvas.css @@ -0,0 +1,100 @@ +body { + padding-top: 80px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off canvas + * -------------------------------------------------- */ + +.row-offcanvas { + position: relative; + overflow: hidden; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.row-offcanvas.active { + overflow: visible; +} +.row-offcanvas-right .sidebar-offcanvas { + right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left .sidebar-offcanvas { + left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-right.active { + right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left.active { + left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.sidebar-offcanvas { + position: absolute; + top: 0; +} + +@media screen and (max-width: 319px) { + /* This is here instead of being outside the media queries because when + * we exit "mobile land", the sidebar needs to be able to restore its + * originally authored ".col-lg-X" width. */ + .sidebar-offcanvas { + width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ + } +} + +@media screen and (min-width: 320px) and (max-width: 480px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-right.active { + right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left.active { + left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .sidebar-offcanvas { + width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } +} + +/* Landscape phone to tablets + * -------------------------- */ +@media screen and (min-width: 481px) and (max-width: 767px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-right.active { + right: 480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left.active { + left: 480px; /* 60px * 8 = Tablets and wider */ + } + .sidebar-offcanvas { + width: 480px; /* 60px * 8 = Tablets and wider */ + } +} + +/* Tablets & above + * ---------------- */ +@media screen and (min-width: 768px) { + .row-offcanvas { + position: static; + overflow: visible; + } + .sidebar-offcanvas { + position: static; + } + .btn-offcanvas { + display: none; + } +} \ No newline at end of file diff --git a/offcanvas/offcanvas.js b/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/offcanvas/offcanvas.js @@ -0,0 +1,5 @@ +$(document).ready(function() { + $('[data-toggle=offcanvas]').click(function() { + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file diff --git a/signin/example.css b/signin/example.css deleted file mode 100644 index a68420fad..000000000 --- a/signin/example.css +++ /dev/null @@ -1,42 +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 input[type="text"], -.form-signin input[type="password"] { - position: relative; - font-size: 16px; - height: auto; - padding: 10px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.form-signin input[type="text"]:focus, -.form-signin input[type="password"]:focus { - z-index: 2; -} -.form-signin input[type="text"] { - margin-bottom: -1px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.form-signin input[type="password"] { - margin-bottom: 10px; - border-top-left-radius: 0; - border-top-right-radius: 0; -} \ No newline at end of file diff --git a/signin/index.html b/signin/index.html index b62c02276..c85d3a8da 100644 --- a/signin/index.html +++ b/signin/index.html @@ -6,7 +6,7 @@ - Signin template for Bootstrap + Signin Template for Bootstrap diff --git a/signin/signin.css b/signin/signin.css new file mode 100644 index 000000000..a68420fad --- /dev/null +++ b/signin/signin.css @@ -0,0 +1,42 @@ +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 input[type="text"], +.form-signin input[type="password"] { + position: relative; + font-size: 16px; + height: auto; + padding: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.form-signin input[type="text"]:focus, +.form-signin input[type="password"]:focus { + z-index: 2; +} +.form-signin input[type="text"] { + margin-bottom: -1px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} \ No newline at end of file diff --git a/starter-template/example.css b/starter-template/example.css deleted file mode 100644 index 4af7a6177..000000000 --- a/starter-template/example.css +++ /dev/null @@ -1,7 +0,0 @@ -body { - padding-top: 50px; -} -.starter-template { - padding: 40px 15px; - text-align: center; -} diff --git a/starter-template/index.html b/starter-template/index.html index c87cb11cc..8f250fe92 100644 --- a/starter-template/index.html +++ b/starter-template/index.html @@ -6,7 +6,7 @@ - Starter template for Bootstrap + Starter Template for Bootstrap diff --git a/starter-template/starter-template.css b/starter-template/starter-template.css new file mode 100644 index 000000000..4af7a6177 --- /dev/null +++ b/starter-template/starter-template.css @@ -0,0 +1,7 @@ +body { + padding-top: 50px; +} +.starter-template { + padding: 40px 15px; + text-align: center; +} diff --git a/sticky-footer-navbar/example.css b/sticky-footer-navbar/example.css deleted file mode 100644 index f12d7f386..000000000 --- a/sticky-footer-navbar/example.css +++ /dev/null @@ -1,52 +0,0 @@ -/* Sticky footer styles --------------------------------------------------- */ - -html, -body { - height: 100%; - /* The html and body elements cannot have any padding or margin. */ -} - -/* Wrapper for page content to push down footer */ -#wrap { - min-height: 100%; - height: auto !important; - height: 100%; - /* Negative indent footer by its height */ - margin: 0 auto -60px; - /* Pad bottom by footer height */ - padding: 0 0 60px; -} - -/* Set the fixed height of the footer here */ -#footer { - height: 60px; - background-color: #f5f5f5; -} - -/* Lastly, apply responsive CSS fixes as necessary */ -@media (max-width: 767px) { - #footer { - margin-left: -20px; - margin-right: -20px; - padding-left: 20px; - padding-right: 20px; - } -} - - - -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -#wrap > .container { - padding: 60px 15px 0; -} -.container .credit { - margin: 20px 0; -} - -code { - font-size: 80%; -} \ No newline at end of file diff --git a/sticky-footer-navbar/index.html b/sticky-footer-navbar/index.html index e53186374..e59eb8ad4 100644 --- a/sticky-footer-navbar/index.html +++ b/sticky-footer-navbar/index.html @@ -6,7 +6,7 @@ - Sticky footer navbar template for Bootstrap + Sticky Footer Navbar Template for Bootstrap diff --git a/sticky-footer-navbar/sticky-footer-navbar.css b/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 000000000..f12d7f386 --- /dev/null +++ b/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,52 @@ +/* Sticky footer styles +-------------------------------------------------- */ + +html, +body { + height: 100%; + /* The html and body elements cannot have any padding or margin. */ +} + +/* Wrapper for page content to push down footer */ +#wrap { + min-height: 100%; + height: auto !important; + height: 100%; + /* Negative indent footer by its height */ + margin: 0 auto -60px; + /* Pad bottom by footer height */ + padding: 0 0 60px; +} + +/* Set the fixed height of the footer here */ +#footer { + height: 60px; + background-color: #f5f5f5; +} + +/* Lastly, apply responsive CSS fixes as necessary */ +@media (max-width: 767px) { + #footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } +} + + + +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +#wrap > .container { + padding: 60px 15px 0; +} +.container .credit { + margin: 20px 0; +} + +code { + font-size: 80%; +} \ No newline at end of file diff --git a/sticky-footer/example.css b/sticky-footer/example.css deleted file mode 100644 index 3da136e7c..000000000 --- a/sticky-footer/example.css +++ /dev/null @@ -1,48 +0,0 @@ -/* Sticky footer styles --------------------------------------------------- */ - -html, -body { - height: 100%; - /* The html and body elements cannot have any padding or margin. */ -} - -/* Wrapper for page content to push down footer */ -#wrap { - min-height: 100%; - height: auto !important; - height: 100%; - /* Negative indent footer by its height */ - margin: 0 auto -60px; - /* Pad bottom by footer height */ - padding: 0 0 60px; -} - -/* Set the fixed height of the footer here */ -#footer { - height: 60px; - background-color: #f5f5f5; -} - -/* Lastly, apply responsive CSS fixes as necessary */ -@media (max-width: 767px) { - #footer { - margin-left: -20px; - margin-right: -20px; - padding-left: 20px; - padding-right: 20px; - } -} - -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -.container { - width: auto; - max-width: 680px; - padding: 0 15px; -} -.container .credit { - margin: 20px 0; -} \ No newline at end of file diff --git a/sticky-footer/index.html b/sticky-footer/index.html index 55865b507..1a04fb954 100644 --- a/sticky-footer/index.html +++ b/sticky-footer/index.html @@ -6,7 +6,7 @@ - Sticky footer template for Bootstrap + Sticky Footer Template for Bootstrap diff --git a/sticky-footer/sticky-footer.css b/sticky-footer/sticky-footer.css new file mode 100644 index 000000000..3da136e7c --- /dev/null +++ b/sticky-footer/sticky-footer.css @@ -0,0 +1,48 @@ +/* Sticky footer styles +-------------------------------------------------- */ + +html, +body { + height: 100%; + /* The html and body elements cannot have any padding or margin. */ +} + +/* Wrapper for page content to push down footer */ +#wrap { + min-height: 100%; + height: auto !important; + height: 100%; + /* Negative indent footer by its height */ + margin: 0 auto -60px; + /* Pad bottom by footer height */ + padding: 0 0 60px; +} + +/* Set the fixed height of the footer here */ +#footer { + height: 60px; + background-color: #f5f5f5; +} + +/* Lastly, apply responsive CSS fixes as necessary */ +@media (max-width: 767px) { + #footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } +} + +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} +.container .credit { + margin: 20px 0; +} \ No newline at end of file -- cgit v1.2.3