Radix Quickstart Guide [#1891590]

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

Get the latest radix version: git clone --recursive --branch 7.x-2.x http://git.drupal.org/project/radix.git
Copy radix_starter and place inside sites/all/themes.
Rename radix_starter to YOUR_THEME_NAME.
Rename radix_starter.info to YOUR_THEME_NAME.info
Edit YOUR_THEME_NAME.info. Add a name, description and comment out the line hidden: true.
Open a terminal and cd to your theme directory.
Run the following command: compass clean && compass watch.
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

Comment #1

chriz001 CreditAttribution: chriz001 commented 23 January 2013 at 02:54

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!

Comment #2

shadcn CreditAttribution: shadcn commented 23 January 2013 at 06:21

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

Comment #3

shadcn CreditAttribution: shadcn commented 23 January 2013 at 09:14

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

Comment #4

shadcn CreditAttribution: shadcn commented 23 January 2013 at 09:23

Status:

Active

» Closed (fixed)

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

Comment #5

rerooting CreditAttribution: rerooting commented 28 January 2013 at 21:53

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!

Comment #6

shadcn CreditAttribution: shadcn commented 28 January 2013 at 21:58

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

Comment #7

rerooting CreditAttribution: rerooting commented 28 January 2013 at 22:01

@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.

Comment #8

Kristina Katalinic CreditAttribution: Kristina Katalinic commented 11 May 2013 at 14:26

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 :)

Comment #9

shadcn CreditAttribution: shadcn commented 11 May 2013 at 16:48

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

Comment #10

Kristina Katalinic CreditAttribution: Kristina Katalinic commented 11 May 2013 at 23:16

@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

Comment #10.0

Kristina Katalinic CreditAttribution: Kristina Katalinic commented 11 May 2013 at 23:16

Issue summary:

View changes

Fixed typo

Comment #11

henrikakselsen CreditAttribution: henrikakselsen commented 31 May 2013 at 12:34

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

Comment #12

Kristina Katalinic CreditAttribution: Kristina Katalinic commented 31 May 2013 at 15:22

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