Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
polythene-theme
Advanced tools
Default theme for Polythene. Version 0.1.14.
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.
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).
This section describes the default setup.
You will need:
Polythene-theme
- (this repository) the default themeRequirement:
Get the theme files at:
npm install polythene-theme
jspm install github:ArthurClemens/Polythene-theme
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"
}
Load the theme:
// app.js
require('polythene-theme/theme/theme');
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.
Different styling can be achieved using:
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.
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 chang the path lookup. From Polythene-examples (that uses jspm/SystemJS):
map: {
"polythene-theme/element/element": "app/custom-theme/element",
Here the file lookup for
polythene-theme/element/element.js
is changed to:
app/custom-theme/element.js
The same mechanism can be used to change the lookup for polythene-theme
to something else.
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 belowmixin
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.
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');
FAQs
Core Polythene package.
The npm package polythene-theme receives a total of 39 weekly downloads. As such, polythene-theme popularity was classified as not popular.
We found that polythene-theme demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.