Edge-style NPM

Edge Style

The Edge Platform helps you focus on business logic rather than dealing with massive tooling, common patterns, complex configurations.

We know the hassle of adding basic sensible styling to your Single Page Application. Interestingly there were a lot of seperate libraries and solutions but not a useful combination of all of it. Edge Style is our take on delivering same basic styling for SPAs.

Features

Normalize: Based on normalize.css but using the application's customized browerslist: Why add the full normalize if you can only use what's needed?
Reset: Reset of all margins and paddings on block level elements: Layouting is easier when having a blank slate.
Sanitize: Sanitizes typical gotchas and non ideal legacy standards.
Box Sizing: Configures all elements and their shadow elements to use border-box.
Aria: Implements some best practises on ARIA markup.
OpenType: Tweaks default behavior of all native elements to use advanced OpenType features where useful.
Intl: Localized configuration for HTML quotes.

Installation

npm install --save-dev edge-style

Edge Style requires a PostCSS-based setup where postcss-normalize is enabled in the PostCSS configuration.

Other than that Edge Style works effectively without any further plugins as there is e.g. no selector nesting being used inside the source files. It couldn't hurt to add autoprefixer though for managing the minimum amount of prefixes required by your browserslist.

Usage

Anywhere in your application code just import the full package. Ideally it should be the first thing to include on the client side. There is no need for integrating it on the server side code (SSR).