ustyle 1.14.11 → 1.15.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/dist/ustyle-content.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.json +1 -1
- data/lib/ustyle/version.rb +1 -1
- data/package.json +1 -1
- data/styleguide/assets/images/tone-framework.png +0 -0
- data/styleguide/content/design/accessibility-testing.md +82 -0
- data/styleguide/content/design/index.tpl +27 -25
- data/styleguide/content/language/grammar.md +2 -2
- data/styleguide/content/language/tone.md +109 -25
- data/vendor/assets/stylesheets/ustyle/basics/_typography.scss +5 -0
- data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss +3 -0
- data/vendor/assets/stylesheets/ustyle/components/_loader.scss +1 -0
- data/vendor/assets/stylesheets/ustyle/forms/_fields.scss +5 -1
- data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss +2 -2
- metadata +4 -2
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
// The default heading styling across all uSwitch pages.
|
|
7
7
|
// We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site.
|
|
8
8
|
//
|
|
9
|
+
// #### Best practices
|
|
10
|
+
// * Headings are for structure, not presentation
|
|
11
|
+
// * The first heading on the page should be an H1
|
|
12
|
+
// * Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]
|
|
13
|
+
//
|
|
9
14
|
// @markup
|
|
10
15
|
// <h1>Heading 1</h1>
|
|
11
16
|
// <h2>Heading 2</h2>
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
// @partial colour
|
|
4
4
|
//
|
|
5
5
|
// @description Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
|
|
6
|
+
// #### Best practices
|
|
7
|
+
// * Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.
|
|
8
|
+
// * Make sure your text is [sufficiently contrasted](http://a11yproject.com/posts/what-is-color-contrast/) against its background
|
|
6
9
|
//
|
|
7
10
|
// @variable c-cyan - Hero banners
|
|
8
11
|
// @variable c-navy - Text with emphasis
|
|
@@ -5,7 +5,11 @@
|
|
|
5
5
|
// This is the basic form field, `.us-field` wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with `.us-faux-label`
|
|
6
6
|
//
|
|
7
7
|
// #### Best practices
|
|
8
|
-
// *
|
|
8
|
+
// * All form inputs must have a corresponding label, linked to the input
|
|
9
|
+
// * The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context
|
|
10
|
+
// * For text inputs that are optional, add "(optional)" to the input label
|
|
11
|
+
// * Add `aria-required` to any input field that must to be filled in
|
|
12
|
+
// * See our best practices for [writing form labels](../language/microcopy.html#Form text, form labels)
|
|
9
13
|
//
|
|
10
14
|
// @state .us-field--blocked - Blocked label styling.
|
|
11
15
|
// @state .us-field--inline - Inline label styling.
|
|
@@ -102,8 +102,8 @@ $devices: ();
|
|
|
102
102
|
/// @require {Variable} devices
|
|
103
103
|
///
|
|
104
104
|
/// @param {String} $device
|
|
105
|
-
/// The device to match up the media query with. Can be one from the list of `$min-breakpoints`
|
|
106
|
-
/// or `$max-breakpoints`
|
|
105
|
+
/// The device to match up the media query with. Can be one from the list of `$min-breakpoints` (`small-tablet`, `tablet`, `desktop` etc.)
|
|
106
|
+
/// or `$max-breakpoints` (`mobile`, `to-small-tablet`, `to-tablet`)
|
|
107
107
|
///
|
|
108
108
|
/// @param {Bool} $ie-fallback [false]
|
|
109
109
|
/// If set to `true` will return a `.ie8` {content} fallback to ensure IE8 gets the supporting styling
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ustyle
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.15.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- uSwitch Limited
|
|
@@ -13,7 +13,7 @@ authors:
|
|
|
13
13
|
autorequire:
|
|
14
14
|
bindir: bin
|
|
15
15
|
cert_chain: []
|
|
16
|
-
date: 2017-
|
|
16
|
+
date: 2017-09-29 00:00:00.000000000 Z
|
|
17
17
|
dependencies:
|
|
18
18
|
- !ruby/object:Gem::Dependency
|
|
19
19
|
name: sass
|
|
@@ -241,6 +241,7 @@ files:
|
|
|
241
241
|
- styleguide/assets/images/styleguide-examples/unnatural-2.jpg
|
|
242
242
|
- styleguide/assets/images/styleguide-examples/unnatural-3.jpg
|
|
243
243
|
- styleguide/assets/images/styleguide-examples/warm.jpg
|
|
244
|
+
- styleguide/assets/images/tone-framework.png
|
|
244
245
|
- styleguide/assets/images/tone.png
|
|
245
246
|
- styleguide/assets/images/tooltip.png
|
|
246
247
|
- styleguide/assets/images/tsandcs.png
|
|
@@ -285,6 +286,7 @@ files:
|
|
|
285
286
|
- styleguide/assets/sass/vendor/_pure-table.scss
|
|
286
287
|
- styleguide/content/brand/index.md
|
|
287
288
|
- styleguide/content/brand/logo.tpl
|
|
289
|
+
- styleguide/content/design/accessibility-testing.md
|
|
288
290
|
- styleguide/content/design/index.tpl
|
|
289
291
|
- styleguide/content/design/typography.md
|
|
290
292
|
- styleguide/content/design/validating-designs.tpl
|