Polymer Theme

Polymer Theme based on BEM Methodology and Material Design language.

For scaffolding Polymer apps use Polymer Starter Kit or Polymer generator.

✨ DEMO ✨

Features

Based on BEM (Block Element Modifier) Methodology
Reusable CSS styles based on class attribute
Independent blocks and css selectors plus layer system makes your code reusable and modular
You don't need calculating a selector's specificity
Check out the blocks
Using Sass CSS Preprocessor
Material Design typeface in CSS
Check out the demo
Roboto Font Combinations
Based on Material Design Color Palette
Check out the variables.scss and material-colors.scss module

Installation

bower install polymer-theme --save

Usage

app.scss

$font-name-heading:       'roboto-slab';
$font-lang:               'en';
@import 'bower_components/polymer-theme/sass/base';

body {
  font-family: $font-body;

  /deep/ {
    h1,
    h2,
    h3 {
      font-family: $font-heading;
    }
  }
}

.polymer-theme {
  $color-name-primary:    'indigo';
  $color-name-secondary:  'pink';
  $color-name-text:       'grey';
  @import 'bower_components/polymer-theme/sass/variables';
  /deep/ {
    @import 'bower_components/polymer-theme/sass/blocks/all';
  }
}

index.html

<body class="polymer-theme">

Variables

Material Design Colors

Link to module

$color-name-primary:      'indigo';
$color-name-secondary:    'pink';
$color-name-text:         'grey';

Roboto Font Combinations

Link to module

$font-name-heading:       'roboto-slab';
$font-lang:               'en';

Contributing 👍

Fork it
Create your feature branch (git checkout -b my-new-feature)
Make your changes
Run the tests, adding new ones for your own code if necessary
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

StartPolymer/polymer-theme

Polymer Theme

Features

Installation

Usage

app.scss

index.html

Variables

Material Design Colors

Roboto Font Combinations

Contributing 👍

MIT License