Hey,

if anyone is intrested on how to run bootstrap 3 on SASS rather than on LESS, here are little instructions.

1. copy bootstrap subtheme and make modifications to .info file
2. go to https://github.com/alademann/sass-bootstrap and follow instructions there on building sass-bootstrap. I've installed sass-bootstrap using bower, but you can clone git project or whatever you like. remember to run npm install and grunt from inside directory you downloaded not your subtheme directory
3. symlink downloaded directory ln -sd bower_components/sass-bootstrap-compass/ ./bootstrap
4. in bootstrap/dist/js you need to symlink sass-bootstrap.min.js to bootstrap.min.js because bootstrap theme is including this file ln -s bootstrap/dist/js/sass-bootstrap-compass.min.js bootstrap/dist/js/bootstrap.min.js
5. init compass project compass init --sass-dir sass --css-dir css
6. copy variables from bootstrap/sass/_variables.scss to ./sass
7. now fun part. Bootstrap subtheme files are coded in .less and there is no converter from less to sass (it was once but it's gone now). Because it's out of scope of this little tutorial i'll just attach needed files, just place them inside sass directory
8. compass compile or compass watch whatever you need
9. it should all work from now

if you need .scss version of attached files use sass-convert

And now the question to bootstrap mainteners: do you think you should also put .sass files (mainly overrides.less) inside this project or should sass info live inside this thread, or maybe there should be another project about sass version of bootstrap theme?

In my opinion sass files and instructions on how to use sass version of bootstrap should be inside this project.

Lech

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

Title: SASS version for 3.x » Implement new or ammend current sub-theme with SASS
Assigned: Unassigned » markhalliwell
Issue tags: +Sass

This is something that I've been thinking about quite a lot actually. In the spirit of being supportive, I think we should make the bootstrap_subtheme independent of framework implementation. I'm very familiar with, and use, both SASS and LESS on a daily basis. I personally prefer LESS, just due to its simplicity. However I do recognize the power behind SASS and it's ability to create powerfully strong and independent frameworks (using things like Singularity, Compass, and Bourbon).

What I am confused with is why SASS is/would be needed with Bootstrap. SASS' real power lies in creating frameworks. If Bootstrap is this said framework, and it's already built, what is the purpose (or actual need) behind using SASS?

Regardless of my personal confusion and personal conviction that people constantly re-invent the wheel, I do agree that this option should be a part of Bootstrap. Too many people use both. Putting this on the board for possible 7.x-3.0-rc2 release.

isilweo’s picture

The reasons are quite simple. Not all people around are programmers and pick up new frameworks/languages easly. I'm very proud of myself that i educated my designer how to use SASS rather than CSS. But there is no need for him to learn LESS if he is able to make things in SASS.
For me it would be better to style things in LESS as all bootstrap is in LESS but looking from project management point of view running bootstrap theme on SASS is much faster than teaching designer how to use LESS :)

back to topic:
you need to include bootstrap.min.js in your .info file as it is not included automatically. i don't know if this is bootstrap sass problem or bootstrap theme problem. point 8 should be corrected to:

8. Edit your .info file, add line scripts[] = 'bootstrap/dist/js/sass-bootstrap-compass.min.js'

RobKoberg’s picture

This is easy enough to do and should have no effect on the theme project. I suppose a subtheme project could include a basic config.rb (for compass). From Drupal, you simply link to the generated CSS file.

There is one other way this theme project could benefit by using sass: It would enable having to modify less markup to to present to bootstrap. Instead, existing drupal classes and IDs could be extended (navbars are an exception and require some extra markup). For example:

#user-register-form,
#user-profile-form,
#edit-profile-user-profile-form {
  @extend .form-horizontal;
}

footer,
#comments {
  @extend .clearfix;
}

Tip: Having the config.rb setting of "line_comments = true" (the default), the CSS will be generated with comments that include the path to the SCSS and the line number that was used. When using firebug or other browser consoles to look at the element structure and associated style, you can click on the css link to be shown the relevant part of the generated CSS which will then show you the where you want to go in the SCSS.

I use bootstrap-sass - https://github.com/thomas-mcdonald/bootstrap-sass and compass http://compass-style.org/install/

Place a config.rb in the theme directory. Then from a terminal window in the theme directory, run:
$ compass watch

A basic config.rb looks like:

require 'bootstrap-sass'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
RobKoberg’s picture

More info: For each new site I copy over the bootstrap.scss (which I rename to styles.scss) and _variables.scss to my bootstrap subtheme sass directory. If you did a geme install of bootstrap-sass, the path to the SCSS files on my setup is:
/Users/rkoberg/.rvm/gems/ruby-1.9.3-p194/gems/bootstrap-sass-2.3.1.0/vendor/assets/stylesheets/bootstrap

When you do a compass watch, compass will watch for each change in the SCSS files and generate a new sites/all/themes/mysubtheme/css/styles.css on each change.

Modify the _variables.scss to fit your needs.

If you use font-awesome, a helpful mixin is:

// http://fortawesome.github.io/Font-Awesome/icons/
@import "font_awesome_variables";
@import "font_awesome_mixins";
@import "font_awesome_path";
@import "font_awesome_core";
@import "font_awesome_extras";
@import "font_awesome_icons";

// Bootstrap icon-[$name] mixin-fix
@mixin icon($name, $color: $grayLight) {
  &:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    color:$color;
    display: inline-block;
    text-decoration: inherit;
    margin-right: .4em;
  }
  @extend .icon-#{$name};
}

Which will allow you to add icons to any element. For example:

.flag-bookmarks {
  a {
    @include icon('bookmark-empty', $blue);

    &.unflag-action {
      @include icon('bookmark', $blue);
    }
  }
}
markhalliwell’s picture

I would like to re-emphasize from #1:

I'm VERY familiar with, and use, both SASS and LESS on a daily basis.

I would strongly recommend people read: sass_and_less_compared.markdown. It is actually a rather old comparison, so please read the recent comments explaining how LESS is no longer "behind", and has just as many features, as SASS now.

It would enable having to modify less markup

That is not true:

LESS 1.4+ has extends:

#user-register-form,
#user-profile-form,
#edit-profile-user-profile-form {
  &:extend(.form-horizontal);
}

footer,
#comments {
  &:extend(.clearfix);
}

Also FWIW, SASS actually requires more markup than LESS now because we save having to type @include (an additional 8 characters) each time we want to include a mixin:

In SASS:

.selector {
  @include my-mixin();
}

In LESS:

.selector {
  .my-mixin();
}

[edit] What I am trying to get at is this: SASS and LESS are no longer all that different. They have many of the same features and aside from their very small differences, one or the other isn't that hard to "learn".

ShaunDychko’s picture

LESS is quite easy to learn, and since Bootstrap uses it, and this is a Bootstrap theme, let's stick with LESS.

markhalliwell’s picture

Component: Code » Documentation
Category: feature » support

I think this is more about documentation anyhow since using any source (regardless of language) requires manual compilation.

markhalliwell’s picture

Title: Implement new or ammend current sub-theme with SASS » Create documentation on how to sub-theme using SASS

More accurate title.

markhalliwell’s picture

Assigned: markhalliwell » Unassigned

Also unassigning myself since anyone can create a "Using Bootstrap SASS" sub-page inside of the Bootstrap Documentation.

wooody’s picture

Hi,
What about Bootstrap version 2.0 , anyone can fix that ... put the files and sass all together in one zip file and then we create the subtheme...

wooody’s picture

I think using Less better than using Sass..

Why LESS?
One of Bootstrap's creators wrote a quick blog post about this, summarized here:

Bootstrap compiles faster ~6x faster with Less compared to Sass
Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.

More here
http://getbootstrap.com/2.3.2/extend.html#built-with-less

rerooting’s picture

Regardless of whether sass or less are better, as someone who is proficient with both, I can say that sass is far more widely used and thus should at least have documentation if not built in subthemeing support on principle (alongside less support).

I personally prefer sass because there is wider support, and it's far more pluggable, and I'm just as comfortable with ruby as I am with javascript. It's also worth mentioning that other major themes such as Zen and Omega and projects such as Open Atrium 2 and Commerce Kickstart are using sass.

But that's beside the point, because debating over the question of "which stylesheet preprocessor is better" is a pointless question. It's like arguing over whether apples or pears taste best.

The prospect of using the 3.x version of this theme with sass has me really excited and willing to jump ship on other bootstrap theme projects that use sass, as this theme has, in my opinion, the most well developed approach to providing native bootstrap markup, among other niceties.

If you want this project to be more attractive to a wider range of frontend developers, including even just documentation linked from the project description on using this theme with sass will be a major boon.

benjarlett’s picture

Issue summary: View changes

Please add SASS. I've just got my head around that and am enjoying using it, I don't want to Learn LESS too.

kclarkson’s picture

I too would like to see a SASS version. Right now I am using the Radix Theme which based on twitter boostrap but is in SASS. I too just don't feel like learning LESS.

bdanin’s picture

I've created a sandbox project that jumpstarts the process of using bootstrap-sass:
https://drupal.org/node/2116345

This is a sub-theme of bootstrap, and replaces LESS with SASS

I've had a lot of success using this for the 2.x Bootstrap. I'm just beginning to use it for 3.x

The only problem I seem to have so far is with display_suite, where the ajax throbber breaks (see here: https://drupal.org/node/2162789
also, this helped me: https://drupal.org/node/2158197)

markhalliwell’s picture

Title: Create documentation on how to sub-theme using SASS » Implement a SASS support/sub-theme variation
Component: Documentation » Code
Category: Support request » Feature request
markhalliwell’s picture

There is now an official repo:
http://getbootstrap.com/css/#sass

markhalliwell’s picture

Title: Implement a SASS support/sub-theme variation » Implement SASS support/sub-theme variation
Anonymous’s picture

It's great there will be SASS support! This issue is assigned to 7.x but there's already a 8.x dev branch, will it be implemented in the D8 version as well? (I only ask because we've just started evaluating SASS themes that will be available in D8.)

hkirsman’s picture

FileSize
3.83 KB

Had to manually convert the overrides.less to overrides.scss.

I'm hoping to see sass support soon! Tx! ;)

hmartens’s picture

HI hkirsman, you'll see that Mark Carver mentioned that there's now an official sass repo at http://getbootstrap.com/css/#sass

So you should be able to get everything you need from there and not convert between less and sass.

markhalliwell’s picture

@hmartens, that is the overrides file (which is unique to this project). I've also already converted this (but haven't gotten a chance to commit an actual solution for this issue). Here in a couple weeks perhaps, maybe sooner.

hkirsman’s picture

There's a specific older version of SASS that can convert LESS to SASS. But for some reason I (can't remember why) I failed with it.

It isn't that hard to convert the file manually but it's not maintanable.

And I guess theoretically you could to the convert with some search/replaces.

JurriaanRoelofs’s picture

I used the subtheme from bdanin's sandbox and it seems to work nicely.
Does using sass mean the CDN theme option should be turned off.. and disabled in contrib themes that subtheme bootstrap with the sass dropin files?
I'm just getting started with Bootstrap and I realized that because less doesn't support @extend, you would have to add classes into the database or in preprocess files. With sass you can just do ".sidebar .view-events { @extend .nav; }" and then there is no need to put extra classes in code, but it seems that if you are extending Bootstraps core selectors you are rewriting the core files and it doesn't make sense to also load the CDN files anymore.

markhalliwell’s picture

bdanin’s picture

I turn off the CDN on themes that I build. For some reason, when I disabled the CDN in the .info file (in the 3.x version of bootstrap) it doesn't seem to stop the CDN. There is a checkbox under appearance settings that allows you to turn off the CDN, which works well.

You do not need access to the CDN for the bootstrap theme to work. I prefer to turn it off so I can work locally more efficiently. The SASS drop-in replacement in my subtheme, also comes with the needed javascripts, so it should all just work. However, using the CDN works too, if you prefer to share the load with the bootstrap CDN.

hkirsman’s picture

Me too. I disabled all the cdn. Just pure local Bootstrap SASS. Yummi!

JurriaanRoelofs’s picture

thanks @Mark - it seems like Less and SASS are pretty much the same now, kinda lame the creators don't just work together so that users can easily switch out less and sass plugins/frameworks etc.

markhalliwell’s picture

Title: Implement SASS support/sub-theme variation » Create SASS starterkit (with Bundle, Compass and Bower support)
Category: Feature request » Task
Issue tags: -Sass

We're moving in the direction of using drush to create sub-themes via a starterkit (since there's too many different ways to do it). I've already created the SASS starterkit which has nothing in it currently. We should probably create our own Gemfile and bower.js that mimics what is in https://github.com/twbs/bootstrap-sass (but stripped down for a Drupal Bootstrap sub-theme).

markhalliwell’s picture

kclarkson’s picture

@mark carver

YESSSSSSSS !!!

markhalliwell’s picture

Component: Code » Drush
Sherbet’s picture

Is there any update on a SASS starterkit?

markhalliwell’s picture

No, sorry. I haven't had time to really focus on this like I want. However there was the following blog post that was published today that uses this project as a base. I'd like to get that developer on this issue to perhaps move this issue along?

http://deeson-online.co.uk/labs/using-grunt-bootstrap-compass-and-sass-d...

C13L0’s picture

If you follow the tutorial on the blog post, I would highly recommend using rvm (ruby version manager) to prevent issues with gem versions. Rvm creates a "bundle" for each sites that contain its own set of gems with the correct versions. Using this method also prevents future issues when updating a site and makes it easy when working with a team. A word of caution: You cannot install a gem using sudo with rvm

I like pictures. Here is a screenshot of it in action: http://take.ms/1JrJ1

rerooting’s picture

I actually use a Gemfile and Bundler to define the appropriate gem versions for a project. I think this would work tidily alongside RVM as you may still be using the same versions of ruby across a few projects, but need different versions of gems (this happens to me fairly often actually).

wrender’s picture

It would be really good to see SASS/Less made independent of this module. We have been using Zen, with Sass/Compass but interested in switching to Bootstrap.

I'm going to see if I can follow the deeson-online instructions and if there is anything I can commit I will offer it.

lunk rat’s picture

Can I use drush to create a bootstrap sub-theme, with LESS or SASS if I use bootstrap-7.x-3.1-beta2+24-dev or later? Is there documentation for this?

If not, how can I help to get this feature materialized?

Thanks!

birdsnbees’s picture

I have found this article http://www.webfoobar.com/node/9 and would like to share. It discuss about creating bootstrap subtheme using sass.

lukasss’s picture

markhalliwell’s picture

Priority: Normal » Critical
wundo’s picture

Priority: Critical » Major

This is not a blocker to 3.1, marking as Major, not critical

markhalliwell’s picture

Category: Task » Feature request
Priority: Major » Normal

Both majors and criticals are release blockers, being used to prioritize which are worked on first. Should have deescalated this to a feature anyway.

wrender’s picture

I'm a little confused about what is the more prominent SASS compiler. I find compass really good, but unfortunately cPanel is really outdated on their Ruby on Rails distribution which provides the "bootstrap-sass" ruby gem. For this reason I ended up moving to Grunt to compile Sass with Bootstrap. I wrote a blog here for it: http://www.otherdata.com/blog/installing-nodejs-grunt-and-bower-cpanel-a...

I have been using each of these compilers on different servers (below) with your Bootstrap starter theme for Drupal.

Would be nice if you could choose a Sass compiler with the Drupal bootstrap starter theme and the compiler scripts were already to go. So you install the bootstrap starter theme using drush, and then you can start editing and compiling .scss files right away: Compass, Grunt, or Gulp...

Compass: config.rb (Resides in theme root)

require 'bootstrap-sass'
# Require any additional compass plugins here.


# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Grunt: gruntfile.js (Resides in theme root)

module.exports = function (grunt) {
    grunt.initConfig({
        watch: {
            src: {
                files: ['**/*.scss', '**/*.php'],
                tasks: ['compass:dev']
            },
        },
        compass: {
            dev: {
                options: {
                    sassDir: 'sass',
                    cssDir: 'css',
                    imagesPath: 'assets/img',
                    noLineComments: false,
                    outputStyle: 'compressed'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

Gulp: gulpfile.js (Sorry I don't have a working config for this one yet)

Package Json file. (Required in theme root to provide NodeJS dependencies for Grunt)

{
  "name": "theme name",
  "version": "1.0.0",
  "author": "Your Name",
  "homepage": "http://mydrupalwebsite.com",
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
      "grunt-contrib-compass": "v0.9.0",
      "grunt-contrib-sass": "v0.7.3",
      "grunt-contrib-watch": "v0.6.1"
  }

  • markcarver committed 3d89668 on 7.x-3.x
    Temporarily remove SASS starterkit
    
    This was just a copy of the LESS...

  • markcarver committed 9d7c39d on
    Temporarily remove SASS starterkit
    
    This was just a copy of the LESS...
markhalliwell’s picture

Status: Active » Postponed

This was just a copy of the LESS starterkit, but was never completed. Until this issue can be committed as a fully functioning feature, it shouldn't be in the repo.

wundo’s picture

Assigned: Unassigned » wundo

I will be working on this ;)

JurriaanRoelofs’s picture

bootstrap 4 is also sass based thankfully :) are you going to work on a B3 sass starterkit as well?

Chris Charlton’s picture

Even with Bootstrap 4 coming, there will be lots of devs/sites running 3.x for some time, and making more themes under 3.x is going to be a thing for at least another year or two.

+1 Sass 3.x; especially since I'm a heavy user of this. Big fan of the 'bootstrap-sass' gem too.

wundo’s picture

@JurriaanRoelofs, yes, I'm working on the Bootstrap 3.x sass starter kit.

markhalliwell’s picture

Title: Create SASS starterkit (with Bundle, Compass and Bower support) » Add SASS starterkit
Component: Drush » Starterkit (SASS)
Assigned: wundo » Unassigned
Status: Postponed » Needs work
eidoscom’s picture

FileSize
61.3 KB

Hello Everyone,

I just created a SASS StarterKit that is functioning for my pruposes. Basically, I copied the less starterkit folder and corrected all differences between less syntax and sass syntax that I found. It is a difference that I can't correct that is in the top of the _overrides.scss file:

@tablet:  ~"screen and (min-width: @{screen-sm-min})";
@normal:  ~"screen and (min-width: @{screen-md-min})";
@wide:    ~"screen and (min-width: @{screen-lg-min})";

If someone knows how to "translate" this from less to sass it will be very good :)

Just have to copy the sass folder of the zip inside your themes folder, change the "sass.starterkit" file, add the sass-bootstrap distribution and start to do your job ;)

I can understand that perhaps is not a final stage, but can be a good point from where we go on.

Hope this can help someone and all kind of suggestions to improve it are welcome.

wrender’s picture

eidoscom, Why do you need to write custom SASS? Bootstrap already has a fully converted SASS version.

Here is what I have been using. (Attached below).

This includes a grunt, compass and gulp file depending on which compiler you want to use. The unmodified bootstrap sass files are just located in /bootstrap-sass/ and are version 3.3.5.

To use:
- Download Drupal Bootstrap 7.x-3.1
- Unzip this beside it
- Rename the folder, and the .info file to your preference
- Activate the sass starterkit as your default theme
- Start compiling and editing /sass/_variables.scss
- Optionally add your own .scss files, and then just include them in /sass/styles.scss

wrender’s picture

FileSize
126.18 KB
markhalliwell’s picture

  1. The SASS starterkit should emulate the same structure as the LESS starterkit in how it overrides styles. This will prevent any "missing variable compilation" nightmares as we have had in the past.
  2. Tools like grunt, gulp and drush are now out of scope for this issue (we want a minimal viable feature first).
  3. Please, stop uploading zip files, create a patch.
  4. Do not include the Bootstrap Framework, this is something people should download on their own.
eidoscom’s picture

Sorry but perhaps not well explained. What I did is copy the less starterkit and changed only this files:

  • overrides.less to _overrides.scss
  • bootstrap.less to _bootstrap.scss
  • variable-overrides.less to _variable-overrides.scss

Of course that I downloaded the bootstrap SASS :) and added to a folder inside the theme as I downloaded.

I can see that you did different approximation. I think that what you download from bootstrap must be keeped as it is for easier upgrade of it. I don't know if the best way to do this is to include the bootstrap framework on the starterkit...

I only take in consideration to compile through compass as is what I use at the moment. I think that overrides.less is doing some kind of optimization to drupal and is important to be here.

eidoscom’s picture

Ok markcarver I will try to do a patch with my code, sorry. Posting to discuse only if it is the correct way to do the things, and I see as your last comment that seems correct.

eidoscom’s picture

So I'm trying to do the patch but it is a 10MB patch file with about 50000 lines :S that make me feel that is not a correct patch :(

Never did a patch adding files. Can you help me??

markhalliwell’s picture

No, it's not... please read https://www.drupal.org/patch/create and #56.4.

eidoscom’s picture

Let see if this patch is correct!

wrender’s picture

Oops sorry about the zip file. I didn't realize this was not permitted. Since "Tools like grunt, gulp and drush are now out of scope for this issue (we want a minimal viable feature first)." I will look elsewhere.

xaa’s picture

Here is a new version of the patch recreated with diff --binary (to include .png and.ico). I have tested it locally, it seems working now. Hoping this tentative will help (even a bit ;)).

Thank you for this first patch and congrat for your first patch eidoscom ;). I think it's a good idea to have a starting point for SASS asap too. I guess there are still important stuff missing? maybe wundo (#51) has an advanced version?

I am also quite novice with git and the drupal patch procedure but I would like to help. So here is my first patch :d, hoping it will be helpfull and that won't waste your time. (thanks to woprrr and theo for the patch process explanations on irc)

I am very glad to see the drupal bootstrap project back on road.

albertski’s picture

Status: Needs work » Reviewed & tested by the community

Latest patch (#63) looks okay to me. I updated my subtheme to use the sass starterpack and it worked flawlessly.

Only thing I found is the README needs to be updated to include SASS instructions but if it's okay, can we just handle that in a separate issue so we can add this patch to dev ASAP.

The last submitted patch, 61: 2102895-SASS-starterkit.patch, failed testing.

wrender’s picture

For those wanting to use NPM, Bower and Grunt to simplify working with Sass I've setup a starterkit here;: https://www.drupal.org/sandbox/wrender/2627564

eidoscom’s picture

FileSize
53.79 KB

Thank xaa for your words :)

I did some changes related to de documentation. Now is basically explaining all the stuff related to sass starterkit.
I did the patch with --binary this time.

I am using this starterkit and works like a charm for me :) hope that this can be commited quickly.

Have a nice day!

eidoscom’s picture

Status: Reviewed & tested by the community » Needs review

Sorry, we need a review for the new patch!

wrender’s picture

I don't see the point for this without having pre-configured compiler files to match the directory structure. How are you compiling the SASS code?

albertski’s picture

@eidoscop can you add a new line at the end of the following files:

No newline at end of file for: starterkits/sass/bootstrap-sass/README.md
No newline at end of file for: starterkits/sass/config.rb

Also when creating patch can you use this format: [project_name]-[short-description]-[issue-number]-[comment-number].patch.

@wrender I am using compass. The config.rb sets the directory structure.

albertski’s picture

Status: Needs review » Needs work
wrender’s picture

Thanks Albertski. How are you installing the Bootstrap SASS files? Do you manually download them into bootstrap-sass folder? Can you share the directory structure you guys are using? I can add a patch to include NPM, Bower and Grunt scripts.

albertski’s picture

Yes I manually download them and place them in the the bootstrap-sass folder.

This is my folder structure of my subtheme:

├── README.md
├── bootstrap-sass
│   ├── CHANGELOG.md
│   ├── CONTRIBUTING.md
│   ├── LICENSE
│   ├── README.md
│   ├── assets
│   │   ├── fonts
│   │   │   └── bootstrap
│   │   │       ├── glyphicons-halflings-regular.eot
│   │   │       ├── glyphicons-halflings-regular.svg
│   │   │       ├── glyphicons-halflings-regular.ttf
│   │   │       ├── glyphicons-halflings-regular.woff
│   │   │       └── glyphicons-halflings-regular.woff2
│   │   ├── images
│   │   ├── javascripts
│   │   │   ├── bootstrap
│   │   │   │   ├── affix.js
│   │   │   │   ├── alert.js
│   │   │   │   ├── button.js
│   │   │   │   ├── carousel.js
│   │   │   │   ├── collapse.js
│   │   │   │   ├── dropdown.js
│   │   │   │   ├── modal.js
│   │   │   │   ├── popover.js
│   │   │   │   ├── scrollspy.js
│   │   │   │   ├── tab.js
│   │   │   │   ├── tooltip.js
│   │   │   │   └── transition.js
│   │   │   ├── bootstrap-sprockets.js
│   │   │   ├── bootstrap.js
│   │   │   └── bootstrap.min.js
│   │   └── stylesheets
│   │       ├── _bootstrap-compass.scss
│   │       ├── _bootstrap-mincer.scss
│   │       ├── _bootstrap-sprockets.scss
│   │       ├── _bootstrap.scss
│   │       └── bootstrap
│   │           ├── _alerts.scss
│   │           ├── _badges.scss
│   │           ├── _breadcrumbs.scss
│   │           ├── _button-groups.scss
│   │           ├── _buttons.scss
│   │           ├── _carousel.scss
│   │           ├── _close.scss
│   │           ├── _code.scss
│   │           ├── _component-animations.scss
│   │           ├── _dropdowns.scss
│   │           ├── _forms.scss
│   │           ├── _glyphicons.scss
│   │           ├── _grid.scss
│   │           ├── _input-groups.scss
│   │           ├── _jumbotron.scss
│   │           ├── _labels.scss
│   │           ├── _list-group.scss
│   │           ├── _media.scss
│   │           ├── _mixins.scss
│   │           ├── _modals.scss
│   │           ├── _navbar.scss
│   │           ├── _navs.scss
│   │           ├── _normalize.scss
│   │           ├── _pager.scss
│   │           ├── _pagination.scss
│   │           ├── _panels.scss
│   │           ├── _popovers.scss
│   │           ├── _print.scss
│   │           ├── _progress-bars.scss
│   │           ├── _responsive-embed.scss
│   │           ├── _responsive-utilities.scss
│   │           ├── _scaffolding.scss
│   │           ├── _tables.scss
│   │           ├── _theme.scss
│   │           ├── _thumbnails.scss
│   │           ├── _tooltip.scss
│   │           ├── _type.scss
│   │           ├── _utilities.scss
│   │           ├── _variables.scss
│   │           ├── _wells.scss
│   │           └── mixins
│   │               ├── _alerts.scss
│   │               ├── _background-variant.scss
│   │               ├── _border-radius.scss
│   │               ├── _buttons.scss
│   │               ├── _center-block.scss
│   │               ├── _clearfix.scss
│   │               ├── _forms.scss
│   │               ├── _gradients.scss
│   │               ├── _grid-framework.scss
│   │               ├── _grid.scss
│   │               ├── _hide-text.scss
│   │               ├── _image.scss
│   │               ├── _labels.scss
│   │               ├── _list-group.scss
│   │               ├── _nav-divider.scss
│   │               ├── _nav-vertical-align.scss
│   │               ├── _opacity.scss
│   │               ├── _pagination.scss
│   │               ├── _panels.scss
│   │               ├── _progress-bar.scss
│   │               ├── _reset-filter.scss
│   │               ├── _reset-text.scss
│   │               ├── _resize.scss
│   │               ├── _responsive-visibility.scss
│   │               ├── _size.scss
│   │               ├── _tab-focus.scss
│   │               ├── _table-row.scss
│   │               ├── _text-emphasis.scss
│   │               ├── _text-overflow.scss
│   │               └── _vendor-prefixes.scss
│   ├── bower.json
│   ├── composer.json
│   ├── package.json
│   └── sache.json
├── config.rb
├── css
│   └── style.css
├── favicon.ico
├── jlmstrap.info
├── logo.png
├── sass
│   ├── _bootstrap.scss
│   ├── _overrides.scss
│   ├── _variable-overrides.scss
│   └── style.scss
├── screenshot.png
├── template.php
└── templates
    ├── README.txt
    └── node.tpl.php</blockquote>
wrender’s picture

I've added the appropriate NPM, Bower, and Grunt files on top of "2102895-SASS-starterkit-67.patch", and updated the README.md. These should work alongside the compass config.rb no problem.

I apologize in advance as I have not added patches on drupal.org before. Not sure if I'm doing this right.

***Edit

So yes my first drupal patch failed horribly. Working on a new one!

wrender’s picture

FileSize
57.9 KB

Ok. This one should work. Remove trailing whitespace, and put in binary mode.

wrender’s picture

Updated README.md to include "grunt copy" command to put files into bootstrap-sass folder before compiling.

wrender’s picture

Updated to remove whitespace.

wrender’s picture

Updated README.md to include correct order to run grunt commands.

albertski’s picture

Status: Needs work » Needs review
markhalliwell’s picture

Assigned: Unassigned » markhalliwell

I want to review this, however given that my focus is currently #2609316: Port Bootstrap to Drupal 8, I'm not entirely sure how long that will be. Also, I think we should leave npm, grunt and bower out of this initial patch. That is assuming a lot IMO and will need to be discussed in a separate issue (for LESS as well).

wrender’s picture

Hi Mark. Is there another moderator that can review this since you are too busy? It would be appreciated. Thanks.

MacMladen’s picture

I would not like to add to confusion, but I'll offer my two cents on this.

First, I believe that Mark is right about complexity of including the full workflow. There are so many things in offer today, like style guide, browser reloading, linting, image optimizing and dozen of others. While they might be nice to have for those not skilled enough, there are always those that will ask for more and more complexity brings in more blockers to new releases, more effort to write automated test etc.

So yes, he is right in wish to leave complexity out of this box. It may be freely expanded by others through various posts, gists or their own github repo. Or even official Drupal theme. Nothing prevents anyone to do so while still based on common core that serves the base as it should be.

MacMladen’s picture

The second thing is that basic stack that is used to build subtheme CSS.

The Bootstrap was using LESS in versions up to and including v.3. Bootstrap Sass is now a legitimate child of Bootstrap project and it is served from the creators directly. Also, it is announced that from version v.4 it will be Sass native and not LESS anymore.

Therefore, future lies in Sass.

Ruby Sass will probably be still developed but as Chris Eppstein, father of Compass and member of Sass team is dropping ruby version, libsass with its wrapper node-sass are slowly taking over the front end with their bellowed friend gulp and sibling, gulp-sass.

npm or Node Package manager can easily fetch bootstrap-sass and gulp with minimum set of tools that will offer MVP equivalent of Compass tools:

  "devDependencies": {
    "del": "^2.2.0",
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-watch": "^4.3.3"
  }

These dependencies may be added to current package.json with appropriate gulpfile.js that would handle compiling.

npm could pull bootstrap library for LESS too which would lower install complexity.

I'd like to hear what Mark thinks of this approach. If he thinks it is a valid approach, I may try to do a Sass-kit addition or anyone else who has time to test and iron everything into high standards product as this theme took Drupal world as a storm by surprise. (or not. The surprise, I meant. ;)

travisc’s picture

Ran the patch in the root of the bootstrap theme
Moved the sass starter kit to sites/all/themes/mytheme directory
Changed sass.starterkit to mytheme.info
Followed the README.md

Everything is working.
It's well documented.
I can't really comment about the complexity of having the workflow inside the subtheme, as it works for me and i have no complaints about having it.

Obviously it makes some assumptions, but I find this example to be based on best practices to the best of my knowledge, and it saves me the work of having to set it up myself. It also does warn " (not for beginners)". Even though I do realize the last thing this issue queue needs is a bunch of how do i... NPM on my old windows machine type questions.

travisc’s picture

Spoke with Wrender. Looks like at this point these are the two best spots to checkout if you are interested in using an automated workflow with Bootstrap Sass. I'm going to help out where i can.

Bootstrap base theme required.

https://www.drupal.org/sandbox/wrender/2627564

https://github.com/wrender/bootstrap-sass-starterkit

slipperysky’s picture

I wanted to try out bootstrap(7-34) and then found Wrender's bootstrap_sass_starterkit here (in #85) which was a nice surprise. I tested it with gulp and seem to have it working so far. Here are the steps I used:

01. $ drush dl bootstrap
02. Theme directory: $ git clone --branch 7.x-3.x http://git.drupal.org/sandbox/wrender/2627564.git
03. Rename 2627564 to bootstrap_sass_starterkit
04. Enable bootstrap and enable bootstrap_sass_starterkit as default
05. $ npm install - inside bootstrap_sass_starterkit directory
06. Change proxy in gulpfile.js to be the local dev site: loc.bootstrap7.com
07. $ gulp - to see what happens and got "Task 'default' is not in your gulpfile"
08. Add gulp.task('default', [ 'browsersync']); to bottom of gulpfile.js
09. Add a browser to gulpfile.js inside gulp.task('browsersync', ['sass'], function () {...}
10. $ gulp
11. Firefox opened up and loaded the dev site
12. Add something to a scss file, save it and the browser reloads

I didn't install the browsersync module though since it seems to work without the module? I'm on Manjaro-i3 using libsass and it's loading really fast.

Nice, now I can start learning bootstrap with sass.

markhalliwell’s picture

Status: Needs review » Postponed

It seems my comment about build tools in #80 was ignored. So, if we're really going to go down this road, I'd say that we should use Grunt, not Gulp. Also, I'd like to mention that I've been working on the following Grunt plugin:

https://github.com/unicorn-fail/grunt-drupal-bootstrap

It's not a perfect solution, but more so the direction I think I'd like to go (a separate, dedicated, Grunt plugin that supports both LESS and SASS).

So I'm marking as postponed on this plugin.

MakaziMtingwa’s picture

I followed #86 using grunt... From the bootstrap_sass_starterkit root folder, I replaced steps 7-10 with grunt init, followed by grunt watch.

Bootstrap SASS is working like a charm :-)

MakaziMtingwa’s picture

Additionally, I was able to follow the instructions at https://www.drupal.org/sandbox/wrender/2627564 for a Drupal 8 sub-theme. Provided all CLIs are installed and working (e.g., npm, grunt/gulp), the sandbox project by wrender works like a charm as well. Thank You.

kentr’s picture

If anyone's looking for a D8 Sass starterkit that more closely follows the LESS starterkit model and doesn't go into specific build tools, there's one here.

To address the automated building, I'm working with a standalone `gulpfile.js` intended to eventually cover module development as well.

markhalliwell’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev
Assigned: markhalliwell » Unassigned
Status: Postponed » Needs review
Issue tags: +Needs backport to D7

I'm un-postponing this issue since the 8.x version is relatively stable enough now and because I really haven't had much time to finish https://github.com/unicorn-fail/grunt-drupal-bootstrap.

As much as I'd love a "catch all" solution, I think my original sentiments in #80 still stands: if we want to get this issue "fixed", then we need to focus on just the starterkit, no build tools (which is really an entirely separate issue). Getting the converted SASS overrides is the primary focus of this issue. How they are compiled is not.

@kentr, thank you starting the 8.x SASS starterkit! Adding a patch here in this issue would be slightly more helpful (regardless of how big it may be, just don't add the "bootstrap" framework with it please).

kentr’s picture

Assigned: Unassigned » kentr
Status: Needs review » Needs work

@markcarver: Thx, I'll remove the bootstrap code and add it as a patch. I was waiting to see how you'd receive it.

Note that the work has the LESS Drupal overrides converted to .scss. There are also scripts to convert the LESS files and download Bootstrap Sass into the correct directory.

kentr’s picture

Status: Needs work » Needs review
FileSize
330.34 KB
markhalliwell’s picture

Status: Needs review » Needs work

Please don't include the scripts with this patch.

markhalliwell’s picture

Or the compiled CSS/map.

kentr’s picture

Status: Needs work » Needs review
FileSize
68.3 KB

Rerolled per #95, with a few more changes.

Removed:

* scripts
* compiled css
* _mixins-custom.scss

Renamed:

* THEMENAME.info.yml -> THEMENAME.starterkit.yml

pakmanlh’s picture

Status: Needs review » Reviewed & tested by the community

It works for me fairly well, nice work.
I also use the @kentr reccomendation with standalone gulpfile
Thank you!

markhalliwell’s picture

Status: Reviewed & tested by the community » Needs work
+++ b/starterkits/sass/sass/style.scss
@@ -0,0 +1,9 @@
+// Custom variables.  Will override default Bootstrap variables b/c
+// Bootstrap's   _variables.scss has !default in the declarations.
+@import "variable-overrides";
+
+// Bootstrap library.
+@import '../bootstrap/stylesheets/bootstrap';

This will not allow the variable-overrides to take affect. See:

http://cgit.drupalcode.org/bootstrap/tree/starterkits/less/less/style.less

http://cgit.drupalcode.org/bootstrap/tree/starterkits/less/less/bootstra... (which is missing)

rodrigoaguilera’s picture

I think it will allow the overrides because in bootstrap the variables are set like

$example: 'value' !default;

That only sets the value if it is not already set.

But I think is better to change the order and create a bootstrap.scss for clarity and keep it similar to the less starterkit.

markhalliwell’s picture

Status: Needs work » Reviewed & tested by the community

Ah, you're right... I completely forgot about !default. Never mind, this would work and even better the having to mirror the provided Bootstrap file.

rodrigoaguilera’s picture

This starterkit is importing everything from the bootstrap library
I opened an issue to clarify how this is done in the less starterkit #2775481: Document why the bootstrap.less file is duplicated/required

sylus’s picture

+++ b/starterkits/sass/THEMENAME.libraries.yml
@@ -0,0 +1,19 @@
+bootstrap-scripts:
+  js:
+    bootstrap/javascripts/bootstrap/affix.js: {}
+    bootstrap/javascripts/bootstrap/alert.js: {}
+    bootstrap/javascripts/bootstrap/button.js: {}
+    bootstrap/javascripts/bootstrap/carousel.js: {}
+    bootstrap/javascripts/bootstrap/collapse.js: {}
+    bootstrap/javascripts/bootstrap/dropdown.js: {}
+    bootstrap/javascripts/bootstrap/modal.js: {}
+    bootstrap/javascripts/bootstrap/tooltip.js: {}
+    bootstrap/javascripts/bootstrap/popover.js: {}
+    bootstrap/javascripts/bootstrap/scrollspy.js: {}
+    bootstrap/javascripts/bootstrap/tab.js: {}
+    bootstrap/javascripts/bootstrap/transition.js: {}

+++ b/starterkits/sass/THEMENAME.starterkit.yml
@@ -0,0 +1,24 @@
+libraries:
...
+  - 'THEMENAME/bootstrap-scripts'

These files are no longer part of the patch.

rodrigoaguilera’s picture

I think it is explained in the readme how to provide those files

sylus’s picture

Ah your right disregard my earlier comment :)

  • markcarver committed b97ee61 on 8.x-3.x authored by kentr
    Issue #2102895 by wrender, eidoscom, kentr, xaa: Add SASS starterkit
    
  • markcarver committed c463b07 on 8.x-3.x
    Issue #2102895 by wrender, eidoscom, kentr, xaa, markcarver: Add SASS...
markhalliwell’s picture

Version: 8.x-3.x-dev » 7.x-3.x-dev
Assigned: kentr » Unassigned
Status: Reviewed & tested by the community » Patch (to be ported)
Issue tags: -Needs backport to D7

Awesome work @kentr! Thank you!

I made some minor documentation consistency edits in a subsequent commit.

Anyone willing to "port" this backwards to 7.x? I would be extremely grateful :D

Obviously anyone should start from the work @wrender has done in #78, minus the build tools.

  • markcarver committed 9cbaf5c on 8.x-3.x
    Issue #2102895 by wrender, eidoscom, kentr, xaa, markcarver: Add SASS...
markhalliwell’s picture

Whoops, some more doc changes and a few logic changes.

  • Put in assets as part of the paths to source code since docs say to just drop the whole downloaded folder (to be consistent with Less docs)
  • Renamed _variable-overrides.scss -> _default-variables.scss and updated docs to reflect the fundamental shift in "workflow" (which is certainly different from Less).

  • markcarver committed ca5e16d on 8.x-3.x
    Issue #2102895 by wrender, eidoscom, kentr, xaa, markcarver: Add SASS...
markhalliwell’s picture

Minor styling fixes for doc site.

pakmanlh’s picture

Status: Patch (to be ported) » Needs review
FileSize
66.74 KB

Here we have it.

markhalliwell’s picture

Status: Needs review » Needs work

The CSS styling from 8.x cannot actually be "ported" back to 7.x. The markup/classes are different. Also, the 7.x branch doesn't have the "component" breakout like 8.x does.

That is why I said in #106 that the "port" should pick up @wrender's work that was done in #78, minus the build tools.

pakmanlh’s picture

Assigned: Unassigned » pakmanlh

Ok sorry, I misunderstood. I'm working on it again.

pakmanlh’s picture

Assigned: pakmanlh » Unassigned
Status: Needs work » Needs review
FileSize
53.04 KB

I attached a ported version based on the @wrender's work without the build tools.
I kept the bootstrap-sass folder name as «bootstrap» like the 8.x version.

markhalliwell’s picture

Status: Needs review » Needs work
  1. +++ b/starterkits/sass/README.md
    @@ -0,0 +1,58 @@
    +- @link plugins Plugin System @endlink
    

    We don't have the plugin system in 7.x. Instead it should reference the Theme Registry/[pre]process function topics like the Less starterkit.

  2. +++ b/starterkits/sass/config.rb
    

    Don't need a compass config file.

  3. +++ b/starterkits/sass/scss/_bootstrap.scss
    

    Don't need _bootstrap.scss anymore.

  4. +++ b/starterkits/sass/scss/_variable-overrides.scss
    

    This should be renamed to _default-variables.scss as the README.md suggests. This was a change in 8.x because Sass has the concept of !default variables and ultimately changes the workflow.

  5. +++ b/starterkits/sass/scss/style.scss
    @@ -0,0 +1,5 @@
    +// Bootstrap library.
    +@import 'bootstrap';
    

    Should be @import '../bootstrap/assets/stylesheets/bootstrap'; and should also import the _default-variables.scss file before the framework.

pakmanlh’s picture

Status: Needs work » Needs review
FileSize
50 KB
5.87 KB

Here I attached a new patch following the instructions, sorry for the mess.

  • markcarver committed e1c06a4 on 7.x-3.x authored by pakmanlh
    Issue #2102895 by wrender, pakmanlh, eidoscom, kentr, xaa, markcarver:...
  • markcarver committed ef14502 on 7.x-3.x
    Issue #2102895 by wrender, pakmanlh, eidoscom, kentr, xaa, markcarver:...
markhalliwell’s picture

Status: Needs review » Fixed

Thanks everyone!

lunk rat’s picture

Thank you to everyone who worked on this. I just created a subtheme with the new SASS starterkit and it was simple to get everything working!

wrender’s picture

Good to see this is now included. I'll test it out as soon as I have a chance.

ChandeepKhosa’s picture

thanks for adding this directly into Bootstrap, it was confusing to get this working before (lack of documentation & tutorials) and great to see it in this centralised location!
Have already started using it and it rocks :)

ChandeepKhosa’s picture

Edited : No longer relevant

ChandeepKhosa’s picture

I have audited the existing documentation and added child issues to this issue requesting documentation additions & updates here. The version numbers I filed them under may need to be reviewed
D7 https://www.drupal.org/node/2780609
D8 https://www.drupal.org/node/2780621

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.