From 63b61eea7fcc90db2f1839bc2cb660fee4f81075 Mon Sep 17 00:00:00 2001 From: Steven Black Date: Wed, 4 Sep 2013 23:39:57 -0400 Subject: [PATCH 1/5] Docs - Getting started: refactor 'Customizing Bootstrap' --- getting-started.html | 42 ++++++++++++++++++------------------------ 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/getting-started.html b/getting-started.html index 4583e2dd94d7..5890a2ca8924 100644 --- a/getting-started.html +++ b/getting-started.html @@ -89,7 +89,6 @@

jQuery required

-
@@ -127,7 +126,6 @@

Hello, world!

-
@@ -261,7 +259,6 @@

Bootstrap theme

-
@@ -289,7 +286,6 @@

Bootstrap template with responsiveness disabled

-
@@ -645,7 +641,6 @@

Additional notes

-
@@ -760,7 +755,6 @@

Browser zooming

-
@@ -818,7 +812,6 @@

Box-sizing

-
@@ -851,7 +844,6 @@

Additional resources

-
@@ -897,32 +889,32 @@

It does not require you to:

- -

Customizing Bootstrap

-

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.

+

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.

-

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.

+

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.

Compiled or minified?

-

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.

+

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.

-

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.

+

From there, include whatever Bootstrap components and HTML content you need to create templates for your site's pages.

Customizing components

-

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:

{% highlight html %} {% endhighlight %} +

Note how .btn-ttc is added to the standard .btn class.

-

In the custom stylesheet, add the following CSS:

+

To implement this, in the custom stylesheet, add the following CSS:

{% highlight css %} /* Custom button @@ -953,21 +945,23 @@

Customizing components

} {% endhighlight %} -

Customizing Bootstrap components takes time, but should be straightforward. Look to the source code often and duplicate the selectors you need for your modifications. Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:

+

In short: Look to the style source and duplicate the selectors you need for your modifications.

+

In summary, here's the basic workflow:

-

Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.

+

Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like Karma, 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.

Alternate customization methods

-

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 your own classes via mixins. For the time being, neither of those options are documented here.

+

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 your own classes via mixins. For the time being, neither of those options are documented here.

Removing potential bloat

-

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 Customizer.

+

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 Customizer.

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.

From f1fba93c1ed778e98e866cb809ddc3df109d42bd Mon Sep 17 00:00:00 2001 From: Steven Black Date: Thu, 5 Sep 2013 08:53:50 -0400 Subject: [PATCH 2/5] Better wording, avoiding 'invoke', and misc edits --- getting-started.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/getting-started.html b/getting-started.html index 5890a2ca8924..3ede3230c419 100644 --- a/getting-started.html +++ b/getting-started.html @@ -893,9 +893,9 @@

It does not require you to:

Customizing Bootstrap

-

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.

+

Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.

-

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.

+

Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.

Compiled or minified?

@@ -908,7 +908,7 @@

Customizing components

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:

+

Our customized button will be coded like this:

{% highlight html %} {% endhighlight %} @@ -953,7 +953,7 @@

Customizing components

  • In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending !important here. Keep it simple.
  • Rinse and repeat until you're happy with your customizations.
    • -

    Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like Karma, 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.

    +

    Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved. But the same principle applies: include Bootstrap's default stylesheet first, then apply your custom stylesheet.

    Alternate customization methods

    From e94b790e642976d2de53c58f1673dcf166807a87 Mon Sep 17 00:00:00 2001 From: Steven Black Date: Thu, 5 Sep 2013 09:09:20 -0400 Subject: [PATCH 3/5] Standardizing on LESS (uppercase) and avoiding the word 'less' where that's easy and sensible. --- getting-started.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/getting-started.html b/getting-started.html index 3ede3230c419..ffc4ea9e0be9 100644 --- a/getting-started.html +++ b/getting-started.html @@ -24,7 +24,7 @@

    Additional downloads

    Download source code

    -

    Get the latest Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.

    +

    Get the latest Bootstrap .LESS and JavaScript source code by downloading it directly from GitHub.

    Clone or fork via GitHub

    @@ -50,8 +50,8 @@

    Bootstrap CDN

    {% endhighlight %}
    -

    Compiling Bootstrap's LESS files

    -

    If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For LESS compilation, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

    +

    Compiling Bootstrap's .LESS files

    +

    If you work with Bootstrap's uncompiled source code, you need to compile the .LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

    @@ -647,13 +647,13 @@

    Additional notes

    Browser support

    -

    Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.

    +

    Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

    Supported browsers

    Specifically, we support the latest versions of the following:

    • Chrome (Mac, Windows, iOS, and Android)
      • -
    • Safari (Mac and iOS only, as Windows has more or less been discontinued)
      • +
    • Safari (Mac and iOS only, as the Windows version is being abandoned)
    • Firefox (Mac, Windows)
    • Internet Explorer
    • Opera (Mac, Windows)
      • @@ -770,8 +770,8 @@

      Box-sizing

      /* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to - * global box model settings of Bootstrap. Two options—individual overrides and - * region resets—are available as plain CSS and Less. + * global box model settings of Bootstrap. Two options, individual overrides and + * region resets, are available as plain CSS and uncompiled LESS formats. */ /* Option 1A: Override a single element's box model via CSS */ @@ -781,7 +781,7 @@

      Box-sizing

      box-sizing: content-box; } -/* Option 1B: Override a single element's box model via Bootstrap Less mixin */ +/* Option 1B: Override a single element's box model by using a Bootstrap LESS mixin */ .element { .box-sizing(content-box); } @@ -796,7 +796,7 @@

      Box-sizing

      box-sizing: content-box; } -/* Option 2B: Reset an entire region via custom Less mixin */ +/* Option 2B: Reset an entire region with a custom LESS mixin */ .reset-box-sizing { &, *, @@ -957,7 +957,7 @@

      Customizing components

      Alternate customization methods

      -

      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 your own classes via mixins. For the time being, neither of those options are documented here.

      +

      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 your own classes via mixins. For the time being, neither of those options are documented here.

      Removing potential bloat

      From bdb9fd9a7c3960d24784c2e7a5ba701f3abe88c6 Mon Sep 17 00:00:00 2001 From: Steven Black Date: Thu, 5 Sep 2013 13:43:04 -0400 Subject: [PATCH 4/5] Removed the '.' from '.LESS' in two instances. --- getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/getting-started.html b/getting-started.html index ffc4ea9e0be9..fd83ba5467cf 100644 --- a/getting-started.html +++ b/getting-started.html @@ -24,7 +24,7 @@

      Additional downloads

      Download source code

      -

      Get the latest Bootstrap .LESS and JavaScript source code by downloading it directly from GitHub.

      +

      Get the latest Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.

      Clone or fork via GitHub

      @@ -50,7 +50,7 @@

      Bootstrap CDN

      {% endhighlight %}
      -

      Compiling Bootstrap's .LESS files

      +

      Compiling Bootstrap's LESS files

      If you work with Bootstrap's uncompiled source code, you need to compile the .LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

    From 00673991af034e2a0da03f72ac95683cea66e60d Mon Sep 17 00:00:00 2001 From: Steven Black Date: Thu, 5 Sep 2013 14:03:43 -0400 Subject: [PATCH 5/5] Fixed two more instances of [.]LESS in the text --- getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/getting-started.html b/getting-started.html index fd83ba5467cf..add36601211b 100644 --- a/getting-started.html +++ b/getting-started.html @@ -51,7 +51,7 @@

    Bootstrap CDN

    Compiling Bootstrap's LESS files

    -

    If you work with Bootstrap's uncompiled source code, you need to compile the .LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

    +

    If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

    @@ -957,7 +957,7 @@

    Customizing components

    Alternate customization methods

    -

    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 your own classes via mixins. For the time being, neither of those options are documented here.

    +

    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 your own classes via mixins. For the time being, neither of those options are documented here.

    Removing potential bloat