big brand update

diff --git a/_includes/nav-about.html b/_includes/nav-about.html
index f0f4a5b8a67d86e111157bcd371dd4245318623f..345ef164d31318c04a0d0c0db74f6f9f4a34d584 100644 (file)
--- a/_includes/nav-about.html
+++ b/_includes/nav-about.html
@@ -1,3 +1,6 @@
+<li>
+  <a href="#brand">Brand guidelines</a>
+</li>
 <li>
   <a href="#history">History</a>
 </li>

diff --git a/about.html b/about.html
index ea0e2f31dd52dbeba0bb885ff1dd455de147ee52..a61098d21a1103842d4f3c3aeb9d22bfb277d7fd 100644 (file)
--- a/about.html
+++ b/about.html
@@ -13,17 +13,55 @@ base_url: "../"
   <div class="page-header">
     <h1 id="brand">Brand guidelines</h1>
   </div>
-  <p class="lead">Interested in using Bootstrap's brand resources? Great! We have only a few guidelines we ask you to follow.</p>
+  <p class="lead">Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by Mailchimp's <a href="http://mailchimp.com/about/brand-assets/" target="_blank">Brand Assets</a>.</p>
 
-  <h2>Logo</h2>
-  <p>Extremely simple in that it's pure web type, Bootstrap's logo (if you want to call it that) should only appear as Helvetica Neue Bold. You may display it in full as Bootstrap or abbreviated as a capitalized "B". <strong>Do not use the Twitter bird.</strong></p>
-  <div class="bs-example bs-brand">
-    <h1>Bootstrap</h1>
+  <h2>Mark and logo</h2>
+  <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <div class="bs-booticon bs-booticon-lg">B</div>
+    </div>
+    <div class="bs-brand-item inverse">
+      <div class="bs-booticon bs-booticon-lg bs-booticon-inverse">B</div>
+    </div>
+  </div>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h1>Bootstrap</h1>
+    </div>
+    <div class="bs-brand-item inverse">
+      <h1>Bootstrap</h1>
+    </div>
   </div>
 
   <h2>Name</h2>
+  <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations save for one, a capital <strong>B</strong>.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h3>Bootstrap</h3>
+      <span class="glyphicon glyphicon-ok"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">BootStrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">Twitter Bootstrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+  </div>
 
   <h2>Colors</h2>
+  <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p>
+  <div class="bs-brand">
+    <div class="color-swatches">
+      <div class="color-swatch bs-purple"></div>
+      <div class="color-swatch bs-purple-light"></div>
+      <div class="color-swatch bs-purple-lighter"></div>
+      <div class="color-swatch bs-gray"></div>
+    </div>
+  </div>
+
 </div>
 
 

diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index a4e6b2891052bd2edf5266a703ddb021e639aa3c..9a56e59097b05c15dde84a7fe9a4320b7b644d5f 100644 (file)
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -102,6 +102,10 @@ body {
   font-size: 108px;
   line-height: 140px;
 }
+.bs-booticon-inverse {
+  color: #563d7c;
+  background-color: #fff;
+}
 
 
 /*
@@ -676,6 +680,8 @@ h1[id] {
   margin: 0 5px;
   border-radius: 3px;
 }
+
+/* Framework colors */
 .color-swatches .gray-darker   { background-color: #222; }
 .color-swatches .gray-dark     { background-color: #333; }
 .color-swatches .gray          { background-color: #555; }
@@ -687,6 +693,12 @@ h1[id] {
 .color-swatches .brand-danger  { background-color: #d9534f; }
 .color-swatches .brand-info    { background-color: #5bc0de; }
 
+/* Docs colors */
+.color-swatches .bs-purple          { background-color: #563d7c; }
+.color-swatches .bs-purple-light    { background-color: #c7bfd3; }
+.color-swatches .bs-purple-lighter  { background-color: #e5e1ea; }
+.color-swatches .bs-gray            { background-color: #f9f9f9; }
+
 
 /*
  * Team members
@@ -1258,36 +1270,78 @@ h1[id] {
 
 
 /*
- * Miscellaneous
+ * Brand guidelines
  *
- * Odds and ends for optimum docs display.
+ * Extra styles for displaying wordmarks, logos, etc.
  */
 
- /* About page */
- .bs-about {
-  font-size: 16px;
- }
-
-.bs-brand {
-  padding-top: 15px;
-  overflow: hidden; /* clearfix */
+/* Logo series wrapper */
+.bs-brand-logos {
+  display: table;
+  width: 100%;
+  margin-bottom: 15px;
+  overflow: hidden;
+  color: #563d7c;
+  background-color: #f9f9f9;
   border-radius: 4px;
 }
-.bs-brand:after {
-  display: none;
-}
-.bs-brand h1 {
-  margin: 40px 0;
-  font-size: 70px;
+
+/* Individual items */
+.bs-brand-item {
+  display: table-cell;
+  width: 1%;
+  padding: 60px 0;
   text-align: center;
-  color: #563d7c;
 }
+.bs-brand-item + .bs-brand-item {
+  border-left: 1px solid #fff;
+}
+.bs-brand-logos .inverse {
+  color: #fff;
+  background-color: #563d7c;
+}
+
+/* Heading content within */
+.bs-brand-item h1,
+.bs-brand-item h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.bs-brand-item h1 {
+  font-size: 60px;
+}
+.bs-brand-item .bs-booticon {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Make the icons stand out on what is/isn't okay */
+.bs-brand-item .glyphicon {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  line-height: 30px;
+  color: #fff;
+  border-radius: 50%;
+}
+.bs-brand-item .glyphicon-ok { background-color: #5cb85c; }
+.bs-brand-item .glyphicon-remove { background-color: #d9534f; }
+
+
 @media (min-width: 768px) {
-  .bs-brand h1 {
+/*  .bs-brand-logos .default,
+  .bs-brand-logos .inverse {
     float: left;
     width: 50%;
   }
-}
+*/}
+
+
+/*
+ * Miscellaneous
+ *
+ * Odds and ends for optimum docs display.
+ */
 
 /* Examples gallery: space out content better */
 .bs-examples .thumbnail {
@@ -1308,9 +1362,3 @@ h1[id] {
   -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
        box-shadow: 0 0 8px rgba(82,168,236,.6);
 }
-
-/* Better spacing on download options in getting started */
-.bs-docs-dl-options h4 {
-  margin-top: 15px;
-  margin-bottom: 5px;
-}