aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2013-01-08 19:05:20 -0500
committerHakim El Hattab <hakim.elhattab@gmail.com>2013-01-08 19:05:20 -0500
commite618eda4e14b2495c651bdf67447c84869da8149 (patch)
tree445d2a27c8de2f489bb0ebb010513639231cc9d7 /css
parent38425fc4ff9e90008b7995452e0f8366672dd987 (diff)
downloadfreenode-live-2017-presentation-e618eda4e14b2495c651bdf67447c84869da8149.tar
freenode-live-2017-presentation-e618eda4e14b2495c651bdf67447c84869da8149.tar.gz
theming docs
Diffstat (limited to 'css')
-rw-r--r--css/theme/README.md22
1 files changed, 21 insertions, 1 deletions
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.