Repository: rajasegar/JADE-Bootstrap Branch: main Commit: beba954622a2 Files: 164 Total size: 154.2 KB Directory structure: gitextract_24p5s17e/ ├── .github/ │ └── FUNDING.yml ├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── README.md ├── _bootstrap.pug ├── bower.json ├── components/ │ ├── accordion.pug │ ├── alerts.pug │ ├── bootswatch.pug │ ├── buttons.pug │ ├── carousel.pug │ ├── dropdowns.pug │ ├── forms.pug │ ├── icons.pug │ ├── images.pug │ ├── labels.pug │ ├── list-groups.pug │ ├── modal.pug │ ├── navbar.pug │ ├── navs.pug │ ├── panels.pug │ ├── progress-bars.pug │ ├── tables.pug │ ├── tabs.pug │ ├── toggle.pug │ └── tooltips.pug ├── css/ │ ├── blog.css │ ├── carousel.css │ ├── codemirror.css │ ├── cover.css │ ├── dashboard.css │ ├── jumbotron-narrow.css │ ├── jumbotron.css │ ├── justified-nav.css │ ├── navbar-fixed-top.css │ ├── navbar-static-top.css │ ├── navbar.css │ ├── non-responsive.css │ ├── offcanvas.css │ ├── signin.css │ ├── starter-template.css │ ├── sticky-footer-navbar.css │ ├── sticky-footer.css │ └── theme.css ├── layouts/ │ ├── blog.pug │ ├── bootswatch.pug │ ├── carousel.pug │ ├── cover.pug │ ├── dashboard.pug │ ├── jumbotron-narrow.pug │ ├── jumbotron.pug │ ├── justified-nav.pug │ ├── navbar-fixed.pug │ ├── navbar-static.pug │ ├── navbar.pug │ ├── non-responsive.pug │ ├── offcanvas.pug │ ├── sign-in.pug │ ├── starter.pug │ ├── sticky-footer-navbar.pug │ ├── sticky-footer.pug │ └── theme-template.pug ├── package.json └── test/ ├── accordion.js ├── alert.js ├── bootswatch.js ├── buttons.js ├── carousel.js ├── dropdowns.js ├── fixtures/ │ ├── accordion/ │ │ ├── accordion-item-primary.pug │ │ └── accordion.pug │ ├── alerts/ │ │ ├── alert-danger.pug │ │ ├── alert-i-danger.pug │ │ ├── alert-i-info.pug │ │ ├── alert-i-success.pug │ │ ├── alert-i-warning.pug │ │ ├── alert-i.pug │ │ ├── alert-info.pug │ │ ├── alert-ix-danger.pug │ │ ├── alert-ix-info.pug │ │ ├── alert-ix-success.pug │ │ ├── alert-ix-warning.pug │ │ ├── alert-primary.pug │ │ ├── alert-success.pug │ │ ├── alert-warning.pug │ │ ├── alert-x-danger.pug │ │ ├── alert-x-info.pug │ │ ├── alert-x-success.pug │ │ ├── alert-x-warning.pug │ │ ├── alert-x.pug │ │ └── alert.pug │ ├── bootswatch.pug │ ├── buttons/ │ │ ├── btn-danger.pug │ │ ├── btn-info.pug │ │ ├── btn-lg-danger.pug │ │ ├── btn-lg-info.pug │ │ ├── btn-lg-primary.pug │ │ ├── btn-lg-success.pug │ │ ├── btn-lg-warning.pug │ │ ├── btn-primary.pug │ │ ├── btn-success.pug │ │ └── btn-warning.pug │ ├── forms/ │ │ ├── badge.pug │ │ ├── checkbox-inline.pug │ │ ├── checkbox.pug │ │ ├── icon-btn.pug │ │ ├── input-group.pug │ │ ├── input-simple.pug │ │ ├── input.pug │ │ ├── radio-inline.pug │ │ ├── radio.pug │ │ └── submit.pug │ ├── icons/ │ │ ├── icon-danger.pug │ │ ├── icon-info.pug │ │ ├── icon-primary.pug │ │ ├── icon-success.pug │ │ ├── icon-warning.pug │ │ └── icon.pug │ ├── images/ │ │ ├── img-circle.pug │ │ ├── img-responsive-center.pug │ │ ├── img-responsive.pug │ │ ├── img-rounded.pug │ │ └── img-thumbnail.pug │ ├── labels/ │ │ ├── label-danger.pug │ │ ├── label-default.pug │ │ ├── label-info.pug │ │ ├── label-primary.pug │ │ ├── label-success.pug │ │ ├── label-warning.pug │ │ └── label.pug │ ├── panels/ │ │ ├── default-panel.pug │ │ └── simple-panel.pug │ ├── progress-bar/ │ │ ├── progress-bar-danger.pug │ │ ├── progress-bar-info.pug │ │ ├── progress-bar-primary.pug │ │ ├── progress-bar-success.pug │ │ ├── progress-bar-warning.pug │ │ └── progress-bar.pug │ ├── toggles/ │ │ ├── danger-toggle.pug │ │ ├── default-toggle.pug │ │ ├── info-toggle.pug │ │ ├── primary-toggle.pug │ │ ├── success-toggle.pug │ │ └── warning-toggle.pug │ └── tooltips/ │ ├── bottom-tooltip.pug │ ├── left-tooltip.pug │ ├── right-tooltip.pug │ └── top-tooltip.pug ├── forms.js ├── icons.js ├── images.js ├── labels.js ├── list-groups.js ├── modal.js ├── navbar.js ├── navs.js ├── panels.js ├── progress-bar.js ├── tables.js ├── tabs.js ├── toggle.js └── tooltips.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: #['rajasegar'] patreon: rajasegar open_collective: # Replace with a single Open Collective username ko_fi: # Replace with a single Ko-fi username tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username otechie: # Replace with a single Otechie username custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: .gitignore ================================================ .DS_Store node_modules *.swp ================================================ FILE: .jshintrc ================================================ { "esnext": true } ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - "stable" ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2015 Rajasegar Chandiran Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # PUG-Bootstrap [Bootstrap](http://getbootstrap.com) framework written completely using mixins in [Pug](http://pugjs.org) [![Build Status](https://travis-ci.org/pug-bootstrap/JADE-Bootstrap.svg?branch=master)](https://travis-ci.org/pug-bootstrap/JADE-Bootstrap) [![npm](https://img.shields.io/npm/dm/jade-bootstrap.svg)](https://www.npmjs.com/package/jade-bootstrap) [![npm version](http://img.shields.io/npm/v/jade-bootstrap.svg?style=flat)](https://npmjs.org/package/jade-bootstrap "View this project on npm") [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT) ## Website [PUG-Bootstrap](http://pug-bootstrap.github.io/PUG-Bootstrap/) ## Documentation [Documentation](http://pug-bootstrap.github.io/PUG-Bootstrap/) ## Wiki Go to [wiki](http://pug-bootstrap.github.io/PUG-Bootstrap/) page ## Quickstart Several quick start options are available: * [Download the latest release] (https://github.com/pug-bootstrap/PUG-Bootstrap/archive/master.zip) * Clone the repo: `git clone https://github.com/pug-bootstrap/PUG-Bootstrap.git`. * Install with [Bower](http://bower.io/): `bower install jade-bootstrap`. * Install with [npm](https://www.npmjs.com/): `npm install jade-bootstrap`. The quickest way to get started for NodeJS applications is with this [boilerplate](https://github.com/pug-bootstrap/jadebootstrap-seed) ### What's included Within the download you'll find the following directories and files, logically grouping common mixins. You'll see something like this: ``` bootstrap.pug ├── components/ │ ├── accordion.pug │ ├── alerts.pug │ ├── carousel.pug │ ├── dropdowns.pug │ ├── forms.pug │ ├── icons.pug │ ├── labels.pug │ ├── list-groups.pug │ ├── modal.pug │ ├── navbar.pug │ ├── navs.pug │ ├── panels.pug │ ├── progress-bars.pug │ ├── tables.pug │ ├── tabs.pug │ ├── toggle.pug │ └── tooltips.pug └── layouts/ ├── blog.pug ├── carousel.pug ├── cover.pug ├── dashboard.pug ├── jumbotron.pug ├── jumbotron-narrow.pug ├── justified-nav.pug ├── navbar.pug ├── navbar_fixed.pug ├── navbar_static.pug ├── non-responsive.pug ├── offcanvas.pug ├── sign-in.pug ├── starter.pug ├── sticky-footer.pug ├── sticky-footer-navbar.pug └── theme-template.pug ``` ## Features * Bootstrap set as the default UI framework * Pug set as the default Template engine * Focus on high performance * Super-speed development using Pug mixins * Some widely used sample layouts to start with. ================================================ FILE: _bootstrap.pug ================================================ //- bootstrap.jade //- bootstrap mixins //- Including Icon mixins include components/icons //- Including Alert mixins include components/alerts //- Including Tooltip mixins include components/tooltips //- Including Accordion mixins include components/accordion //- Including Carousel mixins include components/carousel //- Including Table mixins include components/tables //- Including Navbar mixins include components/navbar //- Including Toggle Button mixins include components/toggle //- Including Nav mixins include components/navs //- Including Label mixins include components/labels //- Including Panel mixins include components/panels //- Including Tab mixins include components/tabs //- Including Dropdown mixins include components/dropdowns //- Including Form control mixins include components/forms //- Including Modal dialog mixins include components/modal //- Including List group mixins 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") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport",content="width=device-width, initial-scale=1") meta(name="description",content="") meta(name="author",content="") link(rel="icon",href="../../favicon.ico") title= title block styles link(rel="stylesheet",href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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") ================================================ FILE: bower.json ================================================ { "name": "jade-bootstrap", "version": "1.0.0", "homepage": "https://github.com/rajasegar/JADE-Bootstrap", "authors": [ "Rajasegar " ], "description": "Bootstrap framework written completely using mixins in JADE", "main": "bootstrap.jade", "keywords": [ "jade", "bootstrap", "frontend", "ui", "framework" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ] } ================================================ FILE: components/accordion.pug ================================================ //- accordion mixin accordion(id) .panel-group(id="accordion#{id}", role="tablist", aria-multiselectable="true") block //- accordion-item mixin accordion-item(type,title,parent,expanded) -var id = title.replace(/\s+/g,"") .panel(class="panel-#{type}") .panel-heading(role="tab", id="heading#{title}") h4.panel-title a(data-toggle="collapse", data-parent="#accordion#{parent}", href="#collapse#{id}", aria-expanded="true" ,aria-controls="collapseOne") = title unless expanded .panel-collapse.collapse(id="collapse#{id}", role="tabpanel", aria-labelledby="heading#{title}") .panel-body block else .panel-collapse.collapse.in(id="collapse#{id}", role="tabpanel", aria-labelledby="heading#{title}") .panel-body block //- accordion-item-default mixin accordion-item-default(title,parent,expanded) +accordion-item("default",title,parent,expanded) block //- accordion-item-primary mixin accordion-item-primary(title,parent,expanded) +accordion-item("primary",title,parent,expanded) block //- accordion-item-info mixin accordion-item-info(title,parent,expanded) +accordion-item("info",title,parent,expanded) block //- accordion-item-success mixin accordion-item-success(title,parent,expanded) +accordion-item("success",title,parent,expanded) block //- accordion-item-warning mixin accordion-item-warning(title,parent,expanded) +accordion-item("warning",title,parent,expanded) block //- accordion-item-danger mixin accordion-item-danger(title,parent,expanded) +accordion-item("danger",title,parent,expanded) block ================================================ FILE: components/alerts.pug ================================================ //- alerts.jade //- alert mixins include icons //- Generic Simple alert mixin alert(type,message) .alert(role="alert",class=`alert-${type}`) != message //- Generic alert with icon mixin alert-i(type,message,icon) .alert(role="alert",class=`alert-${type}`) +icon(icon) |   = message //- Generic alert with close button mixin alert-x(type,message) .alert.alert-dismissible(role="alert",class=`alert-${type}`) button.close(type="button",data-dismiss="alert" aria-label="Close") span(aria-hidden="true") × = message //- Generic alert with icon and close button mixin alert-ix(type,message,icon) .alert.alert-dismissible(role="alert",class=`alert-${type}`) +icon(icon) button.close(type="button",data-dismiss="alert" aria-label="Close") span(aria-hidden="true") × = message //------------------------------------------------------ //- ALERTS //------------------------------------------------------ //- Alert info mixin alert-info(message,icon) unless icon - var icon = "info-sign" +alert("info",message,icon) //- Alert success mixin alert-success(message,icon) unless icon - var icon = "ok-sign" +alert("success",message,icon) //- Alert warning mixin alert-warning(message,icon) unless icon - var icon = "exclamation-sign" +alert("warning",message,icon) //- Alert danger mixin alert-danger(message) unless icon - var icon = "remove-sign" +alert("danger",message,icon) //------------------------------------------------------ //- ALERTS WITH ICONS //------------------------------------------------------ //- Alert info mixin alert-i-info(message,icon) unless icon - var icon = "info-sign" +alert-i("info",message,icon) //- Alert success mixin alert-i-success(message,icon) unless icon - var icon = "ok-sign" +alert-i("success",message,icon) //- Alert warning mixin alert-i-warning(message,icon) unless icon - var icon = "exclamation-sign" +alert-i("warning",message,icon) //- Alert danger mixin alert-i-danger(message) unless icon - var icon = "remove-sign" +alert-i("danger",message,icon) //------------------------------------------------------ //- DISMISSIBLE ALERTS //------------------------------------------------------ //- Alert info mixin alert-x-info(message) +alert-x("info",message) //- Alert success mixin alert-x-success(message) +alert-x("success",message) //- Alert warning mixin alert-x-warning(message) +alert-x("warning",message) //- Alert danger mixin alert-x-danger(message) +alert-x("danger",message) //------------------------------------------------------ //- DISMISSIBLE ALERTS WITH ICONS //------------------------------------------------------ //- Alert info mixin alert-ix-info(message,icon) unless icon - var icon = "info-sign" +alert-ix("info",message,icon) //- Alert success mixin alert-ix-success(message,icon) unless icon - var icon = "ok-sign" +alert-ix("success",message,icon) //- Alert warning mixin alert-ix-warning(message,icon) unless icon - var icon = "exclamation-sign" +alert-ix("warning",message,icon) //- Alert danger mixin alert-ix-danger(message,icon) unless icon - var icon = "remove-sign" +alert-ix("danger",message,icon) ================================================ FILE: components/bootswatch.pug ================================================ //- 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") ================================================ FILE: components/buttons.pug ================================================ //- 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") ================================================ FILE: components/carousel.pug ================================================ //- carousel caption mixin carousel-caption(item) .carousel-caption unless !item.h1 h1 #{item.h1} unless !item.p p #{item.p} unless !item.button p a.btn.btn-lg.btn-primary(href="#{item.button.url}" role="button") #{item.button.caption} //- carousel mixin carousel(id,items) .carousel.slide(id=`carousel-${id}`,data-ride="carousel") //- Indicators ol.carousel-indicators each item,index in items if(index === 0) li.active(data-target=`#carousel-${id}`, data-slide-to="#{index}") else li(data-target=`#carousel-${id}`, data-slide-to="#{index}") //- Wrapper for slides .carousel-inner(role="listbox") each item,index in items if(index === 0) .item.active img(src="#{item.image}") +carousel-caption(item) else .item img(src="#{item.image}") +carousel-caption(item) //- Controls a.left.carousel-control(href=`#carousel-${id}`, role="button", data-slide="prev") +icon("chevron-left") span.sr-only Previous a.right.carousel-control(href=`#carousel-${id}`, role="button", data-slide="next") +icon("chevron-right") span.sr-only Next ================================================ FILE: components/dropdowns.pug ================================================ //- Dropdown mixin dropdown(caption,items) .dropdown button.btn.btn-default.dropdown-toggle(type="button",data-toggle="dropdown") = caption |   span.caret ul.dropdown-menu(role="menu",aria-labelledby="dropdownMenu1") - var args = Array.prototype.slice.call(arguments); for item in args[1] li(role="presentation") a(role="menuitem",tabindex="-1",href="#{item.url}")= item.text //- Dropup mixin dropup(caption,items) .dropup button.btn.btn-default.dropdown-toggle(type="button",data-toggle="dropdown") = caption |   span.caret ul.dropdown-menu(role="menu",aria-labelledby="dropupMenu1") - var args = Array.prototype.slice.call(arguments); for item in args[1] li(role="presentation") a(role="menuitem",tabindex="-1",href="#{item.url}")= item.text ================================================ FILE: components/forms.pug ================================================ include icons //- Input control with form-group wrapper mixin input(type,id,placeholder,label,name) .form-group label(for=id) #{label} input.form-control(type=type,id=id,placeholder=placeholder,name=name) //- Simple form input control without a form-group mixin input-simple(type,id,placeholder,name) input.form-control(type=type,id=id,placeholder=placeholder,name=name) //- Checkbox - Block style mixin checkbox(text,name,id) .checkbox label input(type="checkbox",name=name,id=id) = text //- Checkbox - Inline style mixin checkbox-inline(text,name,id) .checkbox-inline input(type="checkbox",name=name,id=id) = text //- Radio box mixin radio(text,name,id) .radio label input(type="radio",name=name,id=id) = text //- Radio box - Inline style mixin radio-inline(text,name,id) .radio-inline input(type="radio",name=name,id=id) = text //- Submit button mixin submit(text,name,id) .form-group button.btn.btn-default(type="submit",name=name,id=id)= text //- Input group - both prepend and append options available, and block is passed mixin input-group(prepend,append) .form-group .input-group unless !prepend .input-group-addon = prepend block unless !append .input-group-addon = append //- Icon button mixin icon-btn(icon) button.btn.btn-default(type="button",aria-label=icon) +icon(icon) //- Badges mixin badge(text) span.badge= text ================================================ FILE: components/icons.pug ================================================ //- Glyphicon mixin icon(name) span.glyphicon(class=`glyphicon-${name}`,aria-hidden="true") mixin icon-primary(name) span.glyphicon.text-primary(class=`glyphicon-${name}`,aria-hidden="true") mixin icon-info(name) span.glyphicon.text-info(class=`glyphicon-${name}`,aria-hidden="true") mixin icon-warning(name) span.glyphicon.text-warning(class=`glyphicon-${name}`,aria-hidden="true") mixin icon-danger(name) span.glyphicon.text-danger(class=`glyphicon-${name}`,aria-hidden="true") mixin icon-success(name) span.glyphicon.text-success(class=`glyphicon-${name}`,aria-hidden="true") ================================================ FILE: components/images.pug ================================================ //- 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) ================================================ FILE: components/labels.pug ================================================ //- Generic label mixin label(type,text) span.label(class=`label-${type}`)= text //- Info label mixin label-default(text) +label("default",text) //- Info label mixin label-info(text) +label("info",text) //- Primary label mixin label-primary(text) +label("primary",text) //- Success label mixin label-success(text) +label("success",text) //- Warning label mixin label-warning(text) +label("warning",text) //- Danger label mixin label-danger(text) +label("danger",text) ================================================ FILE: components/list-groups.pug ================================================ //- list-group mixins mixin list-group(items) ul.list-group each item, index in items li.list-group-item #{item} mixin list-group-links(items,active) .list-group each item, index in items if(index === active) a.list-group-item.active(href="#{item.url}") #{item.text} else a.list-group-item(href="#{item.url}") #{item.text} mixin list-group-item(url,active) if(active === "true") a.list-group-item.active(href="#{url}") block else a.list-group-item(href="#{url}") block mixin list-group-custom() .list-group block ================================================ FILE: components/modal.pug ================================================ //- modal mixin modal(title,id) .modal.fade(id="#{id}",tabindex="-1",role="dialog",aria-labelledby="#{id}Label" aria-hidden="true") .modal-dialog .modal-content .modal-header button.close(type="button",data-dismiss="modal") span(aria-hidden="true") × span.sr-only Close h4.modal-title(id="#{id}Label")= title .modal-body block .modal-footer button.btn.btn-default(type="button",data-dismiss="modal") Close ================================================ FILE: components/navbar.pug ================================================ //- Navbar mixins by Kezz Bracey //- https://github.com/tutsplus/baking-bootstrap-snippets-with-jade //- Author: http://tutsplus.com/authors/kezz-bracey mixin navbar(name, id, style, href) - var style = (typeof style === 'undefined') ? "default" : style - var href = (typeof style === 'undefined') ? "#" : href 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=href)= name .collapse.navbar-collapse( id=id ) ul.nav.navbar-nav block mixin navbar-logo(name, id, style, href, image) - var style = (typeof style === 'undefined') ? "default" : style - var href = (typeof href === 'undefined') ? "#" : href 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=href) img(alt=name, src=image) .collapse.navbar-collapse( id=id ) ul.nav.navbar-nav block mixin nav_item(href, active) 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 mixin nav_divider li.divider mixin nav_header 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='#')= 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='#')= name .collapse.navbar-collapse( id=id ) ul.nav.navbar-nav block //- End navbar mixins ================================================ FILE: components/navs.pug ================================================ //- Nav mixins mixin nav(type,items,active) ul.nav(class="#{type}") each item,index in items if(index === active) li.active(role="presentation") a(href="#{item.href}")= item.text else li(role="presentation") a(href="#{item.href}")= item.text mixin nav-tabs(items,active) +nav("nav-tabs",items,active) mixin nav-tabs-justified(items,active) +nav("nav-tabs nav-justified",items,active) mixin nav-pills(items,active) +nav("nav-pills",items,active) mixin nav-pills-justified(items,active) +nav("nav-pills nav-justified",items,active) mixin nav-stacked(items,active) +nav("nav-pills nav-stacked",items,active) ================================================ FILE: components/panels.pug ================================================ //- panel mixin panel(type,title) .panel(class=`panel-${type}`) if title !== undefined .panel-heading h3.panel-title= title .panel-body block else .panel-body block //- panel-default mixin panel-default(title) +panel("default",title) block //- panel-primary mixin panel-primary(title) +panel("primary",title) block //- panel-success mixin panel-success(title) +panel("success",title) block //- panel-info mixin panel-info(title) +panel("info",title) block //- panel-warning mixin panel-warning(title) +panel("warning",title) block //- panel-danger mixin panel-danger(title) +panel("danger",title) block ================================================ FILE: components/progress-bars.pug ================================================ //- progress-bar mixins mixin progress-bar(value,type) -var type = type || "" .progress .progress-bar(class=`progress-bar-${type}`,role='progressbar', aria-valuenow=value, aria-valuemin='0', aria-valuemax='100', style=`width: ${value}%;`) span.sr-only #{value}% Complete mixin progress-bar-success(value) +progress-bar(value,"success") mixin progress-bar-info(value) +progress-bar(value,"info") mixin progress-bar-warning(value) +progress-bar(value,"warning") mixin progress-bar-danger(value) +progress-bar(value,"danger") mixin progress-bar-primary(value) +progress-bar(value,"primary") mixin progress-bar-striped(value) +progress-bar(value,"striped") ================================================ FILE: components/tables.pug ================================================ //- table mixins mixin table(header,data,type) - var type = type || "" table.table(class="#{type}") thead tr each head, i in header th #{head} tbody each row,j in data tr each col,k in row td #{col} mixin table-striped(header,data) +table(header,data,"table-striped") mixin table-bordered(header,data) +table(header,data,"table-bordered") mixin table-hover(header,data) +table(header,data,"table-hover") mixin table-condensed(header,data) +table(header,data,"table-condensed") ================================================ FILE: components/tabs.pug ================================================ //- Tabs mixin tab-list(tabs,active) ul.nav.nav-tabs(role="tablist") each item,index in tabs if (index === active) li.active a(href="#tab#{item}",role="tab",data-toggle="tab")= item else li a(href="#tab#{item}",role="tab",data-toggle="tab")= item .tab-content block //- Tab pane mixin tab(id,active) if(active) .tab-pane.active(id="tab#{id}") block else .tab-pane(id="tab#{id}") block ================================================ FILE: components/toggle.pug ================================================ //- toggle mixin toggle(type,text) button.btn(class=`btn-${type}`,type="button",data-toggle="button",aria-pressed="false",autocomplete="off") = text //- toggle-primary mixin toggle-primary(text) +toggle("primary",text) //- toggle-default mixin toggle-default(text) +toggle("default",text) //- toggle-info mixin toggle-info(text) +toggle("info",text) //- toggle-success mixin toggle-success(text) +toggle("success",text) //- toggle-warning mixin toggle-warning(text) +toggle("warning",text) //- toggle-danger mixin toggle-danger(text) +toggle("danger",text) //- checkbox toggle group mixin checkbox-toggle(type,items,active) .btn-group(data-toggle="buttons") each item,index in items if(index === active) label.btn.active(class="btn-#{type}") input(type="checkbox",autocomplete="off",checked) | #{item.caption} else label.btn(class="btn-#{type}") input(type="checkbox",autocomplete="off") | #{item.caption} //- checkbox-toggle-primary mixin checkbox-toggle-primary(items,active) +checkbox-toggle("primary",items,active) //- checkbox-toggle-info mixin checkbox-toggle-info(items,active) +checkbox-toggle("info",items,active) //- checkbox-toggle-success mixin checkbox-toggle-success(items,active) +checkbox-toggle("success",items,active) //- checkbox-toggle-warning mixin checkbox-toggle-warning(items,active) +checkbox-toggle("warning",items,active) //- checkbox-toggle-danger mixin checkbox-toggle-danger(items,active) +checkbox-toggle("danger",items,active) //- checkbox-toggle-default mixin checkbox-toggle-default(items,active) +checkbox-toggle("default",items,active) //- radio toggle group mixin radio-toggle(type,name,items,active) .btn-group(data-toggle="buttons") each item,index in items if(index === active) label.btn.active(class="btn-#{type}") input(type="radio",name="#{name}",autocomplete="off",checked) | #{item.caption} else label.btn(class="btn-#{type}") input(type="radio",name="#{name}",autocomplete="off") | #{item.caption} //- radio-toggle-primary mixin radio-toggle-primary(name,items,active) +radio-toggle("primary",name,items,active) //- radio-toggle-info mixin radio-toggle-info(name,items,active) +radio-toggle("info",name,items,active) //- radio-toggle-success mixin radio-toggle-success(name,items,active) +radio-toggle("success",name,items,active) //- radio-toggle-warning mixin radio-toggle-warning(name,items,active) +radio-toggle("warning",name,items,active) //- radio-toggle-danger mixin radio-toggle-danger(name,items,active) +radio-toggle("danger",name,items,active) //- radio-toggle-default mixin radio-toggle-default(name,items,active) +radio-toggle("default",name,items,active) ================================================ FILE: components/tooltips.pug ================================================ //- tooltip mixin tooltip(text,tooltip,placement) a(href="#",data-toggle="tooltip",data-placement=placement,title=tooltip)= text //- tooltip-left mixin tooltip-left(text,tooltip) +tooltip(text,tooltip,"left") //- tooltip-right mixin tooltip-right(text,tooltip) +tooltip(text,tooltip,"right") //- tooltip-top mixin tooltip-top(text,tooltip) +tooltip(text,tooltip,"top") //- tooltip-bottom mixin tooltip-bottom(text,tooltip) +tooltip(text,tooltip,"bottom") ================================================ FILE: css/blog.css ================================================ /* * Globals */ body { font-family: Georgia, "Times New Roman", Times, serif; color: #555; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #333; } /* * Override Bootstrap's default container. */ @media (min-width: 1200px) { .container { width: 970px; } } /* * Masthead for nav */ .blog-masthead { background-color: #428bca; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); } /* Nav links */ .blog-nav-item { position: relative; display: inline-block; padding: 10px; font-weight: 500; color: #cdddeb; } .blog-nav-item:hover, .blog-nav-item:focus { color: #fff; text-decoration: none; } /* Active state gets a caret at the bottom */ .blog-nav .active { color: #fff; } .blog-nav .active:after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent; } /* * Blog name and description */ .blog-header { padding-top: 20px; padding-bottom: 20px; } .blog-title { margin-top: 30px; margin-bottom: 0; font-size: 60px; font-weight: normal; } .blog-description { font-size: 20px; color: #999; } /* * Main column and sidebar layout */ .blog-main { font-size: 18px; line-height: 1.5; } /* Sidebar modules for boxing content */ .sidebar-module { padding: 15px; margin: 0 -15px 15px; } .sidebar-module-inset { padding: 15px; background-color: #f5f5f5; border-radius: 4px; } .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: 60px; text-align: left; } .pager > li > a { width: 140px; padding: 10px 20px; text-align: center; border-radius: 30px; } /* * Blog posts */ .blog-post { margin-bottom: 60px; } .blog-post-title { margin-bottom: 5px; font-size: 40px; } .blog-post-meta { margin-bottom: 20px; color: #999; } /* * Footer */ .blog-footer { padding: 40px 0; color: #999; text-align: center; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; } .blog-footer p:last-child { margin-bottom: 0; } ================================================ FILE: css/carousel.css ================================================ /* 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 { position: absolute; top: 0; right: 0; left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar .container { width: auto; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { height: 500px; margin-bottom: 60px; } /* 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; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap
more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } /* 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; } .featurette-heading { font-size: 50px; } } @media (min-width: 992px) { .featurette-heading { margin-top: 120px; } } ================================================ FILE: css/codemirror.css ================================================ /* BASICS */ .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; color: black; } /* PADDING */ .CodeMirror-lines { padding: 4px 0; /* Vertical padding around content */ } .CodeMirror pre { padding: 0 4px; /* Horizontal padding of content */ } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ } /* GUTTER */ .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; } .CodeMirror-linenumbers {} .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; } .CodeMirror-guttermarker { color: black; } .CodeMirror-guttermarker-subtle { color: #999; } /* CURSOR */ .CodeMirror div.CodeMirror-cursor { border-left: 1px solid black; } /* Shown when moving in bi-directional text */ .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .CodeMirror.cm-fat-cursor div.CodeMirror-cursor { width: auto; border: 0; background: #7e7; } .CodeMirror.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; } @-moz-keyframes blink { 0% { background: #7e7; } 50% { background: none; } 100% { background: #7e7; } } @-webkit-keyframes blink { 0% { background: #7e7; } 50% { background: none; } 100% { background: #7e7; } } @keyframes blink { 0% { background: #7e7; } 50% { background: none; } 100% { background: #7e7; } } /* Can style cursor different in overwrite (non-insert) mode */ div.CodeMirror-overwrite div.CodeMirror-cursor {} .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-ruler { border-left: 1px solid #ccc; position: absolute; } /* DEFAULT THEME */ .cm-s-default .cm-keyword {color: #708;} .cm-s-default .cm-atom {color: #219;} .cm-s-default .cm-number {color: #164;} .cm-s-default .cm-def {color: #00f;} .cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {} .cm-s-default .cm-variable-2 {color: #05a;} .cm-s-default .cm-variable-3 {color: #085;} .cm-s-default .cm-comment {color: #a50;} .cm-s-default .cm-string {color: #a11;} .cm-s-default .cm-string-2 {color: #f50;} .cm-s-default .cm-meta {color: #555;} .cm-s-default .cm-qualifier {color: #555;} .cm-s-default .cm-builtin {color: #30a;} .cm-s-default .cm-bracket {color: #997;} .cm-s-default .cm-tag {color: #170;} .cm-s-default .cm-attribute {color: #00c;} .cm-s-default .cm-header {color: blue;} .cm-s-default .cm-quote {color: #090;} .cm-s-default .cm-hr {color: #999;} .cm-s-default .cm-link {color: #00c;} .cm-negative {color: #d44;} .cm-positive {color: #292;} .cm-header, .cm-strong {font-weight: bold;} .cm-em {font-style: italic;} .cm-link {text-decoration: underline;} .cm-strikethrough {text-decoration: line-through;} .cm-s-default .cm-error {color: #f00;} .cm-invalidchar {color: #f00;} .CodeMirror-composing { border-bottom: 2px solid; } /* Default styles for common addons */ div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } .CodeMirror-activeline-background {background: #e8f2ff;} /* STOP */ /* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */ .CodeMirror { position: relative; overflow: hidden; background: white; } .CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */ /* 30px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; } .CodeMirror-sizer { position: relative; border-right: 30px solid transparent; } /* The fake, visible scrollbars. Used to force redraw during scrolling before actuall scrolling happens, thus preventing shaking and flickering artifacts. */ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; } .CodeMirror-gutter-filler { left: 0; bottom: 0; } .CodeMirror-gutters { position: absolute; left: 0; top: 0; z-index: 3; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; margin-bottom: -30px; /* Hack to make IE7 behave */ *zoom:1; *display:inline; } .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; height: 100%; } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; } .CodeMirror-gutter-wrapper { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ } .CodeMirror pre { /* Reset some styles that the rest of the page might have set */ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; } .CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; } .CodeMirror-widget {} .CodeMirror-code { outline: none; } /* Force content-box sizing for the elements where we expect it */ .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { -moz-box-sizing: content-box; box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-measure pre { position: static; } .CodeMirror div.CodeMirror-cursor { position: absolute; border-right: none; width: 0; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror ::selection { background: #d7d4f0; } .CodeMirror ::-moz-selection { background: #d7d4f0; } .cm-searching { background: #ffa; background: rgba(255, 255, 0, .4); } /* IE7 hack to prevent it from returning funny offsetTops on the spans */ .CodeMirror span { *vertical-align: text-bottom; } /* Used to force a border model for a node */ .cm-force-border { padding-right: .1px; } @media print { /* Hide the cursor when printing */ .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } /* See issue #2901 */ .cm-tab-wrap-hack:after { content: ''; } /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } ================================================ FILE: css/cover.css ================================================ /* * Globals */ /* Links */ a, a:focus, a:hover { color: #fff; } /* Custom default button */ .btn-default, .btn-default:hover, .btn-default:focus { color: #333; text-shadow: none; /* Prevent inheritence from `body` */ background-color: #fff; border: 1px solid #fff; } /* * Base structure */ html, body { height: 100%; background-color: #333; } body { color: #fff; text-align: center; text-shadow: 0 1px 3px 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 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px 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: 30px; } /* * Header */ .masthead-brand { margin-top: 10px; margin-bottom: 10px; } .masthead-nav > li { display: inline-block; } .masthead-nav > li + li { margin-left: 20px; } .masthead-nav > li > a { padding-right: 0; padding-left: 0; font-size: 16px; font-weight: bold; color: #fff; /* IE8 proofing */ color: rgba(255,255,255,.75); border-bottom: 2px solid transparent; } .masthead-nav > li > a:hover, .masthead-nav > li > a:focus { background-color: transparent; border-bottom-color: #a9a9a9; border-bottom-color: rgba(255,255,255,.25); } .masthead-nav > .active > a, .masthead-nav > .active > a:hover, .masthead-nav > .active > a:focus { color: #fff; border-bottom-color: #fff; } @media (min-width: 768px) { .masthead-brand { float: left; } .masthead-nav { float: right; } } /* * Cover */ .cover { padding: 0 20px; } .cover .btn-lg { padding: 10px 20px; font-weight: bold; } /* * Footer */ .mastfoot { color: #999; /* IE8 proofing */ color: rgba(255,255,255,.5); } /* * Affix and center */ @media (min-width: 768px) { /* 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: 992px) { .masthead, .mastfoot, .cover-container { width: 700px; } } ================================================ FILE: css/dashboard.css ================================================ /* * 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%; } ================================================ FILE: css/jumbotron-narrow.css ================================================ /* 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-right: 15px; padding-left: 15px; } /* Custom page header */ .header { padding-bottom: 20px; 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; } /* Custom page footer */ .footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5; } /* Customize container */ @media (min-width: 768px) { .container { max-width: 730px; } } .container-narrow > hr { margin: 30px 0; } /* Main marketing message and sign up button */ .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } .jumbotron .btn { padding: 14px 24px; font-size: 21px; } /* 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-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; } } ================================================ FILE: css/jumbotron.css ================================================ /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; padding-bottom: 20px; } ================================================ FILE: css/justified-nav.css ================================================ 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(top), color-stop(0%, #f5f5f5), to(#e5e5e5)); background-image: linear-gradient(top, #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; } } ================================================ FILE: css/navbar-fixed-top.css ================================================ body { min-height: 2000px; padding-top: 70px; } ================================================ FILE: css/navbar-static-top.css ================================================ body { min-height: 2000px; } .navbar-static-top { margin-bottom: 19px; } ================================================ FILE: css/navbar.css ================================================ body { padding-top: 20px; padding-bottom: 20px; } .navbar { margin-bottom: 20px; } ================================================ FILE: css/non-responsive.css ================================================ /* Template-specific stuff * * Customizations just for the template; these are not necessary for anything * with disabling the responsiveness. */ /* Account for fixed navbar */ body { padding-top: 70px; padding-bottom: 30px; } body, .navbar-fixed-top, .navbar-fixed-bottom { min-width: 970px; } /* Don't let the lead text change font-size. */ .lead { font-size: 16px; } /* Finesse the page header spacing */ .page-header { margin-bottom: 30px; } .page-header .lead { margin-bottom: 10px; } /* Non-responsive overrides * * Utilize the following CSS to disable the responsive-ness of the container, * grid system, and navbar. */ /* Reset the container */ .container { width: 970px; max-width: none !important; } /* Demonstrate the grids */ .col-xs-4 { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } .container .navbar-header, .container .navbar-collapse { margin-right: 0; margin-left: 0; } /* Always float the navbar header */ .navbar-header { float: left; } /* Undo the collapsing navbar */ .navbar-collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; visibility: visible !important; } .navbar-toggle { display: none; } .navbar-collapse { border-top: 0; } .navbar-brand { margin-left: -15px; } /* Always apply the floated nav */ .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding: 15px; } /* Redeclare since we override the float above */ .navbar-nav.navbar-right { float: right; } /* Undo custom dropdowns */ .navbar .navbar-nav .open .dropdown-menu { position: absolute; float: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-width: 0 1px 1px; border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #333; } .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus, .navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff !important; background-color: #428bca !important; } .navbar .navbar-nav .open .dropdown-menu > .disabled > a, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #999 !important; background-color: transparent !important; } /* Undo form expansion */ .navbar-form { float: left; width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } /* Copy-pasted from forms.less since we mixin the .form-inline styles. */ .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; } .navbar-form .form-control-static { display: inline-block; } .navbar-form .input-group { display: inline-table; vertical-align: middle; } .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; } .navbar-form .input-group > .form-control { width: 100%; } .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; } .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; } .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; } .navbar-form .has-feedback .form-control-feedback { top: 0; } ================================================ FILE: css/offcanvas.css ================================================ /* * Style tweaks * -------------------------------------------------- */ html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ } body { padding-top: 70px; } footer { padding: 30px 0; } /* * Off Canvas * -------------------------------------------------- */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } } ================================================ FILE: css/signin.css ================================================ 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; -moz-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; } ================================================ FILE: css/starter-template.css ================================================ body { padding-top: 50px; } .starter-template { padding: 40px 15px; text-align: center; } ================================================ FILE: css/sticky-footer-navbar.css ================================================ /* Sticky footer styles -------------------------------------------------- */ 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; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ body > .container { padding: 60px 15px 0; } .container .text-muted { margin: 20px 0; } .footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; } ================================================ FILE: css/sticky-footer.css ================================================ /* Sticky footer styles -------------------------------------------------- */ 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; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .text-muted { margin: 20px 0; } ================================================ FILE: css/theme.css ================================================ body { padding-top: 70px; padding-bottom: 30px; } .theme-dropdown .dropdown-menu { position: static; display: block; margin-bottom: 20px; } .theme-showcase > p > .btn { margin: 5px 0; } .theme-showcase .navbar .container { width: auto; } ================================================ FILE: layouts/blog.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/blog.css', rel='stylesheet') block body .blog-masthead .container nav.blog-nav a.blog-nav-item.active(href='#') Home a.blog-nav-item(href='#') New features a.blog-nav-item(href='#') Press a.blog-nav-item(href='#') New hires a.blog-nav-item(href='#') About .container .blog-header h1.blog-title The Bootstrap Blog p.lead.blog-description The official example template of creating a blog with Bootstrap. .row .col-sm-8.blog-main .blog-post h2.blog-post-title Sample blog post p.blog-post-meta | January 1, 2014 by a(href='#') Mark p | 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. hr p | Cum sociis natoque penatibus et magnis a(href='#') 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. blockquote p | Curabitur blandit tempus porttitor. strong Nullam quis risus eget urna mollis | ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. p | Etiam porta em sem malesuada magna | mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. h2 Heading p | 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. h3 Sub-heading p | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. pre. p | 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. h3 Sub-heading p | 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. ul li Praesent commodo cursus magna, vel scelerisque nisl consectetur et. li Donec id elit non mi porta gravida at eget metus. li Nulla vitae elit libero, a pharetra augue. p | Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. ol li Vestibulum id ligula porta felis euismod semper. li | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. li Maecenas sed diam eget risus varius blandit sit amet non magna. p | Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. .blog-post h2.blog-post-title Another blog post p.blog-post-meta | December 23, 2013 by a(href='#') Jacob p | Cum sociis natoque penatibus et magnis a(href='#') 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. blockquote p | Curabitur blandit tempus porttitor. strong Nullam quis risus eget urna mollis | ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. p | Etiam porta em sem malesuada magna | mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. p | 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. .blog-post h2.blog-post-title New feature p.blog-post-meta | December 14, 2013 by a(href='#') Chris p | 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. ul li Praesent commodo cursus magna, vel scelerisque nisl consectetur et. li Donec id elit non mi porta gravida at eget metus. li Nulla vitae elit libero, a pharetra augue. p | Etiam porta em sem malesuada magna | mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. p | Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. nav ul.pager li a(href='#') Previous li a(href='#') Next .col-sm-3.col-sm-offset-1.blog-sidebar .sidebar-module.sidebar-module-inset h4 About p | Etiam porta em sem malesuada magna | mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. .sidebar-module h4 Archives ol.list-unstyled li a(href='#') March 2014 li a(href='#') February 2014 li a(href='#') January 2014 li a(href='#') December 2013 li a(href='#') November 2013 li a(href='#') October 2013 li a(href='#') September 2013 li a(href='#') August 2013 li a(href='#') July 2013 li a(href='#') June 2013 li a(href='#') May 2013 li a(href='#') April 2013 .sidebar-module h4 Elsewhere ol.list-unstyled li a(href='#') GitHub li a(href='#') Twitter li a(href='#') Facebook footer.blog-footer p | Blog template built for a(href='http://getbootstrap.com') Bootstrap | by a(href='https://twitter.com/mdo') @mdo | . p a(href='#') Back to top block content ================================================ FILE: layouts/bootswatch.pug ================================================ 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',}]) ================================================ FILE: layouts/carousel.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href="../css/carousel.css", rel="stylesheet") block body .navbar-wrapper .container nav.navbar.navbar-inverse.navbar-static-top .container .navbar-header button(type="button" ,class="navbar-toggle collapsed", 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(class="navbar-brand", href="#") Project name #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 // 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:"#"}}]) // Marketing messaging and featurettes // ================================================== // Wrap the rest of the page in another container to center all the content. .container.marketing // 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') 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') 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') 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. p a.btn.btn-default(href='#', role='button') View details » // START THE FEATURETTES hr.featurette-divider .row.featurette .col-md-7 h2.featurette-heading | First featurette heading. span.text-muted It'll blow your mind. 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') hr.featurette-divider .row.featurette .col-md-7.col-md-push-5 h2.featurette-heading | Oh yeah, it's that good. span.text-muted See for yourself. 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') hr.featurette-divider .row.featurette .col-md-7 h2.featurette-heading | And lastly, this one. span.text-muted Checkmate. 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') hr.featurette-divider // /END THE FEATURETTES // FOOTER footer p.pull-right a(href='#') Back to top p | © 2014 Company, Inc. · a(href='#') Privacy | · a(href='#') Terms ================================================ FILE: layouts/cover.pug ================================================ extends ../_bootstrap append styles // !-- Custom styles for this template -- link(href="../css/cover.css", rel="stylesheet") block body .site-wrapper .site-wrapper-inner .cover-container .masthead.clearfix .inner h3.masthead-brand Cover nav ul.nav.masthead-nav li.active a(href="#") Home li a(href="#") Features li a(href="#") Contact .inner.cover h1.cover-heading Cover your page. p.lead 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. p.lead a(href="#", class="btn btn-lg btn-default") Learn more .mastfoot .inner p Cover template for Bootstrap , by @mdo. ================================================ FILE: layouts/dashboard.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/dashboard.css', rel='stylesheet') block body nav.navbar.navbar-inverse.navbar-fixed-top .container-fluid .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.navbar-collapse.collapse ul.nav.navbar-nav.navbar-right li a(href='#') Dashboard li a(href='#') Settings li a(href='#') Profile li a(href='#') Help form.navbar-form.navbar-right input.form-control(type='text', placeholder='Search...') .container-fluid .row .col-sm-3.col-md-2.sidebar ul.nav.nav-sidebar li.active a(href='#') | Overview span.sr-only (current) li a(href='#') Reports li a(href='#') Analytics li a(href='#') Export ul.nav.nav-sidebar li a(href='') Nav item li a(href='') Nav item again li a(href='') One more nav li a(href='') Another nav item li a(href='') More navigation ul.nav.nav-sidebar li a(href='') Nav item again li a(href='') One more nav li a(href='') Another nav item .col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main 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') 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') 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') 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') h4 Label span.text-muted Something else h2.sub-header Section title .table-responsive table.table.table-striped thead tr th # th Header th Header th Header th Header tbody tr td 1,001 td Lorem td ipsum td dolor td sit tr td 1,002 td amet td consectetur td adipiscing td elit tr td 1,003 td Integer td nec td odio td Praesent tr td 1,003 td libero td Sed td cursus td ante tr td 1,004 td dapibus td diam td Sed td nisi tr td 1,005 td Nulla td quis td sem td at tr td 1,006 td nibh td elementum td imperdiet td Duis tr td 1,007 td sagittis td ipsum td Praesent td mauris tr td 1,008 td Fusce td nec td tellus td sed tr td 1,009 td augue td semper td porta td Mauris tr td 1,010 td massa td Vestibulum td lacinia td arcu tr td 1,011 td eget td nulla td Class td aptent tr td 1,012 td taciti td sociosqu td ad td litora tr td 1,013 td torquent td per td conubia td nostra tr td 1,014 td per td inceptos td himenaeos td Curabitur tr td 1,015 td sodales td ligula td in td libero ================================================ FILE: layouts/jumbotron-narrow.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/jumbotron-narrow.css', rel='stylesheet') block body .container .header.clearfix nav ul.nav.nav-pills.pull-right li.active(role='presentation') a(href='#') Home li(role='presentation') a(href='#') About li(role='presentation') a(href='#') Contact h3.text-muted Project name .jumbotron h1 Jumbotron heading p.lead | 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. p a.btn.btn-lg.btn-success(href='#', role='button') Sign up today .row.marketing .col-lg-6 h4 Subheading p | Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. h4 Subheading p | Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. h4 Subheading p Maecenas sed diam eget risus varius blandit sit amet non magna. .col-lg-6 h4 Subheading p | Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. h4 Subheading p | Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. h4 Subheading p Maecenas sed diam eget risus varius blandit sit amet non magna. footer.footer p © Company 2014 ================================================ FILE: layouts/jumbotron.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/jumbotron.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.navbar-collapse.collapse form.navbar-form.navbar-right .form-group input.form-control(type='text', placeholder='Email') .form-group input.form-control(type='password', placeholder='Password') button.btn.btn-success(type='submit') Sign in .jumbotron .container h1 Hello, world! p | 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. p a.btn.btn-primary.btn-lg(href='#', role='button') Learn more » .container .row .col-md-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-md-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-md-4 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. p a.btn.btn-default(href='#', role='button') View details » hr footer p © Company 2014 block content ================================================ FILE: layouts/justified-nav.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/justified-nav.css', rel='stylesheet') block body .container // The justified navigation menu is meant for single line per list item. Multiple lines will require custom code not provided by Bootstrap. .masthead h3.text-muted Project name nav ul.nav.nav-justified li.active a(href='#') Home li a(href='#') Projects li a(href='#') Services li a(href='#') Downloads li a(href='#') About li a(href='#') Contact // Jumbotron .jumbotron h1 Marketing stuff! p.lead | 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. p a.btn.btn-lg.btn-success(href='#', role='button') Get started today // Example row of columns .row .col-lg-4 h2 Safari bug warning! p.text-danger | As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. p | 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. p a.btn.btn-primary(href='#', role='button') View details » .col-lg-4 h2 Heading p | 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. p a.btn.btn-primary(href='#', role='button') View details » .col-lg-4 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. p a.btn.btn-primary(href='#', role='button') View details » // Site footer footer.footer p © Company 2014 ================================================ FILE: layouts/navbar-fixed.pug ================================================ 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 » ================================================ FILE: layouts/navbar-static.pug ================================================ 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 » ================================================ FILE: layouts/navbar.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/navbar.css', rel='stylesheet') block body .container // Static navbar nav.navbar.navbar-default .container-fluid .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.navbar-collapse.collapse ul.nav.navbar-nav li.active a(href='#') Home li a(href='#') About li a(href='#') 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 ul.nav.navbar-nav.navbar-right li.active a(href='#') | Default span.sr-only (current) li a(href='navbar-static.html') Static top li a(href='navbar-fixed.html') Fixed top // 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 navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device. p a.btn.btn-lg.btn-primary(href='../../components/#navbar', role='button') View navbar docs » ================================================ FILE: layouts/non-responsive.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='/css/non-responsive.css', rel='stylesheet') block body // Fixed navbar nav.navbar.navbar-default.navbar-fixed-top .container .navbar-header // The mobile navbar-toggle button can be safely removed since you do not need it in a non-responsive implementation a.navbar-brand(href='#') Project name // Note that the .navbar-collapse and .collapse classes have been removed from the #navbar #navbar 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 form.navbar-form.navbar-left(role='search') .form-group input.form-control(type='text', placeholder='Search') button.btn.btn-default(type='submit') Submit ul.nav.navbar-nav.navbar-right li a(href='#') Link li a(href='#') Link li a(href='#') Link .container .page-header h1 Non-responsive Bootstrap p.lead | Disable the responsiveness of Bootstrap by fixing the width of the container and using the first grid system tier. a(href='http://getbootstrap.com/getting-started/#disable-responsive') Read the documentation | for more information. h3 What changes p | Note the lack of the code | , which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and changed the navbar to prevent collapsing, and are basically good to go. h3 Regarding navbars p | As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar. h3 Browsers, scrolling, and fixed elements p | Non-responsive layouts highlight a key drawback to fixed elements. strong.text-danger | Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content. | In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content. p | There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element. h3 Non-responsive grid system .row .col-xs-4 One third .col-xs-4 One third .col-xs-4 One third ================================================ FILE: layouts/offcanvas.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='/css/offcanvas.css', rel='stylesheet') block body nav.navbar.navbar-fixed-top.navbar-inverse .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 .container .row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 p.pull-right.visible-xs button.btn.btn-primary.btn-xs(type='button', data-toggle='offcanvas') Toggle nav .jumbotron h1 Hello, world! p | 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. .row .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » // /.col-xs-6.col-lg-4 .col-xs-6.col-lg-4 h2 Heading p | 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. p a.btn.btn-default(href='#', role='button') View details » #sidebar.col-xs-6.col-sm-3.sidebar-offcanvas .list-group a.list-group-item.active(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link a.list-group-item(href='#') Link block content hr footer p © Company 2014 append scripts script(src='/js/offcanvas.js') ================================================ FILE: layouts/sign-in.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/signin.css', rel='stylesheet') block body .container form.form-signin h2.form-signin-heading Please sign in label.sr-only(for='inputEmail') Email address input#inputEmail.form-control(type='email', placeholder='Email address', required='', autofocus='') label.sr-only(for='inputPassword') Password input#inputPassword.form-control(type='password', placeholder='Password', required='') .checkbox label input(type='checkbox', value='remember-me') | Remember me button.btn.btn-lg.btn-primary.btn-block(type='submit') Sign in ================================================ FILE: layouts/starter.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/starter-template.css', rel='stylesheet') block body +navbar-fixed("Project name","navbar","inverse") +nav_item("#","active") Home +nav_item("#") About +nav_item("#") Contact .container .starter-template h1 Bootstrap starter template p.lead | Use this document as a way to quickly start any new project. br | All you get is this text and a mostly barebones HTML document. ================================================ FILE: layouts/sticky-footer-navbar.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='/css/sticky-footer-navbar.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='#') 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 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 .page-header h1 Sticky footer with fixed navbar p.lead | 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 code padding-top: 60px; | on the code body > .container | . p | Back to a(href='../sticky-footer') the default sticky footer | minus the navbar. footer.footer .container p.text-muted Place sticky footer content here. ================================================ FILE: layouts/sticky-footer.pug ================================================ extends ../_bootstrap append styles // Custom styles for this template link(href='../css/sticky-footer.css', rel='stylesheet') block body // Begin page content .container .page-header h1 Sticky footer p.lead | Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. p | Use a(href='../sticky-footer-navbar') the sticky footer with a fixed navbar | if need be, too. footer.footer .container p.text-muted Place sticky footer content here. ================================================ FILE: layouts/theme-template.pug ================================================ 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',}]) ================================================ FILE: package.json ================================================ { "name": "jade-bootstrap", "version": "1.0.15", "description": "Bootstrap framework written completely using mixins in JADE", "main": "bootstrap.jade", "scripts": { "test": "mocha -R spec" }, "repository": { "type": "git", "url": "https://github.com/rajasegar/JADE-Bootstrap.git" }, "keywords": [ "jade", "bootstrap", "twitter", "bootstrap", "frontend", "ui", "framework", "jade", "mixins" ], "author": "Rajasegar Chandiran", "license": "Apache", "bugs": { "url": "https://github.com/rajasegar/JADE-Bootstrap/issues" }, "homepage": "https://github.com/rajasegar/JADE-Bootstrap", "devDependencies": { "pug": "^2.0.0-beta11", "jasmine": "^2.4.1", "mocha": "^2.3.4" }, "dependencies": {} } ================================================ FILE: test/accordion.js ================================================ var pug = require("pug"); var fs = require("fs"); var assert = require("assert"); var path = require("path"); describe("Accordion",function() { var accordionTemplate = `include ../../../components/accordion +accordion(id) +accordion-item(type,title,parent,expanded)`; fs.writeFileSync(path.join(__dirname,"fixtures/accordion","accordion.pug"),accordionTemplate); var fn = pug.compileFile(path.join(__dirname,"fixtures/accordion","accordion.pug")); var actual = '
'; var locals = { id: "myaccordion",title:"My Accordion Item",type: "primary", parent: "myaccordion",expanded:false}; it("should generate an accordion",function() { assert(actual,fn(locals)); }); var accItemPrimary = `include ../../../components/accordion +accordion-item-primary(title,parent,expanded)`; fs.writeFileSync(path.join(__dirname, "fixtures/accordion","accordion-item-primary.pug"),accItemPrimary); fn = pug.compileFile(path.join(__dirname,"fixtures/accordion","accordion-item-primary.pug")); actual = 'div class="panel panel-primary">
'; it("should generate a primary accordion item", function() { assert(actual, fn(locals)); }); }); ================================================ FILE: test/alert.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Alerts",function() { var alertTypes = ["info","warning","danger","success"]; // function for generating test data function generateTestData(prefix,alertTypes) { return alertTypes.map(function(m) { return { suite: `${prefix}-${m} mixin`, spec: `should render a ${m} ${prefix}`, fixture: `${prefix}-${m}.pug`, locals: { message: `This is a ${m} ${prefix}` }, actual: `` }; }); } function runSpecs(item) { describe(item.suite,function() { it(item.spec,function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/alerts", item.fixture)); assert.equal(item.actual,fn(item.locals)); }); }); } // Generic alert mixins var genericAlert = `include ../../../components/alerts +alert(type,message)`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts","alert.pug"),genericAlert); alertTypes.map(function(t) { return { suite: `Generic alert ${t}`, spec: `should render a ${t} alert`, fixture: "alert.pug", locals: { type: `${t}`,message:`This is a ${t} alert`}, actual: `` }; }).forEach(runSpecs); // Generic Icon alert-i mixins var genericAlertIcon = `include ../../../components/alerts +alert-i(type,message,icon)`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts","alert-i.pug"),genericAlertIcon); alertTypes.map(function(t) { return { suite: `Generic Icon alert-i ${t}`, spec: `should render a ${t} icon alert`, fixture: "alert-i.pug", locals: { type: `${t}`,message:`This is a ${t} icon alert`, icon:"info"}, actual: `` }; }).forEach(runSpecs); // Generic alert-x mixins var genericAlertx = `include ../../../components/alerts +alert-x(type,message)`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts","alert-x.pug"),genericAlertx); alertTypes.map(function(t) { return { suite: `Generic alert-x ${t}`, spec: `should render a ${t} dismissible alert`, fixture: "alert-x.pug", locals: { type: `${t}`,message:`This is a ${t} dismissible alert`}, actual: `` }; }).forEach(runSpecs); // write fixture data for alert-type mixins alertTypes.forEach(function(m) { var fixtureTemplate = `include ../../../components/alerts +alert-${m}(message)`; var fileName = `alert-${m}.pug`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts",fileName),fixtureTemplate); }); generateTestData("alert",alertTypes).forEach(runSpecs); // write fixture data for alert-i-type mixins alertTypes.forEach(function(m) { var fixtureTemplate = `include ../../../components/alerts +alert-i-${m}(message)`; var fileName = `alert-i-${m}.pug`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts",fileName),fixtureTemplate); }); alertTypes.map(function(t) { var icon = "info-sign"; switch(t) { case "warning": icon = "exclamation-sign"; break; case "danger": icon = "remove-sign"; break; case "success": icon = "ok-sign"; break; default: } return { suite: `alert-i-${t}`, spec: `should render a ${t} icon alert`, fixture: `alert-i-${t}.pug`, locals: { message:`This is a ${t} icon alert`, icon:"info"}, actual: `` }; }).forEach(runSpecs); // write fixture data for alert-x-type mixins alertTypes.forEach(function(m) { var fixtureTemplate = `include ../../../components/alerts +alert-x-${m}(message)`; var fileName = `alert-x-${m}.pug`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts",fileName),fixtureTemplate); }); alertTypes.map(function(t) { return { suite: `alert-x-${t}`, spec: `should render a ${t} dismissible alert`, fixture: `alert-x-${t}.pug`, locals: { type: `${t}`,message:`This is a ${t} dismissible alert`}, actual: `` }; }).forEach(runSpecs); // write fixture data for alert-ix-type mixins alertTypes.forEach(function(m) { var fixtureTemplate = `include ../../../components/alerts +alert-ix-${m}(message,icon)`; var fileName = `alert-ix-${m}.pug`; fs.writeFileSync(path.join(__dirname,"fixtures/alerts",fileName),fixtureTemplate); }); alertTypes.map(function(t) { return { suite: `alert-ix-${t}`, spec: `should render a ${t} dismissible icon alert`, fixture: `alert-ix-${t}.pug`, locals: { message:`This is a ${t} dismissible icon alert`,icon:"info-sign"}, actual: `` }; }).forEach(runSpecs); }); ================================================ FILE: test/bootswatch.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Bootswatch",function() { it("should generate a stylesheet link to bootswatch", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures","bootswatch.pug")); assert.equal('',fn({theme:"luna"})); }); }); ================================================ FILE: test/buttons.js ================================================ var assert = require('assert'); var pug = require('pug'); var fs = require('fs'); var path = require('path'); // Write fixture data var mixins = ["btn-primary","btn-info","btn-warning","btn-danger","btn-success","btn-lg-primary","btn-lg-info","btn-lg-warning","btn-lg-danger","btn-lg-success" ]; mixins.forEach(function(m) { var fileTemplate = `include ../../../components/buttons +${m}(name)`; var fileName = `${m}.pug`; fs.writeFileSync(path.join(__dirname,"fixtures/buttons",fileName),fileTemplate); }); var testData = [ { suite: 'btn-primary mixin', spec: 'should render a primary button', fixture: 'btn-primary.pug', locals: { name: "Primary Button" }, actual: '' }, { suite: 'btn-info mixin', spec: 'should render a info button', fixture: 'btn-info.pug', locals: { name: "Info Button" }, actual: '' }, { suite: 'btn-warning mixin', spec: 'should render a warning button', fixture: 'btn-warning.pug', locals: { name: "Warning Button" }, actual: '' }, { suite: 'btn-danger mixin', spec: 'should render a danger button', fixture: 'btn-danger.pug', locals: { name: "Danger Button" }, actual: '' }, { suite: 'btn-success mixin', spec: 'should render a success button', fixture: 'btn-success.pug', locals: { name: "Success Button" }, actual: '' }, { suite: 'btn-lg-primary mixin', spec: 'should render a large primary button', fixture: 'btn-lg-primary.pug', locals: { name: "Large Primary Button" }, actual: '' }, { suite: 'btn-lg-info mixin', spec: 'should render a large info button', fixture: 'btn-lg-info.pug', locals: { name: "Large Info Button" }, actual: '' }, { suite: 'btn-lg-warning mixin', spec: 'should render a large warning button', fixture: 'btn-lg-warning.pug', locals: { name: "Large Warning Button" }, actual: '' }, { suite: 'btn-lg-danger mixin', spec: 'should render a large danger button', fixture: 'btn-lg-danger.pug', locals: { name: "Large Danger Button" }, actual: '' }, { suite: 'btn-lg-success mixin', spec: 'should render a large success button', fixture: 'btn-lg-success.pug', locals: { name: "Large Success Button" }, actual: '' }, ]; testData.forEach(function(item) { describe(item.suite,function() { it(item.spec,function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/buttons", item.fixture)); assert.equal(item.actual,fn(item.locals)); }); }); }); ================================================ FILE: test/carousel.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Carousel", function() { }); ================================================ FILE: test/dropdowns.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Dropdowns", function(){ it("should generate a dropdown", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/dropdowns","dropdown.pug")); assert.equal(true,true); }); }); ================================================ FILE: test/fixtures/accordion/accordion-item-primary.pug ================================================ include ../../../components/accordion +accordion-item-primary(title,parent,expanded) ================================================ FILE: test/fixtures/accordion/accordion.pug ================================================ include ../../../components/accordion +accordion(id) +accordion-item(type,title,parent,expanded) ================================================ FILE: test/fixtures/alerts/alert-danger.pug ================================================ include ../../../components/alerts +alert-danger(message) ================================================ FILE: test/fixtures/alerts/alert-i-danger.pug ================================================ include ../../../components/alerts +alert-i-danger(message) ================================================ FILE: test/fixtures/alerts/alert-i-info.pug ================================================ include ../../../components/alerts +alert-i-info(message) ================================================ FILE: test/fixtures/alerts/alert-i-success.pug ================================================ include ../../../components/alerts +alert-i-success(message) ================================================ FILE: test/fixtures/alerts/alert-i-warning.pug ================================================ include ../../../components/alerts +alert-i-warning(message) ================================================ FILE: test/fixtures/alerts/alert-i.pug ================================================ include ../../../components/alerts +alert-i(type,message,icon) ================================================ FILE: test/fixtures/alerts/alert-info.pug ================================================ include ../../../components/alerts +alert-info(message) ================================================ FILE: test/fixtures/alerts/alert-ix-danger.pug ================================================ include ../../../components/alerts +alert-ix-danger(message,icon) ================================================ FILE: test/fixtures/alerts/alert-ix-info.pug ================================================ include ../../../components/alerts +alert-ix-info(message,icon) ================================================ FILE: test/fixtures/alerts/alert-ix-success.pug ================================================ include ../../../components/alerts +alert-ix-success(message,icon) ================================================ FILE: test/fixtures/alerts/alert-ix-warning.pug ================================================ include ../../../components/alerts +alert-ix-warning(message,icon) ================================================ FILE: test/fixtures/alerts/alert-primary.pug ================================================ include ../../../components/alerts +alert-primary(message) ================================================ FILE: test/fixtures/alerts/alert-success.pug ================================================ include ../../../components/alerts +alert-success(message) ================================================ FILE: test/fixtures/alerts/alert-warning.pug ================================================ include ../../../components/alerts +alert-warning(message) ================================================ FILE: test/fixtures/alerts/alert-x-danger.pug ================================================ include ../../../components/alerts +alert-x-danger(message) ================================================ FILE: test/fixtures/alerts/alert-x-info.pug ================================================ include ../../../components/alerts +alert-x-info(message) ================================================ FILE: test/fixtures/alerts/alert-x-success.pug ================================================ include ../../../components/alerts +alert-x-success(message) ================================================ FILE: test/fixtures/alerts/alert-x-warning.pug ================================================ include ../../../components/alerts +alert-x-warning(message) ================================================ FILE: test/fixtures/alerts/alert-x.pug ================================================ include ../../../components/alerts +alert-x(type,message) ================================================ FILE: test/fixtures/alerts/alert.pug ================================================ include ../../../components/alerts +alert(type,message) ================================================ FILE: test/fixtures/bootswatch.pug ================================================ include ../../components/bootswatch +bootswatch(theme) ================================================ FILE: test/fixtures/buttons/btn-danger.pug ================================================ include ../../../components/buttons +btn-danger(name) ================================================ FILE: test/fixtures/buttons/btn-info.pug ================================================ include ../../../components/buttons +btn-info(name) ================================================ FILE: test/fixtures/buttons/btn-lg-danger.pug ================================================ include ../../../components/buttons +btn-lg-danger(name) ================================================ FILE: test/fixtures/buttons/btn-lg-info.pug ================================================ include ../../../components/buttons +btn-lg-info(name) ================================================ FILE: test/fixtures/buttons/btn-lg-primary.pug ================================================ include ../../../components/buttons +btn-lg-primary(name) ================================================ FILE: test/fixtures/buttons/btn-lg-success.pug ================================================ include ../../../components/buttons +btn-lg-success(name) ================================================ FILE: test/fixtures/buttons/btn-lg-warning.pug ================================================ include ../../../components/buttons +btn-lg-warning(name) ================================================ FILE: test/fixtures/buttons/btn-primary.pug ================================================ include ../../../components/buttons +btn-primary(name) ================================================ FILE: test/fixtures/buttons/btn-success.pug ================================================ include ../../../components/buttons +btn-success(name) ================================================ FILE: test/fixtures/buttons/btn-warning.pug ================================================ include ../../../components/buttons +btn-warning(name) ================================================ FILE: test/fixtures/forms/badge.pug ================================================ include ../../../components/forms +badge("Badge") ================================================ FILE: test/fixtures/forms/checkbox-inline.pug ================================================ include ../../../components/forms +checkbox-inline("Checkbox","txtCheckbox","txtCheckbox") ================================================ FILE: test/fixtures/forms/checkbox.pug ================================================ include ../../../components/forms +checkbox("Checkbox","txtCheckbox","txtCheckbox") ================================================ FILE: test/fixtures/forms/icon-btn.pug ================================================ include ../../../components/forms +icon-btn("search") ================================================ FILE: test/fixtures/forms/input-group.pug ================================================ include ../../../components/forms +input-group("Prepend","Append") input(type="text") ================================================ FILE: test/fixtures/forms/input-simple.pug ================================================ include ../../../components/forms +input-simple("text","txtInput","Placeholder","txtInput") ================================================ FILE: test/fixtures/forms/input.pug ================================================ include ../../../components/forms +input("text","txtInput","Placeholder","Label","txtInput") ================================================ FILE: test/fixtures/forms/radio-inline.pug ================================================ include ../../../components/forms +radio-inline("Radio","txtRadio","txtRadio") ================================================ FILE: test/fixtures/forms/radio.pug ================================================ include ../../../components/forms +radio("Radio","txtRadio","txtRadio") ================================================ FILE: test/fixtures/forms/submit.pug ================================================ include ../../../components/forms +submit("Submit","btnSubmit","btnSubmit") ================================================ FILE: test/fixtures/icons/icon-danger.pug ================================================ include ../../../components/icons +icon-danger(name) ================================================ FILE: test/fixtures/icons/icon-info.pug ================================================ include ../../../components/icons +icon-info(name) ================================================ FILE: test/fixtures/icons/icon-primary.pug ================================================ include ../../../components/icons +icon-primary(name) ================================================ FILE: test/fixtures/icons/icon-success.pug ================================================ include ../../../components/icons +icon-success(name) ================================================ FILE: test/fixtures/icons/icon-warning.pug ================================================ include ../../../components/icons +icon-warning(name) ================================================ FILE: test/fixtures/icons/icon.pug ================================================ include ../../../components/icons +icon(name) ================================================ FILE: test/fixtures/images/img-circle.pug ================================================ include ../../../components/images +img-circle(_src,_alt) ================================================ FILE: test/fixtures/images/img-responsive-center.pug ================================================ include ../../../components/images +img-responsive-center(_src,_alt) ================================================ FILE: test/fixtures/images/img-responsive.pug ================================================ include ../../../components/images +img-responsive(_src,_alt) ================================================ FILE: test/fixtures/images/img-rounded.pug ================================================ include ../../../components/images +img-rounded(_src,_alt) ================================================ FILE: test/fixtures/images/img-thumbnail.pug ================================================ include ../../../components/images +img-thumbnail(_src,_alt) ================================================ FILE: test/fixtures/labels/label-danger.pug ================================================ include ../../../components/labels +label-danger(text) ================================================ FILE: test/fixtures/labels/label-default.pug ================================================ include ../../../components/labels +label-default(text) ================================================ FILE: test/fixtures/labels/label-info.pug ================================================ include ../../../components/labels +label-info(text) ================================================ FILE: test/fixtures/labels/label-primary.pug ================================================ include ../../../components/labels +label-primary(text) ================================================ FILE: test/fixtures/labels/label-success.pug ================================================ include ../../../components/labels +label-success(text) ================================================ FILE: test/fixtures/labels/label-warning.pug ================================================ include ../../../components/labels +label-warning(text) ================================================ FILE: test/fixtures/labels/label.pug ================================================ include ../../../components/labels +label(type,text) ================================================ FILE: test/fixtures/panels/default-panel.pug ================================================ include ../../../components/panels +panel-default("Default Panel") | Default Panel ================================================ FILE: test/fixtures/panels/simple-panel.pug ================================================ include ../../../components/panels +panel("default") | Simple panel ================================================ FILE: test/fixtures/progress-bar/progress-bar-danger.pug ================================================ include ../../../components/progress-bars +progress-bar-danger(value) ================================================ FILE: test/fixtures/progress-bar/progress-bar-info.pug ================================================ include ../../../components/progress-bars +progress-bar-info(value) ================================================ FILE: test/fixtures/progress-bar/progress-bar-primary.pug ================================================ include ../../../components/progress-bars +progress-bar-primary(value) ================================================ FILE: test/fixtures/progress-bar/progress-bar-success.pug ================================================ include ../../../components/progress-bars +progress-bar-success(value) ================================================ FILE: test/fixtures/progress-bar/progress-bar-warning.pug ================================================ include ../../../components/progress-bars +progress-bar-warning(value) ================================================ FILE: test/fixtures/progress-bar/progress-bar.pug ================================================ include ../../../components/progress-bars +progress-bar(value,type) ================================================ FILE: test/fixtures/toggles/danger-toggle.pug ================================================ include ../../../components/toggle +toggle('danger','Danger Toggle') ================================================ FILE: test/fixtures/toggles/default-toggle.pug ================================================ include ../../../components/toggle +toggle('default','Default Toggle') ================================================ FILE: test/fixtures/toggles/info-toggle.pug ================================================ include ../../../components/toggle +toggle('info','Info Toggle') ================================================ FILE: test/fixtures/toggles/primary-toggle.pug ================================================ include ../../../components/toggle +toggle('primary','Primary Toggle') ================================================ FILE: test/fixtures/toggles/success-toggle.pug ================================================ include ../../../components/toggle +toggle('success','Success Toggle') ================================================ FILE: test/fixtures/toggles/warning-toggle.pug ================================================ include ../../../components/toggle +toggle('warning','Warning Toggle') ================================================ FILE: test/fixtures/tooltips/bottom-tooltip.pug ================================================ include ../../../components/tooltips +tooltip("Bottom tooltip", "Tooltip on the bottom", "bottom") ================================================ FILE: test/fixtures/tooltips/left-tooltip.pug ================================================ include ../../../components/tooltips +tooltip("Left tooltip", "Tooltip on the left", "left") ================================================ FILE: test/fixtures/tooltips/right-tooltip.pug ================================================ include ../../../components/tooltips +tooltip("Right tooltip", "Tooltip on the right", "right") ================================================ FILE: test/fixtures/tooltips/top-tooltip.pug ================================================ include ../../../components/tooltips +tooltip("Top tooltip", "Tooltip on the top", "top") ================================================ FILE: test/forms.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Forms", function() { it("should generate input control", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms","input.pug")); assert.equal('
',fn({ type:"text",id: "txtInput",placeholder:"Placeholder",label:"Label",name:"txtInput"})); }); it("should generate simple input control", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms","input-simple.pug")); assert.equal('',fn({type: "text", id: "txtInput",placeholder:"Placeholder", name: "txtInput"})); }); it("should generate a checkbox",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "checkbox.pug")); assert.equal('
',fn({text: "Checkbox", name: "txtCheckbox",id: "txtCheckbox"})); }); it("should generate a checkbox inline style",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "checkbox-inline.pug")); assert.equal('
Checkbox
',fn({text: "Checkbox", name: "txtCheckbox", id:"txtCheckbox"})); }); it("should generate a radio button", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "radio.pug")); assert.equal('
',fn({ text: "Radio", name: "txtRadio", id:"txtRadio"})); }); it("should generate a radio button inline style", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "radio-inline.pug")); assert.equal('
Radio
',fn({ text:"Radio", name: "txtRadio", id: "txtRadio"})); }); it("should generate a submit button",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "submit.pug")); assert.equal('
',fn({ text: "Submit", name:"btnSubmit", id:"btnSubmit"})); }); it("should generate a input group", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "input-group.pug")); assert.equal('
Prepend
Append
',fn({prepend: "Prepend", append: "Append"})); }); it("should generate a icon button", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "icon-btn.pug")); assert.equal('',fn({ icon: "search"})); }); it("should generate a badge", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "badge.pug")); assert.equal('Badge',fn({ text: "Badge"})); }); }); ================================================ FILE: test/icons.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Icons",function() { it("should render a plain icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon.pug")); assert.equal('',fn({name:"search"})); }); it("should render a primary icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-primary.pug")); assert.equal('',fn({name:"search"})); }); it("should render a info icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-info.pug")); assert.equal('',fn({name:"search"})); }); it("should render a warning icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-warning.pug")); assert.equal('',fn({name:"search"})); }); it("should render a danger icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-danger.pug")); assert.equal('',fn({name:"search"})); }); it("should render a success icon",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-success.pug")); assert.equal('',fn({name:"search"})); }); }); ================================================ FILE: test/images.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Images", function() { var locals = { _src: "a.jpg", _alt: "My Image" }; it("should generate a responsive image",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/images","img-responsive.pug")); assert.equal('My Image',fn(locals)); }); it("should generate a responsive center image",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/images","img-responsive-center.pug")); assert.equal('My Image',fn(locals)); }); it("should generate a circle image",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/images","img-circle.pug")); assert.equal('My Image',fn(locals)); }); it("should generate a rounded image",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/images","img-rounded.pug")); assert.equal('My Image',fn(locals)); }); it("should generate a thumbnail image",function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/images","img-thumbnail.pug")); assert.equal('My Image',fn(locals)); }); }); ================================================ FILE: test/labels.js ================================================ var pug = require("pug"); var assert = require("assert"); var path = require("path"); describe("Labels", function() { it("should generate a generic label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label.pug")); assert.equal('My Label',fn({type: "primary", text:"My Label"})); }); it("should generate a default label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-default.pug")); assert.equal('My Label',fn({ text:"My Label"})); }); it("should generate a primary label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-primary.pug")); assert.equal('My Label',fn({text:"My Label"})); }); it("should generate a info label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-info.pug")); assert.equal('My Label',fn({text:"My Label"})); }); it("should generate a warning label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-warning.pug")); assert.equal('My Label',fn({text:"My Label"})); }); it("should generate a danger label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-danger.pug")); assert.equal('My Label',fn({text:"My Label"})); }); it("should generate a success label", function() { var fn = pug.compileFile(path.join(__dirname, "fixtures/labels","label-success.pug")); assert.equal('My Label',fn({text:"My Label"})); }); }); ================================================ FILE: test/list-groups.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("List groups",function() { it("should generate a list group", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/list-groups","list-group.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/modal.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Modal",function() { it("should generate a modal", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/modal","modal.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/navbar.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Navbar",function() { it("should generate a navbar", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/navbar","navbar.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/navs.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Navs",function() { it("should generate a nav", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/navs","navs.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/panels.js ================================================ const assert = require("assert"); const pug = require("pug"); const fs = require("fs"); const path = require("path"); describe("Panels",function() { it("should generate a simple panel without title", function(){ const fn = pug.compileFile(path.join(__dirname, "fixtures/panels","simple-panel.pug")); let locals = { type: "default" }; let markup = `
Simple panel
`; assert.equal(markup,fn(locals)); }); it("should generate a default panel", function() { const fn = pug.compileFile(path.join(__dirname, "fixtures/panels", "default-panel.pug")); let locals = { title: "Default Panel" }; let markup = `
60% Complete
',fn({value: 60,type: "primary" })); }); it("should generate a primary progress bar",function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar-primary.pug")); assert.equal('
60% Complete
',fn({value: 60 })); }); it("should generate a info progress bar",function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar-info.pug")); assert.equal('
60% Complete
',fn({value: 60 })); }); it("should generate a warning progress bar",function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar-warning.pug")); assert.equal('
60% Complete
',fn({value: 60 })); }); it("should generate a danger progress bar",function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar-danger.pug")); assert.equal('
60% Complete
',fn({value: 60 })); }); it("should generate a success progress bar",function() { var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar-success.pug")); assert.equal('
60% Complete
',fn({value: 60})); }); }); ================================================ FILE: test/tables.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Tables",function() { it("should generate a table", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/tables","table.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/tabs.js ================================================ var assert = require("assert"); var pug = require("pug"); var fs = require("fs"); var path = require("path"); describe("Tabs",function() { it("should generate a tab", function(){ // var fn = pug.compileFile(path.join(__dirname, "fixtures/tabs","tab.pug")); assert.equal(1,1); }); }); ================================================ FILE: test/toggle.js ================================================ const assert = require("assert"); const pug = require("pug"); const fs = require("fs"); const path = require("path"); describe("Toggles",function() { it("should generate a primary toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","primary-toggle.pug")); let locals = { type: 'primary', text: 'Primary Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); it("should generate a default toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","default-toggle.pug")); let locals = { type: 'default', text: 'Default Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); it("should generate a info toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","info-toggle.pug")); let locals = { type: 'info', text: 'Info Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); it("should generate a warning toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","warning-toggle.pug")); let locals = { type: 'warning', text: 'Warning Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); it("should generate a success toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","success-toggle.pug")); let locals = { type: 'success', text: 'Success Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); it("should generate a danger toggle", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/toggles","danger-toggle.pug")); let locals = { type: 'danger', text: 'Danger Toggle' }; let markup = ``; assert.equal(markup,fn(locals)); }); }); ================================================ FILE: test/tooltips.js ================================================ const assert = require("assert"); const pug = require("pug"); const fs = require("fs"); const path = require("path"); describe("Tooltips",function() { it("should generate a top tooltip", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/tooltips","top-tooltip.pug")); let locals = { text: "Top tooltip", tooltip: "Tooltip on the top", placement: "top" }; let markup = `${locals.text}`; assert.equal(markup,fn(locals)); }); it("should generate a bottom tooltip", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/tooltips","bottom-tooltip.pug")); let locals = { text: "Bottom tooltip", tooltip: "Tooltip on the bottom", placement: "bottom" }; let markup = `${locals.text}`; assert.equal(markup,fn(locals)); }); it("should generate a left tooltip", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/tooltips","left-tooltip.pug")); let locals = { text: "Left tooltip", tooltip: "Tooltip on the left", placement: "left" }; let markup = `${locals.text}`; assert.equal(markup,fn(locals)); }); it("should generate a right tooltip", function(){ let fn = pug.compileFile(path.join(__dirname, "fixtures/tooltips","right-tooltip.pug")); let locals = { text: "Right tooltip", tooltip: "Tooltip on the right", placement: "right" }; let markup = `${locals.text}`; assert.equal(markup,fn(locals)); }); });