mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 21:49:09 +01:00
Code Issues Releases Wiki Activity

big brand update

Browse Source
This commit is contained in:
Mark Otto 2013-12-27 14:04:44 -08:00
parent 87288da72c
commit 84326a3e59
3 changed files with 126 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/nav-about.html
View File

@ -1,3 +1,6 @@
<li>
<a href="#brand">Brand guidelines</a>
</li>
<li>
<a href="#history">History</a>
</li>

48
about.html
View File

@ -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>

112
docs-assets/css/docs.css
View File

@ -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
@ -1257,38 +1269,80 @@ h1[id] {
}
/*
* Brand guidelines
*
* Extra styles for displaying wordmarks, logos, etc.
*/
/* Logo series wrapper */
.bs-brand-logos {
display: table;
width: 100%;
margin-bottom: 15px;
overflow: hidden;
color: #563d7c;
background-color: #f9f9f9;
border-radius: 4px;
}
/* Individual items */
.bs-brand-item {
display: table-cell;
width: 1%;
padding: 60px 0;
text-align: center;
}
.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-logos .default,
.bs-brand-logos .inverse {
float: left;
width: 50%;
}
*/}
/*
* Miscellaneous
*
* Odds and ends for optimum docs display.
*/
/* About page */
.bs-about {
font-size: 16px;
}
.bs-brand {
padding-top: 15px;
overflow: hidden; /* clearfix */
border-radius: 4px;
}
.bs-brand:after {
display: none;
}
.bs-brand h1 {
margin: 40px 0;
font-size: 70px;
text-align: center;
color: #563d7c;
}
@media (min-width: 768px) {
.bs-brand h1 {
float: left;
width: 50%;
}
}
/* Examples gallery: space out content better */
.bs-examples .thumbnail {
margin-bottom: 10px;
@ -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;
}