add Bootstrap helper classes

README.md

@@ -56,6 +56,13 @@ Latest (master):
 
 + Introduced option `$wiki-page-more-vertical-space` (by default `true`) to improve wiki pages' readability even more
 * Fixed bottom margin of `pre` tag
++ Added a few helper classes from Bootstrap:
+    * `wiki-pager` - acts like Bootstrap's `pager`. Add `wiki-pager--aligned` modifier to align links to the sides.
+    * `lead` for paragraphs that should stand out.
+    * `text-left`, `text-right`, `text-center`, `text-justify`, `text-nowrap` alignment classes.
+    * `text-lowercase`, `text-uppercase`, `text-capitalize` text transformation classes.
+    * `text-muted`, `text-primary`, `text-success`, `text-info`, `text-warning`, `text-danger` for setting color of the text.
+    * `bg-primary`, `bg-success`, `bg-info`, `bg-warning`, `bg-danger` for setting color of the background.
 
 v1.3.0 (2015-04-01):
 

src/sass/components/_wiki.scss

@@ -42,32 +42,33 @@ div.wiki {
     color: $wiki-text;
     line-height: $wiki-line-height;
 
-    h1,
+    //scss-lint:disable SingleLinePerSelector
-    h2,
+    h1, .h1,
-    h3,
+    h2, .h2,
-    h4,
+    h3, .h3,
-    h5,
+    h4, .h4,
-    h6 {
+    h5, .h5,
+    h6, .h6 {
         margin-top: 1em;
         margin-bottom: $wiki-font-size;
         font-weight: $headings-font-weight;
         line-height: $headings-line-height;
     }
 
-    h1 { font-size: $font-size-h1; line-height: 1.2; }
+    h1, .h1 { font-size: $font-size-h1; line-height: 1.2; }
-    h2 { font-size: $font-size-h2; line-height: 1.225; }
+    h2, .h2 { font-size: $font-size-h2; line-height: 1.225; }
-    h3 { font-size: $font-size-h3; line-height: 1.43; }
+    h3, .h3 { font-size: $font-size-h3; line-height: 1.43; }
-    h4 { font-size: $font-size-h4; }
+    h4, .h4 { font-size: $font-size-h4; }
-    h5 { font-size: $font-size-h5; }
+    h5, .h5 { font-size: $font-size-h5; }
-    h6 { font-size: $font-size-h6; }
+    h6, .h6 { font-size: $font-size-h6; }
 
-    h1,
+    h1, .h1,
-    h2 {
+    h2, .h2 {
         padding-bottom: .3em;
         border-bottom: 1px solid $gray-lighter;
     }
 
-    h6 {
+    h6, .h6 {
         color: $gray;
     }
 
@@ -326,3 +327,102 @@ p.footnote {
         float: right;
     }
 }
+
+
+//
+// Custom classes for Bootstrap-like features
+// --------------------------------------------------
+
+/**
+ * Pager
+ * see: http://getbootstrap.com/components/#pagination-pager
+ */
+.wiki-pager {
+    > a {
+        display: inline-block;
+        padding: $padding-base-vertical $padding-base-horizontal;
+        border: 1px solid $btn-default-border;
+        border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) / 2;
+        background-color: $body-bg;
+        line-height: 1;
+        white-space: nowrap;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: $btn-default-bg;
+            text-decoration: none;
+        }
+    }
+
+    &.wiki-pager--aligned {
+        overflow: hidden;
+
+        > a:first-child {
+            float: left;
+        }
+
+        > a:last-child {
+            float: right;
+        }
+    }
+}
+
+/**
+ * Typographic helper classes
+ */
+
+// Lead body copy
+// see: http://getbootstrap.com/css/#lead-body-copy
+.lead {
+    margin-bottom: $line-height-computed;
+    font-size: floor(($font-size-base * 1.15));
+    font-weight: 300;
+    line-height: 1.4;
+
+    @media (min-width: $screen-sm-min) {
+        font-size: ($font-size-base * 1.5);
+    }
+}
+
+// Alignment
+// see: http://getbootstrap.com/css/#type-alignment
+.text-left       { text-align: left; }
+.text-right      { text-align: right; }
+.text-center     { text-align: center; }
+.text-justify    { text-align: justify; }
+.text-nowrap     { white-space: nowrap; }
+
+// Transformation
+// see: http://getbootstrap.com/css/#type-transformation
+.text-lowercase  { text-transform: lowercase; }
+.text-uppercase  { text-transform: uppercase; }
+.text-capitalize { text-transform: capitalize; }
+
+/**
+ * Other helper classes
+ * see: http://getbootstrap.com/css/#helper-classes
+ */
+
+.text-muted      { color: $gray-light; }
+.text-primary    { color: $brand-primary; }
+.text-success    { color: $brand-success; }
+.text-info       { color: $brand-info; }
+.text-warning    { color: $brand-warning; }
+.text-danger     { color: $brand-danger; }
+
+.bg-primary      { background-color: $brand-primary; }
+.bg-success      { background-color: $state-success; }
+.bg-info         { background-color: $state-info; }
+.bg-warning      { background-color: $state-warning; }
+.bg-danger       { background-color: $state-danger; }
+
+p {
+    &.bg-primary
+    &.bg-success
+    &.bg-info
+    &.bg-warning
+    &.bg-danger {
+        padding: $panel-body-padding;
+    }
+}