diff --git a/CHANGELOG.md b/CHANGELOG.md index 878eb985..0d06cf78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Watson Design Guide Changelog +## v1.0.0 +**May 19, 2015** + +**Change** + +* :bug: Fix loading indicator minification +* :art: Clean up patterns +* :art: Spelling and grammar fixes +* Update global `rhythm` +* Make site footer sticky to bottom of viewport + ## v1.0.0-rc.4 **May 18, 2015** diff --git a/bower.json b/bower.json index 9c449da8..75e77382 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "watson-design-guide", - "version": "1.0.0-rc.4", + "version": "1.0.0", "homepage": "https://github.com/IBM-Watson/design-library", "authors": [ "Sam Richard ", diff --git a/language/02-guidelines/01-style/accessibility/index.md b/language/02-guidelines/01-style/accessibility/index.md index 2edb1107..62f2919e 100644 --- a/language/02-guidelines/01-style/accessibility/index.md +++ b/language/02-guidelines/01-style/accessibility/index.md @@ -52,4 +52,4 @@ In addition to the fundamental visual accessibility guides, animation has its ow {{ _detail.view(detail.accessibilityAnimation) }} -The five-second limit is long enough to get a user’s attention, but short enough for a user to wait out the distraction before reading the page. Do not include anything that flashes, or can be considered a flash, more than twice per second; it can negatively affect those prone to seizures. If the animation has audio longer than three seconds, provide audio control for users that have screen reading software, as it will make it easier for them to understand their screen reader. +The five-second limit is long enough to get a user’s attention, but short enough for a user to wait out the distraction before reading the page. Do not include anything that flashes, or can be considered a flash, more than twice per second; it can potentially cause seizures. If the animation has audio longer than three seconds, provide audio control for users that have screen reading software, as it will make it easier for them to understand their screen reader. diff --git a/language/02-guidelines/01-style/color/index.md b/language/02-guidelines/01-style/color/index.md index 3baf442c..7bd9cdae 100644 --- a/language/02-guidelines/01-style/color/index.md +++ b/language/02-guidelines/01-style/color/index.md @@ -38,13 +38,13 @@ variables: - palette: Orange tone: 50 adjectives: - - Innovation - - Utility + - Innovative + - Utilitarian - palette: Teal tone: 60 adjectives: - - Awareness - - Approachability + - Aware + - Approachable accentColors: instructions: "Choose an accent color. Add hues as necessary." colors: @@ -97,7 +97,7 @@ Choose a primary color, a secondary color, and an accent color. Additional tints {{ _color.groupSwatches(supportingGrays) }} -## Applying A Color Palette +## Applying a Color Palette Color is a powerful communication tool that helps determine hierarchy on a page. Use ample white space and neutrals to create balance and to direct users' attention. diff --git a/language/02-guidelines/01-style/typography/index.md b/language/02-guidelines/01-style/typography/index.md index 50243a1c..86a4c801 100644 --- a/language/02-guidelines/01-style/typography/index.md +++ b/language/02-guidelines/01-style/typography/index.md @@ -20,7 +20,7 @@ variables: title: "Helvetica Neue Bold Italic" visualDisplay: /images/typography/typeface-bold-italic.svg responsiveTypography: - title: "Major Third with a breakpoint at 500px" + title: "Major third with a breakpoint at 500px" visualDisplay: /videos/typography/responsive-typography.webm description: "When the browser gets wider than 500px, headings adopt the Golden Ratio type scale to increase legibility for the user at larger screen sizes." --- @@ -35,7 +35,7 @@ As a rule and wherever possible, use Helvetica Neue. It is the font of science a ## Performance Considerations -When presenting large amounts of content, it is important to consider how multiple font downloads can affect the browser’s performance for the user. To ensure optimized performance for all users, IBM Watson recommends choosing a combination of no more than 4 different weights and styles (light and light oblique being 2 different styles, for instance). +When presenting large amounts of content, it is important to consider how multiple font downloads can affect the browser’s performance for the user. To ensure optimized performance for all users, IBM Watson recommends choosing a combination of no more than four different weights and styles (light and light oblique being two different styles, for instance). {{ _example.compare(example.typefaceCombinations) }} diff --git a/language/02-guidelines/02-interaction/animation/index.md b/language/02-guidelines/02-interaction/animation/index.md index 78309624..940c98b2 100755 --- a/language/02-guidelines/02-interaction/animation/index.md +++ b/language/02-guidelines/02-interaction/animation/index.md @@ -17,9 +17,9 @@ Motion is a fundamental element of user experience design because it demonstrate {{ _example.compare(examples) }} -Motion design enhances communication throughout the design process, from the rapid prototyping of scenarios and interfaces to delivering final coded interface animations. The metaphor for animation comes from the IBM Design Language metaphor of elegant machine motion. The [IBM Design Language *Motion* section](http://www.ibm.com/design/language/framework/interaction/motion.shtml) walks through the methodologies and process for creating animation for IBM software products. +Motion design enhances communication throughout the design process, from the rapid prototyping of scenarios and interfaces to delivering final coded interface animations. The metaphor for animation comes from the IBM Design Language metaphor of elegant machine motion. The IBM Design Language [*Motion* section](http://www.ibm.com/design/language/framework/interaction/motion.shtml) walks through the methodologies and process for creating animation for IBM software products. ## Animation Library -The animations within this library are a collection of entrance and exit animations for page transitions that can be utilized within our interfaces. The library was built using CSS keyframe animations and can be implemented by using a Sass mixin. To view more about how to use this library check out the [documentation](/ui-patterns/documentation/animation), and please feel free to contribute additional animations. +The animations within this library are a collection of entrance and exit animations for page transitions that can be utilized within our interfaces. The animation library was built using CSS keyframe animations and can be implemented by using a Sass mixin. To view more about how to use this library, read the [documentation](/ui-patterns/documentation/animation), and please feel free to contribute additional animations. diff --git a/language/02-guidelines/03-branding/wordmark/index.md b/language/02-guidelines/03-branding/wordmark/index.md index bfe193ed..12e4c9df 100644 --- a/language/02-guidelines/03-branding/wordmark/index.md +++ b/language/02-guidelines/03-branding/wordmark/index.md @@ -33,19 +33,19 @@ variables: visualDisplay: /images/wordmark/logo-color-neg.svg thirdCompare: exampleOne: - title: "Do not reconfigure" + title: "Do not reconfigure." visualDisplay: /images/wordmark/wrong-configuration.svg sentiment: negative exampleTwo: - title: "Do not distort" + title: "Do not distort." visualDisplay: /images/wordmark/wrong-distortion.svg sentiment: negative exampleThree: - title: "Do not combine colors" + title: "Do not combine colors." visualDisplay: /images/wordmark/wrong-color-combination.svg sentiment: negative exampleFour: - title: "Do not change the font" + title: "Do not change the font." visualDisplay: /images/wordmark/wrong-font.svg sentiment: negative --- @@ -56,7 +56,7 @@ The IBM Watson wordmark and logo represent our brand and should be managed caref ## Specifications -### Spacing considerations +### Spacing Considerations It is important to include adequate spacing around these elements to avoid visual clutter. Keep the area around the IBM Watson wordmark separated from other visual elements by a distance approximately equal to the height of the IBM Watson wordmark. This distance is considered the minimum uninterrupted space surrounding the mark. diff --git a/language/02-guidelines/user-experience/performance/index.md b/language/02-guidelines/user-experience/performance/index.md index 3a5103ad..35fe574e 100644 --- a/language/02-guidelines/user-experience/performance/index.md +++ b/language/02-guidelines/user-experience/performance/index.md @@ -32,7 +32,7 @@ variables: description: "Dulles, VA - **Motorola E** - **Chrome**. *1.6 Mbps/768 Kbps connection with a 150ms round trip time*. [Full test](http://www.webpagetest.org/result/150515_53_JXT/)" --- -Performance is an integral part of a user's experience no matter the medium that interface takes. Web delivered interfaces, native interfaces, application programming interfaces; whenever a user interacts with a product, performance always needs to be a top concern. Slow performing interfaces have been shown to [cost money and conversions](http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales) and [affect a company's bottom line](https://blog.kissmetrics.com/loading-time/). More than that, performance is about respecting our users and the way humans perceive and react to the world around them. +Performance is an integral part of a user's experience no matter the medium that interface takes. Web-delivered interfaces, native interfaces, application programming interfaces; whenever a user interacts with a product, performance always needs to be a top concern. Slow performing interfaces have been shown to [cost money and conversions](http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales) and [affect a company's bottom line](https://blog.kissmetrics.com/loading-time/). More than that, performance is about respecting our users and the way humans perceive and react to the world around them. ## The Neuroscience of Performance @@ -44,13 +44,13 @@ In Jakob Nielsen's book _Usability Engineering_, he [describes three important l ![Acceptable Website Response Times](/images/performance/performance1.svg) -This research, published in 1993, has since been expanded upon with [Powers of 10: Time Scales in User Experiences](http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/) which goes in to more detail about the importance of time in the user's perception of an experience. Beyond Nielsen, additional research suggests that the 10 second maximum in practice winds up being closer to **5 seconds** for many people, with [50% of mobile users exiting an application or site if it takes more than 5 seconds to load](http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf). In 2010, CA Technologies commissioned a study to [quantify how humans react to slow websites](http://www.webperformancetoday.com/2011/02/24/website-performance-web-stress/). This reaction, called *web stress*, showed that "**…participants had to concentrate up to 50% more when using badly performing websites**" and that they had "**…greater agitation and stress**" when using slow websites. The reason for this web stress is mainly because of the limits of human short-term memory; [it is pretty bad](http://www.nngroup.com/articles/website-response-times/). There are three parts of memory that humans use at any given time (not including long-term memory) that have direct effects on how we perceive performance: sensory memory, short-term memory, and working memory. +This research, published in 1993, has since been expanded upon with [Powers of 10: Time Scales in User Experiences](http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/) which goes in to more detail about the importance of time in the user's perception of an experience. Beyond Nielsen, additional research suggests that the 10 second maximum in practice winds up being closer to **5 seconds** for many people, with [50% of mobile users exiting an application or site if it takes more than 5 seconds to load](http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf). In 2010, CA Technologies commissioned a study to [quantify how humans react to slow websites](http://www.webperformancetoday.com/2011/02/24/website-performance-web-stress/). This reaction, called *web stress*, showed that "…participants had to concentrate up to 50% more when using badly performing websites" and that they had "…greater agitation and stress" when using slow websites. The reason for this web stress is mainly because the limits of human short-term memory [are pretty bad](http://www.nngroup.com/articles/website-response-times/). There are three parts of memory that humans use at any given time (not including long-term memory) that have direct effects on how we perceive performance: sensory memory, short-term memory, and working memory. [Sensory memory](http://en.wikipedia.org/wiki/Sensory_memory) is the most basic input from an organism's senses. For humans, these inputs are sight, sound, touch, taste, and smell. They retain impressions of sensory information after the original stimulation has ceased, stored just long enough to be transfered to short-term memory. It has been experimentally shown that the duration of visual sensory memory (*iconic memory*) is between **100ms-200ms**, meaning that if an interface is able to react to a user's input and respond to them in **<100ms**, the reaction will be perceived as a seamless continuation of the interaction. Anything longer and our memory will reset with whatever the current stimuli is, risking an interruption in the perception of an interface by the user. -[Short-term memory](http://en.wikipedia.org/wiki/Short-term_memory) is the capacity of holding small amount of information in an active, readily available state. It is commonly cited to only be able to hold [7 ± 2](http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two) chunks of information at a time and each chunk only lasts around 18 seconds. If more information is entered in to the short-term memory in that time, retrieval of information stored earlier becomes error prone. +[Short-term memory](http://en.wikipedia.org/wiki/Short-term_memory) is the capacity of holding small amount of information in an active, readily available state. It is commonly cited to only be able to hold [7 ± 2](http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two) chunks of information at a time and each chunk only lasts around 18 seconds. If more information is entered in to the short-term memory in that time, retrieval of information stored earlier becomes error-prone. -[Working memory](http://en.wikipedia.org/wiki/Working_memory) is the system responsible for holding and processing of new and already stored information. Short-term memory and working memory work together to store, comprehend, process, and update all information coming in from sensory memory as well as keep current tasks and thoughts close at hand. Working memory's capacity has been hard to pin down exactly, but the two most prominent models, when taken together, suggest that the more information that must be maintained in working memory, the slower and more error prone concurrent process become and that the rate of decay of working memory is based on the temporal density and attentional demands of the processing task (this is also known as *cognitive load*). +[Working memory](http://en.wikipedia.org/wiki/Working_memory) is the system responsible for holding and processing new and already stored information. Short-term memory and working memory work together to store, comprehend, process, and update all information coming in from sensory memory as well as keep current tasks and thoughts close at hand. Working memory's capacity has been hard to pin down exactly, but the two most prominent models, when taken together, suggest that the more information that must be maintained in working memory, the slower and more error-prone concurrent processes become. The rate of decay of working memory is based on the temporal density and attentional demands of the processing task (this is also known as *cognitive load*). ### The Size and Speed of Immersion @@ -70,7 +70,7 @@ A human's sensory memory, acting at 100ms, is able to identify around 10 unique {{ _example.large(examples.framesPerSecond) }} -When creating interfaces, however, 24 FPS will not provide the fluid movement it does on film. Film relies on a number of effects – most commonly, [motion blur](http://en.wikipedia.org/wiki/Motion_blur) - to hide inter-frame judder. When [animating interface elements](/guidelines/interaction/animation/) or having users interact with our interfaces in a way that would cause motion (such as scrolling), we cannot rely upon those same effects because they are unique to the film medium. Instead, our interfaces should update at the same rate the device's screen is refreshing. When interfaces are not able to refresh at this rate, the result, called [Jank](http://jankfree.org/), is a "…stuttering, juddering, or just plain halting" of the interface. +When creating interfaces, however, 24 FPS will not provide the fluid movement it does on film. Film relies on a number of effects—most commonly, [motion blur](http://en.wikipedia.org/wiki/Motion_blur)—to hide inter-frame judder. When [animating interface elements](/guidelines/interaction/animation/) or having users interact with our interfaces in a way that would cause motion, such as scrolling, we cannot rely upon those same effects because they are unique to the film medium. Instead, our interfaces should update at the same rate the device's screen is refreshing. When interfaces are not able to refresh at this rate, the result, called [Jank](http://jankfree.org/), is a "…stuttering, juddering, or just plain halting" of the interface. Most devices today have a **refresh rate of 60Hz**, so that is what we should aim our interfaces to refresh at. diff --git a/language/images/motion/easing/BOUNCEIN.png b/language/images/motion/easing/BOUNCEIN.png deleted file mode 100644 index 6e55be69..00000000 Binary files a/language/images/motion/easing/BOUNCEIN.png and /dev/null differ diff --git a/language/images/motion/easing/BOUNCEINOUT.png b/language/images/motion/easing/BOUNCEINOUT.png deleted file mode 100644 index 5e60c9e7..00000000 Binary files a/language/images/motion/easing/BOUNCEINOUT.png and /dev/null differ diff --git a/language/images/motion/easing/BOUNCEOUT.png b/language/images/motion/easing/BOUNCEOUT.png deleted file mode 100644 index 0a8fb6a2..00000000 Binary files a/language/images/motion/easing/BOUNCEOUT.png and /dev/null differ diff --git a/language/images/motion/easing/EASEIN.png b/language/images/motion/easing/EASEIN.png deleted file mode 100644 index 480c84d0..00000000 Binary files a/language/images/motion/easing/EASEIN.png and /dev/null differ diff --git a/language/images/motion/easing/EASEOUT.png b/language/images/motion/easing/EASEOUT.png deleted file mode 100644 index 34ff144e..00000000 Binary files a/language/images/motion/easing/EASEOUT.png and /dev/null differ diff --git a/language/images/motion/easing/Option-A.gif b/language/images/motion/easing/Option-A.gif deleted file mode 100644 index a1db4272..00000000 Binary files a/language/images/motion/easing/Option-A.gif and /dev/null differ diff --git a/language/images/motion/easing/Option-B.gif b/language/images/motion/easing/Option-B.gif deleted file mode 100644 index 06758b00..00000000 Binary files a/language/images/motion/easing/Option-B.gif and /dev/null differ diff --git a/language/images/motion/easing/SNAPIN.png b/language/images/motion/easing/SNAPIN.png deleted file mode 100644 index bdb0df22..00000000 Binary files a/language/images/motion/easing/SNAPIN.png and /dev/null differ diff --git a/language/images/motion/easing/SNAPINOUT.png b/language/images/motion/easing/SNAPINOUT.png deleted file mode 100644 index 8d4b8de8..00000000 Binary files a/language/images/motion/easing/SNAPINOUT.png and /dev/null differ diff --git a/language/images/motion/easing/SNAPOUT.png b/language/images/motion/easing/SNAPOUT.png deleted file mode 100644 index 73cc3403..00000000 Binary files a/language/images/motion/easing/SNAPOUT.png and /dev/null differ diff --git a/language/images/motion/examples/Option-A.gif b/language/images/motion/examples/Option-A.gif deleted file mode 100644 index d419434f..00000000 Binary files a/language/images/motion/examples/Option-A.gif and /dev/null differ diff --git a/language/images/motion/examples/Option-B.gif b/language/images/motion/examples/Option-B.gif deleted file mode 100644 index 0afebb83..00000000 Binary files a/language/images/motion/examples/Option-B.gif and /dev/null differ diff --git a/language/images/motion/examples/Single_Attribute-1.gif b/language/images/motion/examples/Single_Attribute-1.gif deleted file mode 100644 index 7fa02461..00000000 Binary files a/language/images/motion/examples/Single_Attribute-1.gif and /dev/null differ diff --git a/language/images/motion/examples/Single_Attribute.gif b/language/images/motion/examples/Single_Attribute.gif deleted file mode 100644 index ea677e80..00000000 Binary files a/language/images/motion/examples/Single_Attribute.gif and /dev/null differ diff --git a/language/images/motion/examples/secondary-action.gif b/language/images/motion/examples/secondary-action.gif deleted file mode 100644 index 6520816b..00000000 Binary files a/language/images/motion/examples/secondary-action.gif and /dev/null differ diff --git a/language/ui-patterns/01-documentation/00-getting-started/index.md b/language/ui-patterns/01-documentation/00-getting-started/index.md index 7e68f691..703b59b3 100644 --- a/language/ui-patterns/01-documentation/00-getting-started/index.md +++ b/language/ui-patterns/01-documentation/00-getting-started/index.md @@ -1,5 +1,5 @@ --- -title: Getting Started with the WDG Pattern Library +title: Getting Started with UI Patterns resources: links: - name: "Bower" @@ -21,9 +21,9 @@ resources: - name: "Node Sass Import Once" source: https://github.com/at-import/node-sass-import-once --- -Welcome to the Watson Design Guide's Pattern Library! +Welcome to the IBM Watson Design Guide's Pattern Library! -The Pattern Library is a set of usable patterns expressed in HTML, Sass, and JavaSciprt, that can be used as a base for developing new or updating existing web projects, especially those that are powered by Watson. +The Pattern Library is a set of usable patterns expressed in HTML, Sass, and JavaScript, that can be used as a base for developing new or updating existing web projects, especially those that are powered by Watson. ## Installation @@ -33,7 +33,7 @@ The Pattern Library can be installed through [Bower](http://bower.io): $ bower install watson-design-library --save ``` -This will install the patterns, as well as its dependencies and the documentation from the rest of this site, in to the project's local `bower_components` folder. +This will install the patterns, as well as its dependencies and the documentation from the rest of this site, into the project's local `bower_components` folder. ## Working with the Pattern Library @@ -41,11 +41,11 @@ Each pattern in the Pattern Library comes with HTML written in [Swig](http://pau ### Styling a Project -Styling for projects is done through [Sass](http://sass-lang.com). No CSS files are included intentionally; the styling that is available is basic and will not fit all projects; teams should include designers and developers to flesh out the styling of a project. What is provided are a set of patterns that encapsulate the design guidelines presented within the Watson Design Guide that are customizable to a project's needs within those guidelines. +Styling for projects is done through [Sass](http://sass-lang.com). No CSS files are included intentionally. The styling that is available is basic and will not fit all projects; teams should include designers and developers to flesh out the styling of a project. What *is* provided are a set of patterns that encapsulate the design guidelines presented within the Watson Design Guide that are customizable to a project's needs within those guidelines. All styling is written following our [Sass and CSS Development Guidelines](/guidelines/development/sass). -The Pattern Library is at its best when being customized for the needs of a given project. [Settings](/ui-patterns/documentation/settings) for customization are provided by [Toolkit](https://github.com/at-import/toolkit), so a project's main Sass file should be set up as follows: +The Pattern Library is best used when it is customized for the needs of a given project. [Settings](/ui-patterns/documentation/settings) for customization are provided by [Toolkit](https://github.com/at-import/toolkit), so a project's main Sass file should be set up as follows: ```scss @import "toolkit"; diff --git a/language/ui-patterns/01-documentation/animation/index.md b/language/ui-patterns/01-documentation/animation/index.md index d3090443..db570b1c 100644 --- a/language/ui-patterns/01-documentation/animation/index.md +++ b/language/ui-patterns/01-documentation/animation/index.md @@ -9,12 +9,14 @@ variables: visualDisplay: /videos/animation-docs/singlePropAni.webm secondCompare: exampleOne: - title: "First Option for Multiple Property Animations Visual Example" + title: "Option One Visual Example" visualDisplay: /videos/animation-docs/multiPropAni1.webm + description: "Start one property alone, then animate any additional properties." thirdCompare: exampleOne: - title: "Second Option for Multiple Property Animations Visual Example" + title: "Option Two Visual Example" visualDisplay: /videos/animation-docs/multiPropAni2.webm + description: "Both properties start at the same time, then one property ends before the other." fourthCompare: exampleOne: title: "Singular Animation Visual Example" @@ -82,10 +84,6 @@ Use snap-in eases to add very strong eases to quick movements. This enhances the When more than one property is being animated, the animation is known as a multiple property animation. With multiple property animations, there are two different options: to start one property alone then animate any additional properties, or to start both properties 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. - {{ _example.compare(example.secondCompare) }} ```scss @@ -109,11 +107,6 @@ Start one property alone, then animate any additional properties. } ``` -**Option Two** - -Both properties start at the same time, then one property ends before the other. - - {{ _example.compare(example.thirdCompare) }} ```scss @@ -150,7 +143,7 @@ Use snap-in eases to add very strong eases to quick movements. This enhances the * **Interactive Elements** - `map-get($timing-functions, snap-in-out)` -## Singular vs. Sequence of Actions +## Singular versus 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. diff --git a/language/ui-patterns/02-patterns/01-base/index.md b/language/ui-patterns/02-patterns/01-base/index.md index 12f4d550..d251134b 100644 --- a/language/ui-patterns/02-patterns/01-base/index.md +++ b/language/ui-patterns/02-patterns/01-base/index.md @@ -3,4 +3,4 @@ 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. +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/library/config/js.yaml b/library/config/js.yaml index e038fddd..311a5706 100644 --- a/library/config/js.yaml +++ b/library/config/js.yaml @@ -7,6 +7,7 @@ modernizr: - setClasses 'feature-detects': - svg/smil + - inputtypes ######################### diff --git a/library/config/site.yaml b/library/config/site.yaml index ddc4f87c..f448e21e 100644 --- a/library/config/site.yaml +++ b/library/config/site.yaml @@ -1,4 +1,4 @@ -version: 1.0.0-rc.4 +version: 1.0.0 repo: https://github.com/IBM-Watson/design-library licenses: docs: diff --git a/library/sass/components/_banner.scss b/library/sass/components/_banner.scss index 909fa3dd..39e47b37 100644 --- a/library/sass/components/_banner.scss +++ b/library/sass/components/_banner.scss @@ -4,7 +4,7 @@ background-repeat: no-repeat; background-size: 100%; background-position: 0 42%; - padding: setting-get('rhythm') 0; + padding: setting-get('rhythm') * 2 0 setting-get('rhythm'); @include breakpoint(900px) { padding: setting-get('rhythm') * 3 0 setting-get('rhythm'); } diff --git a/library/sass/components/_cite.scss b/library/sass/components/_cite.scss new file mode 100644 index 00000000..5c76a15d --- /dev/null +++ b/library/sass/components/_cite.scss @@ -0,0 +1,3 @@ +[library-class='quote--cite'] { + font-style: initial; +} diff --git a/library/sass/components/_detail.scss b/library/sass/components/_detail.scss index 1d79cb87..cc454e30 100644 --- a/library/sass/components/_detail.scss +++ b/library/sass/components/_detail.scss @@ -1,3 +1,9 @@ +[library-class='detail'] { + [library-class='a11y--hidden-focusable'] { + margin-top: 0; + } +} + [library-class='detail--display'] { width: 75%; margin: 0 auto; diff --git a/library/sass/components/_example.scss b/library/sass/components/_example.scss index 32f4ba62..eeb6fcb9 100644 --- a/library/sass/components/_example.scss +++ b/library/sass/components/_example.scss @@ -2,6 +2,7 @@ [library-class='example--body'] { font-size: .8em; max-width: 411px; + margin-top: setting-get('rhythm') / 2; } } @@ -9,6 +10,10 @@ [library-class='example--description'] { font-size: .8em; } + + [library-class='media'] { + margin-top: setting-get('rhythm') / 2; + } } @@ -17,7 +22,7 @@ } [library-class='example--description'] { - margin-top: 0; + margin-top: setting-get('rhythm') / 2; } [library-class='example--SMALL'] { @@ -25,23 +30,40 @@ width: 100%; + &:nth-of-type(2n + 1) { + clear: both; + margin-top: setting-get('rhythm'); + } + + &:nth-of-type(1) { + margin-top: 0; + } + @include breakpoint(442px) { width: 50%; + &:nth-of-type(2) { + margin-top: 0; + } } @include breakpoint(557px) { width: 100%; + + &:nth-of-type(2) { + margin-top: setting-get('rhythm'); + } } @include breakpoint(685px) { width: 50%; - } - - &:nth-of-type(2n + 1) { - clear: both; - margin-top: setting-get('rhythm'); + &:nth-of-type(1) { + margin-top: 0; + } + &:nth-of-type(2) { + margin-top: 0; + } } } diff --git a/library/sass/components/_footer.scss b/library/sass/components/_footer.scss index e5c3d1e0..7890c3ec 100644 --- a/library/sass/components/_footer.scss +++ b/library/sass/components/_footer.scss @@ -1,6 +1,7 @@ [library-class='footer'] { - background: color('grayscale', 50); - padding: setting-get('rhythm') * 2 0; + display: table-row; + height: 1px; + font-size: .75em; text-align: center; @@ -8,13 +9,8 @@ text-align: left; } - [library-class~='_library--stretch-container'] ~ & { - margin-top: 0; - padding-top: setting-get('rhythm'); - } - [library-class='_library--container'] { - padding: 0 setting-get('rhythm'); + padding: setting-get('rhythm'); } } diff --git a/library/sass/components/_home.scss b/library/sass/components/_home.scss index 605e0202..9b44ace7 100644 --- a/library/sass/components/_home.scss +++ b/library/sass/components/_home.scss @@ -4,15 +4,19 @@ [library-class~='home'][library-class~='_library--container'] { margin-top: setting-get('rhythm'); + + @include breakpoint(699px) { + padding: setting-get('rhythm') 0; + } } [library-class='home-children'] { position: relative; - @include breakpoint(700px) { + @include breakpoint(699px) { margin-top: 0; width: 100 / 3 * 1%; - min-height: 245px; + min-height: 285px; position: relative; float: left; padding-left: setting-get('rhythm') / 2; @@ -42,6 +46,10 @@ } } } + + @include breakpoint(884px) { + min-height: 245px; + } } diff --git a/library/sass/components/_main-content.scss b/library/sass/components/_main-content.scss index 6a6d7264..5645ab63 100644 --- a/library/sass/components/_main-content.scss +++ b/library/sass/components/_main-content.scss @@ -41,6 +41,7 @@ border-top: 3px solid color('grayscale', 40); padding-top: setting-get('rhythm'); margin-top: setting-get('rhythm'); + margin-bottom: setting-get('rhythm'); color: setting-get('text color'); } @@ -99,4 +100,5 @@ [library-class='main-content--section-link'] { text-decoration: none; + display: inline-block; } diff --git a/library/sass/components/_main-nav.scss b/library/sass/components/_main-nav.scss index 517448c2..319aef7f 100644 --- a/library/sass/components/_main-nav.scss +++ b/library/sass/components/_main-nav.scss @@ -23,7 +23,7 @@ text-decoration: none; text-align: center; margin-top: 0; - padding: setting-get('rhythm') 0; + padding: setting-get('rhythm') / 2 0; border-bottom: 5px solid transparent; @@ -41,6 +41,6 @@ @include breakpoint(565px) { width: auto; - padding: setting-get('rhythm') + padding: setting-get('rhythm') / 2; } } diff --git a/library/sass/components/_resources.scss b/library/sass/components/_resources.scss index bb63c9fb..e4325301 100644 --- a/library/sass/components/_resources.scss +++ b/library/sass/components/_resources.scss @@ -1,22 +1,24 @@ [library-class='resources'] { @extend [library-class~='subnav']; + padding: setting-get('rhythm') / 2 0; } [library-class='resources--title'] { @extend %base--h5; - padding-bottom: setting-get('rhythm'); - padding-left: setting-get('rhythm'); - padding-right: setting-get('rhythm'); + padding-bottom: setting-get('rhythm') / 2; + padding-left: setting-get('rhythm') / 2; + padding-right: setting-get('rhythm') / 2; border-bottom: 1px solid color('grayscale', 100); } [library-class='resources--file-list'], [library-class='resources--link-list'] { - padding-left: setting-get('rhythm'); - padding-right: setting-get('rhythm'); + padding-left: setting-get('rhythm') / 2; + padding-right: setting-get('rhythm') / 2; } [library-class='resources--item'] { + margin-top: setting-get('rhythm') / 2; [library-class='icon'] { display: inline-block; font-size: 1.5em; @@ -40,6 +42,8 @@ [library-class='resources--link-list'] { $color: setting-get('primary color'); color: $color; + margin-top: setting-get('rhythm') / 2; + transform: translateY(-.25em); [library-class='resources--item']:hover { color: color-shade($color, 20); diff --git a/library/sass/components/_wordmark.scss b/library/sass/components/_wordmark.scss index d572c9e7..f59fd95b 100644 --- a/library/sass/components/_wordmark.scss +++ b/library/sass/components/_wordmark.scss @@ -4,8 +4,8 @@ margin-top: setting-get('rhythm') / 2; @include breakpoint(565px) { - margin-top: setting-get('rhythm'); + margin-top: setting-get('rhythm') / 2; float: left; - margin-left: setting-get('rhythm'); + margin-left: setting-get('rhythm') / 2; } } diff --git a/library/sass/layouts/_library.scss b/library/sass/layouts/_library.scss index 3124b93c..6002c30a 100644 --- a/library/sass/layouts/_library.scss +++ b/library/sass/layouts/_library.scss @@ -3,8 +3,16 @@ padding-right: setting-get('rhythm'); } +html, +body { + height: 100%; +} + [library-class='_library'] { margin-top: 0; + display: table; + height: 100%; + width: 100%; } [library-class='_library--clearfix'] { diff --git a/library/sass/style.scss b/library/sass/style.scss index 536edc44..1e8a3334 100644 --- a/library/sass/style.scss +++ b/library/sass/style.scss @@ -20,6 +20,7 @@ @import 'components/home'; @import 'components/what-is'; @import 'components/page-children'; +@import 'components/cite'; ////////////////////////////// // Layouts diff --git a/patterns/base/blockquote/blockquote.html b/patterns/base/blockquote/blockquote.html index ed94ebf7..c79db740 100644 --- a/patterns/base/blockquote/blockquote.html +++ b/patterns/base/blockquote/blockquote.html @@ -1,3 +1,4 @@

{{ quote }}

+

{{ citation }}

diff --git a/patterns/base/blockquote/pattern.yml b/patterns/base/blockquote/pattern.yml index 39105888..35d68fa3 100644 --- a/patterns/base/blockquote/pattern.yml +++ b/patterns/base/blockquote/pattern.yml @@ -12,4 +12,5 @@ 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?" + quote: "When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That's relativity." + citation: "Albert Einstein" diff --git a/patterns/base/button/sass/_button.css b/patterns/base/button/sass/_button.css new file mode 100644 index 00000000..fee368af --- /dev/null +++ b/patterns/base/button/sass/_button.css @@ -0,0 +1,30 @@ +.base--button, +.base--STYLED button { + padding: .5em 1em; + color: setting-get("primary color"); + font-weight: bold; + background-color: setting-get("background color"); + border: 3px solid setting-get("primary accent color"); } + +.base--button[type='submit'], +.base--STYLED button[type='submit'] { + background-color: setting-get("background color"); + border: 3px solid setting-get("secondary accent color"); + color: setting-get("secondary color"); } + .base--button[type='submit']:hover, + .base--STYLED button[type='submit']:hover { + background-color: setting-get("secondary color"); + border: 3px solid setting-get("secondary color"); + color: color("white"); } +.base--button[type='reset'], +.base--STYLED button[type='reset'] { + background-color: setting-get("background color"); + border: 3px solid color("gray", 30); + color: color("gray", 60); } + .base--button[type='reset']:hover, + .base--STYLED button[type='reset']:hover { + background-color: color("gray", 60); + border: 3px solid color("gray", 60); + color: color("white"); } + +/*# sourceMappingURL=_button.css.map */ diff --git a/patterns/base/button/sass/_button.css.map b/patterns/base/button/sass/_button.css.map new file mode 100644 index 00000000..84235720 --- /dev/null +++ b/patterns/base/button/sass/_button.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA;oBAAc;EACZ,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,4BAA4B;EACnC,WAAW,EAAE,IAAI;EACjB,gBAAgB,EAAE,+BAA+B;EACjD,MAAM,EAAE,6CAA6C;;ACMrD;mCAAiB;EACf,gBAAgB,EAAE,+BAA+B;EACjD,MAAM,EAAE,+CAA+C;EACvD,KAAK,EAAE,8BAA8B;EACrC;2CAAQ;IACN,gBAAgB,EAAE,8BAA8B;IAChD,MAAM,EAAE,wCAAwC;IAChD,KAAK,EAAE,cAAc;AAIzB;kCAAgB;EACd,gBAAgB,EAAE,+BAA+B;EACjD,MAAM,EAAE,2BAA2B;EACnC,KAAK,EAAE,iBAAiB;EACxB;0CAAQ;IACN,gBAAgB,EAAE,iBAAiB;IACnC,MAAM,EAAE,2BAA2B;IACnC,KAAK,EAAE,cAAc", +"sources": ["partials/_extends.scss","_button.scss"], +"names": [], +"file": "_button.css" +} \ No newline at end of file diff --git a/patterns/base/button/sass/_button.scss b/patterns/base/button/sass/_button.scss index 2babac05..c4e869be 100644 --- a/patterns/base/button/sass/_button.scss +++ b/patterns/base/button/sass/_button.scss @@ -10,10 +10,24 @@ @extend %base--button; &[type='submit'] { - background-color: setting-get('primary color'); + background-color: setting-get('background color'); + border: 3px solid setting-get('secondary accent color'); + color: setting-get('secondary color'); + &:hover { + background-color: setting-get('secondary color'); + border: 3px solid setting-get('secondary color'); + color: color('white'); + } } &[type='reset'] { - background-color: color('gray'); + background-color: setting-get('background color'); + border: 3px solid color('gray', 30); + color: color('gray', 60); + &:hover { + background-color: color('gray', 60); + border: 3px solid color('gray', 60); + color: color('white'); + } } } diff --git a/patterns/base/button/sass/partials/_extends.css b/patterns/base/button/sass/partials/_extends.css new file mode 100644 index 00000000..31ca6aab --- /dev/null +++ b/patterns/base/button/sass/partials/_extends.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=_extends.css.map */ diff --git a/patterns/base/button/sass/partials/_extends.css.map b/patterns/base/button/sass/partials/_extends.css.map new file mode 100644 index 00000000..9af7b5d8 --- /dev/null +++ b/patterns/base/button/sass/partials/_extends.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "_extends.css" +} \ No newline at end of file diff --git a/patterns/base/button/sass/partials/_extends.scss b/patterns/base/button/sass/partials/_extends.scss index 16f8c71d..c0c4d994 100644 --- a/patterns/base/button/sass/partials/_extends.scss +++ b/patterns/base/button/sass/partials/_extends.scss @@ -1,6 +1,12 @@ %base--button { - padding: .2em .5em; - color: setting-get('white'); - background-color: setting-get('secondary color'); - border: 0; + padding: .5em 1em; + color: setting-get('primary color'); + font-weight: bold; + background-color: setting-get('background color'); + border: 3px solid setting-get('primary accent color'); + &:hover { + background-color: setting-get('primary color'); + border: 3px solid setting-get('primary color'); + color: color('white'); + } } diff --git a/patterns/base/checkbox/sass/partials/_extends.css b/patterns/base/checkbox/sass/partials/_extends.css new file mode 100644 index 00000000..31ca6aab --- /dev/null +++ b/patterns/base/checkbox/sass/partials/_extends.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=_extends.css.map */ diff --git a/patterns/base/checkbox/sass/partials/_extends.css.map b/patterns/base/checkbox/sass/partials/_extends.css.map new file mode 100644 index 00000000..9af7b5d8 --- /dev/null +++ b/patterns/base/checkbox/sass/partials/_extends.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "_extends.css" +} \ No newline at end of file diff --git a/patterns/base/checkbox/sass/partials/_extends.scss b/patterns/base/checkbox/sass/partials/_extends.scss index e7118d44..5a4fd564 100644 --- a/patterns/base/checkbox/sass/partials/_extends.scss +++ b/patterns/base/checkbox/sass/partials/_extends.scss @@ -6,12 +6,13 @@ &:before { display: inline-block; - width: .8em; - height: .8em; - margin-right: 1em; + width: 1em; + height: 1em; + margin-right: setting-get('rhythm') / 2; vertical-align: middle; border: setting-get('input border width') solid color('gray', 30); content: ''; + transform: translateY(-.125em); } } diff --git a/patterns/base/input--datetime/README.md b/patterns/base/input--datetime/README.md deleted file mode 100644 index ede19c32..00000000 --- a/patterns/base/input--datetime/README.md +++ /dev/null @@ -1 +0,0 @@ -Basic datetime input for a form. diff --git a/patterns/base/input--datetime/input--datetime.html b/patterns/base/input--datetime/input--datetime.html deleted file mode 100644 index bec12f9c..00000000 --- a/patterns/base/input--datetime/input--datetime.html +++ /dev/null @@ -1 +0,0 @@ -{% pattern input from base %} diff --git a/patterns/base/input--datetime/pattern.yml b/patterns/base/input--datetime/pattern.yml deleted file mode 100644 index cafb2572..00000000 --- a/patterns/base/input--datetime/pattern.yml +++ /dev/null @@ -1,33 +0,0 @@ -name: Input - Datetime -description: Datetime input field for a form -displayTemplate: pattern -applicationMethods: - - code: '.base--datetime-input' - description: 'Add this class to an element' - - code: '.base--STYLED input[type="datetime"]' - description: '`` tag inside a class of `.base--STYLED`' - - code: '%base--datetime-input' - description: 'Extend this silent selector through Sass' -settings: - - setting: input padding - description: Padding of input box - - setting: input border width - description: Border width of input box - - setting: input border color - description: Color of input box border - - setting: background color - description: Background color of input box -variables: - inputs: - basic: - label: Basic Datetime Input - type: datetime - placeholder: - label: Placeholder Datetime - type: datetime - placeholder: This is placeholder datetime - disabled: - label: Disabled Datetime Input - type: datetime - placeholder: Can't click me - disabled: true diff --git a/patterns/base/input--datetime/sass/_input--datetime.scss b/patterns/base/input--datetime/sass/_input--datetime.scss deleted file mode 100644 index da82b8ba..00000000 --- a/patterns/base/input--datetime/sass/_input--datetime.scss +++ /dev/null @@ -1,11 +0,0 @@ -// @import '../../../core/sass/core'; - -@import 'partials/vars'; -@import 'partials/settings'; -@import 'partials/mixins'; -@import 'partials/extends'; - -.base--datetime-input, -.base--STYLED input[type="datetime"] { - @extend %base--datetime-input; -} diff --git a/patterns/base/input--datetime/sass/partials/_extends.scss b/patterns/base/input--datetime/sass/partials/_extends.scss deleted file mode 100644 index 3b241aa6..00000000 --- a/patterns/base/input--datetime/sass/partials/_extends.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @import '../../../input/sass/partials/extends'; - -%base--datetime-input { - @extend %base--input; -} diff --git a/patterns/base/input--datetime/sass/partials/_mixins.scss b/patterns/base/input--datetime/sass/partials/_mixins.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--datetime/sass/partials/_settings.scss b/patterns/base/input--datetime/sass/partials/_settings.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--datetime/sass/partials/_vars.scss b/patterns/base/input--datetime/sass/partials/_vars.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--image/README.md b/patterns/base/input--image/README.md deleted file mode 100644 index 4bfcef09..00000000 --- a/patterns/base/input--image/README.md +++ /dev/null @@ -1 +0,0 @@ -Basic image input for a form. diff --git a/patterns/base/input--image/input--image.html b/patterns/base/input--image/input--image.html deleted file mode 100644 index bec12f9c..00000000 --- a/patterns/base/input--image/input--image.html +++ /dev/null @@ -1 +0,0 @@ -{% pattern input from base %} diff --git a/patterns/base/input--image/pattern.yml b/patterns/base/input--image/pattern.yml deleted file mode 100644 index 8a9a4d02..00000000 --- a/patterns/base/input--image/pattern.yml +++ /dev/null @@ -1,33 +0,0 @@ -name: Input - Image -description: Image input field for a form -displayTemplate: pattern -applicationMethods: - - code: '.base--image-input' - description: 'Add this class to an element' - - code: '.base--STYLED input[type="image"]' - description: '`` tag inside a class of `.base--STYLED`' - - code: '%base--image-input' - description: 'Extend this silent selector through Sass' -settings: - - setting: input padding - description: Padding of input box - - setting: input border width - description: Border width of input box - - setting: input border color - description: Color of input box border - - setting: background color - description: Background color of input box -variables: - inputs: - basic: - label: Basic Image Input - type: image - placeholder: - label: Placeholder Image - type: image - placeholder: This is placeholder image - disabled: - label: Disabled Image Input - type: image - placeholder: Can't click me - disabled: true diff --git a/patterns/base/input--image/sass/_input--image.scss b/patterns/base/input--image/sass/_input--image.scss deleted file mode 100644 index 60c7416c..00000000 --- a/patterns/base/input--image/sass/_input--image.scss +++ /dev/null @@ -1,11 +0,0 @@ -// @import '../../../core/sass/core'; - -@import 'partials/vars'; -@import 'partials/settings'; -@import 'partials/mixins'; -@import 'partials/extends'; - -.base--image-input, -.base--STYLED input[type="image"] { - @extend %base--image-input; -} diff --git a/patterns/base/input--image/sass/partials/_extends.scss b/patterns/base/input--image/sass/partials/_extends.scss deleted file mode 100644 index 93ff5ed7..00000000 --- a/patterns/base/input--image/sass/partials/_extends.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @import '../../../input/sass/partials/extends'; - -%base--image-input { - @extend %base--input; -} diff --git a/patterns/base/input--image/sass/partials/_mixins.scss b/patterns/base/input--image/sass/partials/_mixins.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--image/sass/partials/_settings.scss b/patterns/base/input--image/sass/partials/_settings.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--image/sass/partials/_vars.scss b/patterns/base/input--image/sass/partials/_vars.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/patterns/base/input--number/pattern.yml b/patterns/base/input--number/pattern.yml index 586f8b2f..a507934b 100644 --- a/patterns/base/input--number/pattern.yml +++ b/patterns/base/input--number/pattern.yml @@ -29,5 +29,5 @@ variables: disabled: label: Disabled Number Input type: number - placeholder: Can't click me + placeholder: Can't touch this disabled: true diff --git a/patterns/base/input--password/pattern.yml b/patterns/base/input--password/pattern.yml index 7e21394c..8b1a18a1 100644 --- a/patterns/base/input--password/pattern.yml +++ b/patterns/base/input--password/pattern.yml @@ -29,5 +29,5 @@ variables: disabled: label: Disabled Password Input type: password - placeholder: Can't click me + placeholder: Can't touch this disabled: true diff --git a/patterns/base/input--range/sass/partials/_extends.scss b/patterns/base/input--range/sass/partials/_extends.scss index fa509394..2f69477b 100644 --- a/patterns/base/input--range/sass/partials/_extends.scss +++ b/patterns/base/input--range/sass/partials/_extends.scss @@ -10,9 +10,9 @@ border-radius: setting-get('range height'); box-shadow: inset 0 0 0 setting-get('range outline width') setting-get('input border color'); - &:hover, &:focus { outline: 0; + box-shadow: inset 0 0 0 setting-get('range outline width') setting-get('primary color'); } &:disabled { diff --git a/patterns/base/input--search/pattern.yml b/patterns/base/input--search/pattern.yml index 7bc56809..a237dca1 100644 --- a/patterns/base/input--search/pattern.yml +++ b/patterns/base/input--search/pattern.yml @@ -29,5 +29,5 @@ variables: disabled: label: Disabled Search Input type: search - placeholder: Can't click me + placeholder: Can't touch this disabled: true diff --git a/patterns/base/input--text/pattern.yml b/patterns/base/input--text/pattern.yml index ea3e456b..ed016e35 100644 --- a/patterns/base/input--text/pattern.yml +++ b/patterns/base/input--text/pattern.yml @@ -29,5 +29,5 @@ variables: disabled: label: Disabled Text Input type: text - placeholder: Can't click me + placeholder: Can't touch this disabled: true diff --git a/patterns/base/input--url/pattern.yml b/patterns/base/input--url/pattern.yml index 20e098d2..42286730 100644 --- a/patterns/base/input--url/pattern.yml +++ b/patterns/base/input--url/pattern.yml @@ -29,5 +29,5 @@ variables: disabled: label: Disabled URL Input type: url - placeholder: http://disabled-input.com + placeholder: http://canttouchthis.com disabled: true diff --git a/patterns/base/input/input.html b/patterns/base/input/input.html index 06f3dff2..6e2656f0 100644 --- a/patterns/base/input/input.html +++ b/patterns/base/input/input.html @@ -2,6 +2,6 @@ {% set input = {id: 'input' + loop.index} -%} - +{% if not loop.last %} -{% endfor %} +{% endif %}{% endfor %} diff --git a/patterns/base/input/pattern.yml b/patterns/base/input/pattern.yml index 52cdbcd3..ab9bb83a 100644 --- a/patterns/base/input/pattern.yml +++ b/patterns/base/input/pattern.yml @@ -26,5 +26,5 @@ variables: placeholder: This is placeholder text disabled: label: Disabled Basic Input - placeholder: Can't click me + placeholder: Can't touch this disabled: true diff --git a/patterns/base/input/sass/partials/_extends.scss b/patterns/base/input/sass/partials/_extends.scss index 1cfccb04..b691bb27 100644 --- a/patterns/base/input/sass/partials/_extends.scss +++ b/patterns/base/input/sass/partials/_extends.scss @@ -10,7 +10,11 @@ background-color: setting-get('background color'); &:focus { - outline: none; - box-shadow: inset 0 0 0 2px setting-get('input border color'); + outline: setting-get('input border width') solid setting-get('primary color'); + border-color: setting-get('primary color'); + } + + &:disabled { + background-color: color('neutral-white', 40); } } diff --git a/patterns/base/input/sass/partials/_settings.scss b/patterns/base/input/sass/partials/_settings.scss index 85b449e1..75b1a105 100644 --- a/patterns/base/input/sass/partials/_settings.scss +++ b/patterns/base/input/sass/partials/_settings.scss @@ -1,7 +1,7 @@ $InputSettings: ( 'input padding': .6em 1em, 'input border color': color('gray', 30), - 'input border width': 3px + 'input border width': 2px, ); $GlobalSettings: map-merge($GlobalSettings, $InputSettings); diff --git a/patterns/base/ol/ol.html b/patterns/base/ol/ol.html index 3909a5c4..f1b80eed 100644 --- a/patterns/base/ol/ol.html +++ b/patterns/base/ol/ol.html @@ -1,5 +1,3 @@ -
    - {% for item in listitems %} -
  1. {{ item }}
    2. - {% endfor %} +
      {% for item in listitems %} +
    1. {{ item }}
      2. {% endfor %}
    diff --git a/patterns/base/p/pattern.yml b/patterns/base/p/pattern.yml index 4f377d79..a095d0c2 100644 --- a/patterns/base/p/pattern.yml +++ b/patterns/base/p/pattern.yml @@ -6,5 +6,4 @@ applicationMethods: description: 'No additional styling applied to `

    ` tags' variables: paragraph: - text: And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet. No! The cat shelter's on to me. Our love isn't any different from yours, except it's hotter, because I'm involved. Actually, that's still true. - + text: I was eleven years old. And when I was strong enough, I dedicated my life to the study of fencing. So the next time we meet, I will not fail. I will go up to the six-fingered man and say, "Hello. My name is Inigo Montoya. You killed my father. Prepare to die." diff --git a/patterns/base/pre/pre.html b/patterns/base/pre/pre.html index d4bff694..427edbd8 100644 --- a/patterns/base/pre/pre.html +++ b/patterns/base/pre/pre.html @@ -1,3 +1 @@ 

    {{ snippet }}
    - - diff --git a/patterns/base/radio/sass/partials/_extends.css b/patterns/base/radio/sass/partials/_extends.css new file mode 100644 index 00000000..31ca6aab --- /dev/null +++ b/patterns/base/radio/sass/partials/_extends.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=_extends.css.map */ diff --git a/patterns/base/radio/sass/partials/_extends.css.map b/patterns/base/radio/sass/partials/_extends.css.map new file mode 100644 index 00000000..9af7b5d8 --- /dev/null +++ b/patterns/base/radio/sass/partials/_extends.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "_extends.css" +} \ No newline at end of file diff --git a/patterns/base/radio/sass/partials/_extends.scss b/patterns/base/radio/sass/partials/_extends.scss index d3296797..34a4131b 100644 --- a/patterns/base/radio/sass/partials/_extends.scss +++ b/patterns/base/radio/sass/partials/_extends.scss @@ -8,11 +8,12 @@ display: inline-block; width: 1em; height: 1em; - margin-right: 1em; + margin-right: setting-get('rhythm') / 2; vertical-align: middle; border: setting-get('input border width') solid color('gray', 30); border-radius: 50%; content: ''; + transform: translateY(-.125em); } } diff --git a/patterns/base/strong/pattern.yml b/patterns/base/strong/pattern.yml index 96ccf74e..cfa32b8f 100644 --- a/patterns/base/strong/pattern.yml +++ b/patterns/base/strong/pattern.yml @@ -9,4 +9,4 @@ applicationMethods: - code: '%base--strong' description: 'Extend this silent selector through Sass' variables: - text: important text + text: This text is very important. diff --git a/patterns/base/table/pattern.yml b/patterns/base/table/pattern.yml index c3a34fef..a9b896fd 100644 --- a/patterns/base/table/pattern.yml +++ b/patterns/base/table/pattern.yml @@ -28,7 +28,10 @@ variables: head: - First Name - Last Name - - Job + - Role body: - - [John, Doe, Programmer] - - [Jane, Doe, ''] + - [Westley, '--', The Man in Black] + - [Princess, Buttercup, The Princess Bride] + - [Prince, Humperdinck, The Obnoxious Prince] + - [Inigo, Montoya, The Spaniard] + - [Fezzik, '--', The Giant] diff --git a/patterns/base/table/sass/_table.css b/patterns/base/table/sass/_table.css new file mode 100644 index 00000000..227d448d --- /dev/null +++ b/patterns/base/table/sass/_table.css @@ -0,0 +1,19 @@ +.base--table, +.base--STYLED table { + width: 100%; } + +.base--thead, +.base--STYLED thead { + font-weight: bold; + color: setting-get("white"); + background-color: setting-get("primary color"); } + +.base--td, +.base--STYLED td { + padding: 1em; } + +.base--tr:nth-of-type(even), +.base--STYLED tr:nth-of-type(even) { + background-color: color("grayscale", 40); } + +/*# sourceMappingURL=_table.css.map */ diff --git a/patterns/base/table/sass/_table.css.map b/patterns/base/table/sass/_table.css.map new file mode 100644 index 00000000..79f9d585 --- /dev/null +++ b/patterns/base/table/sass/_table.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA;mBAAa;EACX,KAAK,EAAE,IAAI;;AAGb;mBAAa;EACX,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,oBAAoB;EAC3B,gBAAgB,EAAE,4BAA4B;;AAGhD;gBAAU;EACR,OAAO,EAAE,GAAG;;AAIZ;kCAAoB;EAClB,gBAAgB,EAAE,sBAAsB", +"sources": ["partials/_extends.scss"], +"names": [], +"file": "_table.css" +} \ No newline at end of file diff --git a/patterns/base/table/sass/_table.scss b/patterns/base/table/sass/_table.scss index e5c1ccd7..90079c32 100644 --- a/patterns/base/table/sass/_table.scss +++ b/patterns/base/table/sass/_table.scss @@ -5,6 +5,11 @@ @import 'partials/mixins'; @import 'partials/extends'; +.base--table, +.base--STYLED table { + @extend %base--table; +} + .base--thead, .base--STYLED thead { @extend %base--thead; diff --git a/patterns/base/table/sass/partials/_extends.css b/patterns/base/table/sass/partials/_extends.css new file mode 100644 index 00000000..31ca6aab --- /dev/null +++ b/patterns/base/table/sass/partials/_extends.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=_extends.css.map */ diff --git a/patterns/base/table/sass/partials/_extends.css.map b/patterns/base/table/sass/partials/_extends.css.map new file mode 100644 index 00000000..9af7b5d8 --- /dev/null +++ b/patterns/base/table/sass/partials/_extends.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "_extends.css" +} \ No newline at end of file diff --git a/patterns/base/table/sass/partials/_extends.scss b/patterns/base/table/sass/partials/_extends.scss index cd21fc47..1e8f7c85 100644 --- a/patterns/base/table/sass/partials/_extends.scss +++ b/patterns/base/table/sass/partials/_extends.scss @@ -1,7 +1,11 @@ +%base--table { + width: 100%; +} + %base--thead { font-weight: bold; color: setting-get('white'); - background-color: color('gray'); + background-color: setting-get('primary color'); } %base--td { diff --git a/patterns/base/ul/ul.html b/patterns/base/ul/ul.html index 10b25da5..25ef7764 100644 --- a/patterns/base/ul/ul.html +++ b/patterns/base/ul/ul.html @@ -1,5 +1,3 @@ -