From 6a0ce3c5e9db14dfbc6e0b63c7901f423a96f4ea Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 4 Mar 2013 16:34:47 -0500 Subject: [PATCH] add grunt sass theme task --- Gruntfile.js | 27 +++++++++++++++++++++++++-- css/theme/README.md | 25 ------------------------- package.json | 1 + 3 files changed, 26 insertions(+), 27 deletions(-) delete mode 100644 css/theme/README.md diff --git a/Gruntfile.js b/Gruntfile.js index 22502f6..ac6382d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -42,6 +42,19 @@ module.exports = function(grunt) { } }, + sass: { + main: { + files: { + 'css/theme/default.css': 'css/theme/source/default.scss', + 'css/theme/beige.css': 'css/theme/source/beige.scss', + 'css/theme/night.css': 'css/theme/source/night.scss', + 'css/theme/serif.css': 'css/theme/source/serif.scss', + 'css/theme/simple.css': 'css/theme/source/simple.scss', + 'css/theme/sky.css': 'css/theme/source/sky.scss' + } + }, + }, + jshint: { options: { curly: false, @@ -64,8 +77,14 @@ module.exports = function(grunt) { }, watch: { - files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], - tasks: 'default' + main: { + files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], + tasks: 'default' + }, + theme: { + files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ], + tasks: 'themes' + } } }); @@ -75,8 +94,12 @@ module.exports = function(grunt) { grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); grunt.loadNpmTasks( 'grunt-contrib-uglify' ); grunt.loadNpmTasks( 'grunt-contrib-watch' ); + grunt.loadNpmTasks( 'grunt-contrib-sass' ); // Default task grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] ); + // Theme task + grunt.registerTask( 'themes', [ 'sass' ] ); + }; diff --git a/css/theme/README.md b/css/theme/README.md deleted file mode 100644 index f3a2a2b..0000000 --- a/css/theme/README.md +++ /dev/null @@ -1,25 +0,0 @@ -## Dependencies - -Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. - -``` -sass --watch css/theme/source/:css/theme --style expanded -``` - - - -## Creating a Theme - -To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). Each theme does four things in the following order: - -1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** -Shared utility functions. - -2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** -Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. - -3. **Override** -This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. - -4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** -The template theme file which will generate final CSS output based on the currently defined variables. diff --git a/package.json b/package.json index 830b877..633171d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "grunt-contrib-cssmin": "~0.4.1", "grunt-contrib-uglify": "~0.1.1", "grunt-contrib-watch": "~0.2.0", + "grunt-contrib-sass": "~0.2.2", "grunt": "~0.4.0" } }