Updated Mixins

README.md

@@ -1,4 +1,4 @@
 jade-bootstrap
 ==============
 
-Jade mixins for creating bootstrap markup.
+This is a collection of Jade mixins to aid in creating Jade based Bootstrap markup, it also includes the default bootstrap template examples Jadeified!

index.jade

@@ -16,9 +16,12 @@ include mixins/doctypes
 include mixins/forms
 include mixins/grid-system
 include mixins/helper-classes
+include mixins/icons
 include mixins/images
+include mixins/modal
 include mixins/navbar
 include mixins/navs
+include mixins/progress-bars
 include mixins/responsive-images
 include mixins/responsive-utilities
 include mixins/tables

mixins/buttons.jade

@@ -54,26 +54,32 @@
 -     _btnSize(attributes)
 - }
 
+mixin buttons
+    - _addClassAttribute('right', 'pull-right', attributes)
+    - _addClassAttribute('left', 'pull-left', attributes)
+    .btn-group&attributes(attributes)
+        block
+
 mixin button
     - attributes.type = attributes.type || 'button'
-    button(attributes=attributes)
+    button&attributes(attributes)
         block
 
 mixin abtn
     - _btnMeta(attributes)
     - _addClassAttribute('disabled', 'disabled', attributes)
     - attributes.href = attributes.href || '#'
     - attributes.role = attributes.role || 'button'
-    a.btn(attributes=attributes)
+    a.btn&attributes(attributes)
         block
 
 mixin btn
     - _btnMeta(attributes)
     - attributes.type = attributes.type || 'button'
-    +button.btn(attributes=attributes)
+    +button.btn&attributes(attributes)
         block
 
 mixin ibtn
     - _btnMeta(attributes)
     - attributes.type = attributes.type || 'button'
-    input.btn(attributes=attributes)
+    input.btn&attributes(attributes)

mixins/carousel.jade

@@ -57,9 +57,9 @@ mixin carousel
 
 mixin carousel-caption
     - _addClassAttribute('active', 'active', attributes)
-    +div.carousel-caption(attributes=attributes)
+    +div.carousel-caption&attributes(attributes)
         block
 
 mixin carousel-item
-    +div.item(attributes=attributes)
+    +div.item&attributes(attributes)
         block

mixins/containers.jade

@@ -8,5 +8,5 @@
 //- http://getbootstrap.com/css/#overview-container
 
 mixin container
-    .container(attributes=attributes)
+    .container&attributes(attributes)
         block

mixins/doctypes.jade

@@ -10,5 +10,5 @@
 mixin doctype
     - attributes.lang = attributes.lang || 'en'
     doctype html
-    html(attributes=attributes)
+    html&attributes(attributes)
         block

mixins/forms.jade

@@ -23,57 +23,57 @@ mixin checkbox
     .checkbox
         +label(noControlLabel=attributes.noControlLabel)
             - attributes.noControlLabel = null
-            +input(attributes=attributes)
+            +input&attributes(attributes)
             block
 
 mixin checkbox-inline
     - attributes.type = attributes.type || 'checkbox'
     +label(class='checkbox-inline', noControlLabel=attributes.noControlLabel)
         - attributes.noControlLabel = null
-        +input(attributes=attributes)
+        +input&attributes(attributes)
         block
 
 mixin form
     - attributes.role = attributes.role || 'form'
     - _addClassAttribute('horizontal', 'form-horizontal', attributes)
     - _addClassAttribute('inline', 'form-inline', attributes)
-    form(attributes=attributes)
+    form&attributes(attributes)
         block
 
 mixin form-group
-    .form-group(attributes=attributes)
+    .form-group&attributes(attributes)
         block
 
 mixin form-static
-    p.form-control-static(attributes=attributes)
+    p.form-control-static&attributes(attributes)
         block
 
 mixin input
     - _inputMeta(attributes)
     - attributes.type = attributes.type || 'text'
-    input(attributes=attributes)
+    input&attributes(attributes)
 
 mixin label
     - _unlessClassAttribute('noControlLabel', 'control-label', attributes)
     - _addClassAttribute('inline', 'sr-only', attributes)
     - _colMeta(attributes)
-    label(attributes=attributes)
+    label&attributes(attributes)
         block
 
 mixin radio
     - attributes.type = attributes.type || 'radio'
     .radio
         +label()(noControlLabel=attributes.noControlLabel)
             - attributes.noControlLabel = null
-            +input(attributes=attributes)
+            +input&attributes(attributes)
             block
 
 mixin select
     - _inputMeta(attributes)
-    select(attributes=attributes)
+    select&attributes(attributes)
         block
 
 mixin textarea
     - _inputMeta(attributes)
-    textarea(attributes=attributes)
+    textarea&attributes(attributes)
         block

mixins/grid-system.jade

@@ -21,10 +21,11 @@
 - }
 
 mixin col
+    - _textAlignment(attributes)
     - _colMeta(attributes)
-    div(attributes=attributes)
+    div&attributes(attributes)
         block
 
 mixin row
-    .row(attributes=attributes)
+    .row&attributes(attributes)
         block

mixins/helper-classes.jade

@@ -8,30 +8,30 @@
 //- http://getbootstrap.com/css/#helper-classes
 
 mixin center-block
-    .center-block(attributes=attributes)
+    .center-block&attributes(attributes)
         block
 
 mixin clearfix
     - _responsiveMeta(attributes)
-    .clearfix(attributes=attributes)
+    .clearfix&attributes(attributes)
         block
 
 mixin close
     button.close(aria-hidden='true', type='button')
         | ×
 
 mixin hidden
-    .hidden(attributes=attributes)
+    .hidden&attributes(attributes)
         block
 
 mixin pull-left
-    .pull-left(attributes=attributes)
+    .pull-left&attributes(attributes)
         block
 
 mixin pull-right
-    .pull-right(attributes=attributes)
+    .pull-right&attributes(attributes)
         block
 
 mixin show
-    .show(attributes=attributes)
+    .show&attributes(attributes)
         block

mixins/icons.jade

@@ -0,0 +1,6 @@
+//- font-awesome helper
+
+mixin icon(name)
+    - _addClassAttribute('spin', 'icon-spin', attributes)
+    - _addClassAttribute('pulse', 'icon-pulse', attributes)
+    i(class=['icon', 'icon-'+name])&attributes(attributes)

mixins/images.jade

@@ -8,10 +8,10 @@
 //- http://getbootstrap.com/css/#images
 
 mixin img-rounded
-    img.img-rounded(attributes=attributes)
+    img.img-rounded&attributes(attributes)
 
 mixin img-circle
-    img.img-circle(attributes=attributes)
+    img.img-circle&attributes(attributes)
 
 mixin img-thumbnail
-    img.img-thumbnail(attributes=attributes)
+    img.img-thumbnail&attributes(attributes)

mixins/modal.jade

@@ -0,0 +1,29 @@
+//- dialog
+
+mixin modal
+	.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')&attributes(attributes)
+		.modal-dialog
+			.modal-content
+				block
+
+mixin modal-header(title)
+	.modal-header
+		if attributes.close !== false
+			button(type='button', class='close', data-dismiss='modal', aria-hidden='true') ×
+		h3.modal-title= title
+
+mixin modal-body
+	.modal-body
+		block
+
+mixin modal-footer
+	.modal-footer
+		if block
+			block
+
+		else
+			+modal-dismiss-button
+
+mixin modal-dismiss-button(label)
+	- label = label || t('Close')
+	+btn(data-dismiss='modal', aria-hidden='true')= label

mixins/navbar.jade

@@ -35,15 +35,15 @@
 - }
 
 mixin divider
-    +li.divider(attributes=attributes)
+    +li.divider&attributes(attributes)
         block
 
 mixin dropdown
-    +li.dropdown(attributes=attributes)
+    +li.dropdown&attributes(attributes)
         block
 
 mixin dropdown-header
-    +li.dropdown-header(attributes=attributes)
+    +li.dropdown-header&attributes(attributes)
         block
 
 mixin dropdown-menu
@@ -52,22 +52,22 @@ mixin dropdown-menu
 
 mixin dropdown-toggle
     - attributes['data-toggle'] = attributes['data-toggle'] || 'dropdown'
-    +a.dropdown-toggle(attributes=attributes)
+    +a.dropdown-toggle&attributes(attributes)
         block
 
 mixin icon-bar
-    +span.icon-bar(attributes=attributes)
+    +span.icon-bar&attributes(attributes)
         block
 
 mixin navbar
     - _navbarOption(attributes)
     - _navbarPosition(attributes)
     - attributes.role = attributes.role || 'navigation'
-    .navbar(attributes=attributes)
+    .navbar&attributes(attributes)
         block
 
 mixin navbar-brand
-    +a.navbar-brand(attributes=attributes)
+    +a.navbar-brand&attributes(attributes)
         block
 
 mixin navbar-collapse
@@ -81,7 +81,7 @@ mixin navbar-header
 mixin navbar-toggle
     - attributes['data-target'] = attributes['data-target'] || '.navbar-collapse'
     - attributes['data-toggle'] = attributes['data-toggle'] || 'collapse'
-    +button.navbar-toggle(attributes=attributes)
+    +button.navbar-toggle&attributes(attributes)
         +span()(sr-only)
             | Toggle navigation
         +icon-bar

mixins/navs.jade

@@ -8,5 +8,5 @@
 //- http://getbootstrap.com/components/#nav
 
 mixin nav
-    +ul.nav.navbar-nav(attributes=attributes)
+    +ul.nav.navbar-nav&attributes(attributes)
         block

mixins/progress-bars.jade

@@ -0,0 +1,12 @@
+//- progress bar
+
+//- options:
+//-   - striped => give it strips
+//-   - active/animated => make it move
+mixin progress(percent)
+	- _addClassAttribute('striped', 'progress-bar-striped', attributes)
+	- _addClassAttribute('animated', 'active', attributes)
+	- _addClassAttribute('active', 'active', attributes)
+	.progress
+		.progress-bar(style='width:'+(percent || 0)+'%', role="progressbar", aria-valuenow=percent, aria-valuemin="0" aria-valuemax="100")&attributes(attributes)
+			span.sr-only= percent+"% complete"

mixins/responsive-images.jade

@@ -9,4 +9,4 @@
 
 mixin img
     - _addClassAttribute('responsive', 'img-responsive', attributes)
-    img(attributes=attributes)
+    img&attributes(attributes)

mixins/tables.jade

@@ -31,24 +31,26 @@ mixin table
     - if (attributes.responsive) {
         - attributes.responsive = null
         .table-responsive
-            table.table(attributes=attributes)
+            table.table&attributes(attributes)
                 block
     - } else {
-        table.table(attributes=attributes)
+        table.table&attributes(attributes)
             block
     - }
 
 mixin td
+    - _textAlignment(attributes)
     - _contextualMeta(attributes)
-    td(attributes=attributes)
+    td&attributes(attributes)
         block
 
 mixin th
+    - _textAlignment(attributes)
     - _contextualMeta(attributes)
-    th(attributes=attributes)
+    th&attributes(attributes)
         block
 
 mixin tr
     - _contextualMeta(attributes)
-    tr(attributes=attributes)
+    tr&attributes(attributes)
         block