diff --git a/CHANGELOG.md b/CHANGELOG.md index 8efacc63..f977d90e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,19 @@ -# Watson Design Library Changelog +# Watson Design Guide Changelog + +## v1.0.0-rc.3 +**May 15, 2015** + +**New** + +* Add visual examples for Accessibility +* Add homepage +* Add page load visual example for performance +* Add `gray 30` to grayscale colors +* Add styling for pattern list + +**Change** + +* :art: Clean up color and accessibility text ## v1.0.0-rc.2 **May 14, 2015** diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6b649f69..7fcadea4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,8 @@ -# Contributing to the IBM Watson Design Library +# Contributing to the IBM Watson Design Guide -The Watson Design Library contains the design and development guidelines and resources for creating cognitive experiences. It's built using Sass and available via Bower, so it's easy to include all or part of it within a project. +The Watson Design Guide contains the design and development guidelines and resources for creating cognitive experiences. It's built using Sass and available via Bower, so it's easy to include all or part of it within a project. -_**Heads Up!** We love open source, but the Watson Design Library is unlikely to add new guidelines or features that are not in-line with the work we're doing or won't be used at IBM Watson. Inclusion is at the discretion of the Watson Design team. We really love to share, though, so hopefully that means we're still friends :blue_heart:_ +_**Heads Up!** We love open source, but the Watson Design Guide is unlikely to add new guidelines or features that are not in-line with the work we're doing or won't be used at IBM Watson. Inclusion is at the discretion of the Watson Design team. We really love to share, though, so hopefully that means we're still friends :blue_heart:_ ## Navigating the Repository @@ -14,7 +14,7 @@ The `language` folder contains all of the long-form text available and its relat ### Library -The `library` folder contains all of the items needed to compile the content in the `language` and `patterns` folders into the Watson Design Library website. This includes site-specific Sass, JavaScript, configuration, and templates. +The `library` folder contains all of the items needed to compile the content in the `language` and `patterns` folders into the Watson Design Guide website. This includes site-specific Sass, JavaScript, configuration, and templates. ### Patterns @@ -22,16 +22,16 @@ The `patterns` folder contains all of the UI patterns and their documentation. D No patterns rely upon JavaScript frameworks (jQuery, Dojo, Angular, etc…). Any pattern submissions that do will be asked to be rewritten without said dependencies. Acceptable JavaScript dependencies include core JavaScript that we provide and any current dependencies already included in the project. Any additional external dependencies will need to be approved before they can be used. Styling should be written without vendor prefixes. Only web standard features that have [moved beyond](http://en.wikipedia.org/wiki/World_Wide_Web_Consortium#Specification_Maturation) the Candidate Recommendation stage (or equivalent for the relevant standards body) will be considered for inclusion. -## Developing for the Watson Design Library +## Developing for the Watson Design Guide -Whether working on language, library, or patterns, there are a specific set of steps that should be followed in order contribute in a standard and consistent manner. Our wiki contains the full instructions for [setting up and working with the Watson Design Library](https://github.com/IBM-Watson/design-library/wiki/Developing-for-the-Design-Library). +Whether working on language, library, or patterns, there are a specific set of steps that should be followed in order contribute in a standard and consistent manner. Our wiki contains the full instructions for [setting up and working with the Watson Design Guide](https://github.com/IBM-Watson/design-library/wiki/Developing-for-the-Design-Guide). ## Submitting Issues * Before creating a new issue, perform a [cursory search](https://github.com/issues?utf8=%E2%9C%93&q=is%3Aissue+user%3Aibm-watson+) to see if a similar issue has already been submitted. * Can create an issue [here](https://github.com/IBM-Watson/design-library/issues). Please include as many details as possible when filing an issue. * Issue titles should be descriptive, explaining at the high level what it is about, and should be written in the same style as [Git commit messages](#git-commit-messages). -* Please include the version of the Design Library being used or viewed +* Please include the version of the Design Guide being used or viewed * Do not open a [pull request](#pull-requests) to resolve an issue without first receiving feedback from a `collaborator` or `owner` and having them agree on a solution forward. * Include screenshots and animated GIFs whenever possible; they are immensely helpful. * When submitting a browser bug, please include the browser, version, operating system, and operating system version. @@ -45,7 +45,7 @@ Whether working on language, library, or patterns, there are a specific set of s * Pull requests should reference their related issues. If the pull request closes an issue, [please reference its closing from a commit messages](https://help.github.com/articles/closing-issues-via-commit-messages/). Pull requests not referencing any issues will be closed. * Pull request titles should be descriptive, explaining at the high level what it is doing, and should be written in the same style as [Git commit messages](#git-commit-messages). * Update the [CHANGELOG](#maintaining-thechangelog) with the changes made by the pull request, making sure to use the proper [Emoji](#emoji-cheatsheet). -* Make sure that the steps for [Developing for the Watson Design Library](https://github.com/IBM-Watson/design-library/wiki/Developing-for-the-Design-Library) have been followed +* Make sure that the steps for [Developing for the Watson Design Guide](https://github.com/IBM-Watson/design-library/wiki/Developing-for-the-Design-Guide) have been followed * Follow our JavaScript and CSS styleguides. We have linters set up to catch most of it. * Ensure that [EditorConfig](http://editorconfig.org/) installed in the editor used to work on the library and that it is functioning properly. * Do not squash or rebase commits when submitting a Pull Request. It makes it much harder to follow work and make incremental changes. diff --git a/README.md b/README.md index c9c2b250..1b6f49e8 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# Watson Design Library [![Issues In Progress](https://badge.waffle.io/ibm-watson/design-library.svg?label=In%20Progress&title=Issues%20In%20Progress)](http://waffle.io/ibm-watson/design-library) [![Build Status](https://travis-ci.org/IBM-Watson/design-library.svg?branch=develop)](https://travis-ci.org/IBM-Watson/design-library) +# Watson Design Guide [![Issues In Progress](https://badge.waffle.io/ibm-watson/design-library.svg?label=In%20Progress&title=Issues%20In%20Progress)](http://waffle.io/ibm-watson/design-library) [![Build Status](https://travis-ci.org/IBM-Watson/design-library.svg?branch=develop)](https://travis-ci.org/IBM-Watson/design-library) ## Getting Started -Development on the Watson Design Library is done in this repository. Patterns are developed in the `patterns/` folder, with enhancementsto the library itself and the language are added to the `library/` folder. The design library runs off of the [Watson Runner](https://github.com/IBM-Watson/runner), so work on that should be done there. +Development on the Watson Design Guide is done in this repository. Patterns are developed in the `patterns/` folder, with enhancementsto the library itself and the language are added to the `library/` folder. The design library runs off of the [Watson Runner](https://github.com/IBM-Watson/runner), so work on that should be done there. ### Installation diff --git a/bower.json b/bower.json index b00277ad..5fe07e36 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { - "name": "watson-design-library", - "version": "1.0.0-rc.2", + "name": "watson-design-guide", + "version": "1.0.0-rc.3", "homepage": "https://github.com/IBM-Watson/design-library", "authors": [ "Sam Richard ", @@ -19,7 +19,10 @@ "node_modules", "bower_components", "test", - "tests" + "tests", + "helper-apps", + "Vagrantfile", + "library" ], "dependencies": { "sass-toolkit": "~2.9.0", diff --git a/language/02-guidelines/01-style/accessibility/index.md b/language/02-guidelines/01-style/accessibility/index.md index 11c534fe..2edb1107 100644 --- a/language/02-guidelines/01-style/accessibility/index.md +++ b/language/02-guidelines/01-style/accessibility/index.md @@ -24,16 +24,32 @@ variables: accessibilityAnimation: description: "When there is an animation that last longer than 5 seconds, provide the user a way to pause, stop, or hide the animation." visualDisplay: /videos/accessibility/motion-accessibility.webm + examples: + neutralAccessibility: + neutralYes: + title: "Accessible" + visualDisplay: /images/accessibility/neutral-yes.svg + sentiment: positive + description: "Primary: Blue 60, Accent: Teal 40, Neutrals: Neutral 20, Neutral 40, Gray 80" + neutralNo: + title: "Not Accessible" + visualDisplay: /images/accessibility/neutral-no.svg + sentiment: negative + description: "Primary: Orange 50, Neutrals: Neutral 20, Neutral 40, Gray 30" --- When choosing colors and contrast ratios for typography it is important to adhere to the [IBM Design Language recommendations for accessibility](http://www.ibm.com/design/language/framework/visual/color.shtml#contrast), as we must meet [WCAG 2.0 AA requirements](http://www.w3.org/TR/WCAG20/). High color contrast helps users who are partially or completely color blind see differences between certain colors. It creates a strong visual hierarchy and improved usability for everyone. Never rely on color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. {{ _detail.view(detail.accessibilityInteraction) }} +Colors at a 50 value or lower are not accessible when applied to text on neutral backgrounds, unless the text is 24 px or larger. There are no formal color contrast requirements for icons or glyphs that are paired with supporting text. If an icon is used separately from supporting text on a neutral background, use a color value of 50 or higher. + +{{ _example.compare(examples.neutralAccessibility) }} + ## Animation In addition to the fundamental visual accessibility guides, animation has its own set of considerations. For animations that are longer than five seconds, we must provide the ability to pause, stop, or hide animations for users who can be severely distracted, particularly those with attention deficit disorders. {{ _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. (2.2b) 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. (2.3a) 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. (1.4b) +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. diff --git a/language/02-guidelines/01-style/color/index.md b/language/02-guidelines/01-style/color/index.md index 4fec532d..3baf442c 100644 --- a/language/02-guidelines/01-style/color/index.md +++ b/language/02-guidelines/01-style/color/index.md @@ -26,9 +26,9 @@ variables: 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. + 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" + instructions: "Choose a primary and secondary color." colors: - palette: Blue tone: 60 @@ -57,7 +57,7 @@ variables: - palette: Yellow tone: 30 supportingGrays: - instructions: "Choose supporting grays and neutrals" + instructions: "Choose supporting grays and neutrals." colors: - palette: Gray tone: 90 @@ -67,6 +67,8 @@ variables: tone: 60 - palette: Gray tone: 50 + - palette: Gray + tone: 30 - palette: Gray tone: 10 - palette: Neutral-White @@ -77,17 +79,17 @@ variables: tone: 10 --- -Color is a crucial component of our visual vernacular, helping to unify the look and feel of all communications. The [IBM Design Language](http://www.ibm.com/design/language/framework/visual/color.shtml) comprises a wide spectrum of colors; IBM Watson relies on a defined subset of those colors to establish its unique presence while respecting the broader IBM Design guidelines. +Color is a crucial component of visual vernacular, helping to unify the look and feel of all communications. The [IBM Design Language](http://www.ibm.com/design/language/framework/visual/color.shtml) comprises a wide spectrum of colors; IBM Watson relies on a defined subset of those colors to establish its unique presence while respecting the broader IBM Design guidelines. ## Colors for Watson -The colors chosen for IBM Watson are flexible and distinguish Watson as a brand across all user experiences. The colors were chosen based on color psychology to support the Watson [brand attributes](brand-attributes.html), reinforce Watson's personality, and set the tone of each specific product. +The colors chosen for IBM Watson are flexible and distinguish Watson as a brand across all user experiences. The colors were chosen based on color psychology to support the Watson brand attributes, reinforce Watson's personality, and set the tone of each specific product. {{ _color.adjectiveSwatches(primaryColors) }} -## Choosing A Color Palette +## Choosing a Color Palette -Choose a primary color, a secondary color, and an accent color. Additional tints and shades of the chosen palette can help to unify the design. These values can add variety to a palette without additional colors. Use the IBM Design Language for a wider variety of colors, values, and neutrals. When choosing a background color for light or dark palettes, IBM Watson recommends using Neutral 1 and Gray 90, as opposed to pure white and black, as some users are sensitive to brightness and high contrast colors. +Choose a primary color, a secondary color, and an accent color. Additional tints and shades of the chosen palette can help to unify the design. These values can add variety to a palette without additional colors. Refer to the IBM Design Language for a wider variety of colors, values, and neutrals. When choosing a background color for light or dark palettes, IBM Watson recommends using Neutral 1 and Gray 90, as opposed to pure white and black, as some users are sensitive to brightness and high contrast colors. {{ _color.groupSwatches(primaryColors) }} @@ -97,7 +99,7 @@ Choose a primary color, a secondary color, and an accent color. Additional tints ## Applying A Color Palette -Color is a powerful communication tool to determine hierarchy on a page. Use ample white space and neutrals to create balance and to direct users' attention. +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. {{ _example.large(example.paletteApplication.light) }} diff --git a/language/02-guidelines/user-experience/performance/index.md b/language/02-guidelines/user-experience/performance/index.md index 1a7ca0ac..3a5103ad 100644 --- a/language/02-guidelines/user-experience/performance/index.md +++ b/language/02-guidelines/user-experience/performance/index.md @@ -18,10 +18,18 @@ resources: - name: "Web Page Test" source: http://www.webpagetest.org/ variables: - detail: + examples: framesPerSecond: visualDisplay: /videos/performance/performance2.webm title: "FPS/Hertz Comparison" + desktopLoad: + visualDisplay: /videos/performance/wdg--desktop.webm + title: "Desktop Page Load" + description: "New York, NY USA - **Chrome**. *5/1 Mbps connection with a 28ms round trip time*. [Full test](http://www.webpagetest.org/result/150515_FD_JXH/)" + mobileLoad: + visualDisplay: /videos/performance/wdg--mobile.webm + title: "Mobile Page Load" + 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. @@ -60,7 +68,7 @@ Based on this understanding of memory as well as Nielsen's research, we recommen A human's sensory memory, acting at 100ms, is able to identify around 10 unique images per second. In order to create the illusion of smooth movement for users, as opposed to a series of independent images, more images are needed. The number of images per second, or frame rate, is often expressed as either Frames per Second (FPS), or in hertz (Hz) when working with progressive scan monitors. For a point of reference, the *de facto* standard for movies and television with sound is 24 FPS. -{{ _detail.view(detail.framesPerSecond) }} +{{ _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. @@ -73,4 +81,13 @@ Whenever working with a network powered interface (websites, native apps that ma * Main content is available and usable in **<1s** on a **5/1 Mbps connection with a 28ms round trip time** on a *cold cache* * Main content is available and usable in **<3s** on a **1.6 Mbps/768 Kbps connection with a 150ms round trip time** on a *cold cache* +When working with visual interfaces, the [speed index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) metric is also a good indicator of how quickly an interface is available and usable. + +* A speed index of **<1000** on a **5/1 Mbps connection with a 28ms round trip time** on a *cold cache* +* A speed index of **<3000** on a **1.6 Mbps/768 Kbps connection with a 150ms round trip time** on a *cold cache* + +{{ _example.large(examples.desktopLoad) }} + +{{ _example.large(examples.mobileLoad) }} + All interfaces should be tested against both. [Web Page Test](http://www.webpagetest.org/) is a tool that will allow teams to test their website performance metrics against these numbers. diff --git a/language/images/accessibility/neutral-no.svg b/language/images/accessibility/neutral-no.svg new file mode 100644 index 00000000..2a7faf27 --- /dev/null +++ b/language/images/accessibility/neutral-no.svg @@ -0,0 +1,25 @@ + + + + + + + +Ask Watson +Type your question here + + + + + + + + + + + + diff --git a/language/images/accessibility/neutral-yes.svg b/language/images/accessibility/neutral-yes.svg new file mode 100644 index 00000000..dfd271ca --- /dev/null +++ b/language/images/accessibility/neutral-yes.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + +Ask Watson +Hello, Jane! +Type your question here + diff --git a/language/images/homepage/homepage-watermark.svg b/language/images/homepage/homepage-watermark.svg new file mode 100644 index 00000000..43685767 --- /dev/null +++ b/language/images/homepage/homepage-watermark.svg @@ -0,0 +1,366 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/language/images/homepage/watson-logo-t.svg b/language/images/homepage/watson-logo-t.svg new file mode 100644 index 00000000..f7c4c2e8 --- /dev/null +++ b/language/images/homepage/watson-logo-t.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/index.html b/language/index.html new file mode 100644 index 00000000..1abc10eb --- /dev/null +++ b/language/index.html @@ -0,0 +1,41 @@ +
+
+

Design Watson Experiences

+
+
+
+

Engage your users with cognitive experiences.

+

This Watson Design Guide provides guidelines and assets for designing and building cognitive experiences. Rendered consistently, these elements provide a coherent user experience across all Watson products, reinforcing our values and unique character. This site is a companion to the IBM Design Language.

+
+
+

Principles

+

Watson design principles provide the foundation for designing excellent cognitive experiences for users.

+ Principles (go) +
+
+

Guidelines

+

These style, interaction, and branding guides offer detailed recommendations for elements like color, typography, and motion.

+ Guidelines (go) +
+
+

UI Patterns

+

The UI pattern library contains the resources for building Watson user interfaces, including basic HTML elements and more complex components.

+ UI Patterns (go) +
+
+
+
+
+
+ Watson Logo +
+
+

What is Watson

+

IBM Watson is a system of cognitive technology that enhances and scales human expertise. It is a natural extension of what humans can do at their best. Watson processes information in natural language, more like a human than a computer, and generates hypotheses based on evidence.

+ +
+
+
diff --git a/language/index.md b/language/index.md deleted file mode 100644 index f7009044..00000000 --- a/language/index.md +++ /dev/null @@ -1 +0,0 @@ -# Welcome to the Watson Design Library diff --git a/language/ui-patterns/01-documentation/animation/index.md b/language/ui-patterns/01-documentation/animation/index.md index d3a6bc88..d3090443 100644 --- a/language/ui-patterns/01-documentation/animation/index.md +++ b/language/ui-patterns/01-documentation/animation/index.md @@ -3,24 +3,29 @@ type: documentation title: Animation variables: example: - singlePropAni: - title: "Single Property Animation Visual Example" - visualDisplay: /videos/animation-docs/singlePropAni.webm - multiPropAni1: - title: "First Option for Multiple Property Animations Visual Example" - visualDisplay: /videos/animation-docs/multiPropAni1.webm - multiPropAni2: - title: "Second Option for Multiple Property Animations Visual Example" - visualDisplay: /videos/animation-docs/multiPropAni2.webm - singularAni: - title: "Singular Animation Visual Example" - visualDisplay: /videos/animation-docs/multiPropAni1.webm - sequenceAni: - title: "Sequence of Animations Visual Example" - visualDisplay: /videos/animation-docs/sequenceAni.webm + firstCompare: + exampleOne: + title: "Single Property Animation Visual Example" + visualDisplay: /videos/animation-docs/singlePropAni.webm + secondCompare: + exampleOne: + title: "First Option for Multiple Property Animations Visual Example" + visualDisplay: /videos/animation-docs/multiPropAni1.webm + thirdCompare: + exampleOne: + title: "Second Option for Multiple Property Animations Visual Example" + visualDisplay: /videos/animation-docs/multiPropAni2.webm + fourthCompare: + exampleOne: + title: "Singular Animation Visual Example" + visualDisplay: /videos/animation-docs/multiPropAni1.webm + fifthCompare: + exampleOne: + title: "Sequence of Animations Visual Example" + visualDisplay: /videos/animation-docs/sequenceAni.webm resources: links: - name: "Debugging Chrome Animations" + - name: "Debugging Chrome Animations" source: http://valhead.com/2015/01/06/quick-tip-chrome-animation-controls/ --- The overarching metaphor for our animation comes from the IBM Design Language metaphor *elegant machine motion*. Elegant machine motion consists of very quick movements with strong easing at the beginning and/or end of the animation, plus subtle offsets. @@ -45,7 +50,7 @@ To see a full list of animatable properties and examples of them animating, visi When animating only a single property, follow the guidelines below. -{{ _example.small(example.singlePropAni) }} +{{ _example.compare(example.firstCompare) }} ```scss //box class @@ -81,7 +86,7 @@ When more than one property is being animated, the animation is known as a multi Start one property alone, then animate any additional properties. -{{ _example.small(example.multiPropAni1) }} +{{ _example.compare(example.secondCompare) }} ```scss //box class @@ -109,7 +114,7 @@ Start one property alone, then animate any additional properties. Both properties start at the same time, then one property ends before the other. -{{ _example.small(example.multiPropAni2) }} +{{ _example.compare(example.thirdCompare) }} ```scss //box class @@ -154,13 +159,13 @@ Within user interfaces, there are instances where only one element moves, as wel A singular action animation occurs when only one element on the screen is animated and there are no other complementary elements. -{{ _example.small(example.singularAni) }} +{{ _example.compare(example.fourthCompare) }} ### Sequence of Actions A sequence of actions animation occurs when there are multiple animated elements. This is typically a primary action followed by a secondary action that complements the primary. -{{ _example.small(example.sequenceAni) }} +{{ _example.compare(example.fifthCompare) }} In the example above, the text animations and delay enhance the animation by following the lead of the primary action, which in this case is the scaling of the box. diff --git a/language/videos/performance/wdg--desktop.mp4 b/language/videos/performance/wdg--desktop.mp4 new file mode 100644 index 00000000..36d066a9 Binary files /dev/null and b/language/videos/performance/wdg--desktop.mp4 differ diff --git a/language/videos/performance/wdg--desktop.webm b/language/videos/performance/wdg--desktop.webm new file mode 100644 index 00000000..919dfaf8 Binary files /dev/null and b/language/videos/performance/wdg--desktop.webm differ diff --git a/language/videos/performance/wdg--mobile.mp4 b/language/videos/performance/wdg--mobile.mp4 new file mode 100644 index 00000000..d6793142 Binary files /dev/null and b/language/videos/performance/wdg--mobile.mp4 differ diff --git a/language/videos/performance/wdg--mobile.webm b/language/videos/performance/wdg--mobile.webm new file mode 100644 index 00000000..03f7f0d7 Binary files /dev/null and b/language/videos/performance/wdg--mobile.webm differ diff --git a/language/videos/performance/wdg-ibmd.mp4 b/language/videos/performance/wdg-ibmd.mp4 new file mode 100644 index 00000000..f2110216 Binary files /dev/null and b/language/videos/performance/wdg-ibmd.mp4 differ diff --git a/language/videos/performance/wdg-ibmd.webm b/language/videos/performance/wdg-ibmd.webm new file mode 100644 index 00000000..5704993b Binary files /dev/null and b/language/videos/performance/wdg-ibmd.webm differ diff --git a/library/config/site.yaml b/library/config/site.yaml index a4d02d50..955b4619 100644 --- a/library/config/site.yaml +++ b/library/config/site.yaml @@ -1,4 +1,4 @@ -version: 1.0.0-rc.2 +version: 1.0.0-rc.3 repo: https://github.com/IBM-Watson/design-library licenses: docs: diff --git a/library/sass/components/_banner.scss b/library/sass/components/_banner.scss new file mode 100644 index 00000000..909fa3dd --- /dev/null +++ b/library/sass/components/_banner.scss @@ -0,0 +1,25 @@ +[library-class='banner'] { + background-color: color('neutral-white', 40); + background-image: url(../images/homepage/homepage-watermark.svg); + background-repeat: no-repeat; + background-size: 100%; + background-position: 0 42%; + padding: setting-get('rhythm') 0; + @include breakpoint(900px) { + padding: setting-get('rhythm') * 3 0 setting-get('rhythm'); + } + + @include breakpoint(1048px) { + background-size: 1048px; + background-position: center 42%; + } +} +[library-class='banner-title'] { + @include breakpoint(setting-get('large typography breakpoint')) { + font-size: ms(9); + } +} +[library-class='banner-title'] span { + font-weight: normal; + color: setting-get('text color'); +} diff --git a/library/sass/components/_footer.scss b/library/sass/components/_footer.scss index adae0d93..e5c3d1e0 100644 --- a/library/sass/components/_footer.scss +++ b/library/sass/components/_footer.scss @@ -2,6 +2,16 @@ background: color('grayscale', 50); padding: setting-get('rhythm') * 2 0; font-size: .75em; + text-align: center; + + @include breakpoint(542px) { + text-align: left; + } + + [library-class~='_library--stretch-container'] ~ & { + margin-top: 0; + padding-top: setting-get('rhythm'); + } [library-class='_library--container'] { padding: 0 setting-get('rhythm'); diff --git a/library/sass/components/_home.scss b/library/sass/components/_home.scss new file mode 100644 index 00000000..605e0202 --- /dev/null +++ b/library/sass/components/_home.scss @@ -0,0 +1,72 @@ +[library-class='home-container--children'] { + @include clearfix; +} + +[library-class~='home'][library-class~='_library--container'] { + margin-top: setting-get('rhythm'); +} + +[library-class='home-children'] { + position: relative; + + @include breakpoint(700px) { + margin-top: 0; + width: 100 / 3 * 1%; + min-height: 245px; + position: relative; + float: left; + padding-left: setting-get('rhythm') / 2; + padding-right: setting-get('rhythm') / 2; + + &:nth-of-type(1) { + padding-left: 0; + padding-right: setting-get('rhythm') / 2; + + [library-class='home-children--link'] { + width: calc(100% - #{setting-get('rhythm') / 2}); + } + } + + &:nth-of-type(2) { + [library-class='home-children--link'] { + width: calc(100% - #{setting-get('rhythm')}); + } + } + + &:nth-of-type(3) { + padding-right: 0; + padding-left: setting-get('rhythm') / 2; + + [library-class='home-children--link'] { + width: calc(100% - #{setting-get('rhythm') / 2}); + } + } + } +} + + +a[library-class='home-children--link'] { + text-decoration: none; + border: 3px solid; + border-color: setting-get('primary accent color'); + padding: 0.75em 1em; + display: block; + background-image: none; + text-align: center; + max-width: 295px; + + &:hover, + &:focus { + border-color: setting-get('primary color'); + color: white; + text-shadow: none; + background-image: none; + background-color: setting-get('primary color'); + } + + @include breakpoint(700px) { + position: absolute; + bottom: 0; + width: 100%; + } +} diff --git a/library/sass/components/_main-content.scss b/library/sass/components/_main-content.scss index a0e7d56c..6a6d7264 100644 --- a/library/sass/components/_main-content.scss +++ b/library/sass/components/_main-content.scss @@ -1,6 +1,12 @@ [library-class='main-content--footer'] { clear: both; @include clearfix; + + [library-class='_library--stretch-container'] & { + margin-top: 0; + padding-top: setting-get('rhythm'); + background-color: color('neutral-white', 40); + } } [library-class='main-content--back-to-top'] { diff --git a/library/sass/components/_page-children.scss b/library/sass/components/_page-children.scss new file mode 100644 index 00000000..8b8cba98 --- /dev/null +++ b/library/sass/components/_page-children.scss @@ -0,0 +1,29 @@ +[library-class='page-children--group-title'] { + border-bottom: 1px solid color('grayscale', 70); +} + +[library-class='page-children--group'] { + margin-top: 0; + @include clearfix; +} + +[library-class='page-children--item'] { + &:nth-of-type(1) { + margin-top: setting-get('rhythm'); + } + + @include breakpoint(478px) { + float: left; + width: 50%; + + &:nth-of-type(odd) { + padding-right: setting-get('rhythm') / 2; + clear: both; + } + + &:nth-of-type(even) { + padding-left: setting-get('rhythm') / 2; + } + } + +} diff --git a/library/sass/components/_resources.scss b/library/sass/components/_resources.scss index ae43628f..20c16d75 100644 --- a/library/sass/components/_resources.scss +++ b/library/sass/components/_resources.scss @@ -7,7 +7,7 @@ padding-bottom: setting-get('rhythm'); padding-left: setting-get('rhythm'); padding-right: setting-get('rhythm'); - border-bottom: 1px solid color('grayscale', 90); + border-bottom: 1px solid color('grayscale', 100); } [library-class='resources--file-list'], diff --git a/library/sass/components/_subnav.scss b/library/sass/components/_subnav.scss index b38c9621..1f11706e 100644 --- a/library/sass/components/_subnav.scss +++ b/library/sass/components/_subnav.scss @@ -25,7 +25,7 @@ &:hover, &:focus { - border-color: color('grayscale', 70); + border-color: color('grayscale', 80); background: color('grayscale', 50); } @@ -41,7 +41,7 @@ } [library-class='subnav--item'] { - color: color('grayscale', 70); + color: color('grayscale', 80); text-decoration: none; padding-left: setting-get('rhythm'); padding-right: setting-get('rhythm'); diff --git a/library/sass/components/_what-is.scss b/library/sass/components/_what-is.scss new file mode 100644 index 00000000..4feb4c4a --- /dev/null +++ b/library/sass/components/_what-is.scss @@ -0,0 +1,23 @@ +[library-class='what-is'] { + @include clearfix; + background-color: color('neutral-white', 40); + padding: 2rem 0; +} +[library-class='what-is--logo'] { + @include breakpoint(650px) { + float: left; + width: 33%; + margin-right: 1em; + } + img { + margin: 0 auto; + display: block; + } +} +[library-class='what-is--content'] { + @include breakpoint(650px) { + float: right; + width: calc(67% - 1em); + margin-top: 0; + } +} diff --git a/library/sass/layouts/_library.scss b/library/sass/layouts/_library.scss index 88634508..3124b93c 100644 --- a/library/sass/layouts/_library.scss +++ b/library/sass/layouts/_library.scss @@ -12,18 +12,28 @@ } [library-class*='_library--heading'] { - background: color('grayscale', 80); + background: color('grayscale', 90); color: color('grayscale', 10); margin-top: 0; } -[library-class*='_library--container'] { +[library-class~='_library--container'] { max-width: 940px; margin: 0 auto; @include clearfix; } +[library-class='_library--stretch-container'] { + margin-top: 0; + @include clearfix; + + [library-class*='_library--container'] { + padding-left: setting-get('rhythm'); + padding-right: setting-get('rhythm'); + } +} + [library-class*='_library--subnav'] { @include breakpoint(557px) { padding-right: setting-get('rhythm') / 2; @@ -34,11 +44,15 @@ } [library-class*='_library--main-content'] { - padding-left: setting-get('rhythm'); - padding-right: setting-get('rhythm'); - @include breakpoint(557px) { - width: 100% - 26.5%; - padding-left: setting-get('rhythm') / 2; - float: left; + width: 100%; + [library-class*='_library--subnav'] ~ & { + padding-left: setting-get('rhythm'); + padding-right: setting-get('rhythm'); + @include breakpoint(557px) { + width: 100% - 26.5%; + + padding-left: setting-get('rhythm') / 2; + float: left; + } } } diff --git a/library/sass/style.scss b/library/sass/style.scss index c12e3cb6..536edc44 100644 --- a/library/sass/style.scss +++ b/library/sass/style.scss @@ -16,6 +16,10 @@ @import 'components/color'; @import 'components/detail'; @import 'components/example'; +@import 'components/banner'; +@import 'components/home'; +@import 'components/what-is'; +@import 'components/page-children'; ////////////////////////////// // Layouts diff --git a/library/templates/_layout.html b/library/templates/_layout.html index 486d1af2..ab3c9ccc 100644 --- a/library/templates/_layout.html +++ b/library/templates/_layout.html @@ -54,7 +54,7 @@ {# Page Body -#} -
+
{# Sub Nav #} {% if navigation.sub %}