diff --git a/bootstrap.jade b/_bootstrap.jade similarity index 82% rename from bootstrap.jade rename to _bootstrap.jade index 418e130..b8db3c0 100644 --- a/bootstrap.jade +++ b/_bootstrap.jade @@ -36,6 +36,12 @@ include components/modal include components/list-groups //- Including Progress bar mixins include components/progress-bars +//- Including Button mixins +include components/buttons +//- Including Image mixins +include components/images +//- Including Bootswatch theme mixins +include components/bootswatch doctype html html(lang="en") @@ -49,10 +55,12 @@ html(lang="en") title= title block styles link(rel="stylesheet",href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css") - body + //link(rel="stylesheet",href="css/bootstrap.min.css") + body(data-spy="scroll",data-target=".scrollspy") block body block scripts script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js") - + //script(src="js/jquery.min.js") + //script(src="js/bootstrap.min.js") diff --git a/components/bootswatch.jade b/components/bootswatch.jade new file mode 100644 index 0000000..baaaeae --- /dev/null +++ b/components/bootswatch.jade @@ -0,0 +1,5 @@ +//- Bootswatch theme mixins by Kezz Bracey +//- https://github.com/tutsplus/baking-bootstrap-snippets-with-jade +//- Author: http://tutsplus.com/authors/kezz-bracey +mixin bootswatch(theme) + link(href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/" + theme + "/bootstrap.min.css", rel="stylesheet") \ No newline at end of file diff --git a/components/buttons.jade b/components/buttons.jade new file mode 100644 index 0000000..6c78eae --- /dev/null +++ b/components/buttons.jade @@ -0,0 +1,151 @@ +//- button mixins +//- anchor buttons +mixin a-btn(url,style) + - var type = (typeof style === 'undefined') ? "default" : style + a.btn(class="btn-#{type}",href="#{url}",role="button") + block + +mixin a-btn-primary(url) + +a-btn(url,"primary") + block + +mixin a-btn-info(url) + +a-btn(url,"info") + block + +mixin a-btn-warning(url) + +a-btn(url,"warning") + block + +mixin a-btn-danger(url) + +a-btn(url,"danger") + block + +mixin a-btn-success(url) + +a-btn(url,"success") + block + +//- buttons +mixin btn(caption,style,size) + - var type = (typeof style === 'undefined') ? "default" : style + unless size + button.btn(class="btn-#{type}",type="button")= caption + else + button.btn(class="btn-#{type} btn-#{size}",type="button")= caption + + +mixin btn-primary(caption) + +btn(caption,"primary") + +mixin btn-info(caption) + +btn(caption,"info") + +mixin btn-warning(caption) + +btn(caption,"warning") + +mixin btn-danger(caption) + +btn(caption,"danger") + +mixin btn-success(caption) + +btn(caption,"success") + +//- Large buttons +mixin btn-lg(caption) + - var type = (typeof style === 'undefined') ? 'default' : style + +btn(caption,type,"lg") + +mixin btn-lg-primary(caption) + +btn(caption,"primary","lg") + +mixin btn-lg-info(caption) + +btn(caption,"info","lg") + +mixin btn-lg-success(caption) + +btn(caption,"success","lg") + +mixin btn-lg-warning(caption) + +btn(caption,"warning","lg") + +mixin btn-lg-danger(caption) + +btn(caption,"danger","lg") + +//- Small buttons +mixin btn-sm(caption) + - var type = (typeof style === 'undefined') ? 'default' : style + +btn(caption,type,"sm") + +mixin btn-sm-primary(caption) + +btn(caption,"primary","sm") + +mixin btn-sm-info(caption) + +btn(caption,"info","sm") + +mixin btn-sm-success(caption) + +btn(caption,"success","sm") + +mixin btn-sm-warning(caption) + +btn(caption,"warning","sm") + +mixin btn-sm-danger(caption) + +btn(caption,"danger","sm") + +//- Extra Small buttons +mixin btn-xs(caption) + - var type = (typeof style === 'undefined') ? 'default' : style + +btn(caption,type,"xs") + +mixin btn-xs-primary(caption) + +btn(caption,"primary","xs") + +mixin btn-xs-info(caption) + +btn(caption,"info","xs") + +mixin btn-xs-success(caption) + +btn(caption,"success","xs") + +mixin btn-xs-warning(caption) + +btn(caption,"warning","xs") + +mixin btn-xs-danger(caption) + +btn(caption,"danger","xs") + +//- input buttons +mixin input-btn(caption,style) + - var type = (typeof style === 'undefined') ? "default" : style + input.btn(class="btn-#{type}",type="button",value="#{caption}") + +mixin input-btn-primary(caption) + +input-btn(caption,"primary") + +mixin input-btn-info(caption) + +input-btn(caption,"info") + +mixin input-btn-warning(caption) + +input-btn(caption,"warning") + +mixin input-btn-danger(caption) + +input-btn(caption,"danger") + +mixin input-btn-success(caption) + +input-btn(caption,"success") + +//- submit buttons +mixin submit(caption,style) + - var type = (typeof style === 'undefined') ? "default" : style + input.btn(class="btn-#{type}",type="submit",value="#{caption}") + +mixin submit-primary(caption) + +submit(caption,"primary") + +mixin submit-info(caption) + +submit(caption,"info") + +mixin submit-warning(caption) + +submit(caption,"warning") + +mixin submit-danger(caption) + +submit(caption,"danger") + +mixin submit-success(caption) + +submit(caption,"success") + diff --git a/components/images.jade b/components/images.jade new file mode 100644 index 0000000..8c3740d --- /dev/null +++ b/components/images.jade @@ -0,0 +1,15 @@ +//- Image mixins +mixin img-responsive(_src,_alt) + img.img-responsive(src="#{_src}",alt="#{_alt}") + +mixin img-responsive-center(_src,_alt) + img.img-responsive.center-block(src="#{_src}",alt="#{_alt}") + +mixin img-rounded(_src,_alt) + img.img-rounded(src="#{_src}",alt="#{_alt}") + +mixin img-circle(_src,_alt) + img.img-circle(src="#{_src}",alt="#{_alt}") + +mixin img-thumbnail(_src,_alt) + img.img-thumbnail(src="#{_src}",alt="#{_alt}") diff --git a/components/navbar.jade b/components/navbar.jade index e0859ad..e17ea0e 100644 --- a/components/navbar.jade +++ b/components/navbar.jade @@ -2,36 +2,65 @@ //- https://github.com/tutsplus/baking-bootstrap-snippets-with-jade //- Author: http://tutsplus.com/authors/kezz-bracey mixin navbar(name, id, style) - - var style = (typeof style === 'undefined') ? "default" : style - nav( role="navigation", class=["navbar", "navbar-" + style] ) - .navbar-header - button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") - span.sr-only Toggle navigation - span.icon-bar - span.icon-bar - span.icon-bar - a.navbar-brand(href="#")= name - - .collapse.navbar-collapse( id=id ) - ul.nav.navbar-nav - block - + - var style = (typeof style === 'undefined') ? "default" : style + nav( role="navigation", class=["navbar", "navbar-" + style] ) + .navbar-header + button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href="#")= name + + .collapse.navbar-collapse( id=id ) + ul.nav.navbar-nav + block + mixin nav_item(href, active) - li(class=active): a( href=href ) - block - + li(class=active): a( href=href ) + block + mixin nav_item_dropdown(href, active) - li(class=["dropdown", active]) - a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label - span.caret - ul.dropdown-menu( role="menu" ) - block - + li(class=["dropdown", active]) + a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label + span.caret + ul.dropdown-menu( role="menu" ) + block + mixin nav_divider - li.divider - + li.divider + mixin nav_header - li.dropdown-header - block - + li.dropdown-header + block + +mixin navbar-fixed(name,id,style) + - var style = (typeof style === 'undefined') ? "default" : style + nav( role="navigation", class=["navbar","navbar-fixed-top","navbar-" + style] ) + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#' + id, aria-expanded='false', aria-controls='navbar') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .collapse.navbar-collapse( id=id ) + ul.nav.navbar-nav + block + +mixin navbar-static(name,id,style) + - var style = (typeof style === 'undefined') ? "default" : style + nav( role="navigation", class=["navbar","navbar-static-top","navbar-" + style] ) + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#' + id, aria-expanded='false', aria-controls='navbar') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .collapse.navbar-collapse( id=id ) + ul.nav.navbar-nav + block //- End navbar mixins \ No newline at end of file diff --git a/layouts/blog.jade b/layouts/blog.jade index ecb03e2..e02ab95 100644 --- a/layouts/blog.jade +++ b/layouts/blog.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/blog.css', rel='stylesheet') diff --git a/layouts/bootswatch.jade b/layouts/bootswatch.jade new file mode 100644 index 0000000..e11e52e --- /dev/null +++ b/layouts/bootswatch.jade @@ -0,0 +1,351 @@ +extends ../_bootstrap +append styles + // Bootstrap theme + +bootswatch("cerulean") + // Custom styles for this template + link(href='../css/theme.css', rel='stylesheet') +block body + // Fixed navbar + nav.navbar.navbar-default.navbar-fixed-top + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Bootswatch theme + #navbar.navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + .container.theme-showcase(role='main') + // Main jumbotron for a primary marketing message or call to action + .jumbotron + h1 Bootswatch Themes example + p + | This is a template showcasing the various themes included in Bootswatch. Use it as a starting point to create something more unique by building on or modifying it. + .page-header + h1 Buttons + p + button.btn.btn-lg.btn-default(type='button') Default + button.btn.btn-lg.btn-primary(type='button') Primary + button.btn.btn-lg.btn-success(type='button') Success + button.btn.btn-lg.btn-info(type='button') Info + button.btn.btn-lg.btn-warning(type='button') Warning + button.btn.btn-lg.btn-danger(type='button') Danger + button.btn.btn-lg.btn-link(type='button') Link + p + button.btn.btn-default(type='button') Default + button.btn.btn-primary(type='button') Primary + button.btn.btn-success(type='button') Success + button.btn.btn-info(type='button') Info + button.btn.btn-warning(type='button') Warning + button.btn.btn-danger(type='button') Danger + button.btn.btn-link(type='button') Link + p + button.btn.btn-sm.btn-default(type='button') Default + button.btn.btn-sm.btn-primary(type='button') Primary + button.btn.btn-sm.btn-success(type='button') Success + button.btn.btn-sm.btn-info(type='button') Info + button.btn.btn-sm.btn-warning(type='button') Warning + button.btn.btn-sm.btn-danger(type='button') Danger + button.btn.btn-sm.btn-link(type='button') Link + p + button.btn.btn-xs.btn-default(type='button') Default + button.btn.btn-xs.btn-primary(type='button') Primary + button.btn.btn-xs.btn-success(type='button') Success + button.btn.btn-xs.btn-info(type='button') Info + button.btn.btn-xs.btn-warning(type='button') Warning + button.btn.btn-xs.btn-danger(type='button') Danger + button.btn.btn-xs.btn-link(type='button') Link + .page-header + h1 Tables + .row + .col-md-6 + +table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .col-md-6 + +table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .row + .col-md-6 + +table-bordered(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .col-md-6 + +table-condensed(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .page-header + h1 Thumbnails + img.img-thumbnail(src='../images/thumb.jpg', alt='A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera') + .page-header + h1 Labels + h1 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h2 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h3 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h4 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h5 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h6 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + p + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + .page-header + h1 Badges + p + a(href='#') + | Inbox + span.badge 42 + ul.nav.nav-pills(role='tablist') + li.active(role='presentation') + a(href='#') + | Home + span.badge 42 + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') + | Messages + span.badge 3 + .page-header + h1 Dropdown menus + .dropdown.theme-dropdown.clearfix + a#dropdownMenu1.sr-only.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1') + li.active(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Another action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Something else here + li.divider(role='presentation') + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Separated link + .page-header + h1 Navs + ul.nav.nav-tabs(role='tablist') + li.active(role='presentation') + a(href='#') Home + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') Messages + ul.nav.nav-pills(role='tablist') + li.active(role='presentation') + a(href='#') Home + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') Messages + .page-header + h1 Navbars + nav.navbar.navbar-default + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + nav.navbar.navbar-inverse + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + .page-header + h1 Alerts + +alert-success("Well done! You successfully read this important alert message.") + +alert-info("Heads up! This alert needs your attention, but it's not super important.") + +alert-warning("Warning! Best check yo self, you're not looking too good.") + +alert-danger("Oh snap! Change a few things up and try submitting again.") + .page-header + h1 Progress bars + +progress-bar(60) + +progress-bar-info(20) + +progress-bar-warning(60) + +progress-bar-danger(80) + +progress-bar-striped(60) + .progress + .progress-bar.progress-bar-success(style='width: 35%') + span.sr-only 35% Complete (success) + .progress-bar.progress-bar-warning(style='width: 20%') + span.sr-only 20% Complete (warning) + .progress-bar.progress-bar-danger(style='width: 10%') + span.sr-only 10% Complete (danger) + .page-header + h1 List groups + .row + .col-sm-4 + ul.list-group + li.list-group-item Cras justo odio + li.list-group-item Dapibus ac facilisis in + li.list-group-item Morbi leo risus + li.list-group-item Porta ac consectetur ac + li.list-group-item Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + | Cras justo odio + a.list-group-item(href='#') Dapibus ac facilisis in + a.list-group-item(href='#') Morbi leo risus + a.list-group-item(href='#') Porta ac consectetur ac + a.list-group-item(href='#') Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + // /.col-sm-4 + .page-header + h1 Panels + .row + .col-sm-4 + +panel-default("Panel title") + | Panel content + +panel-primary("Panel title") + | Panel content + .col-sm-4 + +panel-success("Panel title") + | Panel content + +panel-info("Panel title") + | Panel content + .col-sm-4 + +panel-warning("Panel title") + | Panel content + +panel-danger("Panel title") + | Panel content + .page-header + h1 Wells + .well + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. + .page-header + h1 Carousel + +carousel("example-generic",[{image:'../images/carousel/slide1.jpg'},{image:'../images/carousel/slide2.jpg'},{image:'../images/carousel/slide3.jpg',}]) diff --git a/layouts/carousel.jade b/layouts/carousel.jade index 84f0190..41ceafb 100644 --- a/layouts/carousel.jade +++ b/layouts/carousel.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href="../css/carousel.css", rel="stylesheet") @@ -43,7 +43,7 @@ block body // Carousel // ================================================== - +carousel("myCarousel",[{image:"/images/carousel1.jpg",h1:"Example headline",p:"Note: If you're viewing this page via a codefile:///code URL, the 'next' and 'previous' Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.",button:{caption:"Sign up today",url:"#"}},{image:"/images/carousel2.jpg",h1:"Another example headline",p:"Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",button:{caption:"Learn more",url:"#"}}, {image:"/images/carousel3.jpg",h1:"One more for good measure.",p:"Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",button:{caption:"Browse gallery",url:"#"}}]) + +carousel("myCarousel",[{image:"../images/carousel1.jpg",h1:"Example headline",p:"Note: If you're viewing this page via a codefile:///code URL, the 'next' and 'previous' Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.",button:{caption:"Sign up today",url:"#"}},{image:"../images/carousel2.jpg",h1:"Another example headline",p:"Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",button:{caption:"Learn more",url:"#"}}, {image:"../images/carousel3.jpg",h1:"One more for good measure.",p:"Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",button:{caption:"Browse gallery",url:"#"}}]) // Marketing messaging and featurettes // ================================================== // Wrap the rest of the page in another container to center all the content. @@ -51,21 +51,21 @@ block body // Three columns of text below the carousel .row .col-lg-4 - img.img-circle(src='/images/marketing1.jpg', alt='Generic placeholder image', width='140', height='140') + img.img-circle(src='../images/marketing1.jpg', alt='Generic placeholder image', width='140', height='140') h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-lg-4 - img.img-circle(src='/images/marketing2.jpg', alt='Generic placeholder image', width='140', height='140') + img.img-circle(src='../images/marketing2.jpg', alt='Generic placeholder image', width='140', height='140') h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-lg-4 - img.img-circle(src='/images/marketing3.jpg', alt='Generic placeholder image', width='140', height='140') + img.img-circle(src='../images/marketing3.jpg', alt='Generic placeholder image', width='140', height='140') h2 Heading p | 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. @@ -81,7 +81,7 @@ block body p.lead | 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. .col-md-5 - img.featurette-image.img-responsive.center-block(src='/images/featurette1.jpg', alt='Generic placeholder image') + img.featurette-image.img-responsive.center-block(src='../images/featurette1.jpg', alt='Generic placeholder image') hr.featurette-divider .row.featurette .col-md-7.col-md-push-5 @@ -91,7 +91,7 @@ block body p.lead | 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. .col-md-5.col-md-pull-7 - img.featurette-image.img-responsive.center-block(src='/images/featurette2.jpg', alt='Generic placeholder image') + img.featurette-image.img-responsive.center-block(src='../images/featurette2.jpg', alt='Generic placeholder image') hr.featurette-divider .row.featurette .col-md-7 @@ -101,7 +101,7 @@ block body p.lead | 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. .col-md-5 - img.featurette-image.img-responsive.center-block(src='/images/featurette3.jpg', alt='Generic placeholder image') + img.featurette-image.img-responsive.center-block(src='../images/featurette3.jpg', alt='Generic placeholder image') hr.featurette-divider // /END THE FEATURETTES // FOOTER diff --git a/layouts/cover.jade b/layouts/cover.jade index be4bbac..da5f1da 100644 --- a/layouts/cover.jade +++ b/layouts/cover.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // !-- Custom styles for this template -- link(href="../css/cover.css", rel="stylesheet") diff --git a/layouts/dashboard.jade b/layouts/dashboard.jade index 44b5135..4082988 100644 --- a/layouts/dashboard.jade +++ b/layouts/dashboard.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/dashboard.css', rel='stylesheet') @@ -60,19 +60,19 @@ block body h1.page-header Dashboard .row.placeholders .col-xs-6.col-sm-3.placeholder - img.img-responsive(src='/images/dashboard_blue.jpg', alt='Generic placeholder thumbnail') + img.img-responsive(src='../images/dashboard_blue.jpg', alt='Generic placeholder thumbnail') h4 Label span.text-muted Something else .col-xs-6.col-sm-3.placeholder - img.img-responsive(src='/images/dashboard_green.jpg', alt='Generic placeholder thumbnail') + img.img-responsive(src='../images/dashboard_green.jpg', alt='Generic placeholder thumbnail') h4 Label span.text-muted Something else .col-xs-6.col-sm-3.placeholder - img.img-responsive(src='/images/dashboard_blue.jpg', alt='Generic placeholder thumbnail') + img.img-responsive(src='../images/dashboard_blue.jpg', alt='Generic placeholder thumbnail') h4 Label span.text-muted Something else .col-xs-6.col-sm-3.placeholder - img.img-responsive(src='/images/dashboard_green.jpg', alt='Generic placeholder thumbnail') + img.img-responsive(src='../images/dashboard_green.jpg', alt='Generic placeholder thumbnail') h4 Label span.text-muted Something else h2.sub-header Section title diff --git a/layouts/jumbotron-narrow.jade b/layouts/jumbotron-narrow.jade index 419cf2a..907c427 100644 --- a/layouts/jumbotron-narrow.jade +++ b/layouts/jumbotron-narrow.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/jumbotron-narrow.css', rel='stylesheet') diff --git a/layouts/jumbotron.jade b/layouts/jumbotron.jade index 32713e6..c250429 100644 --- a/layouts/jumbotron.jade +++ b/layouts/jumbotron.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/jumbotron.css', rel='stylesheet') diff --git a/layouts/justified-nav.jade b/layouts/justified-nav.jade index d0a9bcb..b7efb21 100644 --- a/layouts/justified-nav.jade +++ b/layouts/justified-nav.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/justified-nav.css', rel='stylesheet') diff --git a/layouts/navbar-fixed.jade b/layouts/navbar-fixed.jade new file mode 100644 index 0000000..31cc005 --- /dev/null +++ b/layouts/navbar-fixed.jade @@ -0,0 +1,30 @@ +extends ../_bootstrap +append styles + // Custom styles for this template + link(href='../css/navbar-fixed-top.css', rel='stylesheet') + +block body + // Fixed navbar + +navbar-fixed("Project name","navbar") + +nav_item("#","active") Home + +nav_item("#") About + +nav_item("#") Contact + +nav_item_dropdown("#")(label="Dropdown") + +nav_item("#") Action + +nav_item("#") Another action + +nav_item("#") Something else here + +nav_divider + +nav_item("#") Separated link + +nav_item("#") One more separated link + + + .container + // Main component for a primary marketing message or call to action + .jumbotron + h1 Navbar example + p + | This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device. + p To see the difference between static and fixed top navbars, just scroll. + p + a.btn.btn-lg.btn-primary(href='../../components/#navbar', role='button') View navbar docs » + diff --git a/layouts/navbar-static.jade b/layouts/navbar-static.jade new file mode 100644 index 0000000..8948218 --- /dev/null +++ b/layouts/navbar-static.jade @@ -0,0 +1,27 @@ +extends ../_bootstrap +append styles + // Custom styles for this template + link(href='../css/navbar-static-top.css', rel='stylesheet') +block body + // Static navbar + +navbar-static("Project name","navbar") + +nav_item("#","active") Home + +nav_item("#") About + +nav_item("#") Contact + +nav_item_dropdown("#")(label="Dropdown") + +nav_item("#") Action + +nav_item("#") Another action + +nav_item("#") Something else here + +nav_divider + +nav_item("#") Separated link + +nav_item("#") One more separated link + .container + // Main component for a primary marketing message or call to action + .jumbotron + h1 Navbar example + p + | This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device. + p To see the difference between static and fixed top navbars, just scroll. + p + a.btn.btn-lg.btn-primary(href='../../components/#navbar', role='button') View navbar docs » + diff --git a/layouts/navbar.jade b/layouts/navbar.jade index ed5175c..f03f686 100644 --- a/layouts/navbar.jade +++ b/layouts/navbar.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/navbar.css', rel='stylesheet') @@ -41,13 +41,13 @@ block body a(href='#') One more separated link ul.nav.navbar-nav.navbar-right li.active - a(href='./') + a(href='#') | Default span.sr-only (current) li - a(href='../navbar-static-top/') Static top + a(href='navbar-static.html') Static top li - a(href='../navbar-fixed-top/') Fixed top + a(href='navbar-fixed.html') Fixed top // Main component for a primary marketing message or call to action .jumbotron diff --git a/layouts/non-responsive.jade b/layouts/non-responsive.jade index c0b2cc7..e7ae729 100644 --- a/layouts/non-responsive.jade +++ b/layouts/non-responsive.jade @@ -1,4 +1,4 @@ -extends ../layout +extends ../_bootstrap append styles // Custom styles for this template link(href='/css/non-responsive.css', rel='stylesheet') diff --git a/layouts/offcanvas.jade b/layouts/offcanvas.jade index ec888d4..d44c0db 100644 --- a/layouts/offcanvas.jade +++ b/layouts/offcanvas.jade @@ -1,4 +1,4 @@ -extends ../layout +extends ../_bootstrap append styles // Custom styles for this template link(href='/css/offcanvas.css', rel='stylesheet') diff --git a/layouts/sign-in.jade b/layouts/sign-in.jade index 729d9a4..fe3e2b6 100644 --- a/layouts/sign-in.jade +++ b/layouts/sign-in.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/signin.css', rel='stylesheet') diff --git a/layouts/starter.jade b/layouts/starter.jade index 47efdf2..61b1e3a 100644 --- a/layouts/starter.jade +++ b/layouts/starter.jade @@ -1,25 +1,12 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/starter-template.css', rel='stylesheet') block body - nav.navbar.navbar-inverse.navbar-fixed-top - .container - .navbar-header - button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar') - span.sr-only Toggle navigation - span.icon-bar - span.icon-bar - span.icon-bar - a.navbar-brand(href='#') Project name - #navbar.collapse.navbar-collapse - ul.nav.navbar-nav - li.active - a(href='#') Home - li - a(href='#about') About - li - a(href='#contact') Contact + +navbar-fixed("Project name","navbar","inverse") + +nav_item("#","active") Home + +nav_item("#") About + +nav_item("#") Contact .container .starter-template h1 Bootstrap starter template diff --git a/layouts/sticky-footer-navbar.jade b/layouts/sticky-footer-navbar.jade index b382f36..c46984a 100644 --- a/layouts/sticky-footer-navbar.jade +++ b/layouts/sticky-footer-navbar.jade @@ -1,4 +1,4 @@ -extends ../layout +extends ../_bootstrap append styles // Custom styles for this template link(href='/css/sticky-footer-navbar.css', rel='stylesheet') diff --git a/layouts/sticky-footer.jade b/layouts/sticky-footer.jade index b48688b..e5e7197 100644 --- a/layouts/sticky-footer.jade +++ b/layouts/sticky-footer.jade @@ -1,4 +1,4 @@ -extends ../bootstrap +extends ../_bootstrap append styles // Custom styles for this template link(href='../css/sticky-footer.css', rel='stylesheet') diff --git a/layouts/theme-template.jade b/layouts/theme-template.jade new file mode 100644 index 0000000..bbdf8f8 --- /dev/null +++ b/layouts/theme-template.jade @@ -0,0 +1,351 @@ +extends ../_bootstrap +append styles + // Bootstrap theme + link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css") + // Custom styles for this template + link(href='../css/theme.css', rel='stylesheet') +block body + // Fixed navbar + nav.navbar.navbar-inverse.navbar-fixed-top + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Bootstrap theme + #navbar.navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + .container.theme-showcase(role='main') + // Main jumbotron for a primary marketing message or call to action + .jumbotron + h1 Theme example + p + | This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it. + .page-header + h1 Buttons + p + button.btn.btn-lg.btn-default(type='button') Default + button.btn.btn-lg.btn-primary(type='button') Primary + button.btn.btn-lg.btn-success(type='button') Success + button.btn.btn-lg.btn-info(type='button') Info + button.btn.btn-lg.btn-warning(type='button') Warning + button.btn.btn-lg.btn-danger(type='button') Danger + button.btn.btn-lg.btn-link(type='button') Link + p + button.btn.btn-default(type='button') Default + button.btn.btn-primary(type='button') Primary + button.btn.btn-success(type='button') Success + button.btn.btn-info(type='button') Info + button.btn.btn-warning(type='button') Warning + button.btn.btn-danger(type='button') Danger + button.btn.btn-link(type='button') Link + p + button.btn.btn-sm.btn-default(type='button') Default + button.btn.btn-sm.btn-primary(type='button') Primary + button.btn.btn-sm.btn-success(type='button') Success + button.btn.btn-sm.btn-info(type='button') Info + button.btn.btn-sm.btn-warning(type='button') Warning + button.btn.btn-sm.btn-danger(type='button') Danger + button.btn.btn-sm.btn-link(type='button') Link + p + button.btn.btn-xs.btn-default(type='button') Default + button.btn.btn-xs.btn-primary(type='button') Primary + button.btn.btn-xs.btn-success(type='button') Success + button.btn.btn-xs.btn-info(type='button') Info + button.btn.btn-xs.btn-warning(type='button') Warning + button.btn.btn-xs.btn-danger(type='button') Danger + button.btn.btn-xs.btn-link(type='button') Link + .page-header + h1 Tables + .row + .col-md-6 + +table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .col-md-6 + +table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .row + .col-md-6 + +table-bordered(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .col-md-6 + +table-condensed(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]]) + .page-header + h1 Thumbnails + img.img-thumbnail(src='../images/thumb.jpg', alt='A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera') + .page-header + h1 Labels + h1 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h2 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h3 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h4 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h5 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + h6 + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + p + span.label.label-default Default + span.label.label-primary Primary + span.label.label-success Success + span.label.label-info Info + span.label.label-warning Warning + span.label.label-danger Danger + .page-header + h1 Badges + p + a(href='#') + | Inbox + span.badge 42 + ul.nav.nav-pills(role='tablist') + li.active(role='presentation') + a(href='#') + | Home + span.badge 42 + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') + | Messages + span.badge 3 + .page-header + h1 Dropdown menus + .dropdown.theme-dropdown.clearfix + a#dropdownMenu1.sr-only.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1') + li.active(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Another action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Something else here + li.divider(role='presentation') + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Separated link + .page-header + h1 Navs + ul.nav.nav-tabs(role='tablist') + li.active(role='presentation') + a(href='#') Home + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') Messages + ul.nav.nav-pills(role='tablist') + li.active(role='presentation') + a(href='#') Home + li(role='presentation') + a(href='#') Profile + li(role='presentation') + a(href='#') Messages + .page-header + h1 Navbars + nav.navbar.navbar-default + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + nav.navbar.navbar-inverse + .container + .navbar-header + button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.sr-only Toggle navigation + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false') + | Dropdown + span.caret + ul.dropdown-menu(role='menu') + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + + .page-header + h1 Alerts + +alert-success("Well done! You successfully read this important alert message.") + +alert-info("Heads up! This alert needs your attention, but it's not super important.") + +alert-warning("Warning! Best check yo self, you're not looking too good.") + +alert-danger("Oh snap! Change a few things up and try submitting again.") + .page-header + h1 Progress bars + +progress-bar(60) + +progress-bar-info(20) + +progress-bar-warning(60) + +progress-bar-danger(80) + +progress-bar-striped(60) + .progress + .progress-bar.progress-bar-success(style='width: 35%') + span.sr-only 35% Complete (success) + .progress-bar.progress-bar-warning(style='width: 20%') + span.sr-only 20% Complete (warning) + .progress-bar.progress-bar-danger(style='width: 10%') + span.sr-only 10% Complete (danger) + .page-header + h1 List groups + .row + .col-sm-4 + ul.list-group + li.list-group-item Cras justo odio + li.list-group-item Dapibus ac facilisis in + li.list-group-item Morbi leo risus + li.list-group-item Porta ac consectetur ac + li.list-group-item Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + | Cras justo odio + a.list-group-item(href='#') Dapibus ac facilisis in + a.list-group-item(href='#') Morbi leo risus + a.list-group-item(href='#') Porta ac consectetur ac + a.list-group-item(href='#') Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + // /.col-sm-4 + .page-header + h1 Panels + .row + .col-sm-4 + +panel-default("Panel title") + | Panel content + +panel-primary("Panel title") + | Panel content + .col-sm-4 + +panel-success("Panel title") + | Panel content + +panel-info("Panel title") + | Panel content + .col-sm-4 + +panel-warning("Panel title") + | Panel content + +panel-danger("Panel title") + | Panel content + .page-header + h1 Wells + .well + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. + .page-header + h1 Carousel + +carousel("example-generic",[{image:'../images/carousel/slide1.jpg'},{image:'../images/carousel/slide2.jpg'},{image:'../images/carousel/slide3.jpg',}])