Polythene-theme
Default theme for Polythene.
Appearance / Theming
Polythene is an implemenation of Google's Material Design (MD). But foremost it is a component library, and not necessarily tied to MD. Functionality of the components is quite generic, and styles can be swapped out or enhanced.
Theme as component
The theme component defines the styles for the site as well as for all individual components: it is mainly a directory where each component has its subdirectory with style definitions.
By having all styles of all components together, overriding/substituting the default style is relatively efficient. Because unused styles are simply never loaded, it is not necessary to override default styles (hey Bootstrap).
Usage
This section describes the default setup.
Installation
You will need:
- Polythene - the core components
Polythene-theme
- (this repository) the default theme- Polythene examples - to see implementations of components
Requirement:
Get the theme files at:
npm
npm install polythene-theme
jspm
jspm install github:ArthurClemens/Polythene-theme
Configuration
polythene-theme
is the mapping variable that should point to the theme repository. This is default "path-to-your-polythene-theme". This can be set in your site's config file, for instance with jspm
:
map {
"polythene": "github:ArthurClemens/Polythene@master",
"polythene-theme": "github:ArthurClemens/Polythene-theme@master"
}
Require
Load the theme:
require('polythene-theme/theme/theme');
Under the hood
The component script file theme.js
loads site wide styles; by default layout
(flexbox styles), font-roboto
and typography styles.
When a Polythene component is loaded, it calls the theme file:
require('polythene-theme/dialog/dialog');
This theme file itself does not much more than fetching the style files:
import styler from 'polythene-theme/common/styler';
import style from 'polythene-theme/dialog/dialog-style';
import color from 'polythene-theme/dialog/dialog-style-color';
styler.add('polythene-style-dialog', style, color);
These JavaScript styles are converted to CSS styles using j2c.
Customizing
Different styling can be achieved using:
Enhancing styles
Extra styles are loaded on top of existing component styles. In Polythene-examples most pages have some extra styling using the styler utility:
import styler from 'polythene-theme/common/styler';
import style from 'app/card/card-style';
styler.add('polythene-examples-card', style);
Note that no loading order can be guaranteed. Instead use specificity to set precedence of styles.
Of course you can also load extra plain old CSS in the HTML file.
Replacing styles
Styles are replaced by changing the file path lookup for the module loader.
It cannot be done by writing the theme name in JavaScript like System.import('theme/component/style')
, because styles are loaded statically using require
and import
. This ensures that styles are loaded before the component is drawn to the screen. The downside is that no variable names can be used for these paths.
Most module loaders have a mapping option to change the path lookup. What we want is to change the file lookup from:
polythene-theme/element/element.js
to:
app/custom-theme/element.js
Browserify
In the build script:
...
bundle([
'my-main-input-file.js',
'app/custom-theme/element'
], 'my-bundled-output-file.js');
jspm / SystemJS
In the config file:
...
map: {
"polythene-theme/element/element": "app/custom-theme/element",
...
Replacing all styles
The same mechanism can be used to change the lookup for polythene-theme
to something else.
Theme utils
The "common" directory contains a couple of number of reusable scripts:
config
: Comparable to a "variables.scss" sheet, but in JavaScript with a property-color mapmixin
: Style mixins in JavaScriptobject.assign
: Polyfillstyler
: Wrapper around j2c to add styles to the headwebfontloader
: See below
Vendor prefixes
mixin
contains the function vendorize
to generate vendor prefixes. This is a utility wrapper around the j2c syntax _o$_ms$_moz$_webkit$: {foo: "bar"}
.
import config from 'polythene-theme/common/config';
import mixin from 'polythene-theme/common/mixin';
const styles = [{
' .dropShadow': [
mixin.vendorize({'transition': 'opacity 0.25s'}, config.vendors.transition),
mixin.vendorize({'transform': 'translate3d(0,0,0)'}, config.vendors.transform),
mixin.vendorize({'box-shadow': 'inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4)'}, config.vendors.box_shadow),
{
}
]
}];
Note the array syntax for mixins.
Webfont loader
Loads one ore more webfonts (multiple vendors) through Google's webfont loader. This is a simple script; no callback functionality is implemented.
Usage:
import webfontLoader from 'polythene-theme/common/webfontloader';
webfontLoader.add('google', 'Roboto:400,500,700,400italic:latin');
webfontLoader.add('google', 'Raleway:400,500,600:latin');