diff --git a/.deploy.sh b/.deploy.sh index 748f2832..bf19df1a 100644 --- a/.deploy.sh +++ b/.deploy.sh @@ -7,9 +7,6 @@ set -e # exit with nonzero exit code if anything fails if [ "$TRAVIS_BRANCH" = "master" ] then - # Copy CNAME from .www to www (build folder) - mv .www/CNAME www/CNAME - # Move to build folder and init it cd www git init diff --git a/.stackup.sh b/.stackup.sh index 26005f88..af7d70e2 100644 --- a/.stackup.sh +++ b/.stackup.sh @@ -1,3 +1,3 @@ #! /bin/zsh -i npm install -g generator-watson -npm install && bundle install \ No newline at end of file +npm install diff --git a/.www/CNAME b/.www/CNAME deleted file mode 100644 index 1027ad29..00000000 --- a/.www/CNAME +++ /dev/null @@ -1 +0,0 @@ -watsondesign.guide diff --git a/CHANGELOG.md b/CHANGELOG.md index 16b5ab5a..6b06a288 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,48 @@ # Watson Design Library Changelog +## v1.0.0-rc.1 +*May 7, 2015* + +**New** + +* Add JavaScript config for rendering the site's JavaScript +* Add Apache 2.0 and CC-BY licenses! All source code is licensed under the Apache 2.0 license, documentation and assets under the CC-BY license +* Add Bottom (previous/next) Nav +* Add Resource panel to Layout template +* Add Styling for header, sidebar, footer, bottom nav, and basic layout +* Add Performance guidelines +* Add Base and Components section, with pattern links +* Add icon font +* Add resource panel + +**Changes** + +* Move `_base.scss`, `_components.scss`, `_layouts.scss`, and `_core.scss` to `_index.scss` to better align with Node importing +* Rename `crick.scss` to `_watson-patterns.scss` to distribute as a partial and align name +* Add `library` Sass file and folder +* Update colors to current standards +* Add sub-content templates to Offer Control +* Fix a typo on Offer Control +* Remove resources template from Accessibility +* Add subcontent templates to typography guidelines +* Change detail to large example +* Update subcontent templates +* Fix bugs in Subcontent Template ([#255](https://github.com/IBM-Watson/design-library/issues/255)) +* Change some details to examples in grids guidelines +* Add sub-content templates to grids guidelines +* Change detail to example +* Update subcontent templates +* Update front matter for responsiveGridVideo +* Add sub-content templates to color guidelines +* Update variables in sub-content templates +* Remove resources template and update front matter +* Add sub-content templates to Introduce Cognitive +* Add sub-content templates to Inform Interactions +* Clean lots of small details +* Update base styling +* Order sections correctly +* Update Accessibility visual example + ## v1.0.0-beta.3 *April 28, 2015* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ccd1cee0..6b649f69 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing to the IBM Watson Design Library -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 your own project. +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. _**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:_ @@ -22,12 +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 + +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). + ## 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. -* You can create an issue [here](https://github.com/IBM-Watson/design-library/issues). Please include as many details as possible in your report. +* 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 you are using/viewing +* Please include the version of the Design Library 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. @@ -38,15 +42,14 @@ No patterns rely upon JavaScript frameworks (jQuery, Dojo, Angular, etc…). Any ## Pull Requests * **DO NOT ISSUE A PULL REQUEST WITHOUT FIRST [SUBMITTING AN ISSUE](#submitting-issues)** -* Pull requests should reference their related issues. If the pull request closes an issue, [please reference its closing in your commit messages](https://help.github.com/articles/closing-issues-via-commit-messages/). Pull requests not referencing any issues will be closed. +* 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` with the changes made by your pull request, making sure to use the proper [Emoji](#emoji-cheatsheet). -* Make sure you have [installed the development environment](https://github.com/IBM-Watson/design-library#installation), [updated your runner to the latest version](https://github.com/IBM-Watson/design-library#updating-the-runner), and have [run the library locally](https://github.com/IBM-Watson/design-library#running-locally) to ensure that your code works properly. +* 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 * Follow our JavaScript and CSS styleguides. We have linters set up to catch most of it. -* Ensure that you have [EditorConfig](http://editorconfig.org/) installed in your editor of choice and that it is functioning properly. -* Do not squash or rebase your commits when submitting a Pull Request. It makes it much harder to follow your work and make incremental changes. -* Update the [CHANGELOG](#maintaining-thechangelog) with your changes. -* Ensure no Emoji tags are used in the title of your Pull Request +* 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. +* Ensure no Emoji tags are used in the title of the Pull Request ### Git Commit Messages @@ -58,6 +61,7 @@ No patterns rely upon JavaScript frameworks (jQuery, Dojo, Angular, etc…). Any ### Branching Model * Branches must be made off of the most current `develop` branch from `git@github.com:IBM-Watson/design-library.git` +* Branch names should be descriptive, describing what is being done in that branch * Pull requests must be made into our [develop](https://github.com/IBM-Watson/design-library/tree/develop) branch. * The following branch prefixes should be used when creating a new branch: * `hotfix/` - bug fixes that got through and need to be squashed @@ -71,7 +75,7 @@ No patterns rely upon JavaScript frameworks (jQuery, Dojo, Angular, etc…). Any Versioning is done through [SEMVER](http://semver.org/). When creating a new version, issue a [pull request](#pull-requests) from `develop` into `master` and create new release branch off of `master` with the version's name, and create a new tag with `v` prefixed with the version's name from that branch. -For instance, if you are creating version `1.1.0`, you would start by merging `develop` into `master`, create a branch `release/1.1.0` from `master`, and create a tag `v1.1.0` from branch `release/1.1.0`. +For instance, when creating version `1.1.0`, start by merging `develop` into `master`, create a branch `release/1.1.0` from `master`, and create a tag `v1.1.0` from branch `release/1.1.0`. ### Maintaining the Changelog diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 812af94d..00000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright (c) 2015 International Business Machines Corporation. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 00000000..bfecb7cb --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,19 @@ +## Documentation + +Creative Commons License
Watson Design Guide documentation by International Business Machines Corporation is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at https://github.com/IBM-Watson/design-library. + +## Code + +Copyright (c) 2015 International Business Machines Corporation. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/README.md b/README.md index 6880d3f2..c9c2b250 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 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=feature%2Ftravis)](https://travis-ci.org/IBM-Watson/design-library) +# 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) ## Getting Started diff --git a/bower.json b/bower.json index bd7735cb..94180e84 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "watson-design-library", - "version": "1.0.0-beta.3", + "version": "1.0.0-rc.1", "homepage": "https://github.com/IBM-Watson/design-library", "authors": [ "Sam Richard ", @@ -12,7 +12,7 @@ ], "description": "Design guidelines and patterns for creating sites and applications", "main": "patterns/crick.scss", - "license": "MIT", + "license": ["Apache 2.0", "CC-BY 4.0"], "ignore": [ "**/.*", "!.bowerrc", @@ -23,8 +23,9 @@ ], "dependencies": { "sass-toolkit": "~2.9.0", - "ibm-colors": "~1.3", + "ibm-colors": "~1.4", "modular-scale": "~2.0.7", - "breakpoint-sass": "~2.5.0" + "breakpoint-sass": "~2.5.0", + "prism": "*" } } diff --git a/language/principles/introduce-cognitive/index.md b/language/01-principles/01-introduce-cognitive/index.md similarity index 68% rename from language/principles/introduce-cognitive/index.md rename to language/01-principles/01-introduce-cognitive/index.md index 1b2d423c..f606fb5b 100644 --- a/language/principles/introduce-cognitive/index.md +++ b/language/01-principles/01-introduce-cognitive/index.md @@ -4,35 +4,35 @@ title: "Introduce Cognitive" variables: detail: introduceOne: - visualDisplay: images/principles/introduce-one.svg + visualDisplay: /images/principles/introduce-one.svg description: "Provide intelligent defaults and positive feedback to reinforce cognitive behaviors and gradually adjust the user’s habits." - callout: + callouts: - title: "Based on the input data, this is a graph comparing REVENUE and TIME." description: "This describes the variables plotted on the graph." - title: "\"Choose a different variable to plot\"" description: "This is copy that displays below a graph." introduceTwo: - visualDisplay: images/principles/introduce-two.svg + visualDisplay: /images/principles/introduce-two.svg description: "Clarify Watson's capabilities with hierarchy, copy, and interactions to help set appropriate user expectations." - callout: + callouts: - title: "\"Remember that Chef Watson eats data, not real food. Use your own judgment when preparing these dishes.\"" description: "This is copy that displays below the primary content." introduceThree: - visualDisplay: images/principles/introduce-three.svg + visualDisplay: /images/principles/introduce-three.svg description: "Educate the user throughout the experience without interrupting their workflow." - callout: + callouts: - title: "\"You still need to complete an action to see results.\"" description: "This is an empty module with copy that explains the user's next action." introduceFour: - visualDisplay: images/principles/introduce-four.svg - description: "Integrate additional explanation into the vhierarchy as a secondary focus so that it doesn’t get in thof more experienced users." - callout: + visualDisplay: /images/principles/introduce-four.svg + description: "Integrate additional explanation into the hierarchy as a secondary focus so that it doesn’t get in the way of more experienced users." + callouts: - title: "\"Did you know?...\"" description: "This is copy that displays beside the primary content." --- **Give first-time users a set of "cognitive training wheels" and continue to provide unobtrusive support as needed.** -{{> SOME-FUNCTION-HERE display detail.introduceOne}} -{{> SOME-FUNCTION-HERE display detail.introduceTwo}} -{{> SOME-FUNCTION-HERE display detail.introduceThree}} -{{> SOME-FUNCTION-HERE display detail.introduceFour}} +{{ _detail.view(detail.introduceOne) }} +{{ _detail.view(detail.introduceTwo) }} +{{ _detail.view(detail.introduceThree) }} +{{ _detail.view(detail.introduceFour) }} diff --git a/language/principles/inform-interactions/index.md b/language/01-principles/02-inform-interactions/index.md similarity index 59% rename from language/principles/inform-interactions/index.md rename to language/01-principles/02-inform-interactions/index.md index b84d8ad3..583bf159 100644 --- a/language/principles/inform-interactions/index.md +++ b/language/01-principles/02-inform-interactions/index.md @@ -4,29 +4,29 @@ title: "Inform Interactions" variables: detail: informOne: - visualDisplay: images/principles/inform-one.svg - description: "Demonstrate Watson’s heavy lifting with vmetaphors and indications of the actions Watson takes." - callout: + visualDisplay: /images/principles/inform-one.svg + description: "Demonstrate Watson’s heavy lifting with visual metaphors and indications of the actions Watson takes." + callouts: - title: "Primary Insights" description: These are modules that display primary insights. - title: "\"See other hypotheses\"" description: "This is copy that displays below the primary content." informTwo: - visualDisplay: images/principles/inform-two.svg - description: "Increase transparency when it helps the user the accuracy of the insights Watson returns." - callout: + visualDisplay: /images/principles/inform-two.svg + description: "Increase transparency when it helps the user trust the accuracy of the insights Watson returns." + callouts: - title: "\"Watson is analyzing 115 out of 150 data sets\"" description: "This is a module that explains what Watson is doing." informThree: - visualDisplay: images/principles/inform-three.svg - description: "Present insights early on, with an indicatiaccuracy or obscurity." - callout: + visualDisplay: /images/principles/inform-three.svg + description: "Present insights early on, with an indication of accuracy or obscurity." + callouts: - title: "\"This answer was chosen because...\"" description: "This is copy that displays below each insight." informFour: - visualDisplay: images/principles/inform-four.svg - description: "Display Watson's insights as the user needs thethat interfaces aren't cluttered or overwhelming." - callout: + visualDisplay: /images/principles/inform-four.svg + description: "Display Watson's insights as the user needs them so that interfaces aren't cluttered or overwhelming." + callouts: - title: "\"Show / Hide additional explanation\"" description: "This is a button to show or hide additional explanation." - title: "Additional explanation" @@ -34,7 +34,7 @@ variables: --- **Reduce the complexity of using Watson by informing the user's interactions as they collaborate with Watson to accomplish desired tasks.** -{{> SOME-FUNCTION-HERE display detail.informOne}} -{{> SOME-FUNCTION-HERE display detail.informTwo}} -{{> SOME-FUNCTION-HERE display detail.informThree}} -{{> SOME-FUNCTION-HERE display detail.informFour}} +{{ _detail.view(detail.informOne) }} +{{ _detail.view(detail.informTwo) }} +{{ _detail.view(detail.informThree) }} +{{ _detail.view(detail.informFour) }} diff --git a/language/principles/offer-control/index.md b/language/01-principles/03-offer-control/index.md similarity index 61% rename from language/principles/offer-control/index.md rename to language/01-principles/03-offer-control/index.md index abe48dbf..d63f0cd3 100644 --- a/language/principles/offer-control/index.md +++ b/language/01-principles/03-offer-control/index.md @@ -4,9 +4,9 @@ title: "Offer Control" variables: detail: offerOne: - visualDisplay: images/principles/offer-one.svg - description: "Denote a clear best path through the experiwhile accommodating alternatives and seamless undos." - callout: + visualDisplay: /images/principles/offer-one.svg + description: "Denote a clear best path through the experience, while accommodating alternatives and seamless undos." + callouts: - title: "Primary Action" description: "This is a module in which the primary action occurs." - title: "Secondary Action" @@ -14,9 +14,9 @@ variables: - title: "Alternative Action" description: "This is a module that displays alternative actions that are separate from the primary best path." offerTwo: - visualDisplay: images/principles/offer-two.svg - description: "Support users with copy and visual designindicate collaboration or a conversation." - callout: + visualDisplay: /images/principles/offer-two.svg + description: "Support users with copy and visual design that indicate collaboration or a conversation." + callouts: - title: "\"You want to accomplish ___________\"" description: "This is copy that displays at the top of the page." - title: "\"Watson can do these actions to help you get there.\"" @@ -24,21 +24,21 @@ variables: - title: "Next steps for the user to choose from" description: "These are modules that display available actions." offerThree: - visualDisplay: images/principles/offer-three.svg - description: "Provide manual personalization options thaperformed by the user, such as feedback mechanisms for use\"teach\" Watson." - callout: + visualDisplay: /images/principles/offer-three.svg + description: "Provide manual personalization options that are performed by the user, such as feedback mechanisms for users to \"teach\" Watson." + callouts: - title: "\"Teach Watson which filters are important to you\"" description: "This is copy that displays above the filter modules." offerFour: - visualDisplay: images/principles/offer-four.svg - description: "Provide automatic personalization options thaperformed by Watson, such as gathering user informatiopreferences to apply to the experience." - callout: + visualDisplay: /images/principles/offer-four.svg + description: "Provide automatic personalization options that are performed by Watson, such as gathering user information and preferences to apply to the experience." + callouts: - title: "\"Recommendations based on saved queries\"" description: "These are modules that display personalized recommendations." --- **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.** -{{> SOME-FUNCTION-HERE display detail.offerOne}} -{{> SOME-FUNCTION-HERE display detail.offerTwo}} -{{> SOME-FUNCTION-HERE display detail.offerThree}} -{{> SOME-FUNCTION-HERE display detail.offerFour}} +{{ _detail.view(detail.offerOne) }} +{{ _detail.view(detail.offerTwo) }} +{{ _detail.view(detail.offerThree) }} +{{ _detail.view(detail.offerFour) }} diff --git a/language/guidelines/style/accessibility/index.md b/language/02-guidelines/01-style/accessibility/index.md similarity index 54% rename from language/guidelines/style/accessibility/index.md rename to language/02-guidelines/01-style/accessibility/index.md index b2766c81..11c534fe 100644 --- a/language/guidelines/style/accessibility/index.md +++ b/language/02-guidelines/01-style/accessibility/index.md @@ -3,39 +3,37 @@ type: guideline title: Accessibility resources: links: - name: "IBM Design Language" - source: http://www.ibm.com/design/language/framework/visual/color.shtml#contrast - name: "Color Contrast Analyzer" - source: http://www.paciellogroup.com/resources/contrastanalyser/ - name: "Color Ratio Analyzer" - source: http://leaverou.github.io/contrast-ratio/ - name: "WCAG 2.0 AA requirements" - source: http://www.w3.org/TR/WCAG20/ + - name: "IBM Design Language" + source: http://www.ibm.com/design/language/framework/visual/color.shtml#contrast + - name: "Color Contrast Analyzer" + source: http://www.paciellogroup.com/resources/contrastanalyser/ + - name: "Color Ratio Analyzer" + source: http://leaverou.github.io/contrast-ratio/ + - name: "WCAG 2.0 AA requirements" + source: http://www.w3.org/TR/WCAG20/ variables: detail: accessibilityInteraction: - description: "When distinguishing an interactive element, do not rely on color as the only visual indicator." - visualDisplay: images/accessibility/visual-accessibility-example.svg - callouts: - title: "Help users to easily identify form elements by using iconography." - description: "A log in page using iconography to help users identify input fields." - title: "Help users to distinguish links by using combinations of colors and underlines." - description: "A log in page using colored text and an underline to indicate a link." + description: "When distinguishing an interactive element, do not rely on color as the only visual indicator." + visualDisplay: /images/accessibility/visual-accessibility-example.svg + callouts: + - title: "Help users to easily identify form elements by using iconography." + description: "A log in page using iconography to help users identify input fields." + - title: "Help users to distinguish links by using combinations of colors and underlines." + description: "A log in page using colored text and an underline to indicate a link." 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 + 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 --- 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. -{{> SOME-FUNCTION-HERE detail.accessibilityInteraction}} - -{{> SOME-FUNCTION-HERE resources}} +{{ _detail.view(detail.accessibilityInteraction) }} ## 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. -{{> SOME-FUNCTION-HERE detail.accessibilityAnimation}} +{{ _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) diff --git a/language/guidelines/style/color/index.md b/language/02-guidelines/01-style/color/index.md similarity index 81% rename from language/guidelines/style/color/index.md rename to language/02-guidelines/01-style/color/index.md index 0d15951c..4efc6e50 100644 --- a/language/guidelines/style/color/index.md +++ b/language/02-guidelines/01-style/color/index.md @@ -3,11 +3,11 @@ type: guideline title: Color resources: files: - name: "IBM Color Palette ASE" - source: /assets/color/ibm-color-palette.ase + - name: "IBM Color Palette ASE" + source: /assets/color/ibm-color-palette.ase links: - name: "IBM Color Guidelines" - source: http://www.ibm.com/design/language/framework/visual/color.shtml + - name: "IBM Color Guidelines" + source: http://www.ibm.com/design/language/framework/visual/color.shtml variables: example: paletteApplication: @@ -17,10 +17,10 @@ variables: 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." 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." + 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." primaryColors: instructions: "Choose a primary and secondary color" colors: @@ -51,7 +51,7 @@ variables: - palette: Yellow tone: 30 supportingGrays: - instructions: "Choose supporting Grays and neutrals" + instructions: "Choose supporting grays and neutrals" colors: - palette: Gray tone: 90 @@ -73,8 +73,6 @@ variables: 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. -{{> SomeFunctionHere resources}} - ## 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. @@ -95,6 +93,6 @@ Choose a primary color, a secondary color, and an accent color. Additional tints 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. -{{> example paletteApplication.light }} +{{ _example.large(example.paletteApplication.light) }} -{{> example paletteApplication.dark }} +{{ _example.large(example.paletteApplication.dark) }} diff --git a/language/guidelines/style/grids/index.md b/language/02-guidelines/01-style/grids/index.md similarity index 77% rename from language/guidelines/style/grids/index.md rename to language/02-guidelines/01-style/grids/index.md index 82d0e63a..ea2e68a6 100644 --- a/language/guidelines/style/grids/index.md +++ b/language/02-guidelines/01-style/grids/index.md @@ -14,51 +14,46 @@ variables: quote: "Start with the small screen first, then expand until it looks like sh*t. TIME FOR A BREAKPOINT!" citation: "Stephen Hay" linkToSource: "http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/" - detail: - gridsOne: - title: "Custom" - visualDisplay: /images/grids/grids1.svg - gridsTwo: - title: "Compound" - visualDisplay: /images/grids/grids2.svg - gridsThree: - title: "Ratio-Based" - visualDisplay: /images/grids/grids3.svg - gridsFour: - title: "Ratio Spiral-Based" - visualDisplay: /images/grids/grids4.svg + example: + gridTypes: + gridsOne: + title: "Custom" + visualDisplay: /images/grids/grids1.svg + gridsTwo: + title: "Compound" + visualDisplay: /images/grids/grids2.svg + gridsThree: + title: "Ratio-Based" + visualDisplay: /images/grids/grids3.svg + gridsFour: + title: "Ratio Spiral-Based" + visualDisplay: /images/grids/grids4.svg responsiveGridVideo: visualDisplay: /videos/grids/grids-responsive.webm - callout: - 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." + 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 - 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. -{{> SOME-FUNCTION-HERE display blockquote.quoteOne}} +{{ _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. -{{> SOME-FUNCTION-HERE display blockquote.quoteTwo}} +{{ _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. ### Asymmetric Grid Examples -{{> SOME-FUNCTION-HERE display detail.gridsOne}} -{{> SOME-FUNCTION-HERE display detail.gridsTwo}} -{{> SOME-FUNCTION-HERE display detail.gridsThree}} -{{> SOME-FUNCTION-HERE display detail.gridsFour}} +{{ _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. -{{> SOME-FUNCTION-HERE display blockquote.quoteThree}} +{{ _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. -{{> SOME-FUNCTION-HERE display detail.responsiveGridVideo}} +{{ _example.large(example.responsiveGridVideo) }} + diff --git a/language/guidelines/style/typography/index.md b/language/02-guidelines/01-style/typography/index.md similarity index 68% rename from language/guidelines/style/typography/index.md rename to language/02-guidelines/01-style/typography/index.md index 2e495442..d8a1d20f 100644 --- a/language/guidelines/style/typography/index.md +++ b/language/02-guidelines/01-style/typography/index.md @@ -3,20 +3,22 @@ type: guideline title: Typography variables: aside: - description: "We are currently in the process of inquiring about full usage rights and licensing for Helvetica Neue for IBM. During this time, we're unable to provide downloadable font assets. Please defer to the Cross-Platform Fontstack Options below for comparable fontstacks." + usageRights: + description: "We are currently in the process of inquiring about full usage rights and licensing for Helvetica Neue for IBM. During this time, we're unable to provide downloadable font assets. Please defer to the Cross-Platform Fontstack Options below for comparable fontstacks." example: - typefaceCombinationOne: - title: "Helvetica Neue Roman" - visualAlternative: "The quick brown fox jumped over the fence." - typefaceCombinationTwo: - title: "Helvetica Neue Roman Italic" - visualAlternative: "The quick brown fox jumped over the fence." - typefaceCombinationThree: - title: "Helvetica Neue Bold" - visualAlternative: "The quick brown fox jumped over the fence." - typefaceCombinationFour: - title: "Helvetica Neue Bold Italic" - visualAlternative: "The quick brown fox jumped over the fence." + typefaceCombinations: + typefaceCombinationOne: + title: "Helvetica Neue Roman" + visualAlternative: "The quick brown fox jumped over the fence." + typefaceCombinationTwo: + title: "Helvetica Neue Roman Italic" + visualAlternative: "The quick brown fox jumped over the fence." + typefaceCombinationThree: + title: "Helvetica Neue Bold" + visualAlternative: "The quick brown fox jumped over the fence." + typefaceCombinationFour: + title: "Helvetica Neue Bold Italic" + visualAlternative: "The quick brown fox jumped over the fence." responsiveTypography: title: "Major Third with a breakpoint at 500px" visualDisplay: /videos/typography/responsive-typography.webm @@ -29,16 +31,13 @@ Typography is the atomic element of good interface design. It colors the words i As a rule and wherever possible, use Helvetica Neue. It is the font of science and the information age, with a precision and objectivity that commands respect. We lean on Helvetica Neue to do the hard work of conveying information, specifications, and the basics. Its clean confidence makes it ideal for our product design. -{{> SOME-FUNCTION-HERE aside}} +{{ _aside.aside(aside.usageRights) }} ## 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). -{{> SOME-FUNCTION-HERE example.typefaceCombinationOne}} -{{> SOME-FUNCTION-HERE example.typefaceCombinationTwo}} -{{> SOME-FUNCTION-HERE example.typefaceCombinationThree}} -{{> SOME-FUNCTION-HERE example.typefaceCombinationFour}} +{{ _example.compare(example.typefaceCombinations) }} ## Typographic Scale @@ -48,7 +47,7 @@ The IBM Design Language recommends using [modular type scales](http://www.ibm.co IBM Watson recommends the Major Third ratio for screen sizes under 500px and the establishment of breakpoints for higher contrast on larger screens. This ratio is ideal for creating visual hierarchy on small screens without being too jarring. -{{> SOME-FUNCTION-HERE example.responsiveTypography}} +{{ _example.large(example.responsiveTypography) }} ## Cross-Platform Fontstack Options diff --git a/language/guidelines/interaction/animation/index.md b/language/02-guidelines/02-interaction/animation/index.md similarity index 86% rename from language/guidelines/interaction/animation/index.md rename to language/02-guidelines/02-interaction/animation/index.md index 7850c896..d579a471 100755 --- a/language/guidelines/interaction/animation/index.md +++ b/language/02-guidelines/02-interaction/animation/index.md @@ -2,22 +2,20 @@ type: guideline title: Animation variables: - detail: + examples: animationBefore: title: "Before" + visualDisplay: /videos/animation/example-animation-1.webm description: "Interfaces without animations often produce a choppy, disorienting, and confusing experience for the user." - visualDisplay: videos/animation/example-animation-1.webm animationAfter: title: "After" + visualDisplay: /videos/animation/example-animation-2.webm description: "Interfaces with animations provide orientation and guidance for the user and make for a more pleasant experience." - visualDisplay: videos/animation/example-animation-2.webm --- Motion is a fundamental element of user experience design because it demonstrates the emotional quality and vitality of the product. It gives non-verbal communication to the user and is the body language of a product. Within software, motion is conveyed through the process of animation—"the illusion of movement through a sequence of images." -{{> SOME-FUNCTION-HERE detail.animationBefore}} - -{{> SOME-FUNCTION-HERE detail.animationAfter}} +{{ _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. diff --git a/language/02-guidelines/03-branding/wordmark/index.md b/language/02-guidelines/03-branding/wordmark/index.md new file mode 100644 index 00000000..13f8f5b4 --- /dev/null +++ b/language/02-guidelines/03-branding/wordmark/index.md @@ -0,0 +1,78 @@ +--- +type: guideline +title: Wordmark and Logo +resources: + files: + - name: "Wordmark and Logo SVG" + source: /images/wordmark/watson_wordmark_logotype.zip +variables: + example: + firstCompare: + exampleOne: + title: Wordmark + visualDisplay: /images/wordmark/wordmark.svg + exampleTwo: + title: Logo + visualDisplay: /images/wordmark/logo.svg + smallExample: + title: Wordmark + visualDisplay: /images/wordmark/wordmark-spacing.svg + secondCompare: + exampleOne: + light: + title: Wordmark + visualDisplay: /images/wordmark/wordmark-color-pos.svg + dark: + visualDisplay: /images/wordmark/wordmark-color-neg.svg + exampleTwo: + light: + title: Logo + visualDisplay: /images/wordmark/logo-color-pos.svg + dark: + visualDisplay: /images/wordmark/logo-color-neg.svg + thirdCompare: + exampleOne: + title: "Do not reconfigure" + visualDisplay: /images/wordmark/wrong-configuration.svg + sentiment: negative + exampleTwo: + title: "Do not distort" + visualDisplay: /images/wordmark/wrong-distortion.svg + sentiment: negative + exampleThree: + title: "Do not combine colors" + visualDisplay: /images/wordmark/wrong-color-combination.svg + sentiment: negative + exampleFour: + title: "Do not change the font" + visualDisplay: /images/wordmark/wrong-font.svg + 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. + +{{ _example.compare(example.firstCompare) }} + +## Specifications + +### 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. + +{{ _example.small(example.smallExample) }} + +### Color Usage + +The wordmark and logo for IBM Watson should only appear in the approved color combinations. Any one of the [three primary colors](color.html) for IBM Watson may be used in combination with black or white for use on light or dark backgrounds, respectively. For dark color palettes, use lighter values of the IBM Watson primary colors. + +{{ _example.compare(example.secondCompare) }} + +### Incorrect Usage + +Never distort or reconfigure the wordmark or logo. Do not attempt to create the wordmark yourself, change the font, or alter the size or proportions. + +{{ _example.compare(example.thirdCompare) }} + +## Logo versus Avatar + +The logo for IBM Watson serves as the visual representation of the brand. The logo may be used as a static element as it pertains to products. The IBM Watson avatar is recommended in situations when Watson is interacting with, aiding, or responding to a user. diff --git a/language/02-guidelines/user-experience/performance/index.md b/language/02-guidelines/user-experience/performance/index.md new file mode 100644 index 00000000..c27efd71 --- /dev/null +++ b/language/02-guidelines/user-experience/performance/index.md @@ -0,0 +1,67 @@ +--- +type: guideline +title: Performance +resources: + links: + - name: "North: Performance" + source: http://pointnorth.io/#performance + - name: "Have Your Cake and Eat it Too: A Primer on Performance" + source: http://una.im/slides-nom-nom-perf/#/ + - name: "Lara Hogan: Designing for Performance" + source: http://larahogan.me/design/ + - name: "Our need for web speed: It's about neuroscience, not entitlement" + source: http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/ + - name: "Powers of 10: Time Scales in User Experience" + source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ + - name: "Jank Free" + source: http://jankfree.org/ + - name: "Web Page Test" + source: http://www.webpagetest.org/ +--- + +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 + +In Jakob Nielsen's book _Usability Engineering_, he [describes three important limits in human response time](http://www.nngroup.com/articles/response-times-3-important-limits/): + +> * **0.1 second** is about the limit for having the user feel that the system is **reacting instantaneously**, meaning that no special feedback is necessary except to display the result. +>* **1.0 second** is about the limit for the **user's flow of thought** to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data. +> * **10 seconds** is about the limit for **keeping the user's attention** focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect. + +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. + +[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. + +[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*). + +### The Size and Speed of Immersion + +Sensory memory, short-term memory, and working memory combine to determine how immersive an interface feels to a user. The faster an interface is able to respond to a user, the faster that user's sensory memory can pick up the response, the faster that response can be stored in short-term memory, and the faster that working memory can start processing the result in context of the input. The longer that initial step takes, or the larger the amount being asked for and retrieved, the more likely that a user's memory for the task at hand will decay. This decay is what causes web stress and leads users abandon tasks and sites entirely. + +## Notifying Users About Interface Delays + +Based on this understanding of memory as well as Nielsen's research, we recommend notifying users about the duration of tasks in the following ways: + +* **<=100ms** - If a response takes 100ms or less, no notification is needed +* **>100ms** - If a response takes more than 100ms, an indication that a user's response is being processed should be provided. This is commonly a loading indicator or (ideally) a progress bar showing percent complete +* **>3s** - If a response takes more than 3s, the task should be backgrounded, giving the user the ability to subscribe to updates for when the task completes. Backgrounded tasks should include context of the original request in order to help the user recall the reason the request was made. + +## Creating Smooth Interfaces + +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. + +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. + +## Grading and Measuring Performance + +Whenever working with a network powered interface (websites, native apps that make network calls, cross-network APIs, etc…), the following measurements should be performed and graded against in order to inform if an interface is performing at the level expected: + +* 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* + +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/404.md b/language/404.md new file mode 100644 index 00000000..ec5c8bac --- /dev/null +++ b/language/404.md @@ -0,0 +1,25 @@ +--- +type: +title: "404 - We're sorry. Looks like that page doesn't exist." +--- + +Try one of these instead: + +### 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, motion, and wordmark. + +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) diff --git a/language/guidelines/branding/wordmark/index.md b/language/guidelines/branding/wordmark/index.md deleted file mode 100644 index 8896ad9f..00000000 --- a/language/guidelines/branding/wordmark/index.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -type: guideline -title: Wordmark and Logotype -resources: - files: - name: "Wordmark and Logotype SVG" - source: /images/wordmark/watson_wordmark_logotype.zip -variables: - example: - wordmark: - title: Wordmark - visualDisplay: /images/wordmark/wordmark.svg - logotype: - title: Logotype - visualDisplay: /images/wordmark/logotype.svg - wordmarkSpacing: - title: Wordmark - visualDisplay: /images/wordmark/wordmark-spacing.svg - logotypeSpacing: - title: Logotype - visualDisplay: /images/wordmark/logotype-spacing.svg - wordmarkColor: - light: - title: Wordmark - visualDisplay: /images/wordmark/wordmark-color-combination.svg - dark: - visualDisplay: /images/wordmark/dark-background-wordmark.svg - logotypeColor: - light: - title: Logotype - visualDisplay: /images/wordmark/logotype-color-combination.svg - dark: - visualDisplay: /images/wordmark/dark-background-logotype.svg - incorrectUsage: - reconfigure: - title: "Do not reconfigure" - visualDisplay: /images/wordmark/wrong-logotype-configuration.svg - sentiment: negative - distort: - title: "Do not distort" - visualDisplay: /images/wordmark/wrong-logotype-distortion.svg - sentiment: negative - color: - title: "Do not combine colors" - visualDisplay: /images/wordmark/wrong-color-combination.svg - sentiment: negative - font: - title: "Do not change the font" - visualDisplay: /images/wordmark/wrong-logotype-font.svg - sentiment: negative ---- - -The IBM Watson wordmark and logotype represents our brand and should be managed carefully. It is typeset in Helvetica Neue to align with IBM standards. When possible, it should be used in all internal and external communications that focus on the IBM Watson brand. - -{{> SomeFunctionHere example.wordmark}} - -{{> SomeFunctionHere example.logotype}} - -{{> SomeFunctionHere resources}} - -## Specifications - -### Spacing considerations - -Use only the supplied artwork when using the wordmark or logotype. It is important to include adequate spacing around these elements to avoid visual clutter. - -{{> SomeFunctionHere example.wordmarkSpacing}} - -{{> SomeFunctionHere example.logotypeSpacing}} - -### Color Usage - -The wordmark and logotype for IBM Watson should only appear in the approved color combinations. Any one of the [three primary colors](color.html) for IBM Watson may be used in combination with black or white for use on light or dark backgrounds, respectively. For dark color palettes, use lighter values of the IBM Watson primary colors. - -{{> SomeFunctionHere example.wordmarkColor.light}} - -{{> SomeFunctionHere example.logotypeColor.light}} - -{{> SomeFunctionHere example.wordmarkColor.dark}} - -{{> SomeFunctionHere example.logotypeColor.dark}} - -### Incorrect Usage - -Never distort or reconfigure the logotype. Do not attempt to create the logotype yourself, change the font, or alter the size or proportions. - -{{> SomeFunctionHere example.incorrectUsage.reconfigure}} - -{{> SomeFunctionHere example.incorrectUsage.distort}} - -{{> SomeFunctionHere example.incorrectUsage.color}} - -{{> SomeFunctionHere example.incorrectUsage.font}} - -## Logo versus Avatar - -The logo for IBM Watson serves as the visual representation of the brand. The logo may be used outside of the logotype configuration as a static element as it pertains to products. The IBM Watson avatar is recommended in situations when Watson is interacting with, aiding, or responding to a user. diff --git a/language/images/accessibility/visual-accessibility-example.svg b/language/images/accessibility/visual-accessibility-example.svg index 16771c5e..e674ebfe 100644 --- a/language/images/accessibility/visual-accessibility-example.svg +++ b/language/images/accessibility/visual-accessibility-example.svg @@ -1,92 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/language/images/wordmark/dark-background-logotype.svg b/language/images/wordmark/dark-background-logotype.svg deleted file mode 100644 index c96362d9..00000000 --- a/language/images/wordmark/dark-background-logotype.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/dark-background-wordmark.svg b/language/images/wordmark/dark-background-wordmark.svg deleted file mode 100644 index 23d0ca6c..00000000 --- a/language/images/wordmark/dark-background-wordmark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/logo-color-neg.svg b/language/images/wordmark/logo-color-neg.svg new file mode 100644 index 00000000..0a2a72a6 --- /dev/null +++ b/language/images/wordmark/logo-color-neg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/logo-color-pos.svg b/language/images/wordmark/logo-color-pos.svg new file mode 100644 index 00000000..87582195 --- /dev/null +++ b/language/images/wordmark/logo-color-pos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/logo.svg b/language/images/wordmark/logo.svg new file mode 100644 index 00000000..25980e1e --- /dev/null +++ b/language/images/wordmark/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/logotype-color-combination.svg b/language/images/wordmark/logotype-color-combination.svg deleted file mode 100644 index be2b428f..00000000 --- a/language/images/wordmark/logotype-color-combination.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/logotype-spacing.svg b/language/images/wordmark/logotype-spacing.svg deleted file mode 100644 index 6684de90..00000000 --- a/language/images/wordmark/logotype-spacing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/logotype.svg b/language/images/wordmark/logotype.svg deleted file mode 100644 index 9f90a2a6..00000000 --- a/language/images/wordmark/logotype.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/watson_wordmark_logotype.zip b/language/images/wordmark/watson_wordmark_logotype.zip index 21c620ad..c4243c43 100644 Binary files a/language/images/wordmark/watson_wordmark_logotype.zip and b/language/images/wordmark/watson_wordmark_logotype.zip differ diff --git a/language/images/wordmark/wordmark-color-combination.svg b/language/images/wordmark/wordmark-color-combination.svg deleted file mode 100644 index 4f6fa6b2..00000000 --- a/language/images/wordmark/wordmark-color-combination.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/wordmark-color-neg.svg b/language/images/wordmark/wordmark-color-neg.svg new file mode 100644 index 00000000..44b4000c --- /dev/null +++ b/language/images/wordmark/wordmark-color-neg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/wordmark-color-pos.svg b/language/images/wordmark/wordmark-color-pos.svg new file mode 100644 index 00000000..e5b4cc8f --- /dev/null +++ b/language/images/wordmark/wordmark-color-pos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/wordmark-spacing.svg b/language/images/wordmark/wordmark-spacing.svg index aa72afdd..d50869f5 100644 --- a/language/images/wordmark/wordmark-spacing.svg +++ b/language/images/wordmark/wordmark-spacing.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/language/images/wordmark/wordmark.svg b/language/images/wordmark/wordmark.svg index d9a4c689..af306cda 100644 --- a/language/images/wordmark/wordmark.svg +++ b/language/images/wordmark/wordmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/language/images/wordmark/wrong-color-combination.svg b/language/images/wordmark/wrong-color-combination.svg index 74b1ec6f..cb9599da 100644 --- a/language/images/wordmark/wrong-color-combination.svg +++ b/language/images/wordmark/wrong-color-combination.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/language/images/wordmark/wrong-configuration.svg b/language/images/wordmark/wrong-configuration.svg new file mode 100644 index 00000000..d9369cfd --- /dev/null +++ b/language/images/wordmark/wrong-configuration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/wrong-distortion.svg b/language/images/wordmark/wrong-distortion.svg new file mode 100644 index 00000000..0f259bd2 --- /dev/null +++ b/language/images/wordmark/wrong-distortion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/wrong-font.svg b/language/images/wordmark/wrong-font.svg new file mode 100644 index 00000000..6acff185 --- /dev/null +++ b/language/images/wordmark/wrong-font.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/wordmark/wrong-icon.svg b/language/images/wordmark/wrong-icon.svg deleted file mode 100644 index 84220354..00000000 --- a/language/images/wordmark/wrong-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/language/images/wordmark/wrong-logotype-configuration.svg b/language/images/wordmark/wrong-logotype-configuration.svg deleted file mode 100644 index 0b481528..00000000 --- a/language/images/wordmark/wrong-logotype-configuration.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/wrong-logotype-distortion.svg b/language/images/wordmark/wrong-logotype-distortion.svg deleted file mode 100644 index 7f341482..00000000 --- a/language/images/wordmark/wrong-logotype-distortion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/images/wordmark/wrong-logotype-font.svg b/language/images/wordmark/wrong-logotype-font.svg deleted file mode 100644 index 67a55247..00000000 --- a/language/images/wordmark/wrong-logotype-font.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/language/ui-patterns/01-documentation/00-getting-started/index.md b/language/ui-patterns/01-documentation/00-getting-started/index.md new file mode 100644 index 00000000..7e68f691 --- /dev/null +++ b/language/ui-patterns/01-documentation/00-getting-started/index.md @@ -0,0 +1,68 @@ +--- +title: Getting Started with the WDG Pattern Library +resources: + links: + - name: "Bower" + source: http://bower.io/ + - name: "Sass" + source: http://sass-lang.com/ + - name: "Compass" + source: http://compass-style.org/ + - name: "LibSass" + source: https://github.com/sass/libsass + - name: "Node Sass" + source: https://github.com/sass/node-sass + - name: "Eyeglass" + source: https://github.com/sass-eyeglass/eyeglass + - name: "Gulp" + source: http://gulpjs.com/ + - name: "Gulp Sass" + source: https://github.com/dlmanning/gulp-sass/issues + - name: "Node Sass Import Once" + source: https://github.com/at-import/node-sass-import-once +--- +Welcome to the 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. + +## Installation + +The Pattern Library can be installed through [Bower](http://bower.io): + +```bash +$ 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. + +## 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. + +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: + +```scss +@import "toolkit"; + +// Settings Go here + +@import "watson-design-library/patterns/watson-patterns"; + +// Custom project styling +``` + +Import paths vary based on their precise location in regards to the main Sass file. Imports should only be imported once; this can be accomplished using [Compass Import Once](https://github.com/Compass/compass/tree/master/import-once) or [Node Sass Import Once](https://github.com/at-import/node-sass-import-once), amongst other tools. + +Each pattern also includes an *Application Methods* section that will include the available mixins, extends, classes, and settings, as needed. + +### JavaScript Interactivity + +Some patterns will include JavaScript. When they do, the *Application Methods* section of a pattern will explain what files are needed (internally or as a 3rd party dependency) or if files can be ignored in favor of adding something else (for instance, including a [Modernizr](http://modernizr.com/) detect to a custom Modernizr build). + +All JavaScript is written following our [JavaScript Development Guidelines](/guidelines/development/javascript). diff --git a/language/ui-patterns/01-documentation/01-settings/index.md b/language/ui-patterns/01-documentation/01-settings/index.md new file mode 100644 index 00000000..c201d27e --- /dev/null +++ b/language/ui-patterns/01-documentation/01-settings/index.md @@ -0,0 +1,47 @@ +--- +title: Working with Settings +resources: + links: + - name: "Toolkit Settings Helpers" + source: https://github.com/at-import/toolkit#settings +--- + +The Watson Design Guide's Pattern Library manages settings through a set of settings mixins, allowing users to work with and manipulate settings global and user settings with ease. The settings mixins being used come from [Toolkit](https://github.com/at-import/toolkit#settings), a dependency of the Pattern Library. + +## Setting Up a New Project + +Projects should be [set up](/ui-patterns/documentation/getting-started#styling-a-project) so that Toolkit is being imported before the Pattern Library is. Settings will be set between Toolkit being imported and the Pattern Library being imported. + +## Determining a Setting to Change + +Patterns include a *Settings* section that describes the settings they are using and how those settings are being used. Use the string name of the setting when changing the setting. + +## Changing Settings + +Settings can be changed using the `setting-set` or `setting-set-multiple` mixins provided by Toolkit. The former sets a single setting while the later sets multiple settings at once. Set all custom settings before importing any part of the Pattern Library. + +```scss +// Sets the Primary Color setting to IBM's Blue 60 +@include setting-set('primary color', color('blue', 60)); + +// Sets the Primary Color setting to IBM's Blue 60 and the Secondary Color setting to IBM's Teal 60 +@include setting-set-multiple(( + 'primary color': color('blue', 60), + 'secondary color': color('teal', 60) +)); +``` + +## Using Settings + +The functions `setting-get` or `setting-get-multiple` can be used to get settings for use in custom code. Both mixins will search for the user-defined settings first and, if it cannot find a user-defined setting, falls back to the Pattern Library defined setting. If no setting is found, they will return `null`. + +```scss +.foo { + color: setting-get('primary color'); // #325c80 +} + +@debug setting-get-multiple('primary color', 'secodnary color'); +// ('primary color': #325c80, 'secondary color': #006d5d) +``` + +When using settings in custom code (for instance, custom mixins or functions) where user input is also allowed (for instance, buttons or user messaging), it can be useful to test to see if a user has passed in a custom value and, if not, fall back to the value from `setting-get`. Toolkit provides [setting-pick`](https://github.com/at-import/toolkit#setting-pick) functions for just this use case. These should be utilized as needed. diff --git a/language/ui-patterns/01-documentation/animation/index.md b/language/ui-patterns/01-documentation/animation/index.md new file mode 100644 index 00000000..9ea6e220 --- /dev/null +++ b/language/ui-patterns/01-documentation/animation/index.md @@ -0,0 +1,244 @@ +--- +type: documentation +title: Animation +resources: + links: + 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. + +## Properties + +Properties are the elements of an object that will change over time. The properties that can animate within CSS are listed below. We recommend using the most performant properties first. If the desired effect cannot be achieved, use the general list of properties as a fallback. + +**Most Performant Properties** + +* Position: `transform: translate(npx,npx);` +* Scale: `transform: scale(n);` +* Rotation: `transform: rotate(ndeg);` +* Opacity: `opacity: 0...1;` + +For more information about why these properties are performant see [this blog post.](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) + +To see a full list of animatable properties and examples of them animating visit [Animatable.](http://leaverou.github.io/animatable/) + + +### Single Property Animations + +When animating only a single property, follow the guidelines below. + +![Scaling of a box from 0% to 100%](/images/motion/examples/Single_Attribute-1.gif) + +```scss +//box class +.single-attribute { + animation: single-attribute 1s map-get($timing-functions, bounce-in); +} + +//keyframes for animation +@keyframes single-attribute { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +``` + +**Timing Function** + +Use bounce eases to add the snap-in factor that is typically achieved with multiple properties. Bounce eases are snappy bounces, not physics-based bounces. + + * Use of Timing Functions: + * **Entrances** - `map-get($timing-functions, bounce-in)` (Fast to Slow) + * **Exits** - `map-get($timing-functions, bounce-out)` (Slow to Fast) + * **Interactive Elements** - `map-get($timing-functions, bounce-in-out)` + +### Multiple Property Animations + +Multiple property animations are animations where multiple properties are being animated together. With multiple property animations there are two different options. The first option is to start one property alone, then animate any additional properties. The second option is for both properties to start at the same time, then have one property end before the other. We recommend not starting and stopping multiple properties at the same time; choose one option or the other. + +**Option One** + +Start one property alone, then animate any additional properties. + +![Scaling box animation starting with X axis scale then the Y axis scale follows.](/images/motion/examples/Option-A.gif) + +```scss +//box class +.animation-a { + animation: animation-a 1s map-get($timing-functions, snap-in); + transform-origin: 0% 100%; +} + +//keyframes for animation +@keyframes animation-a { + 0% { + transform: scale(0 , 0); + } + 50% { + transform: scale(.5 , 0); + } + 100% { + transform: scale(1 , 1); + } +} +``` + +**Option Two** + +Both properties start at the same time, then one property ends before the other. + + +![Scaling box animation starting with both X and Y axis scale then X axis ends before Y finishes.](/images/motion/examples/Option-B.gif) + +```scss +//box class +.animation-b { + animation: animation-b 1s map-get($timing-functions, snap-in); + transform-origin: 0% 100%; +} + +//keyframes for animation +@keyframes animation-b { + 0% { + transform: scale(0 , 0); + } + 30% { + transform: scale(.2 , 0); + } + 80% { + transform: scaleY(.5); + } + 100% { + transform: scale(1 , 1); + } +} +``` + +**Timing Function** + +Use snap-in eases to add very strong eases to quick movements. This enhances the metaphor of elegant machine motion. + +* Use of Timing Functions: + * **Entrances** - `map-get($timing-functions, snap-in)` (Fast to Slow) + * **Exits** - `map-get($timing-functions, snap-out)` (Slow to Fast) + * **Interactive Elements** - `map-get($timing-functions, snap-in-out)` + + +## Singular vs. Sequence of Actions + +Within user interfaces, there are instances where only one element moves, as well as instances when multiple elements create a sequence of actions. + + +### Singular Action + +A singular action animation occurs when only one element on the screen is animated and there are no other complementary elements. + +![Singular action shows a box animating scaling horizontally then vertically](/images/motion/examples/Option-B.gif) + +### 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. + +![Secondary action shows a box animating scaling horizontally then vertically with text animating up following the vertical scale](/images/motion/examples/secondary-action.gif) + +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. + +#### Things to Consider with Sequence of Actions + + * Choreography: elements should coordinate within the determined hierarchy. + * Delays: delays need to be consistent and should have the same rate across similar content. + +## Animation Library Implementation + +All of the animations live within an animation map. It looks a bit like this: + +```scss +$animations: ( + 'fade-in': ( + 0%: ( + opacity: 0 + ), + 100%: ( + opacity: 1 + ) + ), + 'slide-in--left' : ( + 0%: ( + transform: translateY(-100%) + ), + 100%: ( + transform: translateY(0) + ) + ), + 'slide-in--right' : ( + 0%: ( + transform: translateY(100%) + ), + 100%: ( + transform: translateY(0) + ) + ) +); +``` + +This is the format of the map, and everything between <> is a string: + +```scss +$animations: ( + '': ( + : ( + : ; + ), + : ( + : ; + ) + ) +); +``` + +In order to use any of these animations in a product, we have implemented an animate Sass mixin. To include animation with an element, use the following syntax: `@include animate(, , )`. We have included defaults for duration (2s) and timing function (ease-in), in case you do not specify your own. + +For example, you can implement `@include animate('fade-in');` or `@include animate(fade-in, 3s, snap-in);`. + +We currently provide these animations: + +Entrance Animations +- `fade-in` +- `fade-in--up` +- `fade-in--down` +- `fade-in--left` +- `fade-in--right` +- `slide-in--up` +- `slide-in--down` +- `slide-in--left` +- `slide-in--right` + +Exit Animations +- `fade-out` +- `fade-out--up` +- `fade-out--down` +- `fade-out--left` +- `fade-out--right` +- `slide-out--up` +- `slide-out--down` +- `slide-out--left` +- `slide-out--right` + +### Timing Functions + +A timing function is a mathematical equation that creates a bezier curve, which is a line that defines the acceleration pattern on a graph. Bezier curves are often translated to keywords like ease-in, ease-out, and ease-in-out. They are also referred to as “Motion Curves” or “Curves." + +We currently provide these timing functions: + +- `ease-in` +- `ease-out` +- `bounce-out` +- `bounce-in` +- `bounce-in-out` +- `snap-in` +- `snap-out` +- `snap-in-out` diff --git a/language/ui-patterns/02-patterns/01-base/index.md b/language/ui-patterns/02-patterns/01-base/index.md new file mode 100644 index 00000000..12f4d550 --- /dev/null +++ b/language/ui-patterns/02-patterns/01-base/index.md @@ -0,0 +1,6 @@ +--- +type: guideline +title: Base Elements +--- + +Base elements are HTML tags without additional specificity (*e.g.* `a` and `h1`, not `.link` or `.header`) and root level pseudo-elements *(*e.g.* `::selection`, `::root`), as well as any custom CSS resetting (*e.g.* making images fluid, setting `box-sizing: border-box` for all elements). A combination of elements is used to create larger components and layouts. diff --git a/language/ui-patterns/02-patterns/02-components/index.md b/language/ui-patterns/02-patterns/02-components/index.md new file mode 100644 index 00000000..36433bcc --- /dev/null +++ b/language/ui-patterns/02-patterns/02-components/index.md @@ -0,0 +1,6 @@ +--- +type: guideline +title: Components +--- + +Components are [self-contained interface items](http://pointnorth.io/#components) that are used to view and/or interact with content. Components should be adapt to [available features](http://www.filamentgroup.com/lab/grade-the-components.html) and [their own size](https://github.com/snugug/eq.js). Navigation and search are examples of components. A combination of elements and components is used to create larger layouts. diff --git a/language/ui-patterns/documentation/animation/index.md b/language/ui-patterns/documentation/animation/index.md deleted file mode 100755 index a3746928..00000000 --- a/language/ui-patterns/documentation/animation/index.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -type: documentation -title: Animation -resources: - links: - name: "Debugging Chrome Animations" - source: http://valhead.com/2015/01/06/quick-tip-chrome-animation-controls/ ---- - - -## Animation Guidelines - -The metaphor for 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 with subtle offsets. - - -## Properties - -Properties are the elements of an object that will change over time. Below are the properties you can animate within CSS. It is recommended to use the most performant properties first. If the effect cannot be achieved, use the general list of properties as a fall back if the effect cannot be achieved using those. - -**Most Performant Properties** - -* Position: `transform: translate(npx,npx);` -* Scale: `transform: scale(n);` -* Rotation: `transform: rotate(ndeg);` -* Opacity: `opacity: 0...1;` - -More Information about why these are performant see [this blog post.](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) - -General list of the other properties you can animate: -- `background-color` -- `border-width` -- `clip` -- `font-size` -- `left` -- `margin` -- `min-height` -- `outline-color` -- `padding` -- `text-shadow` -- `visibility` -- `z-index` -- `background-position` -- `border-spacing` -- `color` -- `font-weight` -- `letter-spacing` -- `max-height` -- `min-width` -- `outline-offset` -- `right` -- `top` -- `width` -- `border-color` -- `bottom` -- `crop` -- `height` -- `line-height` -- `max-width` -- `opacity` -- `outline-width` -- `text-indent` -- `vertical-align` -- `word-spacing` - -Great example of all the different properties that can be animated [here.](http://leaverou.github.io/animatable/) - - -### Single Property Animations - -When animating only a single property one should follow the guidelines below. - -![Single-Attribute](images/motion/examples/Single_Attribute-1.gif) - -```scss -//box class -.single-attribute { - animation: single-attribute 1s $ibm-bouncein; -} - -//keyframes for animation -@keyframes single-attribute { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} -``` - -**Easing Curves** - -* Add bounces eases - this add the snap in factor that is lost if you don’t use two properties. -* Snappy Bounces not physics based bouncing. - * Use of Easing Curves: - * Entrances = `$bounce-in` (Fast to Slow) - * Exits = `$bounce-out` (Slow to Fast) - * Interactive Elements = `$bounce-in-out` - -### Multiple Property Animations - -Mutliple property animations are animations where multiple properties are being animated together. With multiple property animations there are two diretions on can take. Direction 1 - Start one property alone then animate the additional properties. Direction 2 - Both Properties start at the same time then one property ends before the other. Don’t start AND stop multiple properties at the same time. Choose one or the other. - -**Direction 1** -Start one property alone then animate the additional properties. - -![Direction-1](images/motion/examples/Option-A.gif) - -```scss -//box class -.animation-a { - animation: animation-a 1s $ibm-snapin; - transform-origin: 0% 100%; -} - -//keyframes for animation -@keyframes animation-a { - 0% { - transform: scale(0 , 0); - } - 50% { - transform: scale(.5 , 0); - } - 100% { - transform: scale(1 , 1); - } -} -``` - -**Direction 2** -Both Properties start at the same time then one property ends before the other. - - -![Direction-2](images/motion/examples/Option-B.gif) - -```scss -//box class -.animation-b { - animation: animation-b 1s $ibm-snapin; - transform-origin: 0% 100%; -} - -//keyframes for animation -@keyframes animation-b { - 0% { - transform: scale(0 , 0); - } - 30% { - transform: scale(.2 , 0); - } - 80% { - transform: scaleY(.5); - } - 100% { - transform: scale(1 , 1); - } -} -``` - -**Easing Curves** -* Use of Easing Curves: - * Entrances = `$snap-in` (Fast to Slow) - * Exits = `$snap-out` (Slow to Fast) - * Interactive Elements = `$snap-in-out` - - -## Singular vs. Sequence of Actions - -Within UI there are instances where only one element moves vs. multiple elements a sequence of elements. Below are the guidelines for those instances. - - -### Singular Action - -A Singluar action animation is when you animate only one element on the screen & does not contain complementary elements. - -![Singular action shows a box animating scaling horizontally then vertically](images/motion/examples/Option-B.gif) - -### Sequence of Actions - -A Sequence of actions animation is where you have multiple elements typically a Primary Action then a Secondary action which complements the Primary. - -![Secondary action shows a box animating scaling horizontally then vertically with text animating up following the hertical scale](images/motion/examples/secondary-action.gif) - -In the example above, the text animations and delay enhance by following the lead of the primary action (scaling of the box). - -#### Things to consider with Sequence of Actions - - * Choreography: - Elements should have coordinate within hierarchy. - -### Delays - -Delays need to be consistent - needs to have the same rate across similar content. - diff --git a/library/config/js.yaml b/library/config/js.yaml new file mode 100644 index 00000000..b7b51e64 --- /dev/null +++ b/library/config/js.yaml @@ -0,0 +1,26 @@ +######################### +## Modernizr Configuration +######################### +modernizr: + classPrefix: '' + 'feature-detects': + - svg/smil + + +######################### +## JavaScript Assets to Include, in order +## +## Use <> to include the custom Modernizr build from above +######################### +js: + modernizr: + - <> + app: + - bower_components/prism/prism.js + - bower_components/prism/components/prism-css.js + - bower_components/prism/components/prism-css-extras.js + - bower_components/prism/components/prism-scss.js + - bower_components/prism/components/prism-bash.js + - bower_components/prism/components/prism-markup.js + - bower_components/prism/components/prism-javascript.js + - library/js/prism-activate.js diff --git a/library/config/site.yaml b/library/config/site.yaml new file mode 100644 index 00000000..f4ce0a8f --- /dev/null +++ b/library/config/site.yaml @@ -0,0 +1,10 @@ +version: 1.0.0-rc.1 +repo: https://github.com/IBM-Watson/design-library +licenses: + docs: + name: CC-BY 4.0 License + url: http://creativecommons.org/licenses/by/4.0/ + code: + name: Apache 2.0 License + url: http://www.apache.org/licenses/LICENSE-2.0 +url: watsondesign.guide diff --git a/library/fonts/wdg/selection.json b/library/fonts/wdg/selection.json new file mode 100755 index 00000000..4fca95ef --- /dev/null +++ b/library/fonts/wdg/selection.json @@ -0,0 +1,419 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M512 0c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 988.8c-262.4 0-476.8-214.4-476.8-476.8s214.4-476.8 476.8-476.8 476.8 214.4 476.8 476.8-214.4 476.8-476.8 476.8z", + "M448 582.4l-105.6-105.6-44.8 48 150.4 150.4 278.4-278.4-44.8-48z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "right_32" + ] + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 16, + "id": 20, + "prevSize": 32, + "code": 58886, + "name": "yes", + "ligatures": "(yes)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 0 + }, + { + "icon": { + "paths": [ + "M668.8 304l-156.8 156.8-156.8-156.8-51.2 51.2 156.8 156.8-156.8 156.8 51.2 51.2 156.8-156.8 156.8 156.8 51.2-51.2-156.8-156.8 156.8-156.8z", + "M512 0c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 988.8c-262.4 0-476.8-214.4-476.8-476.8s214.4-476.8 476.8-476.8 476.8 214.4 476.8 476.8-214.4 476.8-476.8 476.8z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "wrong_32" + ] + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 15, + "id": 19, + "prevSize": 32, + "code": 58885, + "name": "no", + "ligatures": "(no)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 1 + }, + { + "icon": { + "paths": [ + "M42.667 512l128 128 256-256v597.333h170.667v-597.333l256 256 128-128-469.333-469.333z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "up" + ] + }, + "attrs": [ + {} + ], + "properties": { + "order": 14, + "id": 18, + "prevSize": 32, + "code": 58882, + "name": "up", + "ligatures": "(up)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 2 + }, + { + "icon": { + "paths": [ + "M512 99.2c230.4 0 416 185.6 416 416s-185.6 416-416 416-416-185.6-416-416 185.6-416 416-416zM512 3.2c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512c0-284.8-230.4-512-512-512v0z", + "M432 179.2h163.2v403.2h-163.2v-403.2z", + "M432 688h163.2v156.8h-163.2v-156.8z" + ], + "attrs": [ + {}, + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "issues" + ] + }, + "attrs": [ + {}, + {}, + {} + ], + "properties": { + "order": 12, + "id": 17, + "prevSize": 32, + "code": 58881, + "name": "issues", + "ligatures": "(issues)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 3 + }, + { + "icon": { + "paths": [ + "M336 176l102.4 108.8-233.6 262.4 233.6 249.6-102.4 96-336-348.8z", + "M688 176l-102.4 108.8 233.6 262.4-233.6 249.6 102.4 96 336-348.8z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "code" + ] + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 13, + "id": 16, + "prevSize": 32, + "code": 58890, + "name": "code", + "ligatures": "(code)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 4 + }, + { + "icon": { + "paths": [ + "M512 42.667c-260.267 0-469.333 209.067-469.333 469.333s209.067 469.333 469.333 469.333 469.333-209.067 469.333-469.333-209.067-469.333-469.333-469.333zM452.267 725.333h-128v-426.667h128v426.667zM695.467 725.333h-128v-426.667h128v426.667z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "pause_24" + ] + }, + "attrs": [ + {} + ], + "properties": { + "order": 11, + "id": 14, + "prevSize": 32, + "code": 58892, + "name": "pause", + "ligatures": "(pause)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 6 + }, + { + "icon": { + "paths": [ + "M512 42.667c-260.267 0-469.333 209.067-469.333 469.333s209.067 469.333 469.333 469.333 469.333-209.067 469.333-469.333-209.067-469.333-469.333-469.333zM384 682.667v-341.333l341.333 170.667-341.333 170.667z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "play_24" + ] + }, + "attrs": [ + {} + ], + "properties": { + "order": 1, + "id": 11, + "prevSize": 32, + "code": 58889, + "name": "play", + "ligatures": "(play)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 9 + }, + { + "icon": { + "paths": [ + "M512 42.667l-128 128 256 256h-597.333v170.667h597.333l-256 256 128 128 469.333-469.333z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "next-right-forward_24" + ] + }, + "attrs": [ + {} + ], + "properties": { + "order": 2, + "id": 9, + "prevSize": 32, + "code": 58891, + "name": "go", + "ligatures": "(go)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 11 + }, + { + "icon": { + "paths": [ + "M384 426.667h256v85.333h-256v-85.333z", + "M597.333 42.667h-426.667v938.667h682.667v-682.667l-256-256zM768 896h-512v-768h298.667v213.333h213.333v554.667z", + "M384 597.333h256v85.333h-256v-85.333z" + ], + "attrs": [ + {}, + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "document_24" + ] + }, + "attrs": [ + {}, + {}, + {} + ], + "properties": { + "order": 4, + "id": 6, + "prevSize": 32, + "code": 58883, + "name": "document", + "ligatures": "(document)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 14 + }, + { + "icon": { + "paths": [ + "M914.432 109.568c-41.301-41.301-98.432-66.901-161.536-66.901-63.061 0-120.149 25.6-161.451 66.901l-97.877 97.877c-41.301 41.344-66.901 98.389-66.901 161.451 0 24.192 4.523 47.317 11.221 69.504-21.888-6.955-44.8-11.733-68.992-11.733-63.061 0-120.149 25.6-161.451 66.901l-97.877 97.877c-41.301 41.344-66.901 98.389-66.901 161.451 0 63.104 23.979 121.813 65.237 163.157 41.344 41.301 100.096 65.28 163.2 65.28 63.061 0 120.149-25.6 161.451-66.901l97.877-97.877c41.301-41.344 66.901-98.389 66.901-161.451 0-24.192-4.779-47.061-11.733-68.949 22.187 6.656 45.312 11.179 69.504 11.179 63.061 0 120.149-25.6 161.451-66.901l97.877-97.877c41.301-41.344 66.901-98.389 66.901-161.451 0-63.104-25.6-120.235-66.901-161.536zM470.101 756.224l-97.877 97.877c-27.051 27.008-62.933 41.899-101.12 41.899-39.723 0-77.227-14.677-102.784-40.235-25.643-25.6-40.32-63.104-40.32-102.869 0-38.187 14.891-74.112 41.899-101.12l97.877-97.877c27.051-27.008 62.933-41.899 101.12-41.899 23.467 0 45.781 6.229 65.963 16.811l-123.691 123.691 60.331 60.331 123.691-123.691c10.581 20.181 16.811 42.453 16.811 65.963 0 38.187-14.891 74.069-41.899 101.12zM854.101 372.224l-97.877 97.877c-27.051 27.008-62.933 41.899-101.12 41.899-23.979 0-46.763-5.931-66.987-15.787l124.715-124.715-60.331-60.331-124.715 124.715c-9.856-20.181-15.787-43.008-15.787-66.987 0-38.187 14.891-74.112 41.899-101.12l97.877-97.877c27.051-27.008 62.933-41.899 101.12-41.899 38.229 0 74.155 14.891 101.205 41.899s41.899 62.976 41.899 101.205c0 38.187-14.891 74.069-41.899 101.12z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "link_24" + ] + }, + "attrs": [ + {} + ], + "properties": { + "order": 5, + "id": 5, + "prevSize": 32, + "code": 58884, + "name": "link", + "ligatures": "(link)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 15 + }, + { + "icon": { + "paths": [ + "M512 64c-247.392 0-448 200.592-448 448s200.608 448 448 448c247.408 0 448-200.592 448-448s-200.592-448-448-448zM512 928c-229.384 0-416-186.616-416-416s186.616-416 416-416 416 186.616 416 416-186.616 416-416 416z", + "M534.632 342.632l-45.264-45.264-214.624 214.632 214.624 214.632 45.264-45.264-137.376-137.368h370.744v-64h-370.744z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "back-left-previous_128" + ] + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 9, + "id": 1, + "prevSize": 32, + "code": 58888, + "name": "previous", + "ligatures": "(previous)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 19 + }, + { + "icon": { + "paths": [ + "M489.368 342.632l137.376 137.368h-370.744v64h370.744l-137.376 137.368 45.264 45.264 214.624-214.632-214.624-214.632z", + "M512 64c-247.392 0-448 200.592-448 448s200.608 448 448 448c247.408 0 448-200.592 448-448s-200.592-448-448-448zM512 928c-229.384 0-416-186.616-416-416s186.616-416 416-416c229.384 0 416 186.616 416 416s-186.616 416-416 416z" + ], + "attrs": [ + {}, + {} + ], + "isMulticolor": false, + "grid": 32, + "tags": [ + "next" + ] + }, + "attrs": [ + {}, + {} + ], + "properties": { + "order": 10, + "id": 0, + "prevSize": 32, + "code": 58880, + "name": "next", + "ligatures": "(next)" + }, + "setIdx": 1, + "setId": 3, + "iconIdx": 20 + } + ], + "height": 1024, + "metadata": { + "name": "icomoon" + }, + "preferences": { + "showGlyphs": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "icon-", + "metadata": { + "fontFamily": "icomoon" + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "ligaReset": "tags", + "autoHost": false + }, + "imagePref": { + "prefix": "icon-", + "png": true, + "useClassSelector": true, + "color": 4473924, + "bgColor": 16777215 + }, + "historySize": 100, + "showCodes": false, + "showLiga": true, + "quickUsageToken": { + "UntitledProject": "NDc5ZTVjMGExZTEzYTg1NzgxYjk5YTc3NDRkNGMyMzAjMSMxNDMwMTY4NjMxIyMj" + }, + "fontHostingName": false, + "gridSize": 16, + "showGrid": true + } +} \ No newline at end of file diff --git a/library/fonts/wdg/wdg.eot b/library/fonts/wdg/wdg.eot new file mode 100755 index 00000000..c693cb21 Binary files /dev/null and b/library/fonts/wdg/wdg.eot differ diff --git a/library/fonts/wdg/wdg.svg b/library/fonts/wdg/wdg.svg new file mode 100755 index 00000000..466c1d7f --- /dev/null +++ b/library/fonts/wdg/wdg.svg @@ -0,0 +1,35 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/library/fonts/wdg/wdg.ttf b/library/fonts/wdg/wdg.ttf new file mode 100755 index 00000000..cdc8dc09 Binary files /dev/null and b/library/fonts/wdg/wdg.ttf differ diff --git a/library/fonts/wdg/wdg.woff b/library/fonts/wdg/wdg.woff new file mode 100755 index 00000000..6a932487 Binary files /dev/null and b/library/fonts/wdg/wdg.woff differ diff --git a/library/images/library/wordmark-header.svg b/library/images/library/wordmark-header.svg new file mode 100644 index 00000000..747bef58 --- /dev/null +++ b/library/images/library/wordmark-header.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/library/js/liga.js b/library/js/liga.js new file mode 100755 index 00000000..871bd636 --- /dev/null +++ b/library/js/liga.js @@ -0,0 +1,74 @@ +/* A polyfill for browsers that don't support ligatures. */ +/* The script tag referring to this file must be placed before the ending body tag. */ + +/* To provide support for elements dynamically added, this script adds + method 'icomoonLiga' to the window object. You can pass element references to this method. +*/ +(function () { + 'use strict'; + function supportsProperty(p) { + var prefixes = ['Webkit', 'Moz', 'O', 'ms'], + i, + div = document.createElement('div'), + ret = p in div.style; + if (!ret) { + p = p.charAt(0).toUpperCase() + p.substr(1); + for (i = 0; i < prefixes.length; i += 1) { + ret = prefixes[i] + p in div.style; + if (ret) { + break; + } + } + } + return ret; + } + var icons; + if (!supportsProperty('fontFeatureSettings')) { + icons = { + '(yes)': '', + '(no)': '', + '(up)': '', + '(issues)': '', + '(code)': '', + '(pause)': '', + '(play)': '', + '(go)': '', + '(document)': '', + '(link)': '', + '(previous)': '', + '(next)': '', + '0': 0 + }; + delete icons['0']; + window.icomoonLiga = function (els) { + var classes, + el, + i, + innerHTML, + key; + els = els || document.getElementsByTagName('*'); + if (!els.length) { + els = [els]; + } + for (i = 0; ; i += 1) { + el = els[i]; + if (!el) { + break; + } + classes = el.className; + if (/icon-/.test(classes)) { + innerHTML = el.innerHTML; + if (innerHTML && innerHTML.length > 1) { + for (key in icons) { + if (icons.hasOwnProperty(key)) { + innerHTML = innerHTML.replace(new RegExp(key, 'g'), icons[key]); + } + } + el.innerHTML = innerHTML; + } + } + } + }; + window.icomoonLiga(); + } +}()); \ No newline at end of file diff --git a/library/js/prism-activate.js b/library/js/prism-activate.js new file mode 100644 index 00000000..c700a754 --- /dev/null +++ b/library/js/prism-activate.js @@ -0,0 +1,18 @@ +(function (Prism) { + 'use strict'; + + var fired = false; + + window.addEventListener('DOMContentLoaded', function () { + if (!fired) { + Prism.highlightAll(); + fired = true; + } + }); + + if (!fired) { + Prism.highlightAll(); + fired = true; + } + +})(window.Prism); diff --git a/library/sass/components/_a11y.scss b/library/sass/components/_a11y.scss new file mode 100644 index 00000000..f2aa73d2 --- /dev/null +++ b/library/sass/components/_a11y.scss @@ -0,0 +1,20 @@ +[library-class^='a11y--'] { + color: white; + + &[library-class*='hidden'] { + color: transparent; + height: 1px; + width: 1px; + overflow: hidden; + display: block; + } + + &[library-class*='focusable'] { + &:focus { + display: block; + height: auto; + width: 100%; + color: inherit; + } + } +} diff --git a/library/sass/components/_footer.scss b/library/sass/components/_footer.scss new file mode 100644 index 00000000..adae0d93 --- /dev/null +++ b/library/sass/components/_footer.scss @@ -0,0 +1,43 @@ +[library-class='footer'] { + background: color('grayscale', 50); + padding: setting-get('rhythm') * 2 0; + font-size: .75em; + + [library-class='_library--container'] { + padding: 0 setting-get('rhythm'); + } +} + +[library-class='footer--link'] { + @include base--a(setting-get('text color'), color('grayscale', 50)); +} + +[library-class='footer--issues'], +[library-class='footer--code'] { + display: inline-block; + margin-top: 0; +} + +[library-class='footer--issues'] { + margin-right: setting-get('rhythm'); +} + +[library-class='footer--github'] { + @include breakpoint(542px) { + float: left; + } +} + +[library-class='footer--licenses'] { + display: block; + + @include breakpoint(542px) { + float: right; + text-align: right; + margin-top: 0; + } +} + +[library-class='footer--code-license'] { + margin-top: 0; +} diff --git a/library/sass/components/_icon.scss b/library/sass/components/_icon.scss new file mode 100644 index 00000000..453f4ea9 --- /dev/null +++ b/library/sass/components/_icon.scss @@ -0,0 +1,8 @@ +@include font-face('wdg', ( + 'woff': '/fonts/wdg/wdg.woff', + 'ttf': '/fonts/wdg/wdg.ttf' +)); + +[library-class='icon'] { + @include icon-font('wdg'); +} diff --git a/library/sass/components/_main-content.scss b/library/sass/components/_main-content.scss new file mode 100644 index 00000000..a0e7d56c --- /dev/null +++ b/library/sass/components/_main-content.scss @@ -0,0 +1,96 @@ +[library-class='main-content--footer'] { + clear: both; + @include clearfix; +} + +[library-class='main-content--back-to-top'] { + display: block; + text-align: right; + color: setting-get('text color'); + text-decoration: none; + + [library-class='main-content--section-link'] { + color: setting-get('text color'); + + padding-bottom: setting-get('rhythm') / 4; + border-bottom: 1px solid; + + &:hover { + [library-class='icon'] { + transform: translateY(-.25em); + } + } + } + + [library-class='icon'] { + display: inline-block; + margin-top: 0; + transition: all 0.2s map-get($timing-functions, ease-in); + } +} + +[library-class='main-content--section-nav'] { + text-align: right; + + border-top: 3px solid color('grayscale', 40); + padding-top: setting-get('rhythm'); + margin-top: setting-get('rhythm'); + + color: setting-get('text color'); +} + +%__library--holder { + background: transparent; + display: inline-block; + margin-top: 0; + transform: translateY(-.5em); + + &:hover { + cursor: pointer; + } + + [library-class='icon'] { + display: inline-block; + margin-top: 0; + font-size: 2em; + transform: translateY(.25em); + transition: all 0.2s map-get($timing-functions, ease-in); + } +} + +[library-class='main-content--previous'] { + @extend %__library--holder; + color: setting-get('text color'); + margin-right: setting-get('rhythm') / 2; + + [library-class='main-content--section-link'] { + color: setting-get('text color'); + } + + &:hover { + [library-class='icon'] { + transform: translateX(-.25em) translateY(.25em); + } + } +} + +[library-class='main-content--next'] { + @extend %__library--holder; + color: setting-get('secondary color'); + margin-left: setting-get('rhythm') / 2; + + + [library-class='main-content--section-link'] { + color: setting-get('secondary color'); + } + + &:hover { + [library-class='icon'] { + transform: translateX(.25em) translateY(.25em); + } + } +} + +[library-class='main-content--section-link'] { + text-decoration: none; +} diff --git a/library/sass/components/_main-nav.scss b/library/sass/components/_main-nav.scss new file mode 100644 index 00000000..517448c2 --- /dev/null +++ b/library/sass/components/_main-nav.scss @@ -0,0 +1,46 @@ +[library-class="main-nav"] { + @include clearfix; + margin-top: 0; + + + @include breakpoint(455px) { + padding-left: 10%; + padding-right: 10%; + } + + @include breakpoint(565px) { + padding: 0; + float: right; + margin-top: .16em; + } +} + +[library-class="main-nav--item"] { + color: color('gray', 20); + display: block; + float: left; + width: 100 / 3 * 1%; + text-decoration: none; + text-align: center; + margin-top: 0; + padding: setting-get('rhythm') 0; + + border-bottom: 5px solid transparent; + + &[data-state='active'] { + @extend %base--strong; + color: color-tint(setting-get('primary color'), 30); + border-color: color-tint(setting-get('primary color'), 30); + } + + &:hover, + &:focus { + color: inherit; + border-color: inherit; + } + + @include breakpoint(565px) { + width: auto; + padding: setting-get('rhythm') + } +} diff --git a/library/sass/components/_pattern.scss b/library/sass/components/_pattern.scss new file mode 100644 index 00000000..91f96955 --- /dev/null +++ b/library/sass/components/_pattern.scss @@ -0,0 +1,14 @@ +[library-class='pattern--inline-description'] { + > p { + display: inline; + } +} + +[library-class='pattern--application'], +[library-class='pattern--settings'] { + @include breakpoint(940px) { + width: 50%; + float: left; + } + +} diff --git a/library/sass/components/_subnav.scss b/library/sass/components/_subnav.scss new file mode 100644 index 00000000..b38c9621 --- /dev/null +++ b/library/sass/components/_subnav.scss @@ -0,0 +1,49 @@ +[library-class~='subnav'] { + background: color('grayscale', 40); + padding-top: setting-get('rhythm'); + padding-bottom: setting-get('rhythm'); +} + +[library-class='subnav--heading'] { + @extend %base--strong; + display: block; + padding-left: setting-get('rhythm'); + padding-right: setting-get('rhythm'); +} + +[library-class*='subnav--list'] { + margin-top: 0; +} + +[library-class='subnav--list-item'] { + border-left: 5px solid transparent; + + [library-class='subnav--item'] { + padding-left: setting-get('rhythm'); + margin-left: -5px; + } + + &:hover, + &:focus { + border-color: color('grayscale', 70); + background: color('grayscale', 50); + } + + &[data-state='active'] { + @extend %base--strong; + border-color: tint(setting-get('primary color'), 20); + background: color('grayscale', 50); + + [library-class='subnav--item'] { + color: setting-get('primary color'); + } + } +} + +[library-class='subnav--item'] { + color: color('grayscale', 70); + text-decoration: none; + padding-left: setting-get('rhythm'); + padding-right: setting-get('rhythm'); + display: block; +} diff --git a/library/sass/components/_wordmark.scss b/library/sass/components/_wordmark.scss new file mode 100644 index 00000000..d572c9e7 --- /dev/null +++ b/library/sass/components/_wordmark.scss @@ -0,0 +1,11 @@ +[library-class='wordmark'] { + display: block; + text-align: center; + margin-top: setting-get('rhythm') / 2; + + @include breakpoint(565px) { + margin-top: setting-get('rhythm'); + float: left; + margin-left: setting-get('rhythm'); + } +} diff --git a/library/sass/layouts/_library.scss b/library/sass/layouts/_library.scss new file mode 100644 index 00000000..3309a73f --- /dev/null +++ b/library/sass/layouts/_library.scss @@ -0,0 +1,40 @@ +%__library--padding { + padding-left: setting-get('rhythm'); + padding-right: setting-get('rhythm'); +} + +[library-class='_library'] { + margin-top: 0; +} + +[library-class*='_library--heading'] { + background: color('grayscale', 80); + color: color('grayscale', 10); + margin-top: 0; +} + +[library-class*='_library--container'] { + max-width: 940px; + margin: 0 auto; + + @include clearfix; +} + +[library-class*='_library--subnav'] { + @include breakpoint(557px) { + padding-right: setting-get('rhythm') / 2; + width: 26.5%; + float: left; + } + +} + +[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; + } +} diff --git a/library/sass/style.scss b/library/sass/style.scss new file mode 100644 index 00000000..544ac0e0 --- /dev/null +++ b/library/sass/style.scss @@ -0,0 +1,18 @@ +@import '../../patterns/watson-patterns'; + +////////////////////////////// +// Components +////////////////////////////// +@import 'components/subnav'; +@import 'components/a11y'; +@import 'components/main-nav'; +@import 'components/wordmark'; +@import 'components/pattern'; +@import 'components/main-content'; +@import 'components/icon'; +@import 'components/footer'; + +////////////////////////////// +// Layouts +////////////////////////////// +@import 'layouts/library'; diff --git a/library/templates/_layout.html b/library/templates/_layout.html index c5bbfc65..72f40c2f 100644 --- a/library/templates/_layout.html +++ b/library/templates/_layout.html @@ -9,72 +9,179 @@ Watson Design Guide{{ layout.title }} {# CSS -#} - + {% for css in layout.css %} {% endfor %} + {# Next and Previous #} + {% if navigation.next %} + + {% endif %} + {% if navigation.previous %} + + {% endif %} + + {# Prefetch header image #} + + {# JavaScript -#} - {% for js in layout.js %} - {% if js.head %} - {% if js.inline %} - - {% else %} - - {% endif %} - {% endif %} - {% endfor %} + +
+ +
+ {# Page Heading -#} +
+ {# Main Content Skip #} + Skip to Content + {% if navigation.main %} + {# Logo #} + IBM Watson Design Guide + {# Main Nav #} + + {% endif %} +
+
- {# Page Heading -#} -
- {% if navigation.main %} - - {% endif %} -
- - {# Page Body -#} -
- {% if navigation.sub %} - + {% endif %} + + {# Main Content #} +
+ {# Title #} +

{{ main.title }}

+ {# Content #} + {{ layout.content | safe -}} + + {# Children Navigation, especially Patterns #} + {% if navigation.children %} + + {% endif %} + + {# Main Content Footer #} + + +
+
+ +
+ + + - - {% endif %} -
- {{ layout.content | safe -}} -
- {# JavaScript -#} - {% for js in layout.js %} - {% if not js.head %} - {% if js.inline %} - - {% else %} - - {% endif %} - {% endif %} - {% endfor %} + diff --git a/library/templates/_pattern.html b/library/templates/_pattern.html index 8fdf43c3..6ebc87a9 100644 --- a/library/templates/_pattern.html +++ b/library/templates/_pattern.html @@ -1,21 +1,34 @@
-

{{ pattern.metadata.name }}

{{ pattern.metadata.description }}

-
-

Rendered Pattern

-
{{ pattern.markup | safe -}}
-
-

Pattern Code

-
- 
{{ pattern.markup | escape -}}
+ 
{{ pattern.markup | escape -}}
{{ pattern.readme | safe -}}
+ +
diff --git a/library/templates/subcontent/_detail.html b/library/templates/subcontent/_detail.html index d76d069e..bc5d3a91 100644 --- a/library/templates/subcontent/_detail.html +++ b/library/templates/subcontent/_detail.html @@ -1,9 +1,9 @@ -{% import './_media.html' as media %} +{% import '_media.html' as _media %} {% macro view(detail) %}
- {{ media.object(detail) }} + {{ _media.object(detail) }}
{% if detail.description %} @@ -17,7 +17,6 @@
{{ callout.description }}
{% endfor %} - }
{% endmacro %} diff --git a/library/templates/subcontent/_example.html b/library/templates/subcontent/_example.html index 86d10ee1..53b0dad3 100644 --- a/library/templates/subcontent/_example.html +++ b/library/templates/subcontent/_example.html @@ -1,12 +1,12 @@ -{% import './_media.html' as media %} +{% import '_media.html' as _media %} {% macro sentiment(example) %} {% if example.sentiment %} - {% if feels|lower === 'positive' %} - Do This - {% elseif feels|lower === 'negative' %} - Don't Do This + {% if example.sentiment|lower === 'positive' %} + (yes) + {% elseif example.sentiment|lower === 'negative' %} + (no) {% endif %} {% endif %} {% endmacro %} @@ -20,14 +20,17 @@ {% macro small(example) %}
{{ title(example) }} - {{ media.object(example) }} + {{ _media.object(example) }} + {% if example.description %} +

{{ example.description }}

+ {% endif %}
{% endmacro %} {% macro large(example) %}
- {{ media.object(example) }} + {{ _media.object(example) }}
{{ title(example) }} {% if example.description %} diff --git a/library/templates/subcontent/_quote.html b/library/templates/subcontent/_quote.html index 59559447..be761713 100644 --- a/library/templates/subcontent/_quote.html +++ b/library/templates/subcontent/_quote.html @@ -1,22 +1,14 @@ -{% macro cite(quote) %} - -{% endmacro %} - {% macro quote(quote) %}
{{ quote.quote|markdown | safe -}}
- {{ cite(quote) }} +
{% endmacro %} diff --git a/patterns/_base.scss b/patterns/_base.scss deleted file mode 100644 index f5989919..00000000 --- a/patterns/_base.scss +++ /dev/null @@ -1,104 +0,0 @@ -////////////////////////////// -// Base -////////////////////////////// - -// Body -@import 'base/body/sass/body'; - -////////////////////////////// -// Headers -////////////////////////////// - -// H1 -@import 'base/h1/sass/h1'; -// H2 -@import 'base/h2/sass/h2'; -// H3 -@import 'base/h3/sass/h3'; -// H4 -@import 'base/h4/sass/h4'; -// H5 -@import 'base/h5/sass/h5'; -// H6 -@import 'base/h6/sass/h6'; - -////////////////////////////// -// Form Elements -////////////////////////////// - -// Input -@import 'base/input/sass/input'; -// Label -@import 'base/label/sass/label'; - -// Radio Button -@import 'base/radio/sass/radio'; -// Color Input -@import 'base/input--color/sass/input--color'; -// Date Input -@import 'base/input--date/sass/input--date'; -// Datetime Input -@import 'base/input--datetime/sass/input--datetime'; -// Datetime Local Input -@import 'base/input--datetime-local/sass/input--datetime-local'; -// Email Input -@import 'base/input--email/sass/input--email'; -// File Input -@import 'base/input--file/sass/input--file'; -// Hidden Input -@import 'base/input--hidden/sass/input--hidden'; -// Image Input -@import 'base/input--image/sass/input--image'; -// Month Input -@import 'base/input--month/sass/input--month'; -// Number Input -@import 'base/input--number/sass/input--number'; -// Password Input -@import 'base/input--password/sass/input--password'; -// Range Input -@import 'base/input--range/sass/input--range'; -// Search Input -@import 'base/input--search/sass/input--search'; -// Tel Input -@import 'base/input--tel/sass/input--tel'; -// Text Input -@import 'base/input--text/sass/input--text'; -// Time Input -@import 'base/input--time/sass/input--time'; -// URL Input -@import 'base/input--url/sass/input--url'; -// Week Input -@import 'base/input--week/sass/input--week'; -// Textarea -@import 'base/textarea/sass/textarea'; -// Checkboxes -@import 'base/checkbox/sass/checkbox'; -// Selct -@import 'base/select/sass/select'; -// Button -@import 'base/button/sass/button'; - -////////////////////////////// -// Typography Tags -////////////////////////////// - -// a -@import 'base/a/sass/a'; -// em -@import 'base/em/sass/em'; -// strong -@import 'base/strong/sass/strong'; -// code -@import 'base/code/sass/code'; -// pre -@import 'base/pre/sass/pre'; -// lists -@import 'base/ul/sass/ul'; -@import 'base/ol/sass/ol'; -// blockquote -@import 'base/blockquote/sass/blockquote'; - -////////////////////////////// -// Tabular Tags -////////////////////////////// -@import 'base/table/sass/table'; diff --git a/patterns/_components.scss b/patterns/_components.scss deleted file mode 100644 index 22466222..00000000 --- a/patterns/_components.scss +++ /dev/null @@ -1,6 +0,0 @@ -////////////////////////////// -// Form Components -////////////////////////////// - -// Radiogroup -@import 'components/radiogroup/sass/radiogroup'; diff --git a/patterns/crick.scss b/patterns/_watson-patterns.scss similarity index 94% rename from patterns/crick.scss rename to patterns/_watson-patterns.scss index 737ca5a2..7f2091eb 100644 --- a/patterns/crick.scss +++ b/patterns/_watson-patterns.scss @@ -1,7 +1,7 @@ ////////////////////////////// // Core ////////////////////////////// -@import 'core/sass/core'; +@import 'core/sass'; ////////////////////////////// // Reset diff --git a/patterns/base/_index.scss b/patterns/base/_index.scss new file mode 100644 index 00000000..7a65fc44 --- /dev/null +++ b/patterns/base/_index.scss @@ -0,0 +1,104 @@ +////////////////////////////// +// Base +////////////////////////////// + +// Body +@import 'body/sass/body'; + +////////////////////////////// +// Headers +////////////////////////////// + +// H1 +@import 'h1/sass/h1'; +// H2 +@import 'h2/sass/h2'; +// H3 +@import 'h3/sass/h3'; +// H4 +@import 'h4/sass/h4'; +// H5 +@import 'h5/sass/h5'; +// H6 +@import 'h6/sass/h6'; + +////////////////////////////// +// Form Elements +////////////////////////////// + +// Input +@import 'input/sass/input'; +// Label +@import 'label/sass/label'; + +// Radio Button +@import 'radio/sass/radio'; +// Color Input +@import 'input--color/sass/input--color'; +// Date Input +@import 'input--date/sass/input--date'; +// Datetime Input +@import 'input--datetime/sass/input--datetime'; +// Datetime Local Input +@import 'input--datetime-local/sass/input--datetime-local'; +// Email Input +@import 'input--email/sass/input--email'; +// File Input +@import 'input--file/sass/input--file'; +// Hidden Input +@import 'input--hidden/sass/input--hidden'; +// Image Input +@import 'input--image/sass/input--image'; +// Month Input +@import 'input--month/sass/input--month'; +// Number Input +@import 'input--number/sass/input--number'; +// Password Input +@import 'input--password/sass/input--password'; +// Range Input +@import 'input--range/sass/input--range'; +// Search Input +@import 'input--search/sass/input--search'; +// Tel Input +@import 'input--tel/sass/input--tel'; +// Text Input +@import 'input--text/sass/input--text'; +// Time Input +@import 'input--time/sass/input--time'; +// URL Input +@import 'input--url/sass/input--url'; +// Week Input +@import 'input--week/sass/input--week'; +// Textarea +@import 'textarea/sass/textarea'; +// Checkboxes +@import 'checkbox/sass/checkbox'; +// Selct +@import 'select/sass/select'; +// Button +@import 'button/sass/button'; + +////////////////////////////// +// Typography Tags +////////////////////////////// + +// a +@import 'a/sass/a'; +// em +@import 'em/sass/em'; +// strong +@import 'strong/sass/strong'; +// code +@import 'code/sass/code'; +// pre +@import 'pre/sass/pre'; +// lists +@import 'ul/sass/ul'; +@import 'ol/sass/ol'; +// blockquote +@import 'blockquote/sass/blockquote'; + +////////////////////////////// +// Tabular Tags +////////////////////////////// +@import 'table/sass/table'; diff --git a/patterns/base/a/README.md b/patterns/base/a/README.md index e6c9aa50..03e95bb3 100644 --- a/patterns/base/a/README.md +++ b/patterns/base/a/README.md @@ -1,11 +1 @@ -# Anchor Link - Anchor link, ``, is the base styling for a link - -## Available Classes - -Styling can be applied in the following ways: - -* `.base--a` - class -* `.base--STYLED a` - `` tag inside a class of `.base--STYLED` -* `%base--a` - extended through Sass diff --git a/patterns/base/a/pattern.yml b/patterns/base/a/pattern.yml index 4168d3cf..e633e806 100644 --- a/patterns/base/a/pattern.yml +++ b/patterns/base/a/pattern.yml @@ -1,5 +1,21 @@ name: Anchor link description: Anchor link displayTemplate: pattern +applicationMethods: + - code: '.base--a' + description: 'Add this class to an element' + - code: '.base--STYLED a' + description: '`` tag inside a class of `.base--STYLED`' + - code: '%base--a' + description: 'Extend this silent selector through Sass' + - code: '`@include base--a([$color: null, $background: null])' + description: 'Include mixin to customize links. `$color` is text color and defaults to `primary color` setting, `$background` is background color link will be on and defaults to `background color` setting.' +settings: + - setting: primary color + description: Link color + - setting: background color + description: Assists with creating illusion of cleared descenders for underline + - setting: bold weight font + description: Weight of link variables: text: Link to something diff --git a/patterns/base/a/sass/partials/_extends.scss b/patterns/base/a/sass/partials/_extends.scss index 41b4c434..dcd140a3 100644 --- a/patterns/base/a/sass/partials/_extends.scss +++ b/patterns/base/a/sass/partials/_extends.scss @@ -1,9 +1,3 @@ %base--a { - color: setting-get('secondary color'); - text-decoration: underline; - - &:hover, - &:focus { - color: mix(setting-get('secondary color'), setting-get('black'), 20%); - } + @include base--a; } diff --git a/patterns/base/a/sass/partials/_mixins.scss b/patterns/base/a/sass/partials/_mixins.scss index e69de29b..416c4939 100644 --- a/patterns/base/a/sass/partials/_mixins.scss +++ b/patterns/base/a/sass/partials/_mixins.scss @@ -0,0 +1,15 @@ +@mixin base--a($color: null, $background: null) { + $color: setting-pick('primary color', $color); + $background: setting-pick('background color', $background); + + color: $color; + font-weight: setting-get('bold weight font'); + + @include underline($background, $color); + + &:hover, + &:focus { + color: color-shade($color, 20); + @include underline($background, color-shade($color, 20)); + } +} diff --git a/patterns/base/blockquote/README.md b/patterns/base/blockquote/README.md index a7b6a2f2..756cc99f 100644 --- a/patterns/base/blockquote/README.md +++ b/patterns/base/blockquote/README.md @@ -1,11 +1 @@ -# Blockquote - A blockquote, `
`, indicates that the enclosed text is an extended quotation - -## Available Classes - -Styling can be applied in the following ways: - -* `.base--blockquote` - class -* `.base--STYLED blockquote` - `
` tag inside a class of `.base--STYLED` -* `%base--blockquote` - extended through Sass diff --git a/patterns/base/blockquote/pattern.yml b/patterns/base/blockquote/pattern.yml index ec5dc48a..39105888 100644 --- a/patterns/base/blockquote/pattern.yml +++ b/patterns/base/blockquote/pattern.yml @@ -1,5 +1,15 @@ name: Blockquote description: An extended quotation displayTemplate: pattern +applicationMethods: + - code: '.base--blockquote' + description: 'Add this class to an element' + - code: '.base--STYLED blockquote' + description: '`
` tag inside a class of `.base--STYLED`' + - code: '%base--blockquote' + description: 'Extend this silent selector through Sass' +settings: + - setting: secondary color + description: Left border of quote variables: quote: "I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Found them? In Mercia?! The coconut's tropical! Why do you think that she is a witch?" diff --git a/patterns/base/blockquote/sass/partials/_extends.scss b/patterns/base/blockquote/sass/partials/_extends.scss index 92da8881..0652aa0a 100644 --- a/patterns/base/blockquote/sass/partials/_extends.scss +++ b/patterns/base/blockquote/sass/partials/_extends.scss @@ -1,7 +1,8 @@ %base--blockquote { - padding: .5em 1em; + padding: 0em 1.5em; margin-right: 1em; margin-left: 1em; font-style: italic; - border-left: .25em solid setting-get('secondary color'); + color: color('grayscale', 70); + border-left: .25em solid setting-get('secondary accent color'); } diff --git a/patterns/base/body/README.md b/patterns/base/body/README.md index 85f6686b..921421d7 100644 --- a/patterns/base/body/README.md +++ b/patterns/base/body/README.md @@ -1,7 +1 @@ -# Root HTML Elements - The ``tag defines the document's body, which contains all of its content. - -## Available Classes - -* `body` - tag diff --git a/patterns/base/body/pattern.yml b/patterns/base/body/pattern.yml index cd8da508..331cf199 100644 --- a/patterns/base/body/pattern.yml +++ b/patterns/base/body/pattern.yml @@ -1,3 +1,17 @@ name: Body description: The document's body which contains all of its content displayTemplate: pattern +applicationMethods: + - code: body + description: Applied to the `` tag +settings: + - setting: sans serif font + description: Font family for site + - setting: light weight font + description: Font weight for light weight fonts. Used as default for whole site + - setting: rhythm + description: Vertical rhythm of items (`margin-top`) + - setting: backgronud color + description: Color of site's background + - setting: text color + description: Color of site's main body text diff --git a/patterns/base/body/sass/_body.scss b/patterns/base/body/sass/_body.scss index 856a5656..0da755df 100644 --- a/patterns/base/body/sass/_body.scss +++ b/patterns/base/body/sass/_body.scss @@ -7,4 +7,11 @@ body { @extend %body--typography; + + background: setting-get('background color'); + color: setting-get('text color'); + + * + * { + margin-top: setting-get('rhythm'); + } } diff --git a/patterns/base/button/README.md b/patterns/base/button/README.md index 201b7eaf..cc17963e 100644 --- a/patterns/base/button/README.md +++ b/patterns/base/button/README.md @@ -1,11 +1 @@ -# Button - Button, `