Skip to content

Releases: uswitch/ustyle

Dr. Strange

11 Sep 15:07
@annez annez
v1.0.1
ed07238
Compare
Choose a tag to compare
Dr. Strange

image

Improvements

Overlay

  • History is now false for default [7c03791]
  • animationSpeed is now a config option [7c03791]
  • Importing utils functions to not pollute [7c03791]
  • Only hide if open [https://github.com/uswitch/ustyle/commit/7c03791f772dbb82f0ef9338db3ad113d375661b#diff-7c77f0beada2cbe27fe0a535ec8dc398R43]

Icons

  • New TV icon
  • New WiFi icon

Bug fixes

  • Fix ordering of responsive utility classes to allow chaining [d5ebed2]
  • Fix target area of tooltip hover on IE8 [f7f149e]

Documentation

  • Adding in browser support docs [a93d610]
Assets 2
Loading

Guardians of the Galaxy

11 Sep 15:11
@annez annez
v1.0.0
0c8b5a6
Compare
Choose a tag to compare
Guardians of the Galaxy

image

Ustyle has now reached a mature and stable state and, following Semver, has finally reached 1.0.0 milestone.

Documentation changes

  • Finalising documentation [0b2c5e6]
Assets 2
Loading

Jessica Jones

15 May 14:09
@annez annez
v0.16.0
e806213
Compare
Choose a tag to compare
Jessica Jones

New features

  • (Tooltips)[http://ustyle.guide/code/js-components.html#tooltip] - help text / tooltips are now available to use across uSwitch
  • (Featured items)[http://ustyle.guide/code/components.html#featured_deal] - For use on hero's and for promoted products
  • (Utility classes)[http://ustyle.guide/code/utilities.html]

Versioning

Versioning can now be done directly through grunt publish:version:{major,minor,patch}. The versioning strictly follows (Semver)[semver.org] and it is not advised to publish an explicit version number. Grunt will take care of upgrading all the versions across the specific files https://github.com/uswitch/ustyle/blob/master/Gruntfile.js#L14

This will both push the documnentation and upload a newer version of ustyle-latest.css / ustyle-content.css to S3 + Cloudfront.

Bug fixes

  • require 'json' can't be done in version.rb due to lack of Gem deps by that point. Any ruby app was failing on building ustyle from this. [0004366] [cc3c6e6] [cef38b8]
  • Anchor wouldn't calculate position on full width element due to naive maths [27f6cd4]

Styleguide

Other

  • Removed installer [cdc80ec]
  • Add authors [cdc80ec]
  • dist/ folder is now main folder for .css and .json [77d7cea]
Assets 2
Loading

Luke Cage

15 May 13:57
@annez annez
v0.15.0
60da226
Compare
Choose a tag to compare
Luke Cage

Features

  • Added Bower support [c35b5be]
  • New play and controller icon [7f6e666]

Grid

Grid is now in pixels rather than ems. This is safer and allows for changing the base font size according to screen size [88659e6]

Buttons

  • Fixed --reversed hover.
  • General button cleanup and removal of unused classes [https://github.com//pull/100]
  • .disabled is now .us-btn--disabled.

Improvements

  • Removed 100px negative margin from content headings [e615fae]
  • Documentation published via gh-pages [54ae29b]
  • Overlay/Anchor now rely on × unicode for close icon [ac19679]

Content

  • Written up imagery and brand framework pages [c0fc67c]

Bug fixes

  • Icon class targetting issues [008b67f]
  • Unicode right chevron [c2f3629]
  • Breadcrumbs need chevron [610600d]
  • Removed icon font declaration [422a9d7, e120b64]
  • Static content generation fixed for filenames with dashes [6281163]
  • .us-heading-{1..3} added to @print query to reset font [6cc792e]
Assets 2
Loading

Black Panther

17 Apr 16:23
@annez annez
v0.14.0
4d53fc0
Compare
Choose a tag to compare
Black Panther

This version removes "ustyle/structure" from the project and moves it to the includes

Additions

Icon loader

There's a very rudimentary icon loader that has been added into icons.rb which will async load SVG or PNG icons depending on browser support.

You can include this in any template that can interpolate ruby strings

<html>
<head>
  <%= Ustyle::Icons.loader(PATH_TO_YOUR_SVG_ICONS, PATH_TO_YOUR_PNG_ICONS) %>
</head>
...
</html>

More link styles

.us-link--light modifier for links on dark backgrounds. See https://uswitch.github.io/ustyle/components.html#anchor_links [461b8d9]

Improvements

  • Overlay can now be closed with escape key [6ed28d0]
  • All icon variables are now !default so they can be overriden project by project [59a399c]
  • Icons can have non-square dimensions [af81893]
  • Link states added to our breadcrumbs [c84cc9f]

Breaking change

Structure removal

"structure/base" is no longer in ustyle and all header/footer styling is in our includes project. Please remove any imports referring to the structure if you are on our customer facing website.

Icon font GONE

No more is the icon font. Deprecated are the following variables, extends and mixins:
$icon-font
%icon-font
@include icon-font($extend: true)

There is no replacement, as we do not rely on a font-family for our icons anymore, but rather SVGs (see last release for docs on that and ICON-UPGRADE.md)

Assets 2
Loading

Invisible woman

15 Mar 16:00
@annez annez
v0.13.0
ac32290
Compare
Choose a tag to compare
Invisible woman

This is a minor upgrade, with a cleanup of documentation and icon fixes.

Improvements

  • You can now resize icons to mobile and small-tablet by adding the following class names to the icon .us-icon--SIZE--mobile or .us-icon--SIZE--sm-tablet
  • Documentation for CTAs, breadcrumbs and USPs, Grid 1e7056a 96c1768
  • Removal of transition for buttons. Clearer colour changes and no need for unecessary transitions.
  • Styleguide ordering:
    -- Static templates (located in styleguide/static) can now be ordered by adding a number in front of the filename. E.g - 1-index.tpl
  • Removed dependency on aws-s3 and cloudfront-invalidator in favour of the official aws-sdk gem. 68f8ee9
  • Added utilities documentation

Fixes

  • Renamed .us-icon--duel-fuel to .us-icon--dual-fuel 0d8a235 07a5c3b
  • Selector fix for before/after sizing in the icons. bc913f3
  • Select background images now variables instead of inlined. Fixed #83
  • Remove /tmp folder every time before generating new PNG icons 9b37497
  • Made cross/tick custom colours $-red and $c-green respectively 8c67390

Breaking change

  • base64Encode is now base64encode function in Sass due to scss-lint.
Assets 2
Loading

Mephisto

20 Feb 17:27
@annez annez
v0.12.0
a2ad904
Compare
Choose a tag to compare
Mephisto

All future releases will be named after a Marvel superhero.

uSwitch icons

The new SVG+PNG icons are ready to be used and are already deployed on the includes. The icons have been consolidated and are now much easier to update and optimise. They also remove the problems with IE8 and icon font that causes it to go into compatibility mode.

For documentation on how to implement them, please go to the icons page.

If you wish to use the icons within your project, or you don't have the includes doing the heavy lifting, then add in a top level variable:

$load-icons: true;

By default this is false. The uSwitch includes also load the icons asynchronously and use uSwitch.svg as feature detection for SVG existing. You will want to have that on your project as well. You can set the fallback classes with these settings:

$svg-first: true !default;

$svg-support-class: ".svg-on" !default;

$png-support-class: ".svg-off" !default;

By default the SVGs are loaded in first and the PNGs are loaded as fallbacks if the SVG detection fails. If you need to support sites where you care about a non-js fallback, switch the logic to be PNG first.

Please see the uSwitch includes for how they are implemented top level.

Articles

Articles have been refactored and look better in mobile. To make use of the better look, please wrap your .us-guide-item and .us-news-item in a top level container:

<div class="us-article-group">
  <!-- YOUR ARTICLES HERE -->
</div>

Breaking changes

All $grey- colour variables have been removed. Please take a look at what they have been renamed to, or their closest equivalent c0df07f

$grey-10 -> $c-bordergrey
$grey-9 -> $c-keylinegrey
$grey-4 -> $c-inputgrey
$grey-6 -> $c-bordergrey
$c-darkgrey -> $c-typegrey
$c-lightgrey -> $c-bggrey

Consolidation

@import "ustyle/structure" no longer exists. If you want to import the structure, please use @import "ustyle/structure/base". The reason for this is we have consolidated all components/utilities/helpers into @import "ustyle/all". Please now be careful when importing everything, especially if you are only cherry picking certain components.

New styleguide

uStyle styleguide - The new styleguide now allows for a seamless development setup that allows for quick additions of components and documentation. We use DSS parser to document all .scss files and BrowserSync to watch across devices when testing.

Sass version

Ustyle now doesn't fix your Sass version. This should be an app level decision, but note that uStyle is backwards compatible with Sass 3.2+ due to legacy application. This will be the case for some time, but if you want to use newer Sass features within your app, you now can.

SCSS linting

Ustyle now has strict linting guidelines, so if you want to publish a new version you need to ensure you've gone through a linting check. We follow MDO's code guide and Hugo's Sass guidelines

Environment

uStyle now has knowledge of the top level ENV. The reason for this is so that in development we can have the image urls correctly mapped, but when building we can push production ready URLs. If you are building uStyle manually on any project, please ensure one of either RACK_ENV, NODE_ENV or RAILS_ENV are set when deploying to production. a830cba

Improvements

  • uStyle now relies on our proper CDN URL "assets0.uswitch.com..." and we've removed any old cloudfront URLs
  • Updating to Normalize 3.0.2
  • Stylestats now exist for every ustyle version

Bug fixes

  • Fixed bug where the print typography setting to default font was breaking printers #75
  • Fixed tabs on Safari being caused by Autoprefixer being too smart #76
  • Removing Sass version lock #46
  • Fixed IE8 container bug #77
Assets 2
Loading

Better Buttons, pageslider and browser support

23 Jan 15:29
@annez annez
v0.11.0
1b4a3d0
Compare
Choose a tag to compare
Better Buttons, pageslider and browser support

New features

Overlay

.us-overlay is now available to use across verticals. Markup will be on ustyle.uswitchinternal.com. Examples of this can be seen here: http://www.uswitch.com/mobiles/compare/sim_only_deals/

Buttons

This is a breaking change, please read carefully
Buttons have been refactored and simplified, we now have reduced the number of buttons and have restructured the default button to be grey, rather than red. Please see below what classes have changed. We are using BEM to declare classes now, so every button modifier is prefixed with .us-btn

.us-btn -> .us-btn.us-btn--primary
.us-btn.primary -> .us-btn.us-btn--action
.us-btn.secondary -> .us-btn.us-btn--secondary
.us-btn.tertiary--outlined -> .us-btn.us-btn--hero (should only be used in .us-hero)

Additional actions

.us-btn.arrowed -> .us-btn.us-btn--arrowed
.us-btn.large -> .us-btn.us-btn--large
.us-btn.blocked -> .us-btn.us-btn--blocked
.us-btn.small -> .us-btn.us-btn--small

Removed buttons

.us-btn.tertiary
.us-btn.primary--outlined
.us-btn.secondary--outlined
.us-btn.tertiar

New buttons

.us-btn.us-btn--reversed //this is a white button for use on dark background

Autoprefixer and browser support

We've now set a default Autoprefixer configuration for all apps. Autoprefixer was previously updating the browser support too quickly for our demographic so we decided to create a fixed configuration in uStyle that plugs itself in to AutorefixerRails. The configuration is below, the browser versions are the lower browser versions.

browsers:
  - "last 5 versions"
  - "Firefox 22"
  - "Opera 12.1"
  - "> 1%"
  - "Explorer 8"

Bug fixes

  • Removed comments from normalize.css as Autoprefixer was incorrectly parsing them dd179fb
  • Optimised form icons dd179fb
  • Locked autoprefixer due to API changes in 5.0
Assets 2
Loading

WHY RAILS... and fonts

02 Dec 17:28
@annez annez
0.10.0
790ccc6
Compare
Choose a tag to compare
WHY RAILS... and fonts

Fixes

Rails 4 and Sprockets introduced an asset dependency on gems that required us to add in explicit precompilation of our images. This meant you would get an Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError when running in Rails 4. This has now been fixed with this:
https://github.com/uswitch/ustyle/blob/master/lib/ustyle/engine.rb#L10

Unfortunately it's not the nicest fix, but it's the best we can do for now. Because sprockets

Quicker imports

You can now import all the required files with

@import "ustyle/global"

This imports all the important variables, fonts, font settings, mixins and base.

Fonts

Font declarations now reside in uStyle. This means any external project or project not relying on the includes can quickly load all the uSwitch fonts with two variables:

/// If using a uStyle project outside of www.uswitch.com domain or one that lacks the power the includes, then
/// set this to `true` to import the correct `@font-face` declarations.
///
/// @group fonts
/// @type Bool

$needs-font: false !default;

/// Same as `$needs-font` but also imports the EOT's so that fonts work in < IE8
///
/// @group fonts
/// @type Bool

$needs-font-ie: false !default;

/// Set this to wherever you are serving the uSwitch fonts from.
///
/// @group fonts
/// @type String

$base-font-url: "//fonts.uswitch.com/" !default;

Set these to true at the top of your Sass files to enable font loading.

Assets 2
Loading

0.9.19 - Valiant validations

11 Oct 11:54
@annez annez
0.9.19
e7f2a14
Compare
Choose a tag to compare
0.9.19 - Valiant validations

Features

  • Validations (#54)
  • Strapline styling for content .strap
  • Sassdoc documentation and generation (#63)

Enhancements

  • Tabs now trigger a ustyle.tab.active event on the current tab content
  • Tabs now have a flexible tabTitle option if you're building your own version
  • Removed scrollTop

Breaking change

  • Removed +animation() mixin in favour of native animation: #{property} CSS
Assets 2
Loading