Xtheme is a light Sass and nodeJs based Drupal starter theme. This theme differentiate it's self by it simplicity and structure. It does not incorporate a grant list a features but rather embodies a frontend workflow. I have not found on drupal any theme that does this, many of the existing theme's are bloated with features and drupal overwrites. Xtheme does not want to rewrite drupal output, just makes it easier to develop a theme for drupal in a structured way.
- Bourbon instead of Compass. Prior experience made us move away from Compass: it's heavily Ruby based and too convuluted (gem dependencies, slow, etc.) Bourbon is a perfect lightweight alternative and is used in a self contained per project basis.
- Libsass instead of Compass. Instead of Ruby, we use the C implementation of sass which compiles things superfast.
- Grunt integration This theme comes with Grunt integration. Grunt is a JS task runner. When you type grunt sassfrom the xtheme path, it will compile all sass files and put everything in the right place. Grunt tasks are defined via gruntfile.js
- NodeJS integration We use the grunt watch plugin to use the build in livereload support of nodejs. If you run grunt watch from xtheme's path, magic happens: each time you edit a scss file, grunt will fire sass, compile the files and use nodejs' livereload support to automagically reload your browser window. In a regular Drupal theme, you would normally do all these movements manually (compile, press F5 in your browser, etc.) Automation increases developer happiness!
- Bonus JSHint support There's also JSHint / Grunt integration. While writing JS, JSHint will report errors, bugs, potential issues,...
How to get started:
* Download the tar.gz package or drush dl xtheme int o sites/*/themes/custom/xtheme
* Open a terminal and navigate to the root of the theme (
$ cd /yourproject/*/custom/xtheme)
* Download all dependencies:
$ npm install
* Enable the theme in Drupal
We use Grunt, an advanced JS task runner, to automate most repeatable, tedious tasks. Grunt is a command-line tool. We defined these commands:
$ grunt sass
Compile the sass files
$ grunt watch
Start a watch and livereload session for the xtheme. This task will spin up a nodejs instance which will watch the xtheme files. Each time you make a change in the scss files: sass will compile, resulting css will be updated & the livereload plugin will automagically reload the page in your browser window (so: no more abusing that F5 button!)
$ grunt prod
Compile the theme for production (will minify stylessheets, js, pack icons, etc.)
Refer to the Gruntfile.js to adapt the tasks to your own needs.
xtheme packages overridden template files. They are adapted versions found in Mothership https://drupal.org/project/mothership
Sponsored by XIO
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 136 sites currently report using this theme. View usage statistics.
- Downloads: 4,304
- Last modified: 14 June 2016
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.