uStyle styleguide

Our pattern library comes as an easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.

View on GitHub

Distribution methods

Ruby gem

uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.

gem 'ustyle', git: "[email protected]:uswitch/ustyle.git"

Bower package

Install it as a bower package. This will pull down the original .scss files and compiled static CSS + JS.


        "dependencies": {
          "ustyle": "[email protected]:uswitch/ustyle.git#~0.19.1"
        }

Cloudfront

Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.


        <!-- get latest -->
        <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />
        <!-- get versioned -->
        <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />

NPM Package


        "devDependencies": {
          "ustyle": "[email protected]:uswitch/ustyle.git#~0.19.1"
        }

Browser support

We use Autoprefixer + Browserlist to decide what vendor prefixes to apply to our Sass files. We have a slightly wider browser support than the default (here). Currently we support all the way to IE9.

Below is what we support. Each line is the minimum version or % use based on CanIUse metrics

Browser	Minimum version supported
Safari, Chrome, Opera	Last 5 versions
Firefox	ESR
Internet Explorer	10
Global usage	> 1%

Installation

See our GitHub for documentation on installing this across applications.