From 3f512adf953da3a3fbbfca18b138fb6659f2b77f Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 30 Oct 2011 20:14:27 -0700
Subject: [PATCH] updated docs and type styles for blockquotes and a few fixes
for type
---
bootstrap.css | 8 ++++-
bootstrap.min.css | 1 +
docs/assets/css/docs.css | 3 +-
docs/base-css.html | 68 ++++++++++++++++++++++++++++++++------
docs/index.html | 70 +---------------------------------------
docs/scaffolding.html | 2 +-
lib/type.less | 9 ++++++
7 files changed, 78 insertions(+), 83 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index ec9217a21b..ca2bfe0b19 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Oct 28 18:37:59 PDT 2011
+ * Date: Sun Oct 30 20:12:53 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -490,6 +490,12 @@ blockquote small {
blockquote small:before {
content: '\2014 \00A0';
}
+blockquote.pull-right {
+ float: right;
+}
+blockquote.pull-right p, blockquote.pull-right small {
+ text-align: right;
+}
address {
display: block;
line-height: 18px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 7eb8efe2fa..776cb6e7bb 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -85,6 +85,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;}
blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 52738d808b..185f381e92 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -164,7 +164,6 @@ body > .navbar-fixed .brand:hover {
.marketing h2,
.marketing h3 {
font-weight: 300;
- color: #000;
}
.marketing h2 {
margin-bottom: 9px;
@@ -175,6 +174,7 @@ body > .navbar-fixed .brand:hover {
.marketing .icon {
float: left;
margin: 7px 10px 0 0;
+ opacity: .8;
}
.marketing .small-icon {
float: left;
@@ -300,7 +300,6 @@ pre.prettyprint {
margin-bottom: 0;
}
-
.browser-support {
max-width: 100%;
}
diff --git a/docs/base-css.html b/docs/base-css.html
index 47dff40e72..750bbd2b3b 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">
diff --git a/docs/index.html b/docs/index.html
index e712f6ed05..7b91315029 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -38,41 +38,6 @@
<li><a href="./components.html">Components</a></li>
<li><a href="./javascript.html">Javascript plugins</a></li>
<li><a href="./less.html">Using LESS</a></li>
-
-<!--
- <li class="active"><a href="#overview">Overview</a></li>
- <li><a href="#about">About</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
- <ul class="dropdown-menu">
- <li><a href="#grid-system">Grid</a></li>
- <li><a href="#layouts">Layouts</a></li>
- <li><a href="#responsive">Resposive</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
- <ul class="dropdown-menu">
- <li><a href="#typography">Type</a></li>
- <li><a href="#tables">Tables</a></li>
- <li><a href="#forms">Forms</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
- <ul class="dropdown-menu">
- <li><a href="#media">Media</a></li>
- <li><a href="#navigation">Navigation</a></li>
- <li><a href="#alerts">Alerts</a></li>
- <li><a href="#popovers">Popovers</a></li>
- <li><a href="#autocomplete">Autocomplete</a></li>
- <li><a href="#accordion">Accordion</a></li>
- <li><a href="#datepicker">Datepicker</a></li>
- </ul>
- </li>
- <li><a href="#javascript">Javascript</a></li>
- <li><a href="#less">Using Less</a></li>
--->
</ul>
</div>
</div>
@@ -204,40 +169,7 @@
</div>
- <!-- About Bootstrap
- ================================================== -->
- <section id="about" style="display: none;">
- <div class="row">
- <div class="span4">
- <h2>Built for and by nerds</h2>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- </div>
- <div class="span4">
- <h2>Cross-everything</h2>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span4">
- <h2>What's included</h2>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
- </section>
+
<!-- <h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index de612a0746..4a5aa9a0b0 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -221,7 +221,7 @@
<div class="row">
<div class="span6">
<h2>Fixed layout</h2>
- <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
+ <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
diff --git a/lib/type.less b/lib/type.less
index 7f8044cd81..421d666a47 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -160,6 +160,15 @@ blockquote {
content: '\2014 \00A0';
}
}
+
+ // Float right with text-align: right
+ &.pull-right {
+ float: right;
+ p,
+ small {
+ text-align: right;
+ }
+ }
}
// Addresses
--
GitLab