Network Performance Monitor


    2.0.14 • Public • Published


    ustyle unicorn

    uStyle, aptly named, is the styleguide gem for uSwitch. Include it in your Rails/Sinatra/Anything project as a gem to apply consistent styles according the uSwitch styleguide.

    This project is provided as is and is aimed at building uSwitch specific projects.


    uStyle is a fully fledged living styleguide that delivers both CSS and JavaScript components for technical implementations as well as documentation for how these things should be applied across uSwitch.


    uStyle is compiled and uploaded to S3. Consequently it is served from Cloudfront via our nginx load balancers.

    uStyle within applications is usually served within their asset pipeline on compilation.



    If you want to use as a gem

    • Ruby (1.9+)
    • Sinatra / Rails applications with sprockets

    This can also be used as a node package just like you would install any other package.

    uStyle automagically sets itself up in a sprockets context where found. That means both Sinatra and Rails apps get configured correctly. However there are a few gotchas, as we don't want to add gem dependencies that are only required for certain set ups.

    Add this line to your application's Gemfile:

    gem 'ustyle'

    And then run in your terminal:

    $ bundle


    Add to your Gemfile:

    gem 'sprockets'
    gem 'sprockets-sass', '~> 1.2.0'
    gem 'sprockets-helpers'

    Then in your app file (usually named server.rb/app.rb etc), after declaring your class App < Sinatra::Base:

    register Sinatra::Ustyle

    You must use sprockets-sass version 1.1.0 or above, as there was a bug where the postprocessor was getting added to the preprocessor which caused autoprefixer to break

    This is only for the gem, not the styleguide within this project.


    uStyle serves it's icons via <use xlink:href></use> tags within an SVG. We have decided to not embed our SVGs, but rather serve them from a URL. See here for a better explanation:

    Due to this, you need to have the icons.svg symbol map on the same domain, protocol and port as your application. To facilite this without serving a sprockets asset, ustyle comes with some Rack Middleware

    For Rails apps, in your development.rb file (you do not want this in production)

    config.middleware.use Ustyle::IconMiddleware

    For Rack apps (including Sinatra)

    configure :development do
      use Ustyle::IconMiddleware

    Currently there is no middleware to support node apps, but can be written easily.

    Alternatively, you can serve your application in a docker container with nginx (or another supporting proxy server) that has a route to /icons.svg so you can proxy pass to our icons for the app. Ports, domains and protocols must match when testing the icons.

    An example nginx configuration:

    location = /icons.svg {
      set $upstream "";
      proxy_pass $upstream$request_uri;

    You can then successfully reference your icon like so:

    <svg role="img" class="us-icon--medium us-icon--custom us-icon--{$NAME}">
      <use xlink:href="/images/icons.svg#icon-{$NAME}"></use>

    Adding a new Icon

    To add a new Icon, add the SVG file to /vendor/assets/images/icons, then add your new icon name as @state icon to this file.

    Finally, build the optimised icons using

    grunt icons


    Rails / Sprockets apps

    If using Rails and Sass, just import the base uSwitch styles at the start of your file

    @import "ustyle";

    This will import the main components. If you want more granular control of what to import, please look at the source code or the styleguide.

    Node apps

    uStyle comes with JavaScript implementations of the custom Sass Ruby functions used by Sprockets. To use uStyle's mixins and variables within your own Sass, you'll need to add these functions to the compiler you're using. For example, using node-sass in a project that also has Webpack, you can do the following:

    // In your webpack.config.js
    import { SassHelpers } from 'ustyle';
    module.exports = {
      // ...
      module: {
        rules: [
          // ...
            test: /.scss$/,
            use: [{
              loader: 'sass-loader',
              options: {
                functions: SassHelpers
          // ...
      // ...

    Mixins / Variables

    uStyle comes bundled with a good set of Sass variables and mixins to use in your project.

    For Sass documentation on mixins/variables available to you, please see:


    To preview changes that you make to uStyle's components and documentation, install dependencies with

    $ npm install
    $ bundle install

    then run:

    $ npm start

    This will run the Grunt default task that builds uStyle, then starts a Browsersync server at http://localhost:3000. Changes that you make are live-reloaded in your browser.





    npm i ustyle


    DownloadsWeekly Downloads






    Unpacked Size

    834 kB

    Total Files


    Last publish


    • daffydowden
    • mferry2016
    • phelm
    • ricardomccerqueira
    • domtronn
    • riksanchez
    • uswitch-publisher
    • brendonboshell
    • velrok
    • daniel.whyte
    • peterhorne-uswitch
    • salomao-rodrigues
    • enio
    • segger87
    • joshuacroad
    • jonthanfielding
    • floraharvey
    • kristink
    • giorgia-amici
    • barneyfoxuk
    • nate25
    • natyeo
    • annez