Two years ago when the theme was first being envisioned I did not see we would have over 60 UIKit partials and more than 100 layout partials. Ruby SASS + Gems were doing the job OK and compilations times were acceptable - not so today, Ruby SASS is far too slow and we need the performance of Libsass to make building themes a fast experience.

The main changes are:

  • Using https://bower.io instead of bundler
  • Removing the Gem file, no long rely on Ruby + the gems (ruby, sass-globbing, sass, susy, modular scale etc).
  • Use bower for Susy and Modular Scale
  • Remove grunt packages: grunt-contrib-compass
  • Add grunt packages: grunt-sass, grunt-sass-globbing
  • make the necessary changes to our Gruntfile.js file, especially for the new globbing for layout forms
  • make the necessary changes to partials, mainly @import paths

I still have to decide what to do about compass, locally I am running a bespoke version of compass-mixins (my own based on compass alpha19). I will most likely add this to Github and add it to bower.json etc.

I have tried with the compass-importer and the existing compass-mixins packages on Github, however they are woefully out of date with mixins missing or simply not done correctly = unusable in a real production.

From a themer perspective there is just one change - instead of running "bundle install" you run "bower install" (bower is easy to install, npm install -g bower").

I have this running right now and it's significantly faster, so I think this is well worth the change, even if life is a little harder because including Compass is not so strait forward.

Backwards compatibility: No changes required, this only affects new sub-themes.

Comments

Jeff Burnz created an issue. See original summary.

Jeff Burnz’s picture

Jeff Burnz commented
Issue summary: View changes
Jeff Burnz’s picture

Jeff Burnz commented
Issue summary: View changes
Jeff Burnz’s picture

Jeff Burnz commented

I have create a new Github repo with the required mixins, this is working with bower in the new system perfectly: https://github.com/jmburnz/compass-vertical-rhythm-mixins

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Fixed: http://cgit.drupalcode.org/at_tools/commit/?id=595c8a9

Followup: update documentation on the Adaptivethemes homepage/AT Tools homepage etc.

abaier’s picture

abaier commented

Hey Jeff, I just saw this post and have some questions.

If I would start a clean install (new project) today, should I then start with the current dev versions of adaptivetheme and at_tools to benefit from the updates explained above? What would be the way to go?

What does it mean for existing projects – will they inherit the changes from the updated base theme or will they run on the previous behaviour?

Thanks in advance!

Jeff Burnz’s picture

Jeff Burnz commented

What does it mean for existing projects – will they inherit the changes from the updated base theme or will they run on the previous behaviour?

They'll run on the previous behaviour, which is no problem, other than it's a little slow at times.

If I would start a clean install (new project) today, should I then start with the current dev versions of adaptivetheme and at_tools to benefit from the updates explained above? What would be the way to go?

Use the DEV version. Libsass was the last major thing I have on my ToDo list, and it's been there for about a year.

Installing bower takes 5 seconds and its actually much faster now running bower install compared to bundler.

I don't envision any major changes from here to 8.x-1.0 release.

RKopacz’s picture

RKopacz commented

Jeff just spun this out for a new site. Working great, huge improvement. The only thing I would like to get working on it is LiveReload. I had it running with the gems, and will be actively looking / testing on how to do it in this new config. I'll try to post it on the documentation page for AT when I get it figured out. If anybody has a solution in the meantime, I'd love to see it. I was using grunt express and grunt parallel to good effect in prior config, but can't get it to work now in the new config.

Jeff Burnz’s picture

Jeff Burnz commented

OK, I'll take a look into LiveReload, certainly something I have thought about, I don't tend to use it very much but I can see it's value.

RKopacz’s picture

RKopacz commented

@Jeff Burnz it seems kind of ridiculous (is it really that hard to manually refresh the browser?) but now that I don't have it I realize I got kind of used to it being around. I've been googling around trying to find a few configs, but haven't gotten it to work yet. If I find something that works I'll share it here.

Jeff Burnz’s picture

Jeff Burnz commented

Could you detail what you had running before with Gems - just the basic setup and how you ran LiveReload.

Jeff Burnz’s picture

Jeff Burnz commented
Title: Change from Ruby SASS/Bundler/Gems to Libsass(grunt-sass)/Bower » Change from Ruby SASS/Bundler/Gems to Libsass(grunt-sass)/Bower (and livereload)
Status: Fixed » Active

OK, I did it like and it worked first time, lol:

Add livereload the the watch task (livereload.js is included in grunt-contrib-watch)

watch: {
  uikit: {
    files: 'styles/uikit/components/**/*.scss',
    tasks: ['sass:uikit', 'postcss:uikit'],
    options: {
      livereload: true
    }
  },
  ... etc

Then add the script html.html.twig

    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
    <script src="//localhost:35729/livereload.js"></script>
  </body>
</html>

Turn on my LiveReload browser extension (using Chrome), fire up grunt watch and it works. Simple as that really.

Nope, the script just turns it on automatically.

What I think we should do is automate adding the script tag, as a theme setting in Developer tools.

Jeff Burnz’s picture

Jeff Burnz commented

I think I'll do it like this:

watch: {
  uikit: {
    files: 'styles/uikit/components/**/*.scss',
    tasks: ['sass:uikit', 'postcss:uikit'],
    options: {
      livereload: 1337
    }
  },

Where 1337 is a custom port for LiveReload, the in the Developer tools settings I stick a textfield so you can change it, you'll have to mirror the change in the Gruntfile.js task also. I have this working now, it's pretty sweet.

I had some immediate issues with port 35729.

I've added a library to at_core and modify it in at_tools module to inject the custom port (library alter).

I'll test a bit more and then commit it, I like the change, it's easy and very fast.

RKopacz’s picture

RKopacz commented

woah, Jeff, you left me in the dust. I'm testing this tonight! With #13 do you still need the script in the twig template? I'm on this.

Jeff Burnz’s picture

Jeff Burnz commented

I still need to commit the changes, so it's not quite all there in the dev version.

Basically all you will need to do is turn it on in theme settings and fire up grunt watch. As long as your browser has a live reload plugin/extensions etc it will start up automatically and live reload as per normal - no more copy/pasting script snippets from the LiveReload app etc. You don't even need the app running at all, just the browser extension needs to be installed.

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl commented

Hi Jeff,

I am on the latest 8 dev version of your theme and trying out to make changes in the UIkit. I did all the installs of composer, bundler, Node js, NPM and grunt.
I have to use grunt --force (advice from grunt). Grunt seems to be running but i get this (and I see no changes after flushing all caches). It seems to not work as expected with the mismatch in rubyversions (your gemfile is lower in version). The compass is loadable I checkt it...). I read from this page your actually switching to another way of doing this?

>> File "styles/uikit/components/partials/_variables.scss" changed.
Running "compass:uikit" (compass) task
bundler: failed to load command: compass (/usr/local/bin/compass)
Bundler::RubyVersionMismatch: Your Ruby version is 2.3.1, but your Gemfile specified 2.3.0
  /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.13.1/lib/bundler/definition.rb:475:in `validate_ruby!'
  /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.13.1/lib/bundler.rb:93:in `setup'
  /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.13.1/lib/bundler/setup.rb:20:in `<top (required)>'
  /usr/local/lib/ruby/site_ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55:in `require'
  /usr/local/lib/ruby/site_ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55:in `require'
Warning: ↑ Used --force, continuing.

Running "postcss:css" (postcss) task
<strong>>> 62 processed stylesheets created.
>> 62 sourcemaps created.</strong>

Done, but with warnings.
Completed in 2.129s at Thu Sep 15 2016 21:50:14 GMT+0200 (CEST) - Waiting...
Jeff Burnz’s picture

Jeff Burnz commented

Change the Gemfile to use Ruby 2.3.1, it should work fine.

Open up the Gemfile in your sub-theme and just change it and save. Delete the Gemfile.lock file. Then run bundle install again. Then you should be good to go, grunt watch etc.

This must be an older sub-theme, generated some time ago? I later version we use Libsass, so no Ruby, and no Bundler Gems.

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl commented

#17, Hi Jeff,

It was: AT Tools 8.x-1.0-rc2. I will give it a go with a new install to figure it out en give feedback. Thanks so far...

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl commented

Hi Jeff,
using it the new way and it appears to be working fine.

Valter Bengtsson’s picture

Valter Bengtsson commented

Hello,
I am trying to use SASS with Adaptive Theme 8.x-1.0 and UIKit but cannot figure how to get the watch command to work.
I am probably missing something basic, and would greatly appreciate a short step-by-step instruction on how to get going.
Some questions here...
1. Exactly what are the commands in Terminal to install the correct versions of npm, grunt etcetera?
2. Anything that needs to be removed from earlier installations?
3. Any files that must be added or modified manually?
Thanks in advance!

benjarlett’s picture

benjarlett commented

Hi Jeff

I'm getting:
Fossie:prestbury_ jamin$ bower install
bower ENOENT No bower.json present

I got this to work before... please can you detail the exact Terminal commands as requested above, it would be great reference...

staulien’s picture

staulien commented

Hi Jeff,

Just wanted to know where I could find the bower.json file. I am getting the same error as benjarlett and I looked though all of the different versions but can't find any version of it anywhere.

Unless I am doing something wrong.

Thanks
Shawn

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl commented

Hi all,

Did you read the README.md file yet. It should be pretty straightforward.
Do the installs as suggested from the root of you theme.
If everything is ok, you can find de bower.json file in the

.../yourtheme/bower_components/XXX/bower.json

where XXX is a bower component...

run the grunt watch command from the root of your theme.

Have fun, Guido

Jeff Burnz’s picture

Jeff Burnz commented

#21, #22 if you're running on rc2 or earlier (8.x-1.x versions) there is no bower dependancy, instead those earlier versions use Ruby Gems, so there will be a Gemfile and Gemfile.lock.

Only on 8.x-2.x will you see a bower.json file in the root of your sub-theme. The command is (from your theme root):

bower install

This will download the required packages to your theme root. These are the SASS dependancies, i.e. Susy, Modular Scale and a fork of Compass Vertical Rhythm.

You also need to fire off:

npm install

This will install all the node packages, these are mostly all the Grunt packages used by various task runners.

Jeff Burnz’s picture

Jeff Burnz commented
Version: 8.x-1.x-dev » 8.x-2.x-dev

It's possible I have confused this situation by not being clear about versions and the changes I had to make quite recently - I needed to revert the 1.x branch to rc2 and then create a new 2.x branch - it's this 2.x branch that has Libass and Bower etc, everything on 1.x has Gem files and uses Ruby SASS.

staulien’s picture

staulien commented

Guido and Jeff,

Thank you very much for you help!

I realized the error of my ways... I installed adaptivetheme:2.x-dev but installed when I installed at_tools I didn't specify the 2.x-dev and it defaulted to 1.0-rc2 so when I generated my theme it was not the correct version.

Quick change of versions and works beautifully!

Thanks again!

Shawn

Valter Bengtsson’s picture

Valter Bengtsson commented

Hello, and lots of thanks for a very competent base theme!

I use Adaptive Theme 8.x-1.0 as base theme, along with AT Tools 8.x-1.1, running on Drupal 8.2.8.
How can I update it to Adaptive Theme 8.x-2.0 and AT Tools 8.x-2.0?

I tried to simply remove/uninstall 8.x-1.0/1.1 and then install 8.x-2.0, but that did not work. I hope you can help me with some advice on this.

My plan is to create a new sub theme based on 8.x-2.0 that will replace my current sub theme.

(I understand one of the advantages with 8.x-2.0 is that I can choose Flexbox when creating a sub theme. Perhaps that option is available also with 8.x-1.1. If so, how? This is not the only reason I want to move to 8.x-2 though.)