Merge pull request #307 from IBM-Watson/develop

release/1.0.0-rc.2

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Watson Design Library Changelog
 
+## v1.0.0-rc.2
+**May 14, 2015**
+
+**New**
+
+* Add visual examples for Typography
+* Add visual examples for performance
+* Add favicon
+* Add `mp4` versions for all videos
+* Add subcontent and resource styling
+
+**Changes**
+
+* :art: Clean up Grids, Typography, Wordmark, Animation, and Animation Documentation writing
+
 ## v1.0.0-rc.1
 *May 7, 2015*
 

bower.json

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

language/01-principles/01-introduce-cognitive/index.md

@@ -33,6 +33,9 @@ variables:
 **Give first-time users a set of "cognitive training wheels" and continue to provide unobtrusive support as needed.**
 
 {{ _detail.view(detail.introduceOne) }}
+
 {{ _detail.view(detail.introduceTwo) }}
+
 {{ _detail.view(detail.introduceThree) }}
+
 {{ _detail.view(detail.introduceFour) }}

language/01-principles/02-inform-interactions/index.md

@@ -35,6 +35,9 @@ variables:
 **Reduce the complexity of using Watson by informing the user's interactions as they collaborate with Watson to accomplish desired tasks.**
 
 {{ _detail.view(detail.informOne) }}
+
 {{ _detail.view(detail.informTwo) }}
+
 {{ _detail.view(detail.informThree) }}
+
 {{ _detail.view(detail.informFour) }}

language/01-principles/03-offer-control/index.md

@@ -39,6 +39,9 @@ variables:
 **Let the user choose more help or less help by offering control when it is wanted. Watson experiences should naturally adapt to amplify the user's abilities and expertise.**
 
 {{ _detail.view(detail.offerOne) }}
+
 {{ _detail.view(detail.offerTwo) }}
+
 {{ _detail.view(detail.offerThree) }}
+
 {{ _detail.view(detail.offerFour) }}

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

@@ -14,13 +14,19 @@ variables:
       light:
         title: "Example: Light Palette"
         visualDisplay: /images/color/light-palette.svg
-        description: "Primary: Blue 60, Secondary: Orange 50, Accent: Teal 40"
-        caption: "Consider users who are sensitive to brightness and high contrast colors by using a neutral value as a background color instead of pure white."
+        description: >
+          Primary: Blue 60, Secondary: Orange 50, Accent: Teal 40
+          
+          
+          Consider users who are sensitive to brightness and high contrast colors by using a neutral value as a background color instead of pure white.
       dark:
         title: "Example: Dark Palette"
         visualDisplay: /images/color/dark-palette.svg
-        description: "Primary: Blue 30, Secondary: Orange 30, Accent: Teal 30"
-        caption: "Consider users who are sensitive to brightness and high contrast colors by using a Gray value as a background color instead of pure black."
+        description: >
+          Primary: Blue 30, Secondary: Orange 30, Accent: Teal 30
+
+
+          Consider users who are sensitive to brightness and high contrast colors by using a Gray value as a background color instead of pure black.
   primaryColors:
     instructions: "Choose a primary and secondary color"
     colors:

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

@@ -33,27 +33,27 @@ variables:
       title: "Example: Responsive Grid"
       description: "Begin by designing the smallest size, using as close to real content as possible. As the size expands, the content will determine where the breakpoints should occur, not the device sizes."
 ---
-Grids enforce proportion and constraint upon our designs, providing order and structure to information. The best grid is specific to the displayed content and the design, as it is an extension of both. When used correctly, a grid will [enhance, balance, and structure content](http://www.ibm.com/design/language/framework/visual/layout.shtml), so users can read and view the information with ease.
+Grids enforce proportion and constraint in layouts and design, and they provide order and structure to information. The best grid is specific to the displayed content and the design, as it is an extension of both. When used correctly, a grid will [enhance, balance, and structure content](http://www.ibm.com/design/language/framework/visual/layout.shtml), so users can read and view the information with ease.
 
 {{ _quote.quote(blockquote.quoteOne) }}
 
-When working with grids on the web, there are additional items that must be considered: the many and varied display sizes with variable content lengths, sizes, and types; numerous reading modes; and a wide potential range of additional user distractions. As such, one grid for all contexts is not a realistic expectation. Instead, grids need to be fluid and flexible, beginning with the content and extending out from there.
+When working with grids on the web, these additional items must be considered: the many and varied display sizes with variable content lengths, sizes, and types; numerous reading modes; and a wide potential range of additional user distractions. As such, one grid for all contexts is not a realistic expectation. Instead, grids need to be fluid and flexible, beginning with the content and extending out from there.
 
 {{ _quote.quote(blockquote.quoteTwo) }}
 
-Ratios can be used to help set the tone for compositions. Choose one that makes sense for the type of content being displayed. Orderly, highly structured content or designs, like image galleries, may benefit from symmetric grids where each column is the same size. More organic content or designs, like a mixture of text and images, may benefit from asymmetric grids where column sizes are based on a harmonic ratio scale like the golden ratio. This can be especially powerful when the ratio is shared with the chosen [typographic scale](/typography). Content or designs that are meant to be slightly chaotic may benefit from asymmetric grids where column sizes vary and are not directly tied to each other.
+Ratios can be used to help set the tone for compositions. Choose one that makes sense for the type of content being displayed. Orderly, highly structured content or designs, like image galleries, may benefit from symmetric grids where each column is the same size. More organic content or designs, such as a mixture of text and images, may benefit from asymmetric grids where column sizes are based on a harmonic ratio scale like the golden ratio. This can be especially powerful when the ratio is shared with the chosen [typographic scale](/typography). Content or designs that are meant to be slightly chaotic may benefit from asymmetric grids where column sizes vary and are not directly tied to each other.
 
 ### Asymmetric Grid Examples
 
 {{ _example.compare(example.gridTypes) }}
 
 ## Responsive Grids
 
-When designing for the ever evolving, unstable medium of the web, we must take care to ensure that the layouts work no matter the context. In order to do so, the grids need to be flexible and fluid, stretching and condensing to fill their space. At some points, though, the design or the content will no longer be displayed the way we would like. At this point we should change the grid to allow the content and design to be rearranged into a more optimal display.
+When designing for the ever-evolving, unstable medium of the web, take care to ensure that the layouts work no matter the context. In order to do so, grids need to be flexible and fluid, stretching and condensing to fill the given space. At some points, though, the design or the content will no longer be displayed as intended. At this point the grid should change to allow the content and design to be rearranged into a more optimal display.
 
 {{ _quote.quote(blockquote.quoteThree) }}
 
-When designing responsive grids, the smallest size should be designed first, using as close to real content as possible. The content and design determine the breaking point of that grid, not the device sizes, so it's necessary to work in the medium of the final product. In the web, this means low-fidelity wireframing in code and browser. Different combinations and types of content and content displays will likely require different breakpoints and different grids, sometimes requiring only one grid for the whole range of displays, sometimes requiring many grids. The responsive layouts created for these content and design pairs can and should be reused even if the individual grids and breakpoints that make them up are not.
+To create responsive grids, the smallest size should be designed first, using as close to real content as possible. The content and design determine the breaking point of that grid, not the device sizes, so it's necessary to work in the medium of the final product. In the web, this means low-fidelity wireframing in code and browser. Different combinations and types of content and content displays will likely require different breakpoints and different grids, sometimes requiring only one grid for the whole range of displays, sometimes requiring many grids. The responsive layouts created for these content and design pairs can and should be reused even if the individual grids and breakpoints that make them up are not.
 
 {{ _example.large(example.responsiveGridVideo) }}
 

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

@@ -9,23 +9,23 @@ variables:
     typefaceCombinations:
       typefaceCombinationOne:
         title: "Helvetica Neue Roman"
-        visualAlternative: "The quick brown fox jumped over the fence."
+        visualDisplay: /images/typography/typeface-roman.svg
       typefaceCombinationTwo:
         title: "Helvetica Neue Roman Italic"
-        visualAlternative: "The quick brown fox jumped over the fence."
+        visualDisplay: /images/typography/typeface-roman-italic.svg
       typefaceCombinationThree:
         title: "Helvetica Neue Bold"
-        visualAlternative: "The quick brown fox jumped over the fence."
+        visualDisplay: /images/typography/typeface-bold.svg
       typefaceCombinationFour:
         title: "Helvetica Neue Bold Italic"
-        visualAlternative: "The quick brown fox jumped over the fence."
+        visualDisplay: /images/typography/typeface-bold-italic.svg
     responsiveTypography:
       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."
 ---
 
-Typography is the atomic element of good interface design. It colors the words in our language and shapes their meaning. It helps to set the visual tone for the entire Watson experience. Text is largely differentiated by size and weight. Keep other properties the same or similar, differentiating only when necessary for the sake of clarity.
+Typography is the atomic element of good interface design. It colors the words in our language and shapes their meaning. It helps to set the visual tone for the entire IBM Watson experience. Text is largely differentiated by size and weight. Keep other properties the same or similar, differentiating only when necessary for the sake of clarity.
 
 ## Helvetica Neue for IBM
 
@@ -41,7 +41,7 @@ When presenting large amounts of content, it is important to consider how multip
 
 ## Typographic Scale
 
-The IBM Design Language recommends using [modular type scales](http://www.ibm.com/design/language/framework/visual/typography.shtml) to create harmonious proportions and structure, as scale creates consistency in sizing across elements. A visual type scale turns a typographic balancing act into a set ratio. 
+The IBM Design Language recommends using [modular type scales](http://www.ibm.com/design/language/framework/visual/typography.shtml) to create harmonious proportions and structure. Scale creates consistent sizing across elements. A visual type scale turns a typographic balancing act into a set ratio. 
 
 ### Major Third Type Scale
 
@@ -53,19 +53,19 @@ IBM Watson recommends the Major Third ratio for screen sizes under 500px and the
 
 ### Desktop or Browser
 
-`font-family: "Helvetica Neue for IBM", Helvetica, Arial, Roboto, sans-serif;`  
+`font-family: 'Helvetica Neue for IBM', Helvetica, Arial, Roboto, sans-serif;`  
 ######Monospace 
 
 `font-family: 'Source Code Pro', Lucida Console, Andale Mono, monospace;`
 
 ###Apple Watch 
 
-`font-family: “San Francisco”;`
+`font-family: 'San Francisco';`
 
 ###iOS
 
-`font-family: "Helvetica Neue";` 
+`font-family: 'Helvetica Neue';` 
 
 ###Android
 
-`font-family: "Roboto";`
+`font-family: 'Roboto';`

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 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, take a look here, 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 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.

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

@@ -15,20 +15,21 @@ variables:
         title: Logo
         visualDisplay: /images/wordmark/logo.svg
     smallExample:
-      title: Wordmark
-      visualDisplay: /images/wordmark/wordmark-spacing.svg
+      wordmark:
+        title: Wordmark
+        visualDisplay: /images/wordmark/wordmark-spacing.svg
     secondCompare:
-      exampleOne:
-        light:
-          title: Wordmark
+        lightOne:
+          title: Light Wordmark
           visualDisplay: /images/wordmark/wordmark-color-pos.svg
-        dark:
+        darkOne:
+          title: Dark Wordmark
           visualDisplay: /images/wordmark/wordmark-color-neg.svg
-      exampleTwo:
-        light:
-          title: Logo
+        lightTwo:
+          title: Light Logo
           visualDisplay: /images/wordmark/logo-color-pos.svg
-        dark:
+        darkTwo:
+          title: Dark Logo
           visualDisplay: /images/wordmark/logo-color-neg.svg
     thirdCompare:
         exampleOne:
@@ -49,7 +50,7 @@ variables:
           sentiment: negative
 ---
 
-The IBM Watson wordmark and logo represents our brand and should be managed carefully. It is typeset in a combination of Helvetica Neue Light and Helvetica Neue Bold to align with [IBM standards](http://www.ibm.com/design/language/framework/visual/typography.shtml). When possible, it should be used in all internal and external communications that focus on the IBM Watson brand.
+The IBM Watson wordmark and logo represent our brand and should be managed carefully. The wordmark is typeset in a combination of Helvetica Neue Light and Helvetica Neue Bold to align with [IBM standards](http://www.ibm.com/design/language/framework/visual/typography.shtml). When possible, it should be used in all internal and external communications that focus on the IBM Watson brand.
 
 {{ _example.compare(example.firstCompare) }}
 
@@ -59,7 +60,7 @@ The IBM Watson wordmark and logo represents our brand and should be managed care
 
 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.
 
-{{ _example.small(example.smallExample) }}
+{{ _example.compare(example.smallExample) }}
 
 ### Color Usage