polythene-theme

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:

• j2c

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:

// app.js
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:

// polythene/dialog/dialog.js
require('polythene-theme/dialog/dialog');

This theme file itself does not much more than fetching the style files:

// polythene-theme/dialog/dialog.js
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 map
• mixin: Style mixins in JavaScript
• object.assign: Polyfill
• no-tap-delay: Wrapper around Fastclick to handle taps when scrolling
• styler: Wrapper around j2c to add styles to the head
• webfontloader: See below

No tap delay

To remove the tap delay on mobile it is advisable to use a library like Fastclick. But because Fastclick has an unresolved issue with tap events while scrolling on iOS, it is better to use the convenience wrapper provided in the default theme. This temporarily removes the Fastclick event an element is scrolled.

import noTapDelay from 'polythene-theme/common/no-tap-delay';

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),
        {
            // rest of style
        }
    ]
}];

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');