Merge pull request #373 from IBM-Watson/develop

Release 1.0.0

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Watson Design Guide Changelog
 
+## v1.0.0
+**May 19, 2015**
+
+**Change**
+
+* :bug: Fix loading indicator minification
+* :art: Clean up patterns
+* :art: Spelling and grammar fixes
+* Update global `rhythm`
+* Make site footer sticky to bottom of viewport
+
 ## v1.0.0-rc.4
 **May 18, 2015**
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "watson-design-guide",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0",
   "homepage": "https://github.com/IBM-Watson/design-library",
   "authors": [
     "Sam Richard <[email protected]>",

language/02-guidelines/01-style/accessibility/index.md

@@ -52,4 +52,4 @@ In addition to the fundamental visual accessibility guides, animation has its ow
 
 {{ _detail.view(detail.accessibilityAnimation) }}
 
-The five-second limit is long enough to get a user’s attention, but short enough for a user to wait out the distraction before reading the page. Do not include anything that flashes, or can be considered a flash, more than twice per second; it can negatively affect those prone to seizures. If the animation has audio longer than three seconds, provide audio control for users that have screen reading software, as it will make it easier for them to understand their screen reader.
+The five-second limit is long enough to get a user’s attention, but short enough for a user to wait out the distraction before reading the page. Do not include anything that flashes, or can be considered a flash, more than twice per second; it can potentially cause seizures. If the animation has audio longer than three seconds, provide audio control for users that have screen reading software, as it will make it easier for them to understand their screen reader.

language/02-guidelines/01-style/color/index.md

@@ -38,13 +38,13 @@ variables:
       - palette: Orange
         tone: 50
         adjectives: 
-          - Innovation
-          - Utility
+          - Innovative
+          - Utilitarian
       - palette: Teal
         tone: 60
         adjectives:
-          - Awareness
-          - Approachability
+          - Aware
+          - Approachable
   accentColors:
     instructions: "Choose an accent color. Add hues as necessary."
     colors:
@@ -97,7 +97,7 @@ Choose a primary color, a secondary color, and an accent color. Additional tints
 
 {{ _color.groupSwatches(supportingGrays) }}
 
-## Applying A Color Palette
+## Applying a Color Palette
 
 Color is a powerful communication tool that helps determine hierarchy on a page. Use ample white space and neutrals to create balance and to direct users' attention.
 

language/02-guidelines/01-style/typography/index.md

@@ -20,7 +20,7 @@ variables:
         title: "Helvetica Neue Bold Italic"
         visualDisplay: /images/typography/typeface-bold-italic.svg
     responsiveTypography:
-      title: "Major Third with a breakpoint at 500px"
+      title: "Major third with a breakpoint at 500px"
       visualDisplay: /videos/typography/responsive-typography.webm
       description: "When the browser gets wider than 500px, headings adopt the Golden Ratio type scale to increase legibility for the user at larger screen sizes."
 ---
@@ -35,7 +35,7 @@ As a rule and wherever possible, use Helvetica Neue. It is the font of science a
 
 ## Performance Considerations
 
-When presenting large amounts of content, it is important to consider how multiple font downloads can affect the browser’s performance for the user. To ensure optimized performance for all users, IBM Watson recommends choosing a combination of no more than 4 different weights and styles (light and light oblique being 2 different styles, for instance). 
+When presenting large amounts of content, it is important to consider how multiple font downloads can affect the browser’s performance for the user. To ensure optimized performance for all users, IBM Watson recommends choosing a combination of no more than four different weights and styles (light and light oblique being two different styles, for instance). 
 
 {{ _example.compare(example.typefaceCombinations) }}
 

language/02-guidelines/02-interaction/animation/index.md

@@ -17,9 +17,9 @@ Motion is a fundamental element of user experience design because it demonstrate
 
 {{ _example.compare(examples) }}
 
-Motion design enhances communication throughout the design process, from the rapid prototyping of scenarios and interfaces to delivering final coded interface animations. The metaphor for animation comes from the IBM Design Language metaphor of elegant machine motion. The [IBM Design Language *Motion* section](http://www.ibm.com/design/language/framework/interaction/motion.shtml) walks through the methodologies and process for creating animation for IBM software products.
+Motion design enhances communication throughout the design process, from the rapid prototyping of scenarios and interfaces to delivering final coded interface animations. The metaphor for animation comes from the IBM Design Language metaphor of elegant machine motion. The IBM Design Language [*Motion* section](http://www.ibm.com/design/language/framework/interaction/motion.shtml) walks through the methodologies and process for creating animation for IBM software products.
 
 
 ## Animation Library
 
-The animations within this library are a collection of entrance and exit animations for page transitions that can be utilized within our interfaces. The library was built using CSS keyframe animations and can be implemented by using a Sass mixin. To view more about how to use this library check out the [documentation](/ui-patterns/documentation/animation), and please feel free to contribute additional animations.
+The animations within this library are a collection of entrance and exit animations for page transitions that can be utilized within our interfaces. The animation library was built using CSS keyframe animations and can be implemented by using a Sass mixin. To view more about how to use this library, read the [documentation](/ui-patterns/documentation/animation), and please feel free to contribute additional animations.

language/02-guidelines/03-branding/wordmark/index.md

@@ -33,19 +33,19 @@ variables:
           visualDisplay: /images/wordmark/logo-color-neg.svg
     thirdCompare:
         exampleOne:
-          title: "Do not reconfigure"
+          title: "Do not reconfigure."
           visualDisplay: /images/wordmark/wrong-configuration.svg
           sentiment: negative
         exampleTwo:
-          title: "Do not distort"
+          title: "Do not distort."
           visualDisplay: /images/wordmark/wrong-distortion.svg
           sentiment: negative
         exampleThree:
-          title: "Do not combine colors"
+          title: "Do not combine colors."
           visualDisplay: /images/wordmark/wrong-color-combination.svg
           sentiment: negative
         exampleFour:
-          title: "Do not change the font"
+          title: "Do not change the font."
           visualDisplay: /images/wordmark/wrong-font.svg
           sentiment: negative
 ---
@@ -56,7 +56,7 @@ The IBM Watson wordmark and logo represent our brand and should be managed caref
 
 ## Specifications
 
-### Spacing considerations
+### Spacing Considerations
 
 It is important to include adequate spacing around these elements to avoid visual clutter. Keep the area around the IBM Watson wordmark separated from other visual elements by a distance approximately equal to the height of the IBM Watson wordmark. This distance is considered the minimum uninterrupted space surrounding the mark.
 

language/02-guidelines/user-experience/performance/index.md

@@ -32,7 +32,7 @@ variables:
       description: "Dulles, VA - **Motorola E** - **Chrome**. *1.6 Mbps/768 Kbps connection with a 150ms round trip time*. [Full test](http://www.webpagetest.org/result/150515_53_JXT/)"
 ---
 
-Performance is an integral part of a user's experience no matter the medium that interface takes. Web delivered interfaces, native interfaces, application programming interfaces; whenever a user interacts with a product, performance always needs to be a top concern. Slow performing interfaces have been shown to [cost money and conversions](http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales) and [affect a company's bottom line](https://blog.kissmetrics.com/loading-time/). More than that, performance is about respecting our users and the way humans perceive and react to the world around them.
+Performance is an integral part of a user's experience no matter the medium that interface takes. Web-delivered interfaces, native interfaces, application programming interfaces; whenever a user interacts with a product, performance always needs to be a top concern. Slow performing interfaces have been shown to [cost money and conversions](http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales) and [affect a company's bottom line](https://blog.kissmetrics.com/loading-time/). More than that, performance is about respecting our users and the way humans perceive and react to the world around them.
 
 ## The Neuroscience of Performance
 
@@ -44,13 +44,13 @@ In Jakob Nielsen's book _Usability Engineering_, he [describes three important l
 
 ![Acceptable Website Response Times](/images/performance/performance1.svg)
 
-This research, published in 1993, has since been expanded upon with [Powers of 10: Time Scales in User Experiences](http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/) which goes in to more detail about the importance of time in the user's perception of an experience. Beyond Nielsen, additional research suggests that the 10 second maximum in practice winds up being closer to **5 seconds** for many people, with [50% of mobile users exiting an application or site if it takes more than 5 seconds to load](http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf). In 2010, CA Technologies commissioned a study to [quantify how humans react to slow websites](http://www.webperformancetoday.com/2011/02/24/website-performance-web-stress/). This reaction, called *web stress*, showed that "**…participants had to concentrate up to 50% more when using badly performing websites**" and that they had "**…greater agitation and stress**" when using slow websites. The reason for this web stress is mainly because of the limits of human short-term memory; [it is pretty bad](http://www.nngroup.com/articles/website-response-times/). There are three parts of memory that humans use at any given time (not including long-term memory) that have direct effects on how we perceive performance: sensory memory, short-term memory, and working memory.
+This research, published in 1993, has since been expanded upon with [Powers of 10: Time Scales in User Experiences](http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/) which goes in to more detail about the importance of time in the user's perception of an experience. Beyond Nielsen, additional research suggests that the 10 second maximum in practice winds up being closer to **5 seconds** for many people, with [50% of mobile users exiting an application or site if it takes more than 5 seconds to load](http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf). In 2010, CA Technologies commissioned a study to [quantify how humans react to slow websites](http://www.webperformancetoday.com/2011/02/24/website-performance-web-stress/). This reaction, called *web stress*, showed that "…participants had to concentrate up to 50% more when using badly performing websites" and that they had "…greater agitation and stress" when using slow websites. The reason for this web stress is mainly because the limits of human short-term memory [are pretty bad](http://www.nngroup.com/articles/website-response-times/). There are three parts of memory that humans use at any given time (not including long-term memory) that have direct effects on how we perceive performance: sensory memory, short-term memory, and working memory.
 
 [Sensory memory](http://en.wikipedia.org/wiki/Sensory_memory) is the most basic input from an organism's senses. For humans, these inputs are sight, sound, touch, taste, and smell. They retain impressions of sensory information after the original stimulation has ceased, stored just long enough to be transfered to short-term memory. It has been experimentally shown that the duration of visual sensory memory (*iconic memory*) is between **100ms-200ms**, meaning that if an interface is able to react to a user's input and respond to them in **<100ms**, the reaction will be perceived as a seamless continuation of the interaction. Anything longer and our memory will reset with whatever the current stimuli is, risking an interruption in the perception of an interface by the user.
 
-[Short-term memory](http://en.wikipedia.org/wiki/Short-term_memory) is the capacity of holding small amount of information in an active, readily available state. It is commonly cited to only be able to hold [7 ± 2](http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two) chunks of information at a time and each chunk only lasts around 18 seconds. If more information is entered in to the short-term memory in that time, retrieval of information stored earlier becomes error prone. 
+[Short-term memory](http://en.wikipedia.org/wiki/Short-term_memory) is the capacity of holding small amount of information in an active, readily available state. It is commonly cited to only be able to hold [7 ± 2](http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two) chunks of information at a time and each chunk only lasts around 18 seconds. If more information is entered in to the short-term memory in that time, retrieval of information stored earlier becomes error-prone. 
 
-[Working memory](http://en.wikipedia.org/wiki/Working_memory) is the system responsible for holding and processing of new and already stored information. Short-term memory and working memory work together to store, comprehend, process, and update all information coming in from sensory memory as well as keep current tasks and thoughts close at hand. Working memory's capacity has been hard to pin down exactly, but the two most prominent models, when taken together, suggest that the more information that must be maintained in working memory, the slower and more error prone concurrent process become and that the rate of decay of working memory is based on the temporal density and attentional demands of the processing task (this is also known as *cognitive load*).
+[Working memory](http://en.wikipedia.org/wiki/Working_memory) is the system responsible for holding and processing new and already stored information. Short-term memory and working memory work together to store, comprehend, process, and update all information coming in from sensory memory as well as keep current tasks and thoughts close at hand. Working memory's capacity has been hard to pin down exactly, but the two most prominent models, when taken together, suggest that the more information that must be maintained in working memory, the slower and more error-prone concurrent processes become. The rate of decay of working memory is based on the temporal density and attentional demands of the processing task (this is also known as *cognitive load*).
 
 ### The Size and Speed of Immersion
 
@@ -70,7 +70,7 @@ A human's sensory memory, acting at 100ms, is able to identify around 10 unique
 
 {{ _example.large(examples.framesPerSecond) }}
 
-When creating interfaces, however, 24 FPS will not provide the fluid movement it does on film. Film relies on a number of effects – most commonly, [motion blur](http://en.wikipedia.org/wiki/Motion_blur) - to hide inter-frame judder. When [animating interface elements](/guidelines/interaction/animation/) or having users interact with our interfaces in a way that would cause motion (such as scrolling), we cannot rely upon those same effects because they are unique to the film medium. Instead, our interfaces should update at the same rate the device's screen is refreshing. When interfaces are not able to refresh at this rate, the result, called [Jank](http://jankfree.org/), is a "…stuttering, juddering, or just plain halting" of the interface.
+When creating interfaces, however, 24 FPS will not provide the fluid movement it does on film. Film relies on a number of effects—most commonly, [motion blur](http://en.wikipedia.org/wiki/Motion_blur)—to hide inter-frame judder. When [animating interface elements](/guidelines/interaction/animation/) or having users interact with our interfaces in a way that would cause motion, such as scrolling, we cannot rely upon those same effects because they are unique to the film medium. Instead, our interfaces should update at the same rate the device's screen is refreshing. When interfaces are not able to refresh at this rate, the result, called [Jank](http://jankfree.org/), is a "…stuttering, juddering, or just plain halting" of the interface.
 
 Most devices today have a **refresh rate of 60Hz**, so that is what we should aim our interfaces to refresh at.
 

language/ui-patterns/01-documentation/00-getting-started/index.md

@@ -1,5 +1,5 @@
 ---
-title: Getting Started with the WDG Pattern Library
+title: Getting Started with UI Patterns
 resources:
   links:
     - name: "Bower"
@@ -21,9 +21,9 @@ resources:
     - name: "Node Sass Import Once"
       source: https://github.com/at-import/node-sass-import-once
 ---
-Welcome to the Watson Design Guide's Pattern Library!
+Welcome to the IBM Watson Design Guide's Pattern Library!
 
-The Pattern Library is a set of usable patterns expressed in HTML, Sass, and JavaSciprt, that can be used as a base for developing new or updating existing web projects, especially those that are powered by Watson.
+The Pattern Library is a set of usable patterns expressed in HTML, Sass, and JavaScript, that can be used as a base for developing new or updating existing web projects, especially those that are powered by Watson.
 
 ## Installation
 
@@ -33,19 +33,19 @@ The Pattern Library can be installed through [Bower](http://bower.io):
 $ bower install watson-design-library --save
 ```
 
-This will install the patterns, as well as its dependencies and the documentation from the rest of this site, in to the project's local `bower_components` folder.
+This will install the patterns, as well as its dependencies and the documentation from the rest of this site, into the project's local `bower_components` folder.
 
 ## Working with the Pattern Library
 
 Each pattern in the Pattern Library comes with HTML written in [Swig](http://paularmstrong.github.io/swig/) and self-contained Sass and JavaScript that can be brought in to a project as needed. While the Sass and JavaScript can be used across any web project, the HTML will likely need to be implemented on a project-by-project basis, depending on how HTML gets rendered for that project.
 
 ### Styling a Project
 
-Styling for projects is done through [Sass](http://sass-lang.com). No CSS files are included intentionally; the styling that is available is basic and will not fit all projects; teams should include designers and developers to flesh out the styling of a project. What is provided are a set of patterns that encapsulate the design guidelines presented within the Watson Design Guide that are customizable to a project's needs within those guidelines.
+Styling for projects is done through [Sass](http://sass-lang.com). No CSS files are included intentionally. The styling that is available is basic and will not fit all projects; teams should include designers and developers to flesh out the styling of a project. What *is* provided are a set of patterns that encapsulate the design guidelines presented within the Watson Design Guide that are customizable to a project's needs within those guidelines.
 
 All styling is written following our [Sass and CSS Development Guidelines](/guidelines/development/sass).
 
-The Pattern Library is at its best when being customized for the needs of a given project. [Settings](/ui-patterns/documentation/settings) for customization are provided by [Toolkit](https://github.com/at-import/toolkit), so a project's main Sass file should be set up as follows:
+The Pattern Library is best used when it is customized for the needs of a given project. [Settings](/ui-patterns/documentation/settings) for customization are provided by [Toolkit](https://github.com/at-import/toolkit), so a project's main Sass file should be set up as follows:
 
 ```scss
 @import "toolkit";