compass install bootstrap does not support easy customization #71

Closed
bburton opened this Issue Feb 20, 2012 · 7 comments

Projects

None yet

3 participants

@bburton

Issue

The way the original twitter bootstrap distribution is organized, it's expected one can customize various aspects of it. In this case, the files would normally be copied into a project and could be readily edited if necessary. However, with the packaging of the SCSS files in a gem, they are not available for modification.

Modification of Variables

The settings in bootstrap/_variables.scss are expected to be modified. An easy way to expose the variables would be to use the compass templating to copy the contents of _variables.scss into the generated styles.scss before the @import "bootstrap" while possibly removing the !default notation. Any change to a variable made by a user would override the same variable in _variables.scss when imported.

Modification to Imported Mixin's

For applications that won't use various bootstrap mixin's it would be ideal if _bootstrap.scss was locally editable so such mixin's could be commented out.

@bburton

Work around to copy bootstrap/_variables.scss into styles.scss

  1. Cd into the sass_dir location specified in your compass config.rb
  2. Copy bootstrap/_variables.scss out of the gem and append to styles.scss (one long line): $ cat $(dirname $(gem which bootstrap-sass))/../vendor/assets/stylesheets/bootstrap/_variables.scss | sed 's/ !default//' >> styles.scss
  3. Edit styles.scss and move @import "bootstrap" and @import "bootstrap-responsive" to the end of the file.
  4. Make any other desired edits to the variables.
@bburton

Work around to copy _bootstrap.scss from gem

  1. Cd into the sass_dir location specified in your compass config.rb
  2. Copy _bootstrap.scss out of the gem into local stylesheet directory: $ cp -p $(dirname $(gem which bootstrap-sass))/../vendor/assets/stylesheets/_bootstrap.scss .
  3. Edit _bootstrap.scss and comment out any @import's for mixin's that aren't needed.
@thomas-mcdonald
Bootstrap member

The README contains a link to Bootstrap's variable list and gives instructions on how to modify them. Copying the entire variables file seems unnecessary - most people will only want to configure a few variables.

The import helper I agree with, to an extent. It was something I began developing when bootstrap-sass only supported Rails but I abandoned it due to issue with how sass-rails looks at load paths. However, once #70 gets fixed, I think unpacking will be the 'supported' way to customise bootstrap-sass with compass - then you have total control over all customisation.

@bburton

OK, Rather than copying all the variables it would be helpful to have links to the relevant information. Someone maintaining an application may not be familiar with bootstrap-sass or bootstrap for that matter. Is this more reasonable for styles.scss?

// See https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/README.md
// for information on this SASS implementation of Twitter Bootstrap.

// Add any bootstrap variables below to override the defaults.
// Complete list at http://twitter.github.com/bootstrap/less.html#variables
// Links
//$linkColor: #08c;
//$linkColorHover: darken($linkColor, 15%);
// Typography
//$baseFontSize: 13px;
//$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
//$baseLineHeight: 18px;
//$textColor: $grayDark;
// Default 940px grid
//$gridColumns: 12;
//$gridColumnWidth: 60px;
//$gridGutterWidth: 20px;

// I gather this file is a starting point for the project.
@import "bootstrap";

// Include responsive Bootstrap styles
// @import "bootstrap-responsive";// Variables.less

@mindeavor

It would be really helpful to have an installer. A website I'm working is past the "bootstrap phase" and needs full customization of bootstrap styles.

Not needing to customize files directly is great for starting off, but there comes a point where you need to edit the files directly.

@bburton

Once issue #70 has been addressed, after compass install, you will be able to do a compass unpack bootstrap to extract all the files locally. I may have a fix for #70 but I want to test some more.

@thomas-mcdonald
Bootstrap member

(probably) fixed in #345

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment