Plus UI Design Styleguide
This styleguide was made customizing Bootstrap's sass variables
Typography
h1. Plus UI Design heading
<h1>Plus UI Design</h1>h2. Plus UI Design heading
<h2>Plus UI Design</h2>h3. Plus UI Design heading
<h3>Plus UI Design</h3>h4. Plus UI Design heading
<h4>Plus UI Design</h4>h5. Plus UI Design heading
<h5>Plus UI Design</h5>h6. Plus UI Design heading
<h6>Plus UI Design</h6>H3 Plus UI Design With secondary text
<h3>Plus UI Design</h3><small class="text-muted">With secondary text</small>
Display 1
<h1 class="display-1">Plus UI Design</h1>Display 2
<h1 class="display-2">Plus UI Design</h1>Display 3
<h1 class="display-3">Plus UI Design</h1>Display 4
<h1 class="display-4">Plus UI Design</h1>Body text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor ...</p>You can use the mark tag to highlight text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>This line of text is meant to be treated as deleted text.
<p><del>You can use the mark tag to <mark>highlight</mark> text.</del></p>This line of text is meant to be treated as no longer accurate.
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>This line of text will render as underlined
<p><u>This line of text will render as underlined</u></p>This line of text is meant to be treated as fine print.
<p><small>This line of text is meant to be treated as fine print.</small></p>This line rendered as bold text.
<p><strong>This line rendered as bold text.</strong></p>This line rendered as italicized text.
<p><em>This line rendered as italicized text.</em></p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>Forms
Buttons
Button Variants
<a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit"><input class="btn btn-primary" type="reset" value="Reset">
Button Sizes
Soft Buttons
Ghost Buttons
Button with icon
Square
Cards
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.