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)
[](https://travis-ci.org/pug-bootstrap/JADE-Bootstrap)
[](https://www.npmjs.com/package/jade-bootstrap)
[](https://npmjs.org/package/jade-bootstrap "View this project on npm")
[](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 <rajasegar.c@gmail.com>"
],
"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 <hr> 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("<strong>Well done!</strong> You successfully read this important alert message.")
+alert-info("<strong>Heads up!</strong> This alert needs your attention, but it's not super important.")
+alert-warning("<strong>Warning!</strong> Best check yo self, you're not looking too good.")
+alert-danger("<strong>Oh snap!</strong> 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 <a href="http://getbootstrap.com">Bootstrap </a>, by <a href="https://twitter.com/mdo">@mdo</a>.
================================================
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 <meta name="viewport" content="width=device-width, initial-scale=1">
| , 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("<strong>Well done!</strong> You successfully read this important alert message.")
+alert-info("<strong>Heads up!</strong> This alert needs your attention, but it's not super important.")
+alert-warning("<strong>Warning!</strong> Best check yo self, you're not looking too good.")
+alert-danger("<strong>Oh snap!</strong> 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 = '<div id="accordionmyaccordion" role="tablist" aria-multiselectable="true" class="panel-group"><div class="panel panel-primary"><div role="tab" id="headingMy Accordion Item" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMyAccordionItem" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div id="collapseMyAccordionItem" role="tabpanel" aria-labelledby="headingMy Accordion Item" class="panel-collapse collapse"><div class="panel-body"></div></div></div></div>';
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"><div role="tab" id="headingMy Accordion Item" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMyAccordionItem" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div id="collapseMyAccordionItem" role="tabpanel" aria-labelledby="headingMy Accordion Item" class="panel-collapse collapse"><div class="panel-body"></div></div></div>';
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: `<div class="${prefix} ${prefix}-${m}" role="alert">This is a ${m} ${prefix}</div>`
};
});
}
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: `<div class="alert alert-${t}" role="alert">This is a ${t} alert</div>`
};
}).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: `<div class="alert alert-${t}" role="alert"><span class="glyphicon glyphicon-info" aria-hidden="true"></span> This is a ${t} icon alert</div>`
};
}).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: `<div class="alert alert-dismissible alert-${t}" role="alert"><button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> ×</span></button>This is a ${t} dismissible alert</div>`
};
}).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: `<div class="alert alert-${t}" role="alert"><span class="glyphicon glyphicon-${icon}" aria-hidden="true"></span> This is a ${t} icon alert</div>`
};
}).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: `<div class="alert alert-dismissible alert-${t}" role="alert"><button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> ×</span></button>This is a ${t} dismissible alert</div>`
};
}).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: `<div class="alert alert-dismissible alert-${t}" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> ×</span></button>This is a ${t} dismissible icon alert</div>`
};
}).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('<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/luna/bootstrap.min.css" rel="stylesheet"/>',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: '<button class="btn btn-primary" type="button">Primary Button</button>'
},
{
suite: 'btn-info mixin',
spec: 'should render a info button',
fixture: 'btn-info.pug',
locals: { name: "Info Button" },
actual: '<button class="btn btn-info" type="button">Info Button</button>'
},
{
suite: 'btn-warning mixin',
spec: 'should render a warning button',
fixture: 'btn-warning.pug',
locals: { name: "Warning Button" },
actual: '<button class="btn btn-warning" type="button">Warning Button</button>'
},
{
suite: 'btn-danger mixin',
spec: 'should render a danger button',
fixture: 'btn-danger.pug',
locals: { name: "Danger Button" },
actual: '<button class="btn btn-danger" type="button">Danger Button</button>'
},
{
suite: 'btn-success mixin',
spec: 'should render a success button',
fixture: 'btn-success.pug',
locals: { name: "Success Button" },
actual: '<button class="btn btn-success" type="button">Success Button</button>'
},
{
suite: 'btn-lg-primary mixin',
spec: 'should render a large primary button',
fixture: 'btn-lg-primary.pug',
locals: { name: "Large Primary Button" },
actual: '<button class="btn btn-primary btn-lg" type="button">Large Primary Button</button>'
},
{
suite: 'btn-lg-info mixin',
spec: 'should render a large info button',
fixture: 'btn-lg-info.pug',
locals: { name: "Large Info Button" },
actual: '<button class="btn btn-info btn-lg" type="button">Large Info Button</button>'
},
{
suite: 'btn-lg-warning mixin',
spec: 'should render a large warning button',
fixture: 'btn-lg-warning.pug',
locals: { name: "Large Warning Button" },
actual: '<button class="btn btn-warning btn-lg" type="button">Large Warning Button</button>'
},
{
suite: 'btn-lg-danger mixin',
spec: 'should render a large danger button',
fixture: 'btn-lg-danger.pug',
locals: { name: "Large Danger Button" },
actual: '<button class="btn btn-danger btn-lg" type="button">Large Danger Button</button>'
},
{
suite: 'btn-lg-success mixin',
spec: 'should render a large success button',
fixture: 'btn-lg-success.pug',
locals: { name: "Large Success Button" },
actual: '<button class="btn btn-success btn-lg" type="button">Large Success Button</button>'
},
];
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('<div class="form-group"><label for="txtInput">Label</label><input class="form-control" type="text" id="txtInput" placeholder="Placeholder" name="txtInput"/></div>',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('<input class="form-control" type="text" id="txtInput" placeholder="Placeholder" name="txtInput"/>',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('<div class="checkbox"><label><input type="checkbox" name="txtCheckbox" id="txtCheckbox"/>Checkbox</label></div>',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('<div class="checkbox-inline"><input type="checkbox" name="txtCheckbox" id="txtCheckbox"/>Checkbox</div>',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('<div class="radio"><label><input type="radio" name="txtRadio" id="txtRadio"/>Radio</label></div>',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('<div class="radio-inline"><input type="radio" name="txtRadio" id="txtRadio"/>Radio</div>',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('<div class="form-group"><button class="btn btn-default" type="submit" name="btnSubmit" id="btnSubmit">Submit</button></div>',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('<div class="form-group"><div class="input-group"><div class="input-group-addon">Prepend</div><input type="text"/><div class="input-group-addon">Append</div></div></div>',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('<button class="btn btn-default" type="button" aria-label="search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>',fn({ icon: "search"}));
});
it("should generate a badge", function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/forms", "badge.pug"));
assert.equal('<span class="badge">Badge</span>',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('<span class="glyphicon glyphicon-search" aria-hidden="true"></span>',fn({name:"search"}));
});
it("should render a primary icon",function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-primary.pug"));
assert.equal('<span class="glyphicon text-primary glyphicon-search" aria-hidden="true"></span>',fn({name:"search"}));
});
it("should render a info icon",function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-info.pug"));
assert.equal('<span class="glyphicon text-info glyphicon-search" aria-hidden="true"></span>',fn({name:"search"}));
});
it("should render a warning icon",function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-warning.pug"));
assert.equal('<span class="glyphicon text-warning glyphicon-search" aria-hidden="true"></span>',fn({name:"search"}));
});
it("should render a danger icon",function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-danger.pug"));
assert.equal('<span class="glyphicon text-danger glyphicon-search" aria-hidden="true"></span>',fn({name:"search"}));
});
it("should render a success icon",function() {
var fn = pug.compileFile(path.join(__dirname, "fixtures/icons","icon-success.pug"));
assert.equal('<span class="glyphicon text-success glyphicon-search" aria-hidden="true"></span>',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('<img class="img-responsive" src="a.jpg" alt="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('<img class="img-responsive center-block" src="a.jpg" alt="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('<img class="img-circle" src="a.jpg" alt="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('<img class="img-rounded" src="a.jpg" alt="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('<img class="img-thumbnail" src="a.jpg" alt="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('<span class="label label-primary">My Label</span>',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('<span class="label label-default">My Label</span>',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('<span class="label label-primary">My Label</span>',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('<span class="label label-info">My Label</span>',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('<span class="label label-warning">My Label</span>',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('<span class="label label-danger">My Label</span>',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('<span class="label label-success">My Label</span>',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 = `<div class="panel panel-${locals.type}"><div class="panel-body">Simple panel</div></div>`;
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 = `<div class="panel panel-default"><div `
});
});
================================================
FILE: test/progress-bar.js
================================================
var pug = require("pug");
var assert = require("assert");
var path = require("path");
describe("Progress bars", function() {
it("should generate a generic progress bar",function() {
var fn = pug.compileFile(path.join(__dirname,"fixtures/progress-bar","progress-bar.pug"));
assert.equal('<div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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('<div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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('<div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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('<div class="progress"><div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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('<div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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('<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>',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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<button class="btn btn-${locals.type}" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">${locals.text}</button>`;
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 = `<a href="#" data-toggle="tooltip" data-placement="${locals.placement}" title="${locals.tooltip}">${locals.text}</a>`;
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 = `<a href="#" data-toggle="tooltip" data-placement="${locals.placement}" title="${locals.tooltip}">${locals.text}</a>`;
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 = `<a href="#" data-toggle="tooltip" data-placement="${locals.placement}" title="${locals.tooltip}">${locals.text}</a>`;
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 = `<a href="#" data-toggle="tooltip" data-placement="${locals.placement}" title="${locals.tooltip}">${locals.text}</a>`;
assert.equal(markup,fn(locals));
});
});
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
SYMBOL INDEX (2 symbols across 1 files)
FILE: test/alert.js
function generateTestData (line 10) | function generateTestData(prefix,alertTypes) {
function runSpecs (line 22) | function runSpecs(item) {
Condensed preview — 164 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (184K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 617,
"preview": "# These are supported funding model platforms\n\ngithub: #['rajasegar']\npatreon: rajasegar\nopen_collective: # Replace with"
},
{
"path": ".gitignore",
"chars": 29,
"preview": ".DS_Store\nnode_modules\n*.swp\n"
},
{
"path": ".jshintrc",
"chars": 23,
"preview": "{\n \"esnext\": true\n}\n"
},
{
"path": ".travis.yml",
"chars": 42,
"preview": "language: node_js\nnode_js:\n - \"stable\"\n"
},
{
"path": "LICENSE",
"chars": 1085,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015 Rajasegar Chandiran\n\nPermission is hereby granted, free of charge, to any pers"
},
{
"path": "README.md",
"chars": 2577,
"preview": "# PUG-Bootstrap\n[Bootstrap](http://getbootstrap.com) framework written completely using mixins in [Pug](http://pugjs.org"
},
{
"path": "_bootstrap.pug",
"chars": 1861,
"preview": "//- bootstrap.jade\n//- bootstrap mixins\n\n\n//- Including Icon mixins\ninclude components/icons\n//- Including Alert mixins\n"
},
{
"path": "bower.json",
"chars": 494,
"preview": "{\n \"name\": \"jade-bootstrap\",\n \"version\": \"1.0.0\",\n \"homepage\": \"https://github.com/rajasegar/JADE-Bootstrap\",\n \"auth"
},
{
"path": "components/accordion.pug",
"chars": 1582,
"preview": "//- accordion\nmixin accordion(id)\n\t.panel-group(id=\"accordion#{id}\", role=\"tablist\", aria-multiselectable=\"true\")\n\t\tbloc"
},
{
"path": "components/alerts.pug",
"chars": 3226,
"preview": "//- alerts.jade\n//- alert mixins\n\ninclude icons\n//- Generic Simple alert\nmixin alert(type,message)\n\t.alert(role=\"alert\","
},
{
"path": "components/bootswatch.pug",
"chars": 303,
"preview": "//- Bootswatch theme mixins by Kezz Bracey\n//- https://github.com/tutsplus/baking-bootstrap-snippets-with-jade\n//- Autho"
},
{
"path": "components/buttons.pug",
"chars": 3255,
"preview": "//- button mixins\n//- anchor buttons\nmixin a-btn(url,style)\n\t- var type = (typeof style === 'undefined') ? \"default\" : s"
},
{
"path": "components/carousel.pug",
"chars": 1150,
"preview": "//- carousel caption\nmixin carousel-caption(item)\n\t.carousel-caption\n\t\tunless !item.h1\n\t\t\th1 #{item.h1}\n\t\tunless !item.p"
},
{
"path": "components/dropdowns.pug",
"chars": 813,
"preview": "//- Dropdown\nmixin dropdown(caption,items)\n\t.dropdown\n\t\tbutton.btn.btn-default.dropdown-toggle(type=\"button\",data-toggle"
},
{
"path": "components/forms.pug",
"chars": 1640,
"preview": "include icons\n//- Input control with form-group wrapper\nmixin input(type,id,placeholder,label,name)\n .form-group\n "
},
{
"path": "components/icons.pug",
"chars": 596,
"preview": "//- Glyphicon\nmixin icon(name)\n\tspan.glyphicon(class=`glyphicon-${name}`,aria-hidden=\"true\")\n\t\nmixin icon-primary(name)\n"
},
{
"path": "components/images.pug",
"chars": 383,
"preview": "//- Image mixins\nmixin img-responsive(_src,_alt)\n\timg.img-responsive(src=_src,alt=_alt)\n\t\nmixin img-responsive-center(_s"
},
{
"path": "components/labels.pug",
"chars": 485,
"preview": "//- Generic label\nmixin label(type,text)\n\tspan.label(class=`label-${type}`)= text\n\n//- Info label\nmixin label-default(te"
},
{
"path": "components/list-groups.pug",
"chars": 546,
"preview": "//- list-group mixins\nmixin list-group(items)\n\tul.list-group\n\teach item, index in items\n\t\tli.list-group-item #{item}\n\nmi"
},
{
"path": "components/modal.pug",
"chars": 462,
"preview": "//- modal\nmixin modal(title,id)\n\t.modal.fade(id=\"#{id}\",tabindex=\"-1\",role=\"dialog\",aria-labelledby=\"#{id}Label\" aria-hi"
},
{
"path": "components/navbar.pug",
"chars": 3057,
"preview": "//- Navbar mixins by Kezz Bracey\n//- https://github.com/tutsplus/baking-bootstrap-snippets-with-jade\n//- Author: http:/"
},
{
"path": "components/navs.pug",
"chars": 674,
"preview": "//- Nav mixins\nmixin nav(type,items,active)\n\tul.nav(class=\"#{type}\")\n\t\teach item,index in items\n\t\t\tif(index === active)\n"
},
{
"path": "components/panels.pug",
"chars": 660,
"preview": "//- panel\nmixin panel(type,title)\n\t.panel(class=`panel-${type}`)\n\t\tif title !== undefined\n\t\t\t.panel-heading\n\t\t\t\th3.panel"
},
{
"path": "components/progress-bars.pug",
"chars": 677,
"preview": "//- progress-bar mixins\nmixin progress-bar(value,type)\n\t-var type = type || \"\"\n\t.progress\n\t\t.progress-bar(class=`progres"
},
{
"path": "components/tables.pug",
"chars": 522,
"preview": "//- table mixins\nmixin table(header,data,type)\n\t- var type = type || \"\"\n\ttable.table(class=\"#{type}\")\n\t\tthead\n\t\t\ttr\n\t\t\t\t"
},
{
"path": "components/tabs.pug",
"chars": 430,
"preview": "//- Tabs\nmixin tab-list(tabs,active)\n\tul.nav.nav-tabs(role=\"tablist\")\n\t\teach item,index in tabs\n\t\t\tif (index === active)"
},
{
"path": "components/toggle.pug",
"chars": 2756,
"preview": "//- toggle\nmixin toggle(type,text)\n\tbutton.btn(class=`btn-${type}`,type=\"button\",data-toggle=\"button\",aria-pressed=\"fals"
},
{
"path": "components/tooltips.pug",
"chars": 467,
"preview": "//- tooltip\nmixin tooltip(text,tooltip,placement)\n\ta(href=\"#\",data-toggle=\"tooltip\",data-placement=placement,title=toolt"
},
{
"path": "css/blog.css",
"chars": 2409,
"preview": "/*\n * Globals\n */\n\nbody {\n font-family: Georgia, \"Times New Roman\", Times, serif;\n color: #555;\n}\n\nh1, .h1,\nh2, .h2,\nh"
},
{
"path": "css/carousel.css",
"chars": 2537,
"preview": "/* GLOBAL STYLES\n-------------------------------------------------- */\n/* Padding below the footer and lighter body text"
},
{
"path": "css/codemirror.css",
"chars": 7771,
"preview": "/* BASICS */\n\n.CodeMirror {\n /* Set height, width, borders, and global font properties here */\n font-family: monospace"
},
{
"path": "css/cover.css",
"chars": 2530,
"preview": "/*\n * Globals\n */\n\n/* Links */\na,\na:focus,\na:hover {\n color: #fff;\n}\n\n/* Custom default button */\n.btn-default,\n.btn-de"
},
{
"path": "css/dashboard.css",
"chars": 1557,
"preview": "/*\n * Base structure\n */\n\n/* Move down content because we have a fixed navbar that is 50px tall */\nbody {\n padding-top:"
},
{
"path": "css/jumbotron-narrow.css",
"chars": 1410,
"preview": "/* Space out content a bit */\nbody {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n/* Everything but the jumbotron get"
},
{
"path": "css/jumbotron.css",
"chars": 126,
"preview": "/* Move down content because we have a fixed navbar that is 50px tall */\nbody {\n padding-top: 50px;\n padding-bottom: 2"
},
{
"path": "css/justified-nav.css",
"chars": 2370,
"preview": "body {\n padding-top: 20px;\n}\n\n.footer {\n padding-top: 40px;\n padding-bottom: 40px;\n margin-top: 40px;\n border-top: "
},
{
"path": "css/navbar-fixed-top.css",
"chars": 51,
"preview": "body {\n min-height: 2000px;\n padding-top: 70px;\n}"
},
{
"path": "css/navbar-static-top.css",
"chars": 77,
"preview": "body {\n min-height: 2000px;\n}\n\n.navbar-static-top {\n margin-bottom: 19px;\n}"
},
{
"path": "css/navbar.css",
"chars": 89,
"preview": "body {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.navbar {\n margin-bottom: 20px;\n}"
},
{
"path": "css/non-responsive.css",
"chars": 4109,
"preview": "/* Template-specific stuff\n *\n * Customizations just for the template; these are not necessary for anything\n * with disa"
},
{
"path": "css/offcanvas.css",
"chars": 990,
"preview": "/*\n * Style tweaks\n * --------------------------------------------------\n */\nhtml,\nbody {\n overflow-x: hidden; /* Preve"
},
{
"path": "css/signin.css",
"chars": 793,
"preview": "body {\n padding-top: 40px;\n padding-bottom: 40px;\n background-color: #eee;\n}\n\n.form-signin {\n max-width: 330px;\n pa"
},
{
"path": "css/starter-template.css",
"chars": 95,
"preview": "body {\n padding-top: 50px;\n}\n.starter-template {\n padding: 40px 15px;\n text-align: center;\n}"
},
{
"path": "css/sticky-footer-navbar.css",
"chars": 678,
"preview": "/* Sticky footer styles\n-------------------------------------------------- */\nhtml {\n position: relative;\n min-height:"
},
{
"path": "css/sticky-footer.css",
"chars": 602,
"preview": "/* Sticky footer styles\n-------------------------------------------------- */\nhtml {\n position: relative;\n min-height:"
},
{
"path": "css/theme.css",
"chars": 254,
"preview": "body {\n padding-top: 70px;\n padding-bottom: 30px;\n}\n\n.theme-dropdown .dropdown-menu {\n position: static;\n display: b"
},
{
"path": "layouts/blog.pug",
"chars": 6397,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/blog.css', rel='stylesheet')\n"
},
{
"path": "layouts/bootswatch.pug",
"chars": 12215,
"preview": "extends ../_bootstrap\nappend styles\n\t// Bootstrap theme\n\t+bootswatch(\"cerulean\")\n\t// Custom styles for this template\n\tli"
},
{
"path": "layouts/carousel.pug",
"chars": 5593,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template \n\tlink(href=\"../css/carousel.css\", rel=\"styleshe"
},
{
"path": "layouts/cover.pug",
"chars": 881,
"preview": "extends ../_bootstrap\nappend styles\n\t//\t!-- Custom styles for this template --\n\tlink(href=\"../css/cover.css\", rel=\"style"
},
{
"path": "layouts/dashboard.pug",
"chars": 4040,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/dashboard.css', rel='styleshe"
},
{
"path": "layouts/jumbotron-narrow.pug",
"chars": 1484,
"preview": "extends ../_bootstrap\nappend styles\t\n\t// Custom styles for this template\n\tlink(href='../css/jumbotron-narrow.css', rel='"
},
{
"path": "layouts/jumbotron.pug",
"chars": 2219,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/jumbotron.css', rel='styleshe"
},
{
"path": "layouts/justified-nav.pug",
"chars": 2192,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/justified-nav.css', rel='styl"
},
{
"path": "layouts/navbar-fixed.pug",
"chars": 1010,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/navbar-fixed-top.css', rel='s"
},
{
"path": "layouts/navbar-static.pug",
"chars": 1010,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/navbar-static-top.css', rel='"
},
{
"path": "layouts/navbar.pug",
"chars": 1819,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/navbar.css', rel='stylesheet'"
},
{
"path": "layouts/non-responsive.pug",
"chars": 3066,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='/css/non-responsive.css', rel='style"
},
{
"path": "layouts/offcanvas.pug",
"chars": 3826,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='/css/offcanvas.css', rel='stylesheet"
},
{
"path": "layouts/sign-in.pug",
"chars": 654,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/signin.css', rel='stylesheet'"
},
{
"path": "layouts/starter.pug",
"chars": 494,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/starter-template.css', rel='s"
},
{
"path": "layouts/sticky-footer-navbar.pug",
"chars": 1635,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='/css/sticky-footer-navbar.css', rel="
},
{
"path": "layouts/sticky-footer.pug",
"chars": 523,
"preview": "extends ../_bootstrap\nappend styles\n\t// Custom styles for this template\n\tlink(href='../css/sticky-footer.css', rel='styl"
},
{
"path": "layouts/theme-template.pug",
"chars": 12295,
"preview": "extends ../_bootstrap\nappend styles\n\t// Bootstrap theme\n\tlink(rel=\"stylesheet\", href=\"https://maxcdn.bootstrapcdn.com/bo"
},
{
"path": "package.json",
"chars": 788,
"preview": "{\n \"name\": \"jade-bootstrap\",\n \"version\": \"1.0.15\",\n \"description\": \"Bootstrap framework written completely using mixi"
},
{
"path": "test/accordion.js",
"chars": 2185,
"preview": "var pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/alert.js",
"chars": 5919,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/bootswatch.js",
"chars": 439,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\n\ndescribe(\"Bootswatch\",function()"
},
{
"path": "test/buttons.js",
"chars": 3578,
"preview": "var assert = require('assert');\nvar pug = require('pug');\nvar fs = require('fs');\nvar path = require('path');\n\n// Write "
},
{
"path": "test/carousel.js",
"chars": 126,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Carousel\", function() {"
},
{
"path": "test/dropdowns.js",
"chars": 335,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/fixtures/accordion/accordion-item-primary.pug",
"chars": 84,
"preview": "include ../../../components/accordion\n+accordion-item-primary(title,parent,expanded)"
},
{
"path": "test/fixtures/accordion/accordion.pug",
"chars": 100,
"preview": "include ../../../components/accordion\n+accordion(id)\n +accordion-item(type,title,parent,expanded)"
},
{
"path": "test/fixtures/alerts/alert-danger.pug",
"chars": 57,
"preview": "include ../../../components/alerts\n+alert-danger(message)"
},
{
"path": "test/fixtures/alerts/alert-i-danger.pug",
"chars": 59,
"preview": "include ../../../components/alerts\n+alert-i-danger(message)"
},
{
"path": "test/fixtures/alerts/alert-i-info.pug",
"chars": 57,
"preview": "include ../../../components/alerts\n+alert-i-info(message)"
},
{
"path": "test/fixtures/alerts/alert-i-success.pug",
"chars": 60,
"preview": "include ../../../components/alerts\n+alert-i-success(message)"
},
{
"path": "test/fixtures/alerts/alert-i-warning.pug",
"chars": 60,
"preview": "include ../../../components/alerts\n+alert-i-warning(message)"
},
{
"path": "test/fixtures/alerts/alert-i.pug",
"chars": 62,
"preview": "include ../../../components/alerts\n+alert-i(type,message,icon)"
},
{
"path": "test/fixtures/alerts/alert-info.pug",
"chars": 55,
"preview": "include ../../../components/alerts\n+alert-info(message)"
},
{
"path": "test/fixtures/alerts/alert-ix-danger.pug",
"chars": 65,
"preview": "include ../../../components/alerts\n+alert-ix-danger(message,icon)"
},
{
"path": "test/fixtures/alerts/alert-ix-info.pug",
"chars": 63,
"preview": "include ../../../components/alerts\n+alert-ix-info(message,icon)"
},
{
"path": "test/fixtures/alerts/alert-ix-success.pug",
"chars": 66,
"preview": "include ../../../components/alerts\n+alert-ix-success(message,icon)"
},
{
"path": "test/fixtures/alerts/alert-ix-warning.pug",
"chars": 66,
"preview": "include ../../../components/alerts\n+alert-ix-warning(message,icon)"
},
{
"path": "test/fixtures/alerts/alert-primary.pug",
"chars": 58,
"preview": "include ../../../components/alerts\n+alert-primary(message)"
},
{
"path": "test/fixtures/alerts/alert-success.pug",
"chars": 58,
"preview": "include ../../../components/alerts\n+alert-success(message)"
},
{
"path": "test/fixtures/alerts/alert-warning.pug",
"chars": 58,
"preview": "include ../../../components/alerts\n+alert-warning(message)"
},
{
"path": "test/fixtures/alerts/alert-x-danger.pug",
"chars": 59,
"preview": "include ../../../components/alerts\n+alert-x-danger(message)"
},
{
"path": "test/fixtures/alerts/alert-x-info.pug",
"chars": 57,
"preview": "include ../../../components/alerts\n+alert-x-info(message)"
},
{
"path": "test/fixtures/alerts/alert-x-success.pug",
"chars": 60,
"preview": "include ../../../components/alerts\n+alert-x-success(message)"
},
{
"path": "test/fixtures/alerts/alert-x-warning.pug",
"chars": 60,
"preview": "include ../../../components/alerts\n+alert-x-warning(message)"
},
{
"path": "test/fixtures/alerts/alert-x.pug",
"chars": 57,
"preview": "include ../../../components/alerts\n+alert-x(type,message)"
},
{
"path": "test/fixtures/alerts/alert.pug",
"chars": 55,
"preview": "include ../../../components/alerts\n+alert(type,message)"
},
{
"path": "test/fixtures/bootswatch.pug",
"chars": 55,
"preview": "include ../../components/bootswatch\n+bootswatch(theme)\n"
},
{
"path": "test/fixtures/buttons/btn-danger.pug",
"chars": 53,
"preview": "include ../../../components/buttons\n+btn-danger(name)"
},
{
"path": "test/fixtures/buttons/btn-info.pug",
"chars": 51,
"preview": "include ../../../components/buttons\n+btn-info(name)"
},
{
"path": "test/fixtures/buttons/btn-lg-danger.pug",
"chars": 56,
"preview": "include ../../../components/buttons\n+btn-lg-danger(name)"
},
{
"path": "test/fixtures/buttons/btn-lg-info.pug",
"chars": 54,
"preview": "include ../../../components/buttons\n+btn-lg-info(name)"
},
{
"path": "test/fixtures/buttons/btn-lg-primary.pug",
"chars": 57,
"preview": "include ../../../components/buttons\n+btn-lg-primary(name)"
},
{
"path": "test/fixtures/buttons/btn-lg-success.pug",
"chars": 57,
"preview": "include ../../../components/buttons\n+btn-lg-success(name)"
},
{
"path": "test/fixtures/buttons/btn-lg-warning.pug",
"chars": 57,
"preview": "include ../../../components/buttons\n+btn-lg-warning(name)"
},
{
"path": "test/fixtures/buttons/btn-primary.pug",
"chars": 54,
"preview": "include ../../../components/buttons\n+btn-primary(name)"
},
{
"path": "test/fixtures/buttons/btn-success.pug",
"chars": 54,
"preview": "include ../../../components/buttons\n+btn-success(name)"
},
{
"path": "test/fixtures/buttons/btn-warning.pug",
"chars": 54,
"preview": "include ../../../components/buttons\n+btn-warning(name)"
},
{
"path": "test/fixtures/forms/badge.pug",
"chars": 50,
"preview": "include ../../../components/forms\n+badge(\"Badge\")\n"
},
{
"path": "test/fixtures/forms/checkbox-inline.pug",
"chars": 91,
"preview": "include ../../../components/forms\n+checkbox-inline(\"Checkbox\",\"txtCheckbox\",\"txtCheckbox\")\n"
},
{
"path": "test/fixtures/forms/checkbox.pug",
"chars": 84,
"preview": "include ../../../components/forms\n+checkbox(\"Checkbox\",\"txtCheckbox\",\"txtCheckbox\")\n"
},
{
"path": "test/fixtures/forms/icon-btn.pug",
"chars": 54,
"preview": "include ../../../components/forms\n+icon-btn(\"search\")\n"
},
{
"path": "test/fixtures/forms/input-group.pug",
"chars": 90,
"preview": "include ../../../components/forms\n+input-group(\"Prepend\",\"Append\")\n input(type=\"text\")\n"
},
{
"path": "test/fixtures/forms/input-simple.pug",
"chars": 92,
"preview": "include ../../../components/forms\n+input-simple(\"text\",\"txtInput\",\"Placeholder\",\"txtInput\")\n"
},
{
"path": "test/fixtures/forms/input.pug",
"chars": 93,
"preview": "include ../../../components/forms\n+input(\"text\",\"txtInput\",\"Placeholder\",\"Label\",\"txtInput\")\n"
},
{
"path": "test/fixtures/forms/radio-inline.pug",
"chars": 79,
"preview": "include ../../../components/forms\n+radio-inline(\"Radio\",\"txtRadio\",\"txtRadio\")\n"
},
{
"path": "test/fixtures/forms/radio.pug",
"chars": 72,
"preview": "include ../../../components/forms\n+radio(\"Radio\",\"txtRadio\",\"txtRadio\")\n"
},
{
"path": "test/fixtures/forms/submit.pug",
"chars": 76,
"preview": "include ../../../components/forms\n+submit(\"Submit\",\"btnSubmit\",\"btnSubmit\")\n"
},
{
"path": "test/fixtures/icons/icon-danger.pug",
"chars": 53,
"preview": "include ../../../components/icons\n+icon-danger(name)\n"
},
{
"path": "test/fixtures/icons/icon-info.pug",
"chars": 51,
"preview": "include ../../../components/icons\n+icon-info(name)\n"
},
{
"path": "test/fixtures/icons/icon-primary.pug",
"chars": 54,
"preview": "include ../../../components/icons\n+icon-primary(name)\n"
},
{
"path": "test/fixtures/icons/icon-success.pug",
"chars": 54,
"preview": "include ../../../components/icons\n+icon-success(name)\n"
},
{
"path": "test/fixtures/icons/icon-warning.pug",
"chars": 54,
"preview": "include ../../../components/icons\n+icon-warning(name)\n"
},
{
"path": "test/fixtures/icons/icon.pug",
"chars": 46,
"preview": "include ../../../components/icons\n+icon(name)\n"
},
{
"path": "test/fixtures/images/img-circle.pug",
"chars": 58,
"preview": "include ../../../components/images\n+img-circle(_src,_alt)\n"
},
{
"path": "test/fixtures/images/img-responsive-center.pug",
"chars": 69,
"preview": "include ../../../components/images\n+img-responsive-center(_src,_alt)\n"
},
{
"path": "test/fixtures/images/img-responsive.pug",
"chars": 62,
"preview": "include ../../../components/images\n+img-responsive(_src,_alt)\n"
},
{
"path": "test/fixtures/images/img-rounded.pug",
"chars": 59,
"preview": "include ../../../components/images\n+img-rounded(_src,_alt)\n"
},
{
"path": "test/fixtures/images/img-thumbnail.pug",
"chars": 61,
"preview": "include ../../../components/images\n+img-thumbnail(_src,_alt)\n"
},
{
"path": "test/fixtures/labels/label-danger.pug",
"chars": 55,
"preview": "include ../../../components/labels\n+label-danger(text)\n"
},
{
"path": "test/fixtures/labels/label-default.pug",
"chars": 56,
"preview": "include ../../../components/labels\n+label-default(text)\n"
},
{
"path": "test/fixtures/labels/label-info.pug",
"chars": 53,
"preview": "include ../../../components/labels\n+label-info(text)\n"
},
{
"path": "test/fixtures/labels/label-primary.pug",
"chars": 56,
"preview": "include ../../../components/labels\n+label-primary(text)\n"
},
{
"path": "test/fixtures/labels/label-success.pug",
"chars": 56,
"preview": "include ../../../components/labels\n+label-success(text)\n"
},
{
"path": "test/fixtures/labels/label-warning.pug",
"chars": 56,
"preview": "include ../../../components/labels\n+label-warning(text)\n"
},
{
"path": "test/fixtures/labels/label.pug",
"chars": 53,
"preview": "include ../../../components/labels\n+label(type,text)\n"
},
{
"path": "test/fixtures/panels/default-panel.pug",
"chars": 85,
"preview": "include ../../../components/panels\n+panel-default(\"Default Panel\")\n | Default Panel\n"
},
{
"path": "test/fixtures/panels/simple-panel.pug",
"chars": 70,
"preview": "include ../../../components/panels\n+panel(\"default\")\n | Simple panel\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar-danger.pug",
"chars": 70,
"preview": "include ../../../components/progress-bars\n+progress-bar-danger(value)\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar-info.pug",
"chars": 68,
"preview": "include ../../../components/progress-bars\n+progress-bar-info(value)\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar-primary.pug",
"chars": 71,
"preview": "include ../../../components/progress-bars\n+progress-bar-primary(value)\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar-success.pug",
"chars": 71,
"preview": "include ../../../components/progress-bars\n+progress-bar-success(value)\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar-warning.pug",
"chars": 71,
"preview": "include ../../../components/progress-bars\n+progress-bar-warning(value)\n"
},
{
"path": "test/fixtures/progress-bar/progress-bar.pug",
"chars": 68,
"preview": "include ../../../components/progress-bars\n+progress-bar(value,type)\n"
},
{
"path": "test/fixtures/toggles/danger-toggle.pug",
"chars": 69,
"preview": "include ../../../components/toggle\n+toggle('danger','Danger Toggle')\n"
},
{
"path": "test/fixtures/toggles/default-toggle.pug",
"chars": 71,
"preview": "include ../../../components/toggle\n+toggle('default','Default Toggle')\n"
},
{
"path": "test/fixtures/toggles/info-toggle.pug",
"chars": 65,
"preview": "include ../../../components/toggle\n+toggle('info','Info Toggle')\n"
},
{
"path": "test/fixtures/toggles/primary-toggle.pug",
"chars": 71,
"preview": "include ../../../components/toggle\n+toggle('primary','Primary Toggle')\n"
},
{
"path": "test/fixtures/toggles/success-toggle.pug",
"chars": 71,
"preview": "include ../../../components/toggle\n+toggle('success','Success Toggle')\n"
},
{
"path": "test/fixtures/toggles/warning-toggle.pug",
"chars": 71,
"preview": "include ../../../components/toggle\n+toggle('warning','Warning Toggle')\n"
},
{
"path": "test/fixtures/tooltips/bottom-tooltip.pug",
"chars": 99,
"preview": "include ../../../components/tooltips\n+tooltip(\"Bottom tooltip\", \"Tooltip on the bottom\", \"bottom\")\n"
},
{
"path": "test/fixtures/tooltips/left-tooltip.pug",
"chars": 93,
"preview": "include ../../../components/tooltips\n+tooltip(\"Left tooltip\", \"Tooltip on the left\", \"left\")\n"
},
{
"path": "test/fixtures/tooltips/right-tooltip.pug",
"chars": 96,
"preview": "include ../../../components/tooltips\n+tooltip(\"Right tooltip\", \"Tooltip on the right\", \"right\")\n"
},
{
"path": "test/fixtures/tooltips/top-tooltip.pug",
"chars": 90,
"preview": "include ../../../components/tooltips\n+tooltip(\"Top tooltip\", \"Tooltip on the top\", \"top\")\n"
},
{
"path": "test/forms.js",
"chars": 3594,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Forms\", function() {\n "
},
{
"path": "test/icons.js",
"chars": 1756,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Icons\",function() {\n "
},
{
"path": "test/images.js",
"chars": 1451,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Images\", function() {\n "
},
{
"path": "test/labels.js",
"chars": 1906,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Labels\", function() {\n "
},
{
"path": "test/list-groups.js",
"chars": 339,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/modal.js",
"chars": 317,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/navbar.js",
"chars": 321,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/navs.js",
"chars": 312,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/panels.js",
"chars": 837,
"preview": "const assert = require(\"assert\");\nconst pug = require(\"pug\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nd"
},
{
"path": "test/progress-bar.js",
"chars": 2748,
"preview": "var pug = require(\"pug\");\nvar assert = require(\"assert\");\nvar path = require(\"path\");\n\ndescribe(\"Progress bars\", functio"
},
{
"path": "test/tables.js",
"chars": 319,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/tabs.js",
"chars": 311,
"preview": "var assert = require(\"assert\");\nvar pug = require(\"pug\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\n\ndescribe("
},
{
"path": "test/toggle.js",
"chars": 2917,
"preview": "const assert = require(\"assert\");\nconst pug = require(\"pug\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nd"
},
{
"path": "test/tooltips.js",
"chars": 2096,
"preview": "const assert = require(\"assert\");\nconst pug = require(\"pug\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nd"
}
]
About this extraction
This page contains the full source code of the rajasegar/JADE-Bootstrap GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 164 files (154.2 KB), approximately 46.2k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.