From ecb4347ec1d9db8cceec1cb28385fc2326087b17 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 10:57:51 -0400 Subject: modularize themes and convert them to sass (closes #191) --- css/theme/README.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 css/theme/README.md (limited to 'css/theme/README.md') diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100644 index 0000000..137bdf2 --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,5 @@ +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 +``` \ No newline at end of file -- cgit v1.2.3 From e618eda4e14b2495c651bdf67447c84869da8149 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 8 Jan 2013 19:05:20 -0500 Subject: theming docs --- css/theme/README.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'css/theme/README.md') diff --git a/css/theme/README.md b/css/theme/README.md index 137bdf2..f3a2a2b 100644 --- a/css/theme/README.md +++ b/css/theme/README.md @@ -1,5 +1,25 @@ +## 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 -``` \ No newline at end of file +``` + + + +## 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. -- cgit v1.2.3