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-bggreyConsolidation
@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