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.
Main characteristics
- 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.
- NPM integration NPM is a javascript dependency packaging tool which comes with nodejs. Instead of packaging vendor libraries, we just refer to them in a package.json file. That's why you need to run npm install when you first download/install the theme from the theme root. This will download all required libraries and put them in a xtheme/node_modules folder. Bourbon, Neat and all required Grunt plugins are pulled in this automated way.
- 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:
Prerequisites:
* NodeJS: http://nodejs.org/ with npm support
* Grunt: http://gruntjs.com/ (See: http://gruntjs.com/getting-started)
Installing xtheme
* 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
Development
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.
Templates
xtheme packages overridden template files. They are adapted versions found in Mothership https://drupal.org/project/mothership
Sponsored by XIO
