Skip to content
This repository
Browse code

Fixing bootstapwp_autoset_featured_img function

  • Loading branch information...
commit 0cb2a739947b80d57f48fa52c55de7ad2f2dd78a 1 parent 273c800
Rachel Baker authored
30  README.md
Source Rendered
@@ -39,21 +39,43 @@ Bug tracker
39 39
 
40 40
 **Report theme bugs** [https://github.com/rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress/issues](https://github.com/rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress/issues)
41 41
 
42  
-##v.90 Changelog (in progress)
  42
+##v.90 Changelog (still baking)
43 43
 
44  
-__Functions.php__
  44
+__The goals of this release are:__
45 45
 
46  
-*   Fixed bootstrapwp_autoset_featured_img() function to return if there is no image set, clearing debug errors.
47  
-*   Removed Custom Walker class from file and replaced with external include call for file 'includes/class-bootstrap_walker_nav_menu.php'.
  46
+1. Add Theme Options Screen
  47
+2. Fix Custom Walker Menu PHP errors
  48
+3.  Fix Automatic Thumbnail PHP errors
  49
+4.  Remove any unnecessary theme files
  50
+5. Update styles and scripts to Bootstrap 2.10 dev branch
  51
+
  52
+__Archive.php__
  53
+
  54
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
  55
+
  56
+__Author.php__
  57
+
  58
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
48 59
 
49 60
 __Class-bootstrapwp-walker-nav_menu.php__
50 61
 
51 62
 *   Extending Walker_Nav_Menu to modify class assigned to submenu ul element.
52 63
 
  64
+__Functions.php__
  65
+
  66
+*   Fixed `bootstrapwp_autoset_featured_img()` function to return if there is no image set, clearing debug errors.  
  67
+*   Removed the post hooks for `bootstrap_autoset_featured_img()` function to clear debug errors. 
  68
+*   Added `bootstrapwp_post_thumbnail_check()` function to check if the post displayed in the loop has a post thumbnail already.
  69
+*   Removed Custom Walker class from file and replaced with external include call for file 'includes/class-bootstrap_walker_nav_menu.php'.
  70
+
53 71
 __Index.php__
54 72
 
55 73
 *   Removed unnecessary double loop for page title.
56 74
 
  75
+__Page-blog.php__
  76
+
  77
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
  78
+
57 79
 __Docs Folder__
58 80
 
59 81
 *   Removed entire 'docs' folder to clean up theme files.
7  archive.php
@@ -54,10 +54,9 @@
54 54
 			<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
55 55
 			<p class="meta"><?php echo bootstrapwp_posted_on();?></p>
56 56
 			<div class="row">
57  
-				        <div class="span2"><?php // Checking for a post thumbnail
58  
-				        if ( has_post_thumbnail() ) ?>
59  
-				        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
60  
-				        	<?php the_post_thumbnail();?></a>
  57
+				        <div class="span2">
  58
+				        	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
  59
+          					<?php echo bootstrapwp_autoset_featured_img(); ?></a>
61 60
 				        </div><!-- /.span2 -->
62 61
 				        <div class="span6">
63 62
 				        	<?php the_excerpt();?>
7  author.php
@@ -44,10 +44,9 @@
44 44
 								<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
45 45
 								<p class="meta"><?php echo bootstrapwp_posted_on();?></p>
46 46
 								<div class="row">
47  
-									        <div class="span2"><?php // Checking for a post thumbnail
48  
-									        if ( has_post_thumbnail() ) ?>
49  
-									        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
50  
-									        	<?php the_post_thumbnail();?></a>
  47
+									        <div class="span2">
  48
+									        	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
  49
+          										<?php echo bootstrapwp_autoset_featured_img(); ?></a>
51 50
 									        </div><!-- /.span2 -->
52 51
 									        <div class="span6">
53 52
 									        	<?php the_excerpt();?>
52  functions.php
@@ -52,10 +52,9 @@ function bootstrapwp_theme_setup() {
52 52
   /**
53 53
    * Add support for the Aside and Gallery Post Formats
54 54
    */
55  
-  add_theme_support( 'post-formats', array( 'aside', 'image', 'gallery' ) );
  55
+  add_theme_support( 'post-formats', array( 'aside', 'image', 'gallery', 'link', 'quote', 'status', 'video', 'audio', 'chat' ) );
56 56
 }
57  
-endif; // twentyeleven_header_style
58  
-
  57
+endif;
59 58
 
60 59
 ################################################################################
61 60
 // Loading All CSS Stylesheets
@@ -373,6 +372,20 @@ function bootstrapwp_enhanced_image_navigation( $url ) {
373 372
 }
374 373
 add_filter( 'attachment_link', 'bootstrapwp_enhanced_image_navigation' );
375 374
 
  375
+
  376
+/*
  377
+| -------------------------------------------------------------------
  378
+| Checking for Post Thumbnail
  379
+| -------------------------------------------------------------------
  380
+|
  381
+| */
  382
+function bootstrapwp_post_thumbnail_check() {
  383
+    global $post;
  384
+    if (get_the_post_thumbnail()) {
  385
+          return true; }
  386
+          else { return false; }
  387
+}
  388
+
376 389
 /*
377 390
 | -------------------------------------------------------------------
378 391
 | Setting Featured Image (Post Thumbnail)
@@ -380,26 +393,29 @@ function bootstrapwp_enhanced_image_navigation( $url ) {
380 393
 | Will automatically add the first image attached to a post as the Featured Image if post does not have a featured image previously set.
381 394
 | */
382 395
 function bootstrapwp_autoset_featured_img() {
383  
-          global $post;
384  
-          $already_has_thumb = has_post_thumbnail($post->ID);
385  
-              if (!$already_has_thumb)  {
386  
-              $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
387 396
 
388  
-                          if ($attached_image) {
  397
+  $post_thumbnail = bootstrapwp_post_thumbnail_check();
  398
+  if ($post_thumbnail == true ){
  399
+    return the_post_thumbnail();
  400
+  }
  401
+    if ($post_thumbnail == false ){
  402
+      $image_args = array(
  403
+                'post_type' => 'attachment',
  404
+                'numberposts' => 1,
  405
+                'post_mime_type' => 'image',
  406
+                'post_parent' => $post->ID,
  407
+                'order' => 'desc'
  408
+          );
  409
+      $attached_image = get_children( $image_args );
  410
+             if ($attached_image) {
389 411
                                 foreach ($attached_image as $attachment_id => $attachment) {
390 412
                                 set_post_thumbnail($post->ID, $attachment_id);
391 413
                                 }
392  
-                           } elseif (!$attached_image) {
393  
-                            return;
394  
-                           }
395  
-                        }
  414
+            return the_post_thumbnail();
  415
+          } else { return " ";}
  416
+        }
396 417
       }  //end function
397  
-add_action('the_post', 'bootstrapwp_autoset_featured_img');
398  
-add_action('save_post', 'bootstrapwp_autoset_featured_img');
399  
-add_action('draft_to_publish', 'bootstrapwp_autoset_featured_img');
400  
-add_action('new_to_publish', 'bootstrapwp_autoset_featured_img');
401  
-add_action('pending_to_publish', 'bootstrapwp_autoset_featured_img');
402  
-add_action('future_to_publish', 'bootstrapwp_autoset_featured_img');
  418
+
403 419
 
404 420
 /*
405 421
 | -------------------------------------------------------------------
2  less/bootstrap.less
... ...
@@ -1,5 +1,5 @@
1 1
 /*!
2  
- * Bootstrap v2.0.3
  2
+ * Bootstrap v2.0.4
3 3
  *
4 4
  * Copyright 2012 Twitter, Inc
5 5
  * Licensed under the Apache License v2.0
2  less/bswp-overrides.less
... ...
@@ -1,4 +1,4 @@
1  
-// BSWP OVERRIDES v0.87
  1
+// BSWP OVERRIDES v0.90
2 2
 /********************************************************
3 3
 Overriding some defaults from the Bootstrap defaults to improve/fix integration with WordPress
4 4
 -------------------------------------------------- */
6  less/button-groups.less
@@ -34,16 +34,16 @@
34 34
 }
35 35
 .btn-group > .btn,
36 36
 .btn-group > .dropdown-menu {
37  
-  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
  37
+  font-size: 13px; // redeclare as part 2 of font-size inline-block hack
38 38
 }
39 39
 
40 40
 // Reset fonts for other sizes
41 41
 .btn-group > .btn-mini,
42 42
 .btn-group > .btn-small {
43  
-  font-size: @baseFontSize - 2px;
  43
+  font-size: 12px;
44 44
 }
45 45
 .btn-group > .btn-large {
46  
-  font-size: @baseFontSize + 2px;
  46
+  font-size: 16px;
47 47
 }
48 48
 
49 49
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
74  less/buttons.less
@@ -10,10 +10,10 @@
10 10
 .btn {
11 11
   display: inline-block;
12 12
   .ie7-inline-block();
13  
-  padding: 4px 10px 4px;
  13
+  padding: 4px 14px;
14 14
   margin-bottom: 0; // For input.btn
15  
-  font-size: @baseFontSize;
16  
-  line-height: @baseLineHeight;
  15
+  font-size: 13px;
  16
+  line-height: 20px;
17 17
   *line-height: 20px;
18 18
   color: @grayDark;
19 19
   text-align: center;
@@ -27,47 +27,49 @@
27 27
   .border-radius(4px);
28 28
   .ie7-restore-left-whitespace(); // Give IE7 some love
29 29
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
30  
-}
31 30
 
32  
-// Hover state
33  
-.btn:hover {
34  
-  color: @grayDark;
35  
-  text-decoration: none;
36  
-  background-color: darken(@white, 10%);
37  
-  *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
38  
-  background-position: 0 -15px;
  31
+  // Hover state
  32
+  &:hover {
  33
+    color: @grayDark;
  34
+    text-decoration: none;
  35
+    background-color: darken(@white, 10%);
  36
+    *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
  37
+    background-position: 0 -15px;
  38
+
  39
+    // transition is only when going to hover, otherwise the background
  40
+    // behind the gradient (there for IE<=9 fallback) gets mismatched
  41
+    .transition(background-position .1s linear);
  42
+  }
39 43
 
40  
-  // transition is only when going to hover, otherwise the background
41  
-  // behind the gradient (there for IE<=9 fallback) gets mismatched
42  
-  .transition(background-position .1s linear);
43  
-}
  44
+  // Focus state for keyboard and accessibility
  45
+  &:focus {
  46
+    .tab-focus();
  47
+  }
44 48
 
45  
-// Focus state for keyboard and accessibility
46  
-.btn:focus {
47  
-  .tab-focus();
48  
-}
  49
+  // Active state
  50
+  &.active,
  51
+  &:active {
  52
+    background-color: darken(@white, 10%);
  53
+    background-color: darken(@white, 15%) e("\9");
  54
+    background-image: none;
  55
+    outline: 0;
  56
+    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  57
+  }
49 58
 
50  
-// Active state
51  
-.btn.active,
52  
-.btn:active {
53  
-  background-color: darken(@white, 10%);
54  
-  background-color: darken(@white, 15%) e("\9");
55  
-  background-image: none;
56  
-  outline: 0;
57  
-  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
58  
-}
  59
+  // Disabled state
  60
+  &.disabled,
  61
+  &[disabled] {
  62
+    cursor: default;
  63
+    background-color: darken(@white, 10%);
  64
+    background-image: none;
  65
+    .opacity(65);
  66
+    .box-shadow(none);
  67
+  }
59 68
 
60  
-// Disabled state
61  
-.btn.disabled,
62  
-.btn[disabled] {
63  
-  cursor: default;
64  
-  background-color: darken(@white, 10%);
65  
-  background-image: none;
66  
-  .opacity(65);
67  
-  .box-shadow(none);
68 69
 }
69 70
 
70 71
 
  72
+
71 73
 // Button Sizes
72 74
 // --------------------------------------------------
73 75
 
10  less/carousel.less
@@ -105,6 +105,7 @@
@@ -113,11 +114,18 @@
4  less/code.less
@@ -8,7 +8,7 @@ code,
8 8
 pre {
9 9
   padding: 0 3px 2px;
10 10
   #font > #family > .monospace;
11  
-  font-size: @baseFontSize - 1;
  11
+  font-size: @baseFontSize - 2;
12 12
   color: @grayDark;
13 13
   .border-radius(3px);
14 14
 }
@@ -26,7 +26,7 @@ pre {
26 26
   display: block;
27 27
   padding: (@baseLineHeight - 1) / 2;
28 28
   margin: 0 0 @baseLineHeight / 2;
29  
-  font-size: @baseFontSize * .925; // 13px to 12px
  29
+  font-size: @baseFontSize - 2; // 14px to 12px
30 30
   line-height: @baseLineHeight;
31 31
   word-break: break-all;
32 32
   word-wrap: break-word;
68  less/forms.less
@@ -149,12 +149,6 @@ input[type="checkbox"] {
149 149
   width: auto; // Override of generic input selector
150 150
 }
151 151
 
152  
-// Make uneditable textareas behave like a textarea
153  
-.uneditable-textarea {
154  
-  width: auto;
155  
-  height: auto;
156  
-}
157  
-
158 152
 // Set the height of select and file controls to match text inputs
159 153
 select,
160 154
 input[type="file"] {
@@ -184,6 +178,41 @@ input[type="checkbox"]:focus {
184 178
 }
185 179
 
186 180
 
  181
+// Uneditable inputs
  182
+// -------------------------
  183
+
  184
+// Make uneditable inputs look inactive
  185
+.uneditable-input,
  186
+.uneditable-textarea {
  187
+  color: @grayLight;
  188
+  background-color: darken(@inputBackground, 1%);
  189
+  border-color: @inputBorder;
  190
+  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
  191
+  cursor: not-allowed;
  192
+}
  193
+
  194
+// For text that needs to appear as an input but should not be an input
  195
+.uneditable-input {
  196
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
  197
+  white-space: nowrap;
  198
+}
  199
+
  200
+// Make uneditable textareas behave like a textarea
  201
+.uneditable-textarea {
  202
+  width: auto;
  203
+  height: auto;
  204
+}
  205
+
  206
+
  207
+// Placeholder
  208
+// -------------------------
  209
+
  210
+// Placeholder text gets special styles; can't be bundled together though for some reason
  211
+input,
  212
+textarea {
  213
+  .placeholder();
  214
+}
  215
+
187 216
 
188 217
 // CHECKBOXES & RADIOS
189 218
 // -------------------
@@ -277,7 +306,6 @@ select[readonly],
277 306
 textarea[readonly] {
278 307
   cursor: not-allowed;
279 308
   background-color: @inputDisabledBackground;
280  
-  border-color: #ddd;
281 309
 }
282 310
 // Explicitly reset the colors here
283 311
 input[type="radio"][disabled],
@@ -333,22 +361,6 @@ select:focus:required:invalid {
333 361
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
334 362
 }
335 363
 
336  
-// For text that needs to appear as an input but should not be an input
337  
-.uneditable-input {
338  
-  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
339  
-  white-space: nowrap;
340  
-  cursor: not-allowed;
341  
-  background-color: @inputBackground;
342  
-  border-color: #eee;
343  
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
344  
-}
345  
-
346  
-// Placeholder text gets special styles; can't be bundled together though for some reason
347  
-input,
348  
-textarea {
349  
-  .placeholder();
350  
-}
351  
-
352 364
 
353 365
 
354 366
 // HELP TEXT
@@ -381,6 +393,8 @@ textarea {
381 393
 .input-append {
382 394
   margin-bottom: 5px;
383 395
   font-size: 0;
  396
+  white-space: nowrap; // Prevent span and input from separating
  397
+
384 398
   input,
385 399
   select,
386 400
   .uneditable-input {
@@ -395,9 +409,6 @@ textarea {
395 409
       z-index: 2;
396 410
     }
397 411
   }
398  
-  .uneditable-input {
399  
-    border-left-color: #ccc;
400  
-  }
401 412
   .add-on {
402 413
     display: inline-block;
403 414
     width: auto;
@@ -439,10 +450,6 @@ textarea {
439 450
   .uneditable-input {
440 451
     .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
441 452
   }
442  
-  .uneditable-input {
443  
-    border-right-color: #ccc;
444  
-    border-left-color: #eee;
445  
-  }
446 453
   .add-on:last-child,
447 454
   .btn:last-child {
448 455
     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
@@ -502,6 +509,7 @@ input.search-query {
502 509
     display: inline-block;
503 510
     .ie7-inline-block();
504 511
     margin-bottom: 0;
  512
+    vertical-align: middle;
505 513
   }
506 514
   // Re-hide hidden elements due to specifity
507 515
   .hide {
6  less/mixins.less
@@ -403,7 +403,7 @@
403 403
     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
404 404
     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
405 405
     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
406  
-    background-image: linear-gradient(left, @startColor, @endColor); // Le standard, IE10
  406
+    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
407 407
     background-repeat: repeat-x;
408 408
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
409 409
   }
@@ -413,7 +413,7 @@
413 413
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
414 414
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
415 415
     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
416  
-    background-image: linear-gradient(top, @startColor, @endColor); // The standard, IE10
  416
+    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
417 417
     background-repeat: repeat-x;
418 418
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
419 419
   }
@@ -423,7 +423,7 @@
423 423
     background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
424 424
     background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
425 425
     background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
426  
-    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard, IE10
  426
+    background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
427 427
   }
428 428
   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
429 429
     background-color: mix(@midColor, @endColor, 80%);
34  less/navbar.less
@@ -206,7 +206,7 @@
206 206
   float: none;
207 207
   // Vertically center the text given @navbarHeight
208 208
   @elementHeight: 20px;
209  
-  padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
  209
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
210 210
   line-height: 19px;
211 211
   color: @navbarLinkColor;
212 212
   text-decoration: none;
@@ -379,15 +379,19 @@
379 379
 
380 380
 
381 381
 // Override the default .navbar
382  
-.navbar-subnav {
383  
-}
384 382
 .navbar-subnav .navbar-inner {
385  
-  padding: 0;
386  
-  #gradient > .vertical(#f9f9f9, #f1f1f1);
  383
+  #gradient > .vertical(#ffffff, #f1f1f1);
387 384
   .box-shadow(none);
388 385
   border: 1px solid #e5e5e5;
389 386
 }
390 387
 
  388
+// Lighten vertical dividers
  389
+.navbar-subnav .divider-vertical {
  390
+  background-color: #f1f1f1;
  391
+  border-right-color: #ffffff;
  392
+}
  393
+
  394
+
391 395
 // Change link colors back
392 396
 .navbar-subnav .nav > li > a {
393 397
   color: @linkColor;
@@ -401,7 +405,10 @@
401 405
 .navbar-subnav .nav > .active > a,
402 406
 .navbar-subnav .nav > .active > a:hover {
403 407
   color: #777;
404  
-  background-color: #e5e5e5;
  408
+  background-color: #eee;
  409
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
  410
+     -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
  411
+          box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
405 412
 }
406 413
 
407 414
 // Dropdown carets
@@ -411,6 +418,21 @@
411 418
   border-bottom-color: @linkColor;
412 419
 }
413 420
 
  421
+// Reset search input form
  422
+.navbar-subnav .search-query {
  423
+  background-color: #fff;
  424
+  border-color: #ccc;
  425
+  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
  426
+
  427
+  // On :focus, keep the same padding and border
  428
+  &:focus,
  429
+  &.focused {
  430
+    padding: 4px 9px;
  431
+    border: 1px solid rgba(82,168,236,.8);
  432
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
  433
+  }
  434
+}
  435
+
414 436
 // Open dropdown dropdown-toggle
415 437
 .navbar-subnav .nav .open > a {
416 438
   color: @linkColorHover;
3  less/pager.less
@@ -4,8 +4,7 @@
4 4
 
5 5
 
6 6
 .pager {
7  
-  margin-left: 0;
8  
-  margin-bottom: @baseLineHeight;
  7
+  margin: @baseLineHeight 0;
9 8
   list-style: none;
10 9
   text-align: center;
11 10
   .clearfix();
2  less/progress-bars.less
@@ -54,7 +54,7 @@
54 54
 // Bar of progress
55 55
 .progress .bar {
56 56
   width: 0%;
57  
-  height: 18px;
  57
+  height: 100%;
58 58
   color: @white;
59 59
   font-size: 12px;
60 60
   text-align: center;
5  less/thumbnails.less
@@ -27,10 +27,10 @@
27 27
 .thumbnail {
28 28
   display: block;
29 29
   padding: 4px;
30  
-  line-height: 1;
  30
+  line-height: 20px;
31 31
   border: 1px solid #ddd;
32 32
   .border-radius(4px);
33  
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
  33
+  .box-shadow(0 1px 3px rgba(0,0,0,.055));
34 34
 }
35 35
 // Add a hover state for linked versions only
36 36
 a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
47 47
 }
48 48
 .thumbnail .caption {
49 49
   padding: 9px;
  50
+  color: @gray;
50 51
 }
76  less/type.less
@@ -3,8 +3,8 @@
3 3
 // --------------------------------------------------
4 4
 
5 5
 
6  
-// BODY TEXT
7  
-// ---------
  6
+// Body text
  7
+// -------------------------
8 8
 
9 9
 p {
10 10
   margin: 0 0 @baseLineHeight / 2;
@@ -20,73 +20,49 @@ p {
20 20
   line-height: @baseLineHeight * 1.5;
21 21
 }
22 22
 
23  
-// HEADINGS
24  
-// --------
  23
+
  24
+// Headings
  25
+// -------------------------
25 26
 
26 27
 h1, h2, h3, h4, h5, h6 {
27  
-  margin: 0;
  28
+  margin: (@baseLineHeight / 2) 0;
28 29
   font-family: @headingsFontFamily;
29 30
   font-weight: @headingsFontWeight;
  31
+  line-height: 1;
30 32
   color: @headingsColor;
31 33
   text-rendering: optimizelegibility; // Fix the character spacing for headings
32 34
   small {
33 35
     font-weight: normal;
  36
+    line-height: 1;
34 37
     color: @grayLight;
35 38
   }
36 39
 }
37  
-h1 {
38  
-  font-size: 30px;
39  
-  line-height: @baseLineHeight * 2;
40  
-  small {
41  
-    font-size: 18px;
42  
-  }
43  
-}
44  
-h2 {
45  
-  font-size: 24px;
46  
-  line-height: @baseLineHeight * 2;
47  
-  small {
48  
-    font-size: 18px;
49  
-  }
50  
-}
51  
-h3 {
52  
-  font-size: 18px;
53  
-  line-height: @baseLineHeight * 1.5;
54  
-  small {
55  
-    font-size: 14px;
56  
-  }
57  
-}
58  
-h4, h5, h6 {
59  
-  line-height: @baseLineHeight;
60  
-}
61  
-h4 {
62  
-  font-size: 14px;
63  
-  small {
64  
-    font-size: 12px;
65  
-  }
66  
-}
67  
-h5 {
68  
-  font-size: 12px;
69  
-}
70  
-h6 {
71  
-  font-size: 11px;
72  
-  color: @grayLight;
73  
-  text-transform: uppercase;
74  
-}
  40
+h1 { font-size: 36px; line-height: 40px; }
  41
+h2 { font-size: 30px; line-height: 40px; }
  42
+h3 { font-size: 24px; line-height: 40px; }
  43
+h4 { font-size: 18px; line-height: 20px; }
  44
+h5 { font-size: 14px; line-height: 20px; }
  45
+h6 { font-size: 12px; line-height: 20px; }
  46
+
  47
+h1 small { font-size: 24px; }
  48
+h2 small { font-size: 18px; }
  49
+h3 small { font-size: 14px; }
  50
+h4 small { font-size: 14px; }
  51
+
75 52
 
76 53
 // Page header
  54
+// -------------------------
  55
+
77 56
 .page-header {
78  
-  padding-bottom: @baseLineHeight - 1;
79  
-  margin: @baseLineHeight 0;
  57
+  padding-bottom: (@baseLineHeight / 2) - 1;
  58
+  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
80 59
   border-bottom: 1px solid @grayLighter;
81 60
 }
82  
-.page-header h1 {
83  
-  line-height: 1;
84  
-}
85 61
 
86 62
 
87 63
 
88  
-// LISTS
89  
-// -----
  64
+// Lists
  65
+// --------------------------------------------------
90 66
 
91 67
 // Unordered and Ordered lists
92 68
 ul, ol {
28  less/variables.less
@@ -46,11 +46,11 @@
46 46
 // -------------------------
47 47
 @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
48 48
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
49  
-@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
  49
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
50 50
 
51  
-@baseFontSize:          13px;
  51
+@baseFontSize:          14px;
52 52
 @baseFontFamily:        @sansFontFamily;
53  
-@baseLineHeight:        18px;
  53
+@baseLineHeight:        20px;
54 54
 @altFontFamily:         @serifFontFamily;
55 55
 
56 56
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@@ -73,7 +73,7 @@
73 73
 @btnBorder:                         #ccc;
74 74
 
75 75
 @btnPrimaryBackground:              @linkColor;
76  
-@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
  76
+@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
77 77
 
78 78
 @btnInfoBackground:                 #5bc0de;
79 79
 @btnInfoBackgroundHighlight:        #2f96b4;
@@ -87,7 +87,7 @@
87 87
 @btnDangerBackground:               #ee5f5b;
88 88
 @btnDangerBackgroundHighlight:      #bd362f;
89 89
 
90  
-@btnInverseBackground:              @gray;
  90
+@btnInverseBackground:              #444;
91 91
 @btnInverseBackgroundHighlight:     @grayDarker;
92 92
 
93 93
 
@@ -155,8 +155,8 @@
155 155
 // Navbar
156 156
 // -------------------------
157 157
 @navbarHeight:                    40px;
158  
-@navbarBackground:                @grayDarker;
159  
-@navbarBackgroundHighlight:       @grayDark;
  158
+@navbarBackground:                #111;
  159
+@navbarBackgroundHighlight:       #222;
160 160
 
161 161
 @navbarText:                      @grayLight;
162 162
 @navbarLinkColor:                 @grayLight;
@@ -213,21 +213,23 @@
213 213
 // 1200px min
214 214
 @gridColumnWidth1200:     70px;
215 215
 @gridGutterWidth1200:     30px;
  216
+@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
216 217
 
217 218
 // 768px-979px
218 219
 @gridColumnWidth768:      42px;
219 220
 @gridGutterWidth768:      20px;
  221
+@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
220 222
 
221 223
 
222 224
 // Fluid grid
223 225
 // -------------------------
224  
-@fluidGridColumnWidth:    6.382978723%;
225  
-@fluidGridGutterWidth:    2.127659574%;
  226
+@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
  227
+@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
226 228
 
227 229
 // 1200px min
228  
-@fluidGridColumnWidth1200:     5.982905983%;
229  
-@fluidGridGutterWidth1200:     2.564102564%;
  230
+@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
  231
+@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
230 232
 
231 233
 // 768px-979px
232  
-@fluidGridColumnWidth768:      5.801104972%;
233  
-@fluidGridGutterWidth768:      2.762430939%;
  234
+@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
  235
+@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
7  page-blog.php
@@ -43,10 +43,11 @@
43 43
       <a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
44 44
       <p class="meta"><?php echo bootstrapwp_posted_on();?></p>
45 45
       <div class="row">
46  
-        <div class="span2"><?php // Checking for a post thumbnail
47  
-        if ( has_post_thumbnail() ) ?>
  46
+        <div class="span2">
  47
+
48 48
         <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
49  
-          <?php the_post_thumbnail();?></a>
  49
+          <?php echo bootstrapwp_autoset_featured_img(); ?></a>
  50
+
50 51
         </div><!-- /.span2 -->
51 52
         <div class="span6">
52 53
          <?php the_excerpt();?>
2,370  page-styleguide.php
@@ -10,22 +10,24 @@
10 10
  */
11 11
 get_header(); ?>
12 12
 <?php while ( have_posts() ) : the_post(); ?>
13  
- <div class="container">
  13
+    <div class="bs-docs-container">
14 14
 
15 15
       <!-- Masthead
16 16
       ================================================== -->
17 17
       <header class="jumbotron subhead" id="overview">
18 18
         <h1><?php the_title();?></h1>
19 19
    <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
20  
-  <div class="subnav">
21  
-    <ul class="nav nav-pills">
22  
-      <li><a href="#typography">Typography</a></li>
23  
-      <li><a href="#code">Code</a></li>
24  
-      <li><a href="#tables">Tables</a></li>
25  
-      <li><a href="#forms">Forms</a></li>
26  
-      <li><a href="#buttons">Buttons</a></li>
27  
-      <li><a href="#icons">Icons by Glyphicons</a></li>
28  
-    </ul>
  20
+   <div class="navbar navbar-subnav">
  21
+    <div class="navbar-inner">
  22
+      <ul class="nav">
  23
+        <li><a href="#typography">Typography</a></li>
  24
+        <li><a href="#code">Code</a></li>
  25
+        <li><a href="#tables">Tables</a></li>
  26
+        <li><a href="#forms">Forms</a></li>
  27
+        <li><a href="#buttons">Buttons</a></li>
  28
+        <li><a href="#icons">Icons by Glyphicons</a></li>
  29
+      </ul>
  30
+    </div>
29 31
   </div>
30 32
 </header>
31 33
 
@@ -37,289 +39,300 @@
37 39
     <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
38 40
   </div>
39 41
 
40  
-  <h2>Headings &amp; body copy</h2>
  42
+  <h2>Headings</h2>
  43
+  <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
  44
+  <div class="bs-docs-example">
  45
+    <h1>h1. Heading 1</h1>
  46
+    <h2>h2. Heading 2</h2>
  47
+    <h3>h3. Heading 3</h3>
  48
+    <h4>h4. Heading 4</h4>
  49
+    <h5>h5. Heading 5</h5>
  50
+    <h6>h6. Heading 6</h6>
  51
+  </div>
41 52
 
42  
-  <!-- Headings & Paragraph Copy -->
43  
-  <div class="row">
44  
-    <div class="span4">
45  
-      <h3>Typographic scale</h3>
46  
-      <p>The entire typographic grid is based on two Less variables in our variables.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
47  
-      <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
48  
-    </div>
49  
-    <div class="span4">
50  
-      <h3>Example body text</h3>
51  
-      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
52  
-      <h3>Lead body copy</h3>
53  
-      <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
54  
-      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
55  
-    </div>
56  
-    <div class="span4">
57  
-      <div class="well">
58  
-        <h1>h1. Heading 1</h1>
59  
-        <h2>h2. Heading 2</h2>
60  
-        <h3>h3. Heading 3</h3>
61  
-        <h4>h4. Heading 4</h4>
62  
-        <h5>h5. Heading 5</h5>
63  
-        <h6>h6. Heading 6</h6>
64  
-      </div>
65  
-    </div>
  53
+  <h2>Body copy</h2>
  54
+  <p>Bootstrap's global default <code>font-size</code> is <strong>13px</strong>, with a <code>line-height</code> of <strong>18px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
  55
+  <div class="bs-docs-example">
  56
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
  57
+    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
  58
+    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
66 59
   </div>
67 60
 
68  
-  <!-- Misc Elements -->
69  
-  <h2>Emphasis, address, and abbreviation</h2>
70  
-  <table class="table table-bordered table-striped">
71  
-    <thead>
72  
-      <tr>
73  
-        <th>Element</th>
74  
-        <th>Usage</th>
75  
-        <th>Optional</th>
76  
-      </tr>
77  
-    </thead>
78  
-    <tbody>
79  
-      <tr>
80  
-        <td>
81  
-          <code>&lt;strong&gt;</code>
82  
-        </td>
83  
-        <td>
84  
-          For emphasizing a snippet of text with <strong>important</strong>
85  
-        </td>
86  
-        <td>
87  
-          <span class="muted">None</span>
88  
-        </td>
89  
-      </tr>
90  
-      <tr>
91  
-        <td>
92  
-          <code>&lt;em&gt;</code>
93  
-        </td>
94  
-        <td>
95  
-          For emphasizing a snippet of text with <em>stress</em>
96  
-        </td>
97  
-        <td>
98  
-          <span class="muted">None</span>
99  
-        </td>
100  
-      </tr>
101  
-      <tr>
102  
-        <td>
103  
-          <code>&lt;abbr&gt;</code>
104  
-        </td>
105  
-        <td>
106  
-          Wraps abbreviations and acronyms to show the expanded version on hover
107  
-        </td>
108  
-        <td>
109  
-          <p>Include optional <code>title</code> attribute for expanded text</p>
110  
-          Use <code>.initialism</code> class for uppercase abbreviations.
111  
-        </td>
112  
-      </tr>
113  
-      <tr>
114  
-        <td>
115  
-          <code>&lt;address&gt;</code>
116  
-        </td>
117  
-        <td>
118  
-          For contact information for its nearest ancestor or the entire body of work
119  
-        </td>
120  
-        <td>
121  
-          Preserve formatting by ending all lines with <code>&lt;br&gt;</code>
122  
-        </td>
123  
-      </tr>
124  
-    </tbody>
125  
-  </table>
  61
+  <h3>Lead body copy</h3>
  62
+  <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
  63
+  <div class="bs-docs-example">
  64
+    <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
  65
+  </div>
126 66
 
127  
-  <div class="row">
128  
-    <div class="span4">
129  
-      <h3>Using emphasis</h3>
130  
-      <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
131  
-      <p><strong>Note:</strong> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5, but their usage has changed a bit. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
132  
-    </div>
133  
-    <div class="span4">
134  
-      <h3>Example addresses</h3>
135  
-      <p>Here are two examples of how the <code>&lt;address&gt;</code> tag can be used:</p>
136  
-      <address>
137  
-        <strong>Twitter, Inc.</strong><br>
138  
-        795 Folsom Ave, Suite 600<br>
139  
-        San Francisco, CA 94107<br>
140  
-        <abbr title="Phone">P:</abbr> (123) 456-7890
141  
-      </address>
142  
-      <address>
143  
-        <strong>Full Name</strong><br>
144  
-        <a href="mailto:#">first.last@gmail.com</a>
145  
-      </address>
146  
-    </div>
147  
-    <div class="span4">
148  
-      <h3>Example abbreviations</h3>
149  
-      <p>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
150  
-      <p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
151  
-      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
152  
-      <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
153  
-    </div>
  67
+  <h2>Built with Less</h2>
  68
+  <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
  69
+
  70
+
  71
+  <hr class="bs-docs-separator">
  72
+
  73
+
  74
+  <h2>Emphasis</h2>
  75
+  <p>Make use of HTML's default emphasis tags, <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>.</p>
  76
+
  77
+  <h3><code>&lt;strong&gt;</code></h3>
  78
+  <p>For emphasizing a snippet of text with <strong>important</strong></p>
  79
+  <div class="bs-docs-example">
  80
+    <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
  81
+  </div>
  82
+<pre class="prettyprint">
  83
+&lt;strong&gt;rendered as bold text&lt;/strong&gt;
  84
+</pre>
  85
+
  86
+  <h3><code>&lt;em&gt;</code></h3>
  87
+  <p>For emphasizing a snippet of text with <em>stress</em></p>
  88
+  <div class="bs-docs-example">
  89
+    <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
154 90
   </div>
  91
+<pre class="prettyprint">
  92
+&lt;em&gt;rendered as italicized text&lt;/em&gt;
  93
+</pre>
  94
+
  95
+  <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
  96
+
  97
+
  98
+  <hr class="bs-docs-separator">
  99
+
  100
+
  101
+  <h2>Abbreviations</h2>
  102
+  <p>Stylized implemenation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
  103
+
  104
+  <h3><code>&lt;abbr&gt;</code></h3>
  105
+  <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
  106
+  <div class="bs-docs-example">
  107
+    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  108
+  </div>
  109
+<pre class="prettyprint">
  110
+&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;
  111
+</pre>
  112
+
  113
+  <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
  114
+  <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
  115
+  <div class="bs-docs-example">
  116
+    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
  117
+  </div>
  118
+<pre class="prettyprint">
  119
+&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;
  120
+</pre>
  121
+
  122
+
  123
+  <hr class="bs-docs-separator">
  124
+
  125
+
  126
+  <h2>Addresses</h2>
  127
+  <p>Present contact information for the nearest ancestor or the entire body of work.</p>
  128
+
  129
+  <h3><code>&lt;address&gt;</code></h3>
  130
+  <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
  131
+  <div class="bs-docs-example">
  132
+    <address>
  133
+      <strong>Twitter, Inc.</strong><br>
  134
+      795 Folsom Ave, Suite 600<br>
  135
+      San Francisco, CA 94107<br>
  136
+      <abbr title="Phone">P:</abbr> (123) 456-7890
  137
+    </address>
  138
+    <address>
  139
+      <strong>Full Name</strong><br>
  140
+      <a href="mailto:#">first.last@gmail.com</a>
  141
+    </address>
  142
+  </div>
  143
+<pre class="prettyprint linenums">
  144
+&lt;address&gt;
  145
+  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  146
+  795 Folsom Ave, Suite 600&lt;br&gt;
  147
+  San Francisco, CA 94107&lt;br&gt;
  148
+  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
  149
+&lt;/address&gt;
  150
+
  151
+&lt;address&gt;
  152
+  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  153
+  &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
  154
+&lt;/address&gt;
  155
+</pre>
  156
+
  157
+
  158
+  <hr class="bs-docs-separator">
155 159
 
156 160
 
157  
-  <!-- Blockquotes -->
158 161
   <h2>Blockquotes</h2>
159  
-  <table class="table table-bordered table-striped">
160  
-    <thead>
161  
-      <tr>
162  
-        <th>Element</th>
163  
-        <th>Usage</th>
164  
-        <th>Optional</th>
165  
-      </tr>
166  
-    </thead>
167  
-    <tbody>
168  
-      <tr>
169  
-        <td>
170  
-          <code>&lt;blockquote&gt;</code>
171  
-        </td>
172  
-        <td>
173  
-          Block-level element for quoting content from another source
174  
-        </td>
175  
-        <td>
176  
-          <p>Add <code>cite</code> attribute for source URL</p>
177  
-          Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options
178  
-        </td>
179  
-      </tr>
180  
-      <tr>
181  
-        <td>
182  
-          <code>&lt;small&gt;</code>
183  
-        </td>
184  
-        <td>
185  
-          Optional element for adding a user-facing citation, typically an author with title of work
186  
-        </td>
187  
-        <td>
188  
-          Place the <code>&lt;cite&gt;</code> around the title or name of source
189  
-        </td>
190  
-      </tr>
191  
-    </tbody>
192  
-  </table>
193  
-  <div class="row">
194  
-    <div class="span4">