Add Welcome section to docs

* Fixes unrelated typo in readme
* Add new Welcome section with history, team, callouts, and community
subsections
* Redesigns callouts to be a bit lighterweight with colored headings

diff --git a/README.md b/README.md
index 29d7e99034ac6d31526c7013a54d0302cd1f63d5..fa1235a3df9c9781f974364cf40495f5859df3bf 100644 (file)
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@ Editor preferences are available in the [editor config](.editorconfig) for easy
 Keep track of development and community news.
 
 * Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
-* Read and subscribe to the [The Official Bootstrap Blog](http://blog.getbootstrap.com).
+* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
 * Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
 * Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
 

diff --git a/_includes/nav-getting-started.html b/_includes/nav-getting-started.html
index 243c05fb05175f064bfd34a90076761946351d75..c06896e6a5c4721e9f9e16c7b6a1337c983a7667 100644 (file)
--- a/_includes/nav-getting-started.html
+++ b/_includes/nav-getting-started.html
@@ -1,3 +1,12 @@
+<li>
+  <a href="#welcome">Welcome</a>
+  <ul class="nav">
+    <li><a href="#welcome-history">Brief history</a></li>
+    <li><a href="#welcome-core-team">Core team</a></li>
+    <li><a href="#welcome-callouts">Callouts</a></li>
+    <li><a href="#welcome-community">Community</a></li>
+  </ul>
+</li>
 <li>
   <a href="#download">Download Bootstrap</a>
   <ul class="nav">

diff --git a/assets/css/docs.css b/assets/css/docs.css
index 2b800732d5dd55dd29e12cfde9daf2f4d376f599..0979af07c6560b7623f8b979e767894626015afd 100644 (file)
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -514,33 +514,79 @@ h1[id] {
 
 /* Common styles for all types */
 .bs-callout {
+  /*position: relative;*/
   margin: 20px 0;
-  padding: 15px 30px 15px 15px;
-  border-left: 5px solid #eee;
+  padding: 20px;
+  border-left: 3px solid #eee;
+  /*border-width: 1px 1px 1px 10px;*/
 }
+/*.bs-callout:before {
+  position: absolute;
+  top: 0;
+  left: -20px;
+  color: #fff;
+  width: 20px;
+  height: 20px;
+}*/
 .bs-callout h4 {
   margin-top: 0;
+  margin-bottom: 5px;
 }
 .bs-callout p:last-child {
   margin-bottom: 0;
 }
 .bs-callout code,
 .bs-callout .highlight {
-  background-color: #fff;
+  /*background-color: #fff;*/
 }
 
 /* Variations */
 .bs-callout-danger {
-  background-color: #fcf2f2;
-  border-color: #dFb5b4;
+  background-color: #fdf7f7;
+  border-color: #eed3d7;
+}
+.bs-callout-danger h4 {
+  color: #b94a48;
 }
 .bs-callout-warning {
-  background-color: #fefbed;
-  border-color: #f1e7bc;
+  background-color: #faf8f0;
+  border-color: #faebcc;
+}
+.bs-callout-warning h4 {
+  color: #c09853;
 }
 .bs-callout-info {
-  background-color: #f0f7fd;
-  border-color: #d0e3f0;
+  background-color: #f4f8fa;
+  border-color: #bce8f1;
+}
+.bs-callout-info h4 {
+  color: #3a87ad;
+}
+
+
+/*
+ * Team members
+ *
+ * Avatars, names, and usernames for core team.
+ */
+
+.bs-team .team-member {
+  color: #555;
+  line-height: 32px;
+}
+.bs-team .team-member:hover {
+  color: #333;
+  text-decoration: none;
+}
+.bs-team iframe {
+  float: right;
+  margin-top: 6px;
+}
+.bs-team img {
+  float: left;
+  width: 32px;
+  margin-right: 10px;
+  border-radius: 4px;
 }
 
 

diff --git a/getting-started.html b/getting-started.html
index 5986f43eb149560ed4b451432af8a37221e6b9c4..146063590ce294920c7f654746874d6264384724 100644 (file)
--- a/getting-started.html
+++ b/getting-started.html
@@ -7,6 +7,72 @@ base_url: "../"
 ---
 
 
+  <!-- Welcome
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="welcome">Welcome!</h1>
+    </div>
+    <p class="lead">You're looking at the official documentation for Bootstrap, a front-end framework for building on the Web. Get the background story on Bootstrap, useful tidbits about the docs, helpful community links, and more.</p>
+
+    <h2 id="welcome-history">Brief history</h3>
+    <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Before being an open source framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held it's <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded. It served as the style guide for internal tools development at the company for over a year before it's public release.</p>
+    <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952">Friday, August 19, 2011</a>, we've had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3.</p>
+
+    <h2 id="welcome-core-team">Core team</h2>
+    <p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
+    <div class="list-group bs-team">
+      <a class="list-group-item team-member" href="https://github.com/mdo">
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&type=follow" width="120" height="20"></iframe>
+        <img src="https://0.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c?d=https%3A%2F%2Fidenticons.github.com%2F10339ec809c5a79dbf25614ba22eee40.png" alt="@mdo">
+        <strong>Mark Otto</strong> <small>@mdo</small>
+      </a>
+      <a class="list-group-item team-member" href="https://github.com/fat">
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=fat&type=follow" width="120" height="20"></iframe>
+        <img src="https://2.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8?d=https%3A%2F%2Fidenticons.github.com%2F313701b540df992682dccc8f70dc12a0.png" alt="@fat">
+        <strong>Jacob Thornton</strong> <small>@fat</small>
+      </a>
+      <a class="list-group-item team-member" href="https://github.com/juthilo">
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=cvrebert&type=follow" width="120" height="20"></iframe>
+        <img src="https://0.gravatar.com/avatar/edec428c425453955f770095a7d26c50?d=https%3A%2F%2Fidenticons.github.com%2F1b08c04e9008c9f801938b05a1bb8d88.png" alt="@cvrebert">
+        <strong>Chris Rebert</strong> <small>@cvrebert</small>
+      </a>
+      <a class="list-group-item team-member" href="https://github.com/juthilo">
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=juthilo&type=follow" width="120" height="20"></iframe>
+        <img src="https://0.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11?d=https%3A%2F%2Fidenticons.github.com%2Fafd0c2227d136850c00b96f7359a70c6.png" alt="@juthilo">
+        <strong>Julian Thilo</strong> <small>@juthilo</small>
+      </a>
+    </div>
+    <p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for more information.</p>
+
+    <h2 id="welcome-callouts">Callouts</h2>
+    <p>We use callouts throughout the docs to direct attention to important contextual information. These callouts can be informative and optional (blue), warnings (yellow), or dangerously important (red).</p>
+    <div class="bs-callout bs-callout-info">
+      <h4>Extra information</h4>
+      <p>These are helpful notes that provide background information or additional context.</p>
+    </div>
+    <div class="bs-callout bs-callout-warning">
+      <h4>Heads up</h4>
+      <p>This is a warning used to highlight pertinent, though not necessarily required, information.</p>
+    </div>
+    <div class="bs-callout bs-callout-danger">
+      <h4>Potential danger ahead</h4>
+      <p>Pay attention to these for potentially dangerous or tricky requirements, bugs, and more.</p>
+    </div>
+    <p>See something worth calling out? Let us know with an <a href="https://github.com/twbs/bootstrap/issues/new">issue on GitHub</a>.</p>
+
+    <h2 id="welcome-community">Community</h2>
+    <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
+    <ul>
+      <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
+      <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
+      <li>Chat with fellow Bootstrappers in IRC. On the <code>irc.freenode.net</code> server, in the <code>##twitter-bootstrap</code> channel.</li>
+      <li>Find inspiring examples of Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
+    </ul>
+    <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
+  </div>
+
+
   <!-- Getting started
   ================================================== -->
   <div class="bs-docs-section">
@@ -55,6 +121,7 @@ base_url: "../"
     </div>
   </div>
 
+
   <!-- File structure
   ================================================== -->
   <div class="bs-docs-section">