diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 68 |
1 files changed, 58 insertions, 10 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 47dff40e7..750bbd2b3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -92,8 +92,8 @@ <thead> <tr> <th>Element</th> - <th>Description</th> <th>Usage</th> + <th>Optional</th> </tr> </thead> <tbody> @@ -175,24 +175,72 @@ <!-- Blockquotes --> <h2>Blockquotes</h2> + <table class="bordered-table"> + <thead> + <tr> + <th>Element</th> + <th>Usage</th> + <th>Optional</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><blockquote></code> + </td> + <td> + Block-level element for quoting content from another source + </td> + <td> + <p>Add <code>cite</code> attribute for source URL</p> + Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options + </td> + </tr> + <tr> + <td> + <code><small></code> + </td> + <td> + Optional element for adding a user-facing citation, typically an author with title of work + </td> + <td> + Place the <code><cite></code> around the title or name of source + </td> + </tr> + </tbody> + </table> <div class="row"> - <div class="span5"> - <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Someone famous</small> - </blockquote> + <div class="span4"> + <p>To include a blockquote, wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p> + <p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p> </div> - <div class="span7"> + <div class="span8"> <pre class="prettyprint linenums"> <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Dr. Julius Hibbert</small> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> </blockquote> </pre> </div> + </div><!--/row--> + + <h3>Example blockquotes</h3> + <div class="row"> + <div class="span6"> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> + </blockquote> + </div> + <div class="span6"> + <blockquote class="pull-right"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> + </blockquote> + </div> </div> + <!-- Lists --> <h2>Lists</h2> <div class="row"> |