From 66c280c8558e4cb0e81711e00c3894005d9b68ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Dec 2013 21:02:25 -0800 Subject: [PATCH 1/8] Sass docs; LESS to Less because fuck caps --- _includes/nav-css.html | 9 ++ _layouts/default.html | 3 + css.html | 183 ++++++++++++++++++++++++++++++++++++++--- 3 files changed, 185 insertions(+), 10 deletions(-) diff --git a/_includes/nav-css.html b/_includes/nav-css.html index 55d46d8b59..1d875db4c7 100644 --- a/_includes/nav-css.html +++ b/_includes/nav-css.html @@ -117,3 +117,12 @@
  • Utility mixins
    • +
  • + Using Sass + +
    • diff --git a/_layouts/default.html b/_layouts/default.html index bcec8661c7..63022fea63 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -23,6 +23,9 @@ {% include old-bs-docs.html %}
    + +
    +

    Media queries

    -

    We use the following media queries in our LESS files to create the key breakpoints in our grid system.

    +

    We use the following media queries in our Less files to create the key breakpoints in our grid system.

    {% highlight css %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -447,8 +447,8 @@ base_url: "../"
    {% endhighlight %} -

    LESS mixins and variables

    -

    In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.

    +

    Less mixins and variables

    +

    In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.

    Variables

    Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

    @@ -726,9 +726,9 @@ base_url: "../"

    ...

    {% endhighlight %} - +

    Built with Less

    -

    The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

    +

    The typographic scale is based on two Less variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

    @@ -2817,9 +2817,9 @@ For example, <section> should be wrapped as inline. ================================================== -->
    -

    Using LESS

    +

    Using Less

    -

    Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

    +

    Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

    Grid variables and mixins are covered within the Grid system section.

    @@ -2870,7 +2870,7 @@ For example, <section> should be wrapped as inline. background-color: @brand-primary; } -// Reassigned variables in LESS +// Reassigned variables in Less @alert-message-background: @brand-info; .alert { background-color: @alert-message-background; @@ -2903,7 +2903,7 @@ a { } } {% endhighlight %} -

    Note that the @link-color-hover uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

    +

    Note that the @link-color-hover uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

    Typography

    Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

    @@ -3303,3 +3303,166 @@ a { } {% endhighlight %}
    + + + + +
    +
    +

    Using Sass

    +
    +

    While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

    + +

    Installation

    +

    Use the appropriate guide for your environment of choice.

    + + +

    Rails

    + +

    bootstrap-sass is easy to drop into Rails with the asset pipeline.

    + +

    In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present—it is added to new Rails applications by default.

    + +{% highlight ruby %} +gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 +gem 'bootstrap-sass', '~> 3.0.3.0' +{% endhighlight %} + +

    bundle install and restart your server to make the files available through the pipeline.

    + + +

    Compass without Rails

    + +

    Install the gem:

    + +{% highlight bash %} +gem install bootstrap-sass +{% endhighlight %} + +

    If you have an existing Compass project:

    + +{% highlight ruby %} +# config.rb: +require 'bootstrap-sass' +{% endhighlight %} + +{% highlight bash %} +bundle exec compass install bootstrap +{% endhighlight %} + +

    If you are creating a new Compass project, you can generate it with bootstrap-sass support:

    + +{% highlight bash %} +bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap +{% endhighlight %} + +

    This will create a new Compass project with the following files in it:

    + +
      +
    • _variables.scss — all of bootstrap variables (override them here). +
      • +
    • styles.scss — main project SCSS file, import `variables` and `bootstrap`.
      • +
    + + +

    Sass-only without Compass or Rails

    + +

    Require the gem, and load paths and Sass helpers will be configured automatically:

    + +{% highlight ruby %} +require 'bootstrap-sass' +{% endhighlight %} + +

    Using bootstrap-sass as a Bower package is still being tested. You can install it with:

    + +{% highlight bash %} +bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3.0' +{% endhighlight %} + +

    JS and fonts

    + +

    If you are using Rails or Sprockets, see Usage. If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:

    + +{% highlight sass %} +"#{$icon-font-path}/#{$icon-font-name}.eot" +{% endhighlight %} + +

    $icon-font-path defaults to bootstrap/. When not using an asset pipeline, you have to copy fonts and javascripts from the gem.

    + +{% highlight bash %} +mkdir public/fonts +cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/ +mkdir public/javascripts +cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/ +{% endhighlight %} + +

    In ruby you can get the assets' location in the filesystem like this:

    + +{% highlight ruby %} +Bootstrap.stylesheets_path +Bootstrap.fonts_path +Bootstrap.javascripts_path +{% endhighlight %} + + +

    Usage

    + +

    Sass

    + +

    Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables! We recommend against using //= require directives, since none of your other stylesheets will be able to access the Bootstrap mixins or variables.

    + +{% highlight sass %} +@import "bootstrap"; +{% endhighlight %} + +

    You can also include optional Bootstrap theme:

    + +{% highlight sass %} +@import "bootstrap/theme"; +{% endhighlight %} + +

    The full list of Bootstrap variables can be found in the Customizer. You can override these by simply redefining the variable before the @import directive, e.g.:

    + +{% highlight sass %} +$navbar-default-bg: #312312; +$light-orange: #ff8c00; +$navbar-default-color: $light-orange; + +@import "bootstrap"; +{% endhighlight %} + +

    You can also import components explicitly. To start with a full list of modules copy this file from the gem:

    + +{% highlight bash %} +cp $(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss \ + app/assets/stylesheets/bootstrap-custom.scss +{% endhighlight %} + +

    In your application.sass, replace @import 'bootstrap' with:

    + +{% highlight sass %} +@import 'bootstrap-custom'; +{% endhighlight %} + +

    Comment out any modules you don't need from bootstrap-custom.

    + +

    JavaScript

    + +

    We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in application.js) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):

    + +{% highlight js %} +// Loads all Bootstrap javascripts +//= require bootstrap +{% endhighlight %} + +

    You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].

    + +{% highlight js %} +//= require bootstrap/scrollspy +//= require bootstrap/modal +//= require bootstrap/dropdown +{% endhighlight %} + + +
    From 033476ccc709079448bb3824bb1a997211e04714 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Dec 2013 21:19:45 -0800 Subject: [PATCH 2/8] more Less --- _includes/nav-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/nav-css.html b/_includes/nav-css.html index 1d875db4c7..8bebd94e2f 100644 --- a/_includes/nav-css.html +++ b/_includes/nav-css.html @@ -110,7 +110,7 @@
  • - Using LESS + Using Less
    • Variables
    • Vendor mixins
      • From 86e6c869a3a0114e3cbd1aa6f22b8d88d5b18ab3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 21 Dec 2013 09:59:24 -0800 Subject: [PATCH 3/8] remove some unintional code --- _layouts/default.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 63022fea63..c6ecbc5076 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -23,8 +23,6 @@ {% include old-bs-docs.html %}
      - -
      From bb644eede6be7b31b56664de5d0fea48096a7f40 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 21 Dec 2013 10:08:04 -0800 Subject: [PATCH 4/8] Team members on About page --- _config.yml | 1 + _includes/nav-about.html | 2 +- about.html | 37 ++++++++++++++++++++++++++++++++++++- docs-assets/css/docs.css | 2 +- 4 files changed, 39 insertions(+), 3 deletions(-) diff --git a/_config.yml b/_config.yml index 32c94d3854..65d12f386a 100644 --- a/_config.yml +++ b/_config.yml @@ -19,6 +19,7 @@ download_dist: https://github.com/twbs/bootstrap/releases/download/v3.1.0/boo blog: http://blog.getbootstrap.com expo: http://expo.getbootstrap.com +sass_repo: https://github.com/twbs/bootstrap-sass cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css cdn_theme_css: //netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css diff --git a/_includes/nav-about.html b/_includes/nav-about.html index 2cf12359b7..f0f4a5b8a6 100644 --- a/_includes/nav-about.html +++ b/_includes/nav-about.html @@ -2,7 +2,7 @@ History
    • - Core team + Team
    • Community diff --git a/about.html b/about.html index 2cd4e62f45..b554d45465 100644 --- a/about.html +++ b/about.html @@ -23,9 +23,11 @@ base_url: "../" ================================================== -->
      -

      Core team

      +

      Team

      Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

      + +

      Core team

      @@ -57,6 +59,39 @@ base_url: "../"

      Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.

      + +

      Sass team

      +
      +
      + + + @thomas-mcdonald + Thomas McDonald @thomas-mcdonald + +
      +
      + + + @glebm + Gleb Mazovetskiy @glebm + +
      +
      + + + @trisweb + Tristan Harward @trisweb + +
      +
      + + + @sporkd + Peter Gumeson @sporkd + +
      +
      +

      The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.

      diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 8a9f562e5a..f528251af9 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -643,7 +643,7 @@ h1[id] { .bs-team .github-btn { float: right; margin-top: 6px; - width: 120px; + width: 180px; height: 20px; } .bs-team img { From 2f56922937cdc9018db80c7e394dece7b523c70e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 21 Dec 2013 10:09:39 -0800 Subject: [PATCH 5/8] config url --- css.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css.html b/css.html index 37eddaea63..62e5ba9529 100644 --- a/css.html +++ b/css.html @@ -3312,7 +3312,7 @@ a {

      Using Sass

      -

      While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

      +

      While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

      Installation

      Use the appropriate guide for your environment of choice.

      @@ -3360,9 +3360,9 @@ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap

      This will create a new Compass project with the following files in it:

        -
      • _variables.scss — all of bootstrap variables (override them here). +
      • _variables.scss — all of bootstrap variables (override them here).
        • -
      • styles.scss — main project SCSS file, import `variables` and `bootstrap`.
        • +
      • styles.scss — main project SCSS file, import `variables` and `bootstrap`.
      @@ -3410,7 +3410,7 @@ Bootstrap.javascripts_path

      Sass

      -

      Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables! We recommend against using //= require directives, since none of your other stylesheets will be able to access the Bootstrap mixins or variables.

      +

      Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables! We recommend against using //= require directives, since none of your other stylesheets will be able to access the Bootstrap mixins or variables.

      {% highlight sass %} @import "bootstrap"; From c66924cc1ba7c1031818aceb8cd126a68a700bcf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 21 Dec 2013 10:36:20 -0800 Subject: [PATCH 6/8] add section for contents --- _includes/nav-css.html | 1 + css.html | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/_includes/nav-css.html b/_includes/nav-css.html index 8bebd94e2f..a7ca471bd1 100644 --- a/_includes/nav-css.html +++ b/_includes/nav-css.html @@ -120,6 +120,7 @@
    • Using Sass

      • While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

      +

      What's included

      +

      Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

      + + + +

      Installation

      Use the appropriate guide for your environment of choice.

      From 8bc6aeb60aeacc79605549e3be12f807b0f31eb7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Dec 2013 21:27:12 -0800 Subject: [PATCH 7/8] add what's included --- css.html | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/css.html b/css.html index 4d134a7ff7..460df1bfc0 100644 --- a/css.html +++ b/css.html @@ -3317,7 +3317,43 @@ a {

      What's included

      Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

      - +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      PathDescription
      lib/Ruby gem code (Sass configuration, Rails and Compass integrations)
      tasks/Converter scripts (turning upstream Less to Sass)
      test/Compilation tests
      templates/Compass package manifest
      vendor/assets/Sass, JavaScript, and font files
      RakefileInternal tasks, such as rake and convert
      +
      +

      Visit the Sass port's GitHub repository to see this files in action.

      Installation

      From fd15b00861776d0a66a3dd74653ea1331996b4e7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Dec 2013 21:42:08 -0800 Subject: [PATCH 8/8] space --- css.html | 1 - 1 file changed, 1 deletion(-) diff --git a/css.html b/css.html index 460df1bfc0..8b257fe2dc 100644 --- a/css.html +++ b/css.html @@ -3359,7 +3359,6 @@ a {

      Installation

      Use the appropriate guide for your environment of choice.

      -

      Rails

      bootstrap-sass is easy to drop into Rails with the asset pipeline.