polythene-theme

Polythene-theme

Default theme for Polythene. Version 0.1.14.

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

Requirement:

• j2c

Get the theme files at:

Github

Polythene-theme

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.

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
• styler: Wrapper around j2c to add styles to the head
• webfontloader: 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),
        {
            // 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');