The latest dev version ships with a more flexible radix_starter theme to kickstart sub theming. Here's a quick guide.

Installing Compass

  • Install rubygems: sudo apt-get install rubygems
  • Install SASS: sudo gem update; sudo gem install sass
  • Install Compass: sudo gem install compass
  • Install Compass Bootstrap plugin : sudo gem install compass_twitter_bootstrap

Create a subtheme

  1. Get the latest radix version: git clone --recursive --branch 7.x-2.x http://git.drupal.org/project/radix.git
  2. Copy radix_starter and place inside sites/all/themes.
  3. Rename radix_starter to YOUR_THEME_NAME.
  4. Rename radix_starter.info to YOUR_THEME_NAME.info
  5. Edit YOUR_THEME_NAME.info. Add a name, description and comment out the line hidden: true.
  6. Open a terminal and cd to your theme directory.
  7. Run the following command: compass clean && compass watch.
  8. Visit Appearance in your Drupal admin and enable your new theme.

Customization

In your theme folder, you will find a _variable.scss partial under assets/sass. This file holds all the SASS variables used in the theme. You can customize your theme colors from there.

Comments

chriz001’s picture

chriz001 commented

This all looks really good. I have a few questions for you.

in _raxix.scss there a re a bunch of import statements like this
@import "../../../radix/assets/sass/page";

This assumes radix is sitting next to my theme, right? what if i have a multisite setup and i want to put radix inside the sites/all/themes folder and then a sub theme for a particular domain? i guess this wont work in that case. Not without reconfiguring those paths anyway (i think)

Also i noticed the radix-style.css in the base theme is 718kb, that seems pretty big, is that right?

Thanks and nice work on this!

shadcn’s picture

shadcn commented

Yes. We've considered this situation and working on a solution for this. ^^

shadcn’s picture

shadcn commented

See http://drupal.org/node/1896382 for more info on this.

shadcn’s picture

shadcn commented
Status: Active » Closed (fixed)

Closing this issue. Theming guide moved to http://drupal.org/node/1896382.

rerooting’s picture

rerooting commented

The only problem with this approach is that the radix-styles are still included, though the radix scss is pulled into the subtheme styles. Thus the radix-style.css file needs to be excluded in order to prevent the duplication!

shadcn’s picture

shadcn commented

@rerooting, see the theming guide here: http://drupal.org/node/1896382 using a compass extension for radix.

rerooting’s picture

rerooting commented

@chris001 Yes, radix-style is that big! It includes all of the bootstrap css and more. You can remove unused bootstrap partials by removing them from the includes in the base theme, at least for now.

There are a few other tactics for keeping the size of the stylesheet low:

"line_comments: false" in config.rb < will turn off your auto-generated comments

compass compile -e production --force < will also remove the comments and some other helpful default settings.

Kristina Katalinic’s picture

Kristina Katalinic commented

Hi I am new to Radix but I am loving it!! Especially compatibility with bootswatch :)
Speaking of Bootswatch themes I tried building a subtheme based on Bootswatch Slate theme today and came across an issue

Most of the styles get applied when I copy/paste stuff from slate _variables.scss file however I noticed that some styles are also imported from _bootswatch.scss file and it is those styles that are not updated. Am I missing something here?

Appreciate any help :)

shadcn’s picture

shadcn commented

@Kristina, see http://drupal.org/patch/apply.

Kristina Katalinic’s picture

Kristina Katalinic commented

@arshadcn I am sorry but I am having trouble understanding how patch apply will help me get bootswatch specific styles applied to my subtheme from _bootswatch.scss and after looking at http://drupal.org/patch/apply I couldn't find any clarification.

Is there a Compass Bootswatch plugin perhaps that I need to install in order for _bootswatch.scss styles to be applied? If yes than perhaps that step should also be included in Installing Compass instructions above.

Sorry for being a bother but I am new to radix, compass and SASS so please help.

Also if I can make a suggestion for Documentation for Radix. Perhaps there should be a page that explains how to work with Bootswatch themes because I see bootswatch themes compatibility as one huge advantage for Radix.

Thank You

Kristina Katalinic’s picture

Kristina Katalinic commented
Issue summary: View changes

Fixed typo

henrikakselsen’s picture

henrikakselsen commented

Agree with #10, some quickstart info for bootswatch would help adoption.

Kristina Katalinic’s picture

Kristina Katalinic commented

I've since started using CodeKit and makes working with LESS and SASS a walk in the park.
Unfortunately its available for Mac only so I guess Windows users will have to look up for a similar app
Nonetheless, Bootswatch quickstart info would help adoption as #11 already said

pmackay’s picture

pmackay commented

I am also interested in some additional info on how to integrate different Bootswatch themes into a Radix subtheme.

shadcn’s picture

shadcn commented

Thanks for the report.

I've created an issue here #2082723: Make Bootswatch integration easier.

Lots of work going on right now to make this easier. I'll post updates there.

Thanks.

shadcn’s picture

shadcn commented

Ok. Radix + Bootswatch is easier and super simple now. See the guide here https://drupal.org/node/2083993.

shadcn’s picture

shadcn commented
Issue summary: View changes

'uncomment' should be 'comment out'

trungonly’s picture

trungonly commented

If you failed to install compass:
Failed to build gem native extension...

Try install ruby dev package first then install compass again:
apt-get install ruby-dev