Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs - Getting started: refactor 'Customizing Bootstrap' #10459

Merged
merged 5 commits into from
Sep 6, 2013
Merged

Docs - Getting started: refactor 'Customizing Bootstrap' #10459

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63b61ee
Docs - Getting started: refactor 'Customizing Bootstrap'
StevenBlack Sep 5, 2013
f1fba93
Better wording, avoiding 'invoke', and misc edits
StevenBlack Sep 5, 2013
e94b790
Standardizing on LESS (uppercase) and avoiding the word 'less' where …
StevenBlack Sep 5, 2013
bdb9fd9
Removed the '.' from '.LESS' in two instances.
StevenBlack Sep 5, 2013
0067399
Fixed two more instances of [.]LESS in the text
StevenBlack Sep 5, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 18 additions & 24 deletions getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ <h4>jQuery required</h4>
</div>



<!-- Template
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -127,7 +126,6 @@ <h1>Hello, world!</h1>
</div>



<!-- Template
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -261,7 +259,6 @@ <h4>Bootstrap theme</h4>
</div>



<!-- Template
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -289,7 +286,6 @@ <h3>Bootstrap template with responsiveness disabled</h3>
</div>



<!-- Migration
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -645,7 +641,6 @@ <h2 id="migration-notes">Additional notes</h2>
</div>



<!-- Browser support
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -760,7 +755,6 @@ <h3>Browser zooming</h3>
</div>



<!-- Third party support
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -818,7 +812,6 @@ <h3>Box-sizing</h3>
</div>



<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -851,7 +844,6 @@ <h3>Additional resources</h3>
</div>



<!-- License FAQs
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -897,32 +889,32 @@ <h4>It does not require you to:</h4>
</div><!-- /.bs-docs-section -->




<div class="bs-docs-section">
<div class="page-header">
<h1 id="customizing">Customizing Bootstrap</h1>
</div>
<p class="lead">Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also familiarizing yourself to the intricacies of the framework.</p>
<p class="lead">A customized instance of Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes future upgrades easier.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a fan of terming it an "instance", but maybe that's just me.


<p>Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
<p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its theme and components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since Bootstrap currently refers to its included optional theme as "the theme" (or other similarly generic phrasing), but not everyone who customizes Bootstrap will necessarily build on top of that theme, the "its theme" phrasing here is potentially misleading/confusing.


<div class="bs-callout bs-callout-info">
<h4>Compiled or minified?</h4>
<p>Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.</p>
<p>Unless you plan on reading the CSS, go with minified stylesheets. It's the same code, just compacted. Minified styles use less bandwidth, which is good, especially in production environments.</p>
</div>

<p>From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
<p>From there, include whatever Bootstrap components and HTML content you need to create templates for your site's pages.</p>

<h3>Customizing components</h3>
<p>You can customize components to varying degrees, but most fall into two camps: light customizations and complete visual overhauls. Luckily, plenty examples of both are available.</p>
<p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
<p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
<p>You can customize components to varying degrees, but most fall into two camps: <em>light customizations</em> and <em>overhauls</em>. Plenty examples of both are available from third parties.</p>
<p>We define <em>light customizations</em> as superficial changes, for example, color and font changes to existing Bootstrap components. A light customization example is the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by <a href="https://twitter.com/mdo">@mdo</a>). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
<p>The stock Bootstrap buttons require just one class, <code>.btn</code>, to start. Here we extend the <code>.btn</code> style with a new modifier class, <code>.btn-ttc</code>, that we will create. This gives us a distinct custom look with minimal effort.</p>
<p>Our customized button will be invoked like this:</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, I would avoid "invoked". (I kinda doubt it's non-native-speaker-friendly either.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're right. Let's use 'apply' instead.

Sent from mobile

On 2013-09-05, at 12:37 AM, Chris Rebert [email protected] wrote:

In getting-started.html:

 <h3>Customizing components</h3>

  • You can customize components to varying degrees, but most fall into two camps: light customizations and complete visual overhauls. Luckily, plenty examples of both are available.

  • We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

  • Instead of using the provided Bootstrap buttons, which only require just one class to start, .btn, we'll add our own modifier class, .btn-ttc. This will give us a slightly custom look with minimal effort.

  • You can customize components to varying degrees, but most fall into two camps: light customizations and overhauls. Plenty examples of both are available from third parties.

  • We define light customizations as superficial changes, for example, color and font changes to existing Bootstrap components. A light customization example is the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

  • The stock Bootstrap buttons require just one class, .btn, to start. Here we extend the .btn style with a new modifier class, .btn-ttc, that we will create. This gives us a distinct custom look with minimal effort.

  • Our customized button will be invoked like this:

Again, I would avoid "invoked". (I kinda doubt it's non-native-speaker-friendly either.)

—
Reply to this email directly or view it on GitHub.

{% highlight html %}
<button type="button" class="btn btn-ttc">Save changes</button>
{% endhighlight %}
<p>Note how <code>.btn-ttc</code> is added to the standard <code>.btn</code> class.</p>

<p>In the custom stylesheet, add the following CSS:</p>
<p>To implement this, in the custom stylesheet, add the following CSS:</p>

{% highlight css %}
/* Custom button
Expand Down Expand Up @@ -953,21 +945,23 @@ <h3>Customizing components</h3>
}
{% endhighlight %}

<p>Customizing Bootstrap components takes time, but should be straightforward. <strong>Look to the source code often and duplicate the selectors you need for your modifications.</strong> Placing them after the Bootstrap source makes for easy overriding without complication. <strong>To recap, here's the basic workflow:</strong></p>
<p>In short: Look to the style source and duplicate the selectors you need for your modifications.</p>
<p><strong>In summary, here's the basic workflow:</strong></p>
<ul>
<li>For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is. For instance, to customize the navbar background, just snag <code>.navbar</code>.</li>
<li>Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using <code>!important</code> here.</li>
<li>For each element you want to customize, find its code in the compiled Bootstrap CSS.</li>
<li>Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the <code>.navbar</code> style specificaton.</li>
<li>In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending <code>!important</code> here. Keep it simple.</li>
<li>Rinse and repeat until you're happy with your customizations.</li>
</ul>
<p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
<p>Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved. But the same principle applies: invoke Bootstrap's default stylesheet first, then invoke your custom stylesheets.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"include" would make more sense than "invoke", IMO. CSS isn't a programming language per se.


<div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
<p>For more advanced Bootstrap developers, you could use one of two alternate methods for customization. The first is modifying the source .less files (and potentially making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
</div>

<h3>Removing potential bloat</h3>
<p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth literally becomes a financial issue. We encourage folks to remove whatever is unused with our <a href="../customize/">Customizer</a>.</p>
<p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our <a href="../customize/">Customizer</a>.</p>
<p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>

</div>