├── js ├── production.js ├── production.min.js ├── main.js └── vendor │ ├── rainbow.min.js │ └── modernizr-2.6.2.min.js ├── robots.txt ├── .gitignore ├── images ├── type.png ├── logo-history-wporg.svg ├── logo-wpcom-vertical.svg ├── logo-wpcom.svg ├── handbook-logo.svg └── handbook-logo-horizontal.svg ├── fonts ├── noticons │ ├── Noticons.eot │ ├── Noticons.ttf │ └── Noticons.woff ├── dashicons │ ├── dashicons.eot │ ├── dashicons.ttf │ └── dashicons.woff ├── genericons │ ├── genericons-regular-webfont.eot │ ├── genericons-regular-webfont.ttf │ └── genericons-regular-webfont.woff └── automatticons │ ├── automatticons-regular-webfont.ttf │ ├── automatticons-regular-webfont-webfont.eot │ └── automatticons-regular-webfont-webfont.woff ├── scss ├── atoms │ ├── _avatars.scss │ ├── _clearfix.scss │ ├── _metrics.scss │ ├── _ie.scss │ ├── _functions.scss │ ├── colors │ │ └── _colors.scss │ ├── mixins │ │ ├── _responsive.scss │ │ └── _mixins.scss │ ├── _radio-buttons.scss │ ├── icons │ │ ├── _automatticons.scss │ │ ├── _icons.scss │ │ ├── _genericons.scss │ │ └── _dashicons.scss │ ├── _print.scss │ ├── _base.scss │ ├── typography │ │ └── _typography.scss │ ├── _helper.scss │ ├── _buttons.scss │ ├── animation │ │ └── _animation.scss │ └── _normalize.scss ├── organisms │ ├── _page-header.scss │ ├── _site-navigation.scss │ ├── _page-navigation.scss │ └── _site-header.scss ├── molecules │ ├── _form.scss │ ├── _nav-horizontal.scss │ ├── _nav-off-canvas.scss │ └── _wpcom-header.scss ├── style.scss └── templates │ ├── _page-colors.scss │ ├── _layout.scss │ ├── _page-typography.scss │ └── _page-patterns.scss ├── package.json ├── humans.txt ├── LICENSE.md ├── README.md ├── metrics └── index.html ├── index.html ├── patterns └── index.html ├── Gruntfile.js ├── logotype └── index.html ├── iconography └── index.html └── typography └── index.html /js/production.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/production.min.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .sass-cache/ 3 | *.map 4 | -------------------------------------------------------------------------------- /images/type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/images/type.png -------------------------------------------------------------------------------- /fonts/noticons/Noticons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/noticons/Noticons.eot -------------------------------------------------------------------------------- /fonts/noticons/Noticons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/noticons/Noticons.ttf -------------------------------------------------------------------------------- /fonts/noticons/Noticons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/noticons/Noticons.woff -------------------------------------------------------------------------------- /fonts/dashicons/dashicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/dashicons/dashicons.eot -------------------------------------------------------------------------------- /fonts/dashicons/dashicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/dashicons/dashicons.ttf -------------------------------------------------------------------------------- /fonts/dashicons/dashicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/dashicons/dashicons.woff -------------------------------------------------------------------------------- /fonts/genericons/genericons-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/genericons/genericons-regular-webfont.eot -------------------------------------------------------------------------------- /fonts/genericons/genericons-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/genericons/genericons-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/genericons/genericons-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/genericons/genericons-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/automatticons/automatticons-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/automatticons/automatticons-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/automatticons/automatticons-regular-webfont-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/automatticons/automatticons-regular-webfont-webfont.eot -------------------------------------------------------------------------------- /fonts/automatticons/automatticons-regular-webfont-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Automattic/design-handbook/HEAD/fonts/automatticons/automatticons-regular-webfont-webfont.woff -------------------------------------------------------------------------------- /scss/atoms/_avatars.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Avatars 3 | // ========================================================================== 4 | 5 | .avatar { 6 | float: left; 7 | margin-right: 15px; 8 | } 9 | .avatar--rounded { 10 | @extend .avatar; 11 | 12 | img { 13 | border-radius: 50%; 14 | } 15 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dotcom-style-guide", 3 | "version": "0.1.0", 4 | "devDependencies": { 5 | "grunt": "~0.4.1", 6 | "grunt-contrib-concat": "~0.3.0", 7 | "grunt-contrib-uglify": "~0.9.2", 8 | "grunt-contrib-imagemin": "~0.5.0", 9 | "grunt-contrib-watch": "~0.5.3", 10 | "grunt-contrib-sass": "~0.7.1", 11 | "grunt-autoprefixer": "~0.6.5" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/atoms/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // CLEARFIX 3 | // ========================================================================== 4 | 5 | @mixin clearfix() { 6 | &:before, &:after { 7 | content: ""; 8 | display: table; 9 | } 10 | &:after { 11 | clear: both; 12 | } 13 | } 14 | 15 | %clearfix { 16 | @include clearfix; 17 | } 18 | 19 | 20 | // default for all the .clearfix classes in the markup 21 | // (usage example) 22 | 23 | .clearfix { 24 | @extend %clearfix; 25 | } -------------------------------------------------------------------------------- /scss/atoms/_metrics.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // METRICS 3 | // Several Variables and extends for site dimensions 4 | // ========================================================================== 5 | 6 | 7 | // Variables 8 | 9 | $sidebar-width: 17.713em; 10 | 11 | $header-height: 13.288em; 12 | $masterbar-height: 2.625em; //47.250px on the modular scale 13 | 14 | 15 | $horizontal-linelenght: 34.444em; 16 | $horizontal-padding: 8.184em; 17 | 18 | $vertical-margin: 1.777em; 19 | $vertical-margindouble: 3.157em; 20 | 21 | // Extends 22 | 23 | %negative-margins { 24 | margin: auto $horizontal-padding * -1; 25 | padding: 0; 26 | } 27 | -------------------------------------------------------------------------------- /scss/organisms/_page-header.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // ARTICLE HEADER 3 | // The top of each page 4 | // ========================================================================== 5 | 6 | 7 | 8 | .page-header { 9 | 10 | h1 { 11 | font-size: $size-tera; 12 | line-height: 1.333; 13 | color: $blue-wordpress; 14 | @include breakpoint(phablet) { 15 | font-size: $size-alpha; 16 | } 17 | } 18 | p { 19 | font-family: $serif; 20 | font-size: $size-delta; 21 | font-weight: 300; 22 | text-rendering: optimizeLegibility; 23 | color: $gray; 24 | @include breakpoint(phablet) { 25 | font-size: $size-epsilon; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | # The humans responsible & technology colophon 3 | 4 | # TEAM 5 | 6 | Michael Arestad -- @michaelarestad 7 | 8 | # THANKS 9 | 10 | Everyone who worked on any of the technology Frankensteined into this glorious mess 11 | 12 | # TECHNOLOGY COLOPHON 13 | 14 | HTML5, CSS3, SCSS 15 | jQuery, Modernizr 16 | 17 | HTML5 ★ Boilerplate v4.0.1 18 | h5bp.com 19 | 20 | Bootstrap Responsive v2.2.1 21 | Copyright 2012 Twitter, Inc 22 | Licensed under the Apache License v2.0 23 | http://www.apache.org/licenses/LICENSE-2.0 24 | Designed and built with all the love in the world @twitter by @mdo and @fat. 25 | 26 | Tim Pietrusky's Off Canvas menu: 27 | http://codepen.io/TimPietrusky/pen/CLIsl -------------------------------------------------------------------------------- /scss/atoms/_ie.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // IE9 3 | // ========================================================================== 4 | 5 | .lt-ie10 { 6 | } 7 | 8 | // ========================================================================== 9 | // IE8 10 | // ========================================================================== 11 | 12 | .lt-ie9 { 13 | } 14 | 15 | // ========================================================================== 16 | // IE7 17 | // ========================================================================== 18 | 19 | .lt-ie8 { 20 | } 21 | 22 | // ========================================================================== 23 | // IE6 24 | // ========================================================================== 25 | 26 | .lt-ie7 { 27 | } -------------------------------------------------------------------------------- /scss/organisms/_site-navigation.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // SITE NAVIGATION 3 | // Sidebar/Drawer With the main Site Navigation 4 | // ========================================================================== 5 | 6 | .main-navigation { 7 | ul, li { 8 | font-family: $sans; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | & > ul { 13 | padding: 0; 14 | } 15 | 16 | 17 | a { 18 | display: block; 19 | padding: 0.618em 2.625em; 20 | color: rgba(white,.8); 21 | &:hover { 22 | background: rgba($blue-light,0.1); 23 | color: white; 24 | } 25 | } 26 | 27 | // second-level navigation 28 | li > ul a { 29 | padding-left: 4.536em; 30 | } 31 | 32 | // Current item 33 | li.current > a { 34 | background: rgba($blue-dark,0.15); 35 | font-weight: $bold; 36 | color: rgba(white,.9); 37 | } 38 | 39 | // Mobile menu trigger 40 | .menu-toggle { 41 | display: none; 42 | } 43 | } -------------------------------------------------------------------------------- /scss/atoms/_functions.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // FUNCTIONS 3 | // ========================================================================== 4 | 5 | // EM 6 | // Convert px to em in a readable fashion. 7 | // 8 | // USAGE: 9 | // 1. Set root-font-size in variables/_typographyscss 10 | // 2. Writing em(14) would convert 14px to em by dividing 14 by the 11 | // $root-font-size (Aviator default of 16 outputting 0.875em. 12 | // 3. If the font size has changed within an element, you will want to 13 | // calculate based on the new font size. For example, if you wanted 14 | // an element to have a padding of 28px and its font-size is 14, you 15 | // would write em(28,14). 16 | 17 | @function em($value, $root: "false") { 18 | @if $root == "false" { 19 | @return ($value/$root-font-size * 1em); 20 | } @else { 21 | @return ($value/$root * 1em); 22 | } 23 | } -------------------------------------------------------------------------------- /scss/atoms/colors/_colors.scss: -------------------------------------------------------------------------------- 1 | // Blues 2 | $blue-wordpress: #0085be; 3 | $blue-light: #78dcfa; 4 | $blue-medium: #00aadc; 5 | $blue-dark: #005082; 6 | 7 | // Grays 8 | $gray: #87a6bc; 9 | 10 | // $gray color functions: 11 | // 12 | // lighten( $gray, 10% ) 13 | // lighten( $gray, 20% ) 14 | // lighten( $gray, 30% ) 15 | // darken( $gray, 10% ) 16 | // darken( $gray, 20% ) 17 | // darken( $gray, 30% ) 18 | // 19 | // See wordpress.com/design-handbook/colors/ for more info. 20 | 21 | $gray-light: lighten( $gray, 33% ); //#f3f6f8 22 | $gray-dark: darken( $gray, 38% ); //#2e4453 23 | 24 | // Oranges 25 | $orange-jazzy: #f0821e; 26 | $orange-fire: #d54e21; 27 | 28 | // Alerts 29 | $alert-yellow: #f0b849; 30 | $alert-red: #d94f4f; 31 | $alert-green: #4ab866; 32 | 33 | // Essentials 34 | $white: rgba( 255,255,255,1 ); 35 | $transparent: rgba( 255,255,255,0 ); -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /scss/organisms/_page-navigation.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // PAGE NAVIGATION 3 | // Used on the bottom of each page to provide previous and next navigation 4 | // ========================================================================== 5 | 6 | .page-links { 7 | padding: 0; 8 | border-top: 1px solid rgba(lighten( $gray, 20% ),.5); 9 | ul { 10 | list-style: none; 11 | margin: 0; 12 | padding: 0; 13 | @extend %clearfix; 14 | li { 15 | &.page-links-previous a { 16 | float: left; 17 | &:before { 18 | content: 'Previously'; 19 | } 20 | } 21 | &.page-links-next a { 22 | float: right; 23 | text-align: right; 24 | &:before { 25 | content: 'Up next'; 26 | } 27 | } 28 | a { 29 | display: block; 30 | width: 45%; 31 | padding: 1.618em 0; 32 | &:before { 33 | display: block; 34 | font-family: $sans; 35 | font-weight: bold; 36 | font-size: 0.618em; 37 | text-transform: uppercase; 38 | letter-spacing: .03em; 39 | color: rgba(darken( $gray, 10% ),.5); 40 | } 41 | } 42 | } 43 | } 44 | } 45 | 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WordPress.com Design Handbook 2 | 3 | This is the repository for the WordPress.com Design Handbook – a style guide of all that is WordPress.com. 4 | 5 | - **Logotype**: History of the WordPress.com brand and guidelines for use of Logotype, the W mark, and sub-headings 6 | - **Colors**: List of our primary and secondary colors and their uses 7 | - **Typography**: Typefaces and ours Modular Scales 8 | - **Iconography**: Guidelines for uses of Iconography 9 | - **Metrics**: Exapanded Modular Scale grid 10 | - **Patterns**: Blueprints for several elements of WordPress.com 11 | 12 | ## URLs 13 | 14 | **Github Repo**: https://github.com/Automattic/design-handbook 15 | 16 | **Live Site**: https://WordPress.com/design-handbook 17 | 18 | 19 | ## Instructions to update the live site 20 | 21 | You'll need to manually copy the files over to the live path in `/themes/a8c/design-handbook/`with the exception of the following files and directories: 22 | 23 | - `/scss/` 24 | - `.gitignore` 25 | - `Gruntfile.js` 26 | - `package.json` 27 | - `LICENSE.md` 28 | 29 | There might be some files on your local copy that you shouldn't copy over either: 30 | 31 | - `/node_modules/` 32 | - `/css/style.css.map` 33 | -------------------------------------------------------------------------------- /scss/atoms/mixins/_responsive.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Responsive 3 | // Breakpoint Mixin 4 | // ========================================================================== 5 | 6 | 7 | // Add or remove breakpoints as you desire 8 | 9 | $breakpoints:( 10 | full-width: 960px, 11 | one-col: 660px, 12 | mobile: 480px, 13 | 14 | phone: 320px, 15 | phablet: 500px, 16 | tablet: 768px, 17 | narrow-desktop: 800px, 18 | desktop: 960px, 19 | wide-desktop: 1200px, 20 | billboard: 10000px 21 | ); 22 | 23 | 24 | // Mixin 25 | 26 | @mixin breakpoint($size){ 27 | @each $breakpoint, $value in $breakpoints { 28 | @if $size == $breakpoint { 29 | @media (max-width: map-get($breakpoints, $breakpoint)){ 30 | @content; 31 | } 32 | } 33 | } 34 | } 35 | 36 | 37 | // Usage Example 38 | 39 | // body { 40 | // @include breakpoint(tablet){ 41 | // font-size: 14px; 42 | // }; 43 | // } 44 | 45 | 46 | 47 | 48 | // Can't use the @extend in a media query, use this instead 49 | @mixin clear-text { 50 | -webkit-font-smoothing: antialiased; 51 | -moz-osx-font-smoothing: grayscale; 52 | } -------------------------------------------------------------------------------- /scss/atoms/_radio-buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // RADIO BUTTONS! 3 | // ========================================================================== 4 | 5 | 6 | input[type=radio] { 7 | display: inline-block; 8 | margin: -3px 0 0 15px; 9 | padding: 0; 10 | width: 16px; 11 | height: 16px; 12 | color: #555; 13 | line-height: 0; 14 | text-align: center; 15 | border: 1px solid #bbb; 16 | border-radius: 50%; 17 | background: #fff; 18 | outline: 0; 19 | cursor: pointer; 20 | vertical-align: middle; 21 | -webkit-appearance: none; 22 | 23 | &:checked:before { 24 | float: left; 25 | display: inline-block; 26 | content: '\2022'; 27 | margin: 3px; 28 | width: 8px; 29 | height: 8px; 30 | text-indent: -9999px; 31 | background: $blue-light; 32 | vertical-align: middle; 33 | border-radius: 50%; 34 | animation: grow .2s ease-in-out; 35 | } 36 | + label { 37 | margin-right: 15px; 38 | padding-left: 4px; 39 | font-size: em(14); 40 | cursor: pointer; 41 | } 42 | } 43 | 44 | @keyframes grow { // Needs to be rewritten if used 45 | 0% { 46 | transform: scale(.3); 47 | } 48 | 60% { 49 | transform: scale(1.15); 50 | } 51 | 100% { 52 | transform: scale(1); 53 | } 54 | }; -------------------------------------------------------------------------------- /scss/atoms/icons/_automatticons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Automatticons v? 3 | // ========================================================================== 4 | 5 | @font-face { 6 | font-family: 'automatticons'; 7 | src: url('../fonts/automatticons/automatticons-regular-webfont-webfont.eot'); 8 | src: url('../fonts/automatticons/automatticons-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('../fonts/automatticons/automatticons-regular-webfont-webfont.woff') format('woff'), 10 | url('../fonts/automatticons/automatticons-regular-webfont-webfont.ttf') format('truetype'), 11 | url('../fonts/automatticons/automatticons-regular-webfont-webfont.svg#automatticonsregular') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | // Variables if you want, but mostly for reference. 17 | 18 | // $a11s-automattic: 'A'; 19 | // $a11s-code-poet: 'C'; 20 | // $a11s-facebook: 'F'; 21 | // $a11s-gravatar: 'G'; 22 | // $a11s-inferno: 'I'; // Not sure what this one is 23 | // $a11s-jetpack: 'J'; 24 | // $a11s-akismet: 'K'; 25 | // $a11s-polldaddy: 'P'; 26 | // $a11s-shield: 's'; // VaultPress shield 27 | // $a11s-vaultpress: 'V'; 28 | // $a11s-vaultpress-inverted: 'v'; 29 | // $a11s-wordpress: 'W'; -------------------------------------------------------------------------------- /scss/atoms/icons/_icons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base icons rules 3 | // 4 | // Make sure you apply -webkit-font-smoothing: antialiased; to your icons 5 | // 6 | // ========================================================================== 7 | 8 | .icon { 9 | &:before { 10 | display: inline-block; 11 | position: relative; 12 | top: em(3); 13 | margin-right: em(4); 14 | font-family: $icon; // Automatticons & Genericons 15 | font-weight: normal; 16 | font-size: 1.375em; 17 | -webkit-font-smoothing: antialiased; 18 | } 19 | } 20 | 21 | .wpcom-logo { 22 | $size: 32px; 23 | 24 | display: inline-block; 25 | position: relative; 26 | width: $size; 27 | height: $size; 28 | text-indent: -9999px; 29 | margin-right: 10px; 30 | 31 | &:after { 32 | content: 'W'; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | font-size: $size; 38 | line-height: 1; 39 | font-family: $icon; // Automatticons & Genericons 40 | font-weight: normal; 41 | text-indent: 0; 42 | -webkit-font-smoothing: antialiased; 43 | } 44 | } 45 | // If you want to reuse/resize do something like: 46 | // .foo.wpcom-logo { 47 | // $size: 50px; 48 | 49 | // color: $blue-light; 50 | // width: $size; 51 | // height: $size; 52 | 53 | // &:after { 54 | // font-size: $size; 55 | // } 56 | // } -------------------------------------------------------------------------------- /scss/molecules/_form.scss: -------------------------------------------------------------------------------- 1 | // Below, you can choose from either using global form styles or class-driven 2 | // form styles. By default, the global styles are on. 3 | 4 | %form { 5 | ul { 6 | margin: 0; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | } 11 | 12 | %form-field { 13 | // margin-bottom: 20px; 14 | margin: 0; 15 | padding: 10px 12px; 16 | width: 100%; 17 | color: #555; 18 | font-size: 15px; 19 | line-height: 1.4; 20 | border: 1px solid #dfdfdf; 21 | background: #f9f9f9; 22 | transition: all .15s ease-in-out; 23 | 24 | &::placeholder { 25 | color: #aaa; 26 | } 27 | 28 | &:hover { 29 | border-color: #aaa; 30 | background: #fff; 31 | 32 | &::placeholder { 33 | color: #888; 34 | } 35 | } 36 | &:focus { 37 | color: #5c6671; 38 | border-color: #1e8cbe; 39 | background: #fff; 40 | outline: none; 41 | box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.3); 42 | 43 | &::placeholder { 44 | color: #888; 45 | } 46 | } 47 | } 48 | %textarea { 49 | min-height: em(84,15); 50 | } 51 | 52 | // ========================================================================== 53 | // Global form elements 54 | // ========================================================================== 55 | 56 | form { 57 | @extend %form; 58 | } 59 | input[type="text"], 60 | input[type="email"], 61 | input[type="password"], 62 | textarea { 63 | @extend %form-field; 64 | } 65 | textarea { 66 | @extend %textarea; 67 | } -------------------------------------------------------------------------------- /scss/molecules/_nav-horizontal.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // HORIZONTAL NAVIGATION 3 | // 4 | // Includes basic functionality and dropdowns. 5 | // 6 | // Add .nav-horizontal to the top level ul and, BOOM!, done! 7 | // ========================================================================== 8 | 9 | .nav-horizontal { 10 | text-align: center; 11 | 12 | ul { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | > ul { 17 | display: inline-block; 18 | 19 | > li { 20 | float: left; 21 | } 22 | } 23 | li { 24 | position: relative; 25 | text-align: left; 26 | 27 | &:hover { 28 | background: #fbfdfd; 29 | } 30 | 31 | > ul { 32 | display: none; 33 | position: absolute; 34 | top: 100%; 35 | left: 0; 36 | width: 12.5em; // 200/16 37 | background: #fbfdfd; 38 | z-index: 1; // Keeps hover state on top 39 | } 40 | li > ul { 41 | left: 100%; 42 | top: 0; 43 | } 44 | &:hover > ul { 45 | display: block; 46 | } 47 | } 48 | a { 49 | display: block; 50 | padding: 0.4375em 0.8125em; // 7/16 13/16 51 | color: #222; 52 | 53 | &:visited { 54 | color: #222; 55 | } 56 | &:hover { 57 | color: #d22; 58 | text-decoration: none; 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /scss/atoms/_print.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Print styles. 3 | // Inlined to avoid required HTTP connection: h5bp.com/r 4 | // ========================================================================== 5 | @media print { 6 | * { 7 | background: transparent !important; 8 | color: #000 !important; // Black prints faster: h5bp.com/s 9 | box-shadow: none !important; 10 | text-shadow: none !important; 11 | } 12 | 13 | a, 14 | a:visited { 15 | text-decoration: underline; 16 | } 17 | 18 | a[href]:after { 19 | content: " (" attr(href) ")"; 20 | } 21 | 22 | abbr[title]:after { 23 | content: " (" attr(title) ")"; 24 | } 25 | 26 | // Don't show links for images, or javascript/internal links 27 | .ir a:after, 28 | a[href^="javascript:"]:after, 29 | a[href^="#"]:after { 30 | content: ""; 31 | } 32 | 33 | pre, 34 | blockquote { 35 | border: 1px solid #999; 36 | page-break-inside: avoid; 37 | } 38 | 39 | thead { 40 | display: table-header-group; // h5bp.com/t 41 | } 42 | 43 | tr, 44 | img { 45 | page-break-inside: avoid; 46 | } 47 | 48 | img { 49 | max-width: 100% !important; 50 | } 51 | 52 | @page { 53 | margin: 0.5cm; 54 | } 55 | 56 | p, 57 | h2, 58 | h3 { 59 | orphans: 3; 60 | widows: 3; 61 | } 62 | 63 | h2, 64 | h3 { 65 | page-break-after: avoid; 66 | } 67 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var wpStyleGuide; 2 | (function($) { 3 | 4 | wpStyleGuide = { 5 | init: function() { 6 | 7 | $( '.library-logo' ).on( 'click', function() { 8 | $( 'body' ).toggleClass( 'sidebar-open' ); 9 | } ); 10 | 11 | $( '.icon-list' ).on( 'click', '.noticon', function() { 12 | var list = $( '.icon-list' ), 13 | icon = $( this ), 14 | icon_class = icon.attr( 'class' ), 15 | icon_name = icon.attr( 'class' ).split(' noticon-')[1], 16 | icon_number = icon.attr('alt') 17 | details = $( '.icon-details' ), 18 | details_glyph = details.find( '.glyph' ), 19 | details_name = details.find( '.name' ); 20 | 21 | if ( icon.hasClass( 'selected' ) ) { 22 | list.find( '.selected' ).removeClass( 'selected' ); 23 | details.removeClass( 'open' ); 24 | } else { 25 | list.find( '.selected' ).removeClass( 'selected' ); 26 | icon.toggleClass( 'selected' ); 27 | 28 | details_glyph.attr( 'class', 'glyph' ); 29 | details_glyph.addClass( icon_class ); 30 | details_name.html( icon_name ); 31 | 32 | details.addClass( 'open' ); 33 | } 34 | 35 | 36 | console.log( icon_name ); 37 | 38 | } ); 39 | 40 | }, 41 | 42 | copyToClipboard: function( text, copyMode ) { 43 | if ( copyMode == "css" ) { 44 | window.prompt( "Copy this, then paste in your CSS :before selector.", text ); 45 | } else if ( copyMode == "html" ) { 46 | window.prompt( "Copy this, then paste in your HTML.", text ); 47 | } else { 48 | window.prompt( "Copy this, then paste in your Photoshop textfield.", text ); 49 | } 50 | } 51 | } 52 | 53 | $(document).ready(function($){ wpStyleGuide.init(); }); 54 | 55 | })(jQuery); -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WordPress.com Styles 4 | 5 | */ 6 | 7 | 8 | // Based loosely on HTML5 Boilerplate 9 | 10 | 11 | // Variables 12 | @import "atoms/colors/colors"; // Colors 13 | @import "atoms/typography/typography"; // Typography 14 | @import "atoms/metrics"; // Metrics Variables and Extends 15 | 16 | // Functions 17 | @import "atoms/functions.scss"; // Nifty functions. Take a look! 18 | 19 | // Mixins 20 | @import "atoms/mixins/mixins"; // Fancy mixins full of nifty patterns 21 | 22 | // Fonts and Icon fonts 23 | @import "atoms/icons/icons"; // Base icon rules 24 | @import "atoms/icons/noticons"; // Noticons icon font 25 | @import "atoms/icons/genericons"; // Genericons icon font 26 | @import "atoms/icons/dashicons"; // Dashicons icon font 27 | @import "atoms/icons/automatticons"; // Automatticons icon font 28 | 29 | // Normalize 30 | @import "atoms/normalize"; // Normalize.css + a goody or two 31 | @import "atoms/clearfix"; // Provides a clearfix extend 32 | @import "atoms/base"; // Style naked elements 33 | 34 | // Partials 35 | @import "atoms/avatars"; // Avatar styles 36 | @import "atoms/buttons"; // Button styles 37 | //@import "atoms/radio-buttons"; // Radio button styles 38 | @import "molecules/form"; // Textarea and input styles 39 | @import "molecules/nav-horizontal"; // Horizontal navigation 40 | @import "molecules/nav-off-canvas"; // Slide-in "hamburger" or drawer menu for small screens 41 | //@import "molecules/wpcom-header"; // Blue WordPress.com Header 42 | 43 | // Templates Parts 44 | @import "organisms/site-header"; 45 | @import "organisms/site-navigation"; 46 | @import "organisms/page-header"; 47 | @import "organisms/page-navigation"; 48 | @import "templates/layout"; // Basic Layout build 49 | 50 | // Pages 51 | @import "templates/page-colors"; 52 | @import "templates/page-typography"; 53 | 54 | // Support styles 55 | @import "atoms/helper"; // Some useful helper classes 56 | @import "atoms/ie"; // IE-specific styling :D 57 | @import "atoms/print"; // Print styling 58 | -------------------------------------------------------------------------------- /metrics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Metrics | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 |
40 | 41 |
42 |

Metrics

43 |

Based on our harmonic scale, our grid provides the structure for every page on WordPress.com.

44 |
45 | 46 |

We’re still writing this one, so hang in there.

47 | 48 |
49 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /scss/atoms/_base.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base styles: opinionated defaults 3 | // ========================================================================== 4 | 5 | html, 6 | button, 7 | input, 8 | select, 9 | textarea { 10 | color: $gray-dark; 11 | } 12 | html, 13 | body { 14 | background: $gray-light; 15 | } 16 | 17 | // (highlight color, text color) 18 | ::selection { 19 | background: $blue-medium; 20 | color: #fff; 21 | text-shadow: none; 22 | } 23 | 24 | 25 | 26 | // ========================================================================== 27 | // Links 28 | // ========================================================================== 29 | 30 | a { 31 | color: $blue-medium; 32 | text-decoration: none; 33 | 34 | &:visited { 35 | color: $blue-medium; 36 | } 37 | &:hover { 38 | color: $blue-wordpress; 39 | } 40 | &:focus { 41 | outline: thin dotted; 42 | } 43 | } 44 | 45 | // ========================================================================== 46 | // Basic block-level elements 47 | // ========================================================================== 48 | 49 | address { 50 | margin: 0 0 1.5em; 51 | } 52 | 53 | // ========================================================================== 54 | // Text-level markup 55 | // ========================================================================== 56 | 57 | abbr[title], 58 | acronym { 59 | cursor: help; 60 | } 61 | 62 | ins { 63 | background: #eee; 64 | text-decoration: none; 65 | } 66 | 67 | // ========================================================================== 68 | // Media elements 69 | // ========================================================================== 70 | 71 | // Remove the gap between images and the bottom of their containers: h5bp.com/i/440 72 | img { 73 | vertical-align: middle; 74 | } 75 | 76 | // ========================================================================== 77 | // Lists 78 | // ========================================================================== 79 | 80 | dt { 81 | font-weight: $bold; 82 | } 83 | 84 | // ========================================================================== 85 | // Forms 86 | // ========================================================================== 87 | 88 | // Remove default fieldset styles. 89 | fieldset { 90 | border: 0; 91 | margin: 0; 92 | padding: 0; 93 | } 94 | 95 | // Allow only vertical resizing of textareas. 96 | textarea { 97 | resize: vertical; 98 | } 99 | 100 | // A better looking default horizontal rule 101 | hr { 102 | display: block; 103 | height: 1px; 104 | border: 0; 105 | border-top: 1px solid #ccc; 106 | margin: 1em 0; 107 | padding: 0; 108 | } 109 | -------------------------------------------------------------------------------- /scss/molecules/_nav-off-canvas.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // HAMBURGER (DRAWER) MENU 3 | // 4 | // Based on Tim Pietrusky's Off Canvas menu: 5 | // http://codepen.io/TimPietrusky/pen/CLIsl 6 | // 7 | // Refer to hamburger.kit as an example for quick setup. 8 | // 9 | // SETUP: 10 | // 1. Copy the input and following label from hamburger.kit and paste them 11 | // above your menu. 12 | // [lines 5-6 of hamburger.kit] 13 | // 2. Add the class .nav-off-canvas to the menu container (nav or div). 14 | // [line 8 of hamburger.kit] 15 | // 3. Add the class .site-content__wrapper to the element containing all elements on the 16 | // website below the menu. 17 | // [line 32 of hamburger.kit] 18 | // ========================================================================== 19 | 20 | 21 | // Main content goes in this container to behave properly on small screens 22 | .site-content__wrapper { 23 | position: relative; 24 | width: 100%; 25 | overflow-x: hidden; 26 | } 27 | // Advanced Checkbox Hack 28 | .checkbox-off-canvas { 29 | position: absolute; 30 | top: -9999px; 31 | left: -9999px; 32 | } 33 | .label-off-canvas { 34 | display: none; 35 | position: fixed; 36 | right: 0; 37 | top: 0; 38 | color: #fff; 39 | font: 30px/44px $sans; // Change to Dashicon? 40 | cursor: pointer; 41 | user-select: none; 42 | z-index: 10001; 43 | 44 | &:after { 45 | content:"\2261"; 46 | display: block; 47 | width: 44px; 48 | text-align: center; 49 | } 50 | } 51 | 52 | // iPad and smaller 53 | @media screen and (max-width: 768px) { 54 | $menu_width: 260px; 55 | 56 | .site-content__wrapper { 57 | position: fixed; 58 | top: 46px; 59 | left: 0; 60 | bottom: 0; 61 | padding: 0 10px; 62 | } 63 | .nav-off-canvas, 64 | .site-content__wrapper { 65 | transition: all .3s ease-in-out; 66 | transform: translate3d(0px, 0px, 0px); 67 | } 68 | .nav-off-canvas { 69 | position: fixed; 70 | top: 46px; 71 | bottom: 0; 72 | right: -$menu_width; 73 | width: $menu_width; 74 | overflow: scroll; 75 | 76 | ul { 77 | margin: 0; 78 | padding: 0; 79 | width: 100%; 80 | 81 | > li { 82 | width: 100%; 83 | } 84 | } 85 | li { 86 | float: none; 87 | width: 100%; 88 | 89 | > ul { 90 | position: static; 91 | display: block; 92 | width: $menu_width; 93 | } 94 | } 95 | a, 96 | a:hover, 97 | a:visited { 98 | display: block; 99 | width: 100%; 100 | } 101 | } 102 | .label-off-canvas { 103 | display: block; 104 | } 105 | .checkbox-off-canvas:checked ~ .label-off-canvas { 106 | color: #fff; 107 | } 108 | .checkbox-off-canvas:checked ~ .wpcom-header .nav-off-canvas, 109 | .checkbox-off-canvas:checked ~ .site-content__wrapper { 110 | transform: translate3d(-$menu-width, 0px, 0px); 111 | } 112 | } -------------------------------------------------------------------------------- /scss/atoms/typography/_typography.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Typography 3 | // ========================================================================== 4 | 5 | 6 | 7 | $root-font-size: 18; // In pixels 8 | $root-scale-ratio: 1.333; //used as global line-height as well 9 | 10 | 11 | 12 | // Weights 13 | 14 | $normal: 400; 15 | $bold: 700; 16 | $serif-bold: 700; 17 | 18 | 19 | 20 | // Typeface Variables 21 | 22 | $monospace: 'Courier 10 Pitch', Courier, monospace; 23 | $code: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', $monospace; 24 | 25 | $serif-fallback: Georgia, "Times New Roman", Times, serif; 26 | $serif: 'Merriweather', $serif-fallback; 27 | 28 | $sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; 29 | $sans-rtl: Tahoma, $sans; 30 | 31 | // NOTE: 32 | // If there are exceptions to these stacks, 33 | // please mark them with a //typography-exception comment 34 | // so we can easily search for them later. 35 | 36 | // Sizes 37 | 38 | $size-tera: 3.157em; 39 | $size-giga: 2.592em; 40 | $size-alpha: 2.369em; 41 | $size-beta: 1.777em; 42 | $size-gamma: 1.459em; 43 | $size-delta: 1.333em; 44 | $size-epsilon: 1.094em; 45 | $size-zeta: 1em; 46 | 47 | // Icons 48 | 49 | $genericons: 'Genericons', Arial, sans-serif; 50 | $dashicons: 'Dashicons', Arial, sans-serif; 51 | $noticons: 'Noticons', Arial, sans-serif; 52 | $automatticons: 'automatticons', Arial, sans-serif; 53 | $icon: 'automatticons', 'genericons', $sans; 54 | 55 | @mixin noticon($char, $size) { 56 | // This isn't very clean, but... we'll see ;) 57 | font-size: $size; 58 | content: $char; 59 | 60 | // Copied verbatim 61 | vertical-align: top; 62 | text-align: center; 63 | -moz-transition: color .1s ease-in 0; 64 | -webkit-transition: color .1s ease-in 0; 65 | display: inline-block; 66 | font-family: "Noticons"; 67 | font-style: normal; 68 | font-weight: normal; 69 | font-variant: normal; 70 | line-height: 1; 71 | text-decoration: inherit; 72 | text-transform: none; 73 | -moz-osx-font-smoothing: grayscale; 74 | -webkit-font-smoothing: antialiased; 75 | speak: none; 76 | } 77 | 78 | 79 | 80 | 81 | // Styles 82 | 83 | body { 84 | font-size: $root-font-size * 1px; // See EM in _functions.scss for info 85 | line-height: 1.618; 86 | font-family: $serif; 87 | } 88 | 89 | h1, 90 | h2, 91 | h3, 92 | h4, 93 | h5, 94 | h6 { 95 | font-family: $serif; 96 | font-weight: $serif-bold; 97 | text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning 98 | } 99 | 100 | .page h2 { 101 | font-size: $size-beta; 102 | } 103 | 104 | .page h3 { 105 | font-size: $size-gamma; 106 | } 107 | 108 | .page h4 { 109 | font-size: $size-delta; 110 | } 111 | 112 | .page h5, 113 | .page h6 { 114 | font-size: $size-epsilon; 115 | } 116 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 |
40 | 41 |
42 |

Introduction

43 |

Welcome to the WordPress.com Design Handbook. These pages are meant to serve as design language guidelines for all that is WordPress.com branded.

44 |
45 | 46 |

Through the development of the new WordPress.com user interface, codenamed Calypso, we’ve aimed to document and apply some guidelines for consistency across WordPress.com pages and sites. This handbook aims to further that engagement on design consistency and brand focus.

47 | 48 |

In this guide we’ll go through most elements that can be abstracted — like our brand logotype, colors, typography, iconography, and even some practical examples. All that you’ll see written here is meant to serve as a guideline. Ultimately you should use your design experience to make decisions, keeping in mind that there should be concrete reasons to break these rules.

49 | 50 |

Let’s get started!

51 | 52 |

53 | 58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /scss/organisms/_site-header.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // HEADER 3 | // Site Header 4 | // ========================================================================== 5 | 6 | 7 | 8 | // Styles 9 | 10 | .site-header { 11 | background: $blue-wordpress url('../images/handbook-logo.svg') no-repeat 50% 20%; 12 | background-size: 80%; 13 | .site-branding { 14 | visibility: hidden; 15 | } 16 | 17 | @include breakpoint(narrow-desktop) { 18 | background-image: url('../images/handbook-logo-horizontal.svg'); 19 | background-position: 50% 50%; 20 | background-size: 90%; 21 | margin: 0; 22 | padding: $vertical-margin / 2; 23 | } 24 | 25 | @include breakpoint(phablet) { 26 | background-image: url('../images/handbook-logo.svg'); 27 | background-size: 60%; 28 | padding: $vertical-margindouble; 29 | } 30 | 31 | /* 32 | 33 | color: rgba(white,.95); 34 | 35 | -moz-osx-font-smoothing: grayscale; 36 | -webkit-font-smoothing: antialiased; 37 | 38 | //box-shadow: inset 0 -5px rgba(0, 86, 132, 0.1); 39 | 40 | h1 { 41 | display: inline; 42 | font-size: 1.75em; 43 | font-family: $sans; 44 | font-weight: 400; 45 | line-height: 1.2; 46 | margin: 0; 47 | 48 | 49 | .design-handbook { 50 | display: block; 51 | font-size: 0.667em; 52 | font-weight: $bold; 53 | text-transform: uppercase; 54 | color: rgba(white,.5) 55 | } 56 | } 57 | 58 | a { 59 | color: rgba(white,.9); 60 | text-decoration: none; 61 | &:hover { 62 | color: white; 63 | } 64 | } 65 | 66 | .site-branding { 67 | margin: 1.75em 0 2.625em 2.25em; 68 | @include breakpoint(narrow-desktop) { 69 | margin: 0; 70 | padding: $vertical-margin $vertical-margindouble; 71 | } 72 | 73 | &:before { 74 | @include noticon( "\f205", 32px); 75 | margin: 0.102em 0 0 -1.2em; 76 | position: absolute; 77 | color: rgba(white,.9) 78 | } 79 | } 80 | */ 81 | 82 | } 83 | 84 | 85 | /** 86 | * The WordPress.com Masterbar 87 | */ 88 | 89 | /* 90 | 91 | .site-header { 92 | display: block; 93 | background: $blue-wordpress; 94 | color: rgba(white,.95); 95 | height: $masterbar-height; 96 | position: fixed; 97 | left: 0; 98 | top: 0; 99 | width: 100%; 100 | 101 | -webkit-font-smoothing: subpixel-antialiased; 102 | // box-shadow: inset 0 -2px rgba(0, 86, 132, 0.2); 103 | 104 | @include breakpoint( large-screens ) { 105 | width: 100%; 106 | margin-left: 0%; 107 | } 108 | 109 | h1 { 110 | display: inline-block; 111 | font-size: 1em; 112 | font-family: $sans; 113 | line-height: $masterbar-height; 114 | margin: 0; 115 | } 116 | 117 | a { 118 | color: rgba(white,.9); 119 | text-decoration: none; 120 | &:hover { 121 | color: white; 122 | } 123 | } 124 | 125 | .site-branding { 126 | padding: 0 0.519em; 127 | @include breakpoint(mobile) { 128 | padding: 0; 129 | } 130 | 131 | &:before { 132 | @include noticon( "\f205", 32px); 133 | line-height: 1.45; 134 | margin: 0; 135 | } 136 | } 137 | 138 | } 139 | 140 | */ -------------------------------------------------------------------------------- /scss/atoms/_helper.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Helper classes 3 | // ========================================================================== 4 | 5 | // Image replacement 6 | .ir { 7 | background-color: transparent; 8 | border: 0; 9 | overflow: hidden; 10 | *text-indent: -9999px; // IE 6/7 fallback 11 | } 12 | 13 | .ir:before { 14 | content: ""; 15 | display: block; 16 | width: 0; 17 | height: 100%; 18 | } 19 | 20 | // Hide from both screenreaders and browsers: h5bp.com/u 21 | .hidden { 22 | display: none !important; 23 | visibility: hidden; 24 | } 25 | 26 | // Hide only visually, but have it available for screenreaders: h5bp.com/v 27 | .visuallyhidden { 28 | border: 0; 29 | clip: rect(0 0 0 0); 30 | height: 1px; 31 | margin: -1px; 32 | overflow: hidden; 33 | padding: 0; 34 | position: absolute; 35 | width: 1px; 36 | } 37 | 38 | // Extends the .visuallyhidden class to allow the element to be focusable 39 | // when navigated to via the keyboard: h5bp.com/p 40 | .visuallyhidden.focusable:active, 41 | .visuallyhidden.focusable:focus { 42 | clip: auto; 43 | height: auto; 44 | margin: 0; 45 | overflow: visible; 46 | position: static; 47 | width: auto; 48 | } 49 | 50 | // Hide visually and from screenreaders, but maintain layout 51 | .invisible { 52 | visibility: hidden; 53 | } 54 | 55 | // Clearfix: contain floats 56 | // 57 | // For modern browsers 58 | // 1. The space content is one way to avoid an Opera bug when the 59 | // `contenteditable` attribute is included anywhere else in the document. 60 | // Otherwise it causes space to appear at the top and bottom of elements 61 | // that receive the `clearfix` class. 62 | // 2. The use of `table` rather than `block` is only necessary if using 63 | // `:before` to contain the top-margins of child elements. 64 | .clearfix:before, 65 | .clearfix:after { 66 | content: " "; // 1 67 | display: table; // 2 68 | } 69 | .clearfix:after { 70 | clear: both; 71 | } 72 | 73 | // For IE 6/7 only 74 | // Include this rule to trigger hasLayout and contain floats. 75 | .clearfix { 76 | *zoom: 1; 77 | } 78 | 79 | // Text meant only for screen readers 80 | .assistive-text { 81 | clip: rect(1px 1px 1px 1px); // IE6, IE7 82 | clip: rect(1px, 1px, 1px, 1px); 83 | position: absolute !important; 84 | } 85 | 86 | // Alignment 87 | .alignleft { 88 | display: inline; 89 | float: left; 90 | margin-right: 2em; 91 | } 92 | .alignright { 93 | display: inline; 94 | float: right; 95 | margin-left: 2em; 96 | } 97 | .aligncenter { 98 | clear: both; 99 | display: block; 100 | margin: 0 auto; 101 | } 102 | .textcenter { 103 | text-align: center; 104 | } 105 | 106 | // Show/hide toggle classes 107 | .view { 108 | display: block; 109 | } 110 | .secrets { 111 | display: none; 112 | } 113 | .show + .secrets { 114 | display: block 115 | } 116 | .secrets .view, 117 | .secrets .secrets { 118 | margin-left: 1.25em; 119 | } -------------------------------------------------------------------------------- /patterns/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Components | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 |
40 | 41 |
42 |

Patterns

43 |

A collection of blueprints.

44 |
45 | 46 |

We maintain a collection of Calypso design templates for Sketch that can be used for designing interfaces for WordPress.com and our native apps. The Sketch document includes form fields, buttons, sample typography, notices, dialogs, dropdowns, sample gravatars/blavatars, and more. This document is a work in progress and some components may be missing our outdated. You’ll need the Merriweather, Roboto, and San Francisco fonts installed.

47 | 48 |

A collection of live design patterns can be found in Calypso Docs (requires a WordPress.com account).

49 | 50 |
51 | 57 |
58 | 59 |
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /scss/atoms/_buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Buttony button buttons 3 | // ========================================================================== 4 | 5 | %button { 6 | display: inline-block; 7 | padding: em(9,13) em(15,13); 8 | font-size: em(13); 9 | font-weight: 400; 10 | line-height: 1; 11 | color: #dcedf5; 12 | text-shadow: 0 -1px 0 rgba(0,116,162,0.8); 13 | border: none; 14 | border-radius: 3px; 15 | background: #54b2de; 16 | box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 17 | cursor: pointer; 18 | outline: none; 19 | @include gradient(#278dbc, #0074a2); 20 | 21 | &:hover { 22 | color: #fff; 23 | text-shadow: 0 -1px 0 rgb(0,116,162); 24 | box-shadow: 25 | inset 0 1px 0 #2ea2cc, 26 | inset 0 2px 0 rgba(120,200,230,0.7) 27 | ; 28 | @include gradient(#2ea2cc, #0074a2); 29 | } 30 | &:active { 31 | color:rgba(255,255,255,.9); 32 | background: #3089b0; 33 | box-shadow: 34 | inset 0 1px 5px #005684, 35 | inset 0 -1px 0 #278dbc 36 | ; 37 | @include gradient(#278dbc, #0074a2); 38 | } 39 | } 40 | %button_disabled { 41 | color: #94cde7; 42 | box-shadow: none; 43 | background: #298cba; 44 | } 45 | 46 | 47 | // ========================================================================== 48 | // Buttons 49 | // ========================================================================== 50 | 51 | button, 52 | html input[type="button"], 53 | input[type="reset"], 54 | input[type="submit"] { 55 | @extend %button; 56 | } 57 | // Disabled buttons 58 | button[disabled], 59 | input[disabled], 60 | input[disabled]:hover { 61 | @extend %button_disabled; 62 | } 63 | 64 | 65 | // ========================================================================== 66 | // Button classes 67 | // ========================================================================== 68 | 69 | 70 | .button--primary, 71 | .button--secondary { 72 | @extend %button; 73 | } 74 | .button--primary[disabled], 75 | // .button--primary.disabled, Maybe? 76 | .button--primary:disabled { 77 | @extend %button_disabled; 78 | cursor: default; 79 | } 80 | .button--secondary { 81 | color: #555; 82 | text-shadow: 0 1px 0 rgba(255,255,255,.7); 83 | box-shadow: 84 | inset 0 1px 0 rgba(0,0,0,.05), 85 | inset 0 2px 0 rgba(255,255,255,.4), 86 | inset 0 -1px 1px rgba(0,0,0,0.1) 87 | ; 88 | @include gradient(#f5f5f5, #ddd); 89 | 90 | &:hover { 91 | color: #222; 92 | text-shadow: 0 1px 0 rgba(255,255,255,.7); 93 | box-shadow: 94 | inset 0 1px 0 rgba(0,0,0,.05), 95 | inset 0 2px 0 rgba(255,255,255,.5), 96 | inset 0 -1px 1px rgba(0,0,0,0.1) 97 | ; 98 | @include gradient(#fff, #ddd); 99 | } 100 | &:active { 101 | color: #555; 102 | text-shadow: 0 1px 0 rgba(255,255,255,.3); 103 | box-shadow: 104 | inset 0 1px 5px rgba(0,0,0,.3), 105 | inset 0 -1px 0 rgba(255,255,255,.5) 106 | ; 107 | @include gradient(#f5f5f5, #ddd); 108 | } 109 | } 110 | .button--secondary[disabled], 111 | // .button--secondary.disabled, Maybe? 112 | .button--secondary:disabled { 113 | color: #999; 114 | box-shadow: none; 115 | background: #e3e3e3; 116 | cursor: default; 117 | } -------------------------------------------------------------------------------- /scss/templates/_page-colors.scss: -------------------------------------------------------------------------------- 1 | // Color definitions 2 | 3 | .wpcom-blue { background-color: $blue-wordpress; } 4 | .light-blue { background-color: $blue-light; } 5 | .medium-blue { background-color: $blue-medium; } 6 | .dark-blue { background-color: $blue-dark; } 7 | .gray { background-color: $gray; } 8 | .gray-light { background-color: $gray-light; } 9 | .gray-lighten-30 { background-color: lighten( $gray, 30); } 10 | .gray-lighten-20 { background-color: lighten( $gray, 20); } 11 | .gray-lighten-10 { background-color: lighten( $gray, 10); } 12 | .gray-darken-10 { background-color: darken( $gray, 10); } 13 | .gray-darken-20 { background-color: darken( $gray, 20); } 14 | .gray-darken-30 { background-color: darken( $gray, 30); } 15 | .gray-dark { background-color: $gray-dark; } 16 | .fire-orange { background-color: $orange-fire; } 17 | .jazzy-orange { background-color: $orange-jazzy; } 18 | .valid-green { background-color: $alert-green; } 19 | .warning-yellow { background-color: $alert-yellow; } 20 | .error-red { background-color: $alert-red; } 21 | 22 | // Color Swatch 23 | 24 | .swatches { 25 | &:after { 26 | visibility: hidden; 27 | display: block; 28 | font-size: 0; 29 | content: " "; 30 | clear: both; 31 | height: 0; 32 | } 33 | 34 | .swatch { 35 | width: 100%; 36 | min-width: 170px; 37 | height: 360px; 38 | position: relative; 39 | float: left; 40 | border: 1px solid rgba(0,0,0,0.05); 41 | box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05); 42 | 43 | .swatch-details { 44 | position: absolute; 45 | bottom: -1px; 46 | left: -1px; 47 | right: -1px; 48 | background: white; 49 | margin: 0; 50 | padding: 20px; 51 | font-size: 0.9rem; 52 | list-style: none; 53 | 54 | // Text contrast check icons 55 | .contrast-check { 56 | color: lighten( $gray, 10); 57 | float: right; 58 | margin-top: 4px; 59 | 60 | &:hover:after { 61 | border-color: $gray; 62 | background-color: $gray; 63 | color: white; 64 | } 65 | } 66 | 67 | .noticon-fonts:after { 68 | content: "\f8b5"; 69 | margin-left: 5px; 70 | border: 1px solid lighten( $gray, 20); 71 | border-radius: 50%; 72 | padding: 4px; 73 | } 74 | .noticon-fonts:before { 75 | content: none; 76 | } 77 | 78 | .color-names { 79 | line-height: 1.4; 80 | 81 | dl { 82 | display: table-row; 83 | 84 | dt, dd { 85 | display: table-cell; 86 | } 87 | 88 | dt { 89 | color: darken( $gray, 30); 90 | font-size: 0.7rem; 91 | padding-right: 0.8em; 92 | text-align: right; 93 | } 94 | 95 | dd { 96 | color: darken( $gray, 20); 97 | font-family: monospace; 98 | margin: 0; 99 | } 100 | } 101 | } 102 | } 103 | 104 | h4 { 105 | font-size: 1rem; 106 | margin: 0 0 8px; 107 | font-family: $sans; 108 | color: $gray-dark; 109 | } 110 | small { 111 | font-size: 0.6rem; 112 | opacity: 0.7; 113 | display: block; 114 | margin-top: -8px; 115 | margin-bottom: 8px; 116 | font-family: $sans; 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /scss/templates/_layout.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // SITE LAYOUT 3 | // All the metrics and basic styling to make the layout 4 | // ========================================================================== 5 | 6 | 7 | 8 | // Styles 9 | 10 | body { 11 | margin: 0; 12 | @include breakpoint(phablet) { 13 | font-size: 100%; //go down to 16px 14 | } 15 | } 16 | 17 | .site-content { 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | } 22 | 23 | .site-header { 24 | display: block; 25 | position: fixed; 26 | left: 0.519em; 27 | top: 1.945em; 28 | width: $sidebar-width - ( 0.519em * 2 ); 29 | z-index: 9998; 30 | @include breakpoint(narrow-desktop) { 31 | position: static; 32 | top: 0; 33 | left: 0; 34 | width: 100%; 35 | } 36 | } 37 | 38 | .main-navigation { 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | width: $sidebar-width; 43 | padding-top: $header-height + 1.945em; 44 | overflow: auto; 45 | min-height: 100%; 46 | background: $blue-wordpress; 47 | box-shadow: inset -0.296em 0 0 rgba($blue-dark, 0.2); 48 | z-index: 200; 49 | @include breakpoint(narrow-desktop) { 50 | display: none; 51 | // This obviously needs some more thought. 52 | // Did this for quick test of layout on small device. 53 | } 54 | } 55 | 56 | .site-main { 57 | margin-left: $sidebar-width; 58 | background: $gray-light; 59 | min-height: 100%; 60 | @include breakpoint(narrow-desktop) { 61 | margin-left: auto; 62 | } 63 | } 64 | 65 | .page, 66 | .page-links { 67 | max-width: $horizontal-linelenght + ($horizontal-padding*2); 68 | padding: $vertical-margin $horizontal-padding; 69 | margin: auto; 70 | @include breakpoint(wide-desktop) { 71 | max-width: $horizontal-linelenght; 72 | padding: $vertical-margin; 73 | } 74 | } 75 | 76 | .page { 77 | .page-header { 78 | @extend %negative-margins; 79 | margin-bottom: $vertical-margindouble; 80 | padding: $vertical-margin $horizontal-padding $vertical-margindouble; 81 | border-bottom: 1px solid rgba(lighten( $gray, 20% ),.5); 82 | h1, p { 83 | margin: 0; 84 | } 85 | @include breakpoint(wide-desktop) { 86 | margin-left: auto; 87 | margin-right: auto; 88 | padding-left: 0; 89 | padding-right: 0; 90 | } 91 | } 92 | .wide, 93 | .swatches, 94 | .sample { 95 | @extend %negative-margins; 96 | margin-top: $vertical-margindouble; 97 | margin-bottom: $vertical-margindouble; 98 | @include breakpoint(wide-desktop) { 99 | margin-left: auto; 100 | margin-right: auto; 101 | } 102 | } 103 | figure img { 104 | max-width: 100%; 105 | } 106 | p { 107 | margin: $vertical-margin 0; 108 | } 109 | hr { 110 | border-top-color: rgba(lighten( $gray, 20% ),.8); 111 | } 112 | } 113 | 114 | .swatches { 115 | .swatch { 116 | margin: 20px 0; 117 | } 118 | @media screen and ( min-width: 1200px ) { 119 | .swatch { 120 | margin: 1%; 121 | } 122 | &.col-1 .swatch { width: 98%; } 123 | &.col-2 .swatch { width: 48%; } 124 | &.col-3 .swatch { width: 31.33%; } 125 | &.col-4 .swatch { width: 23%; } 126 | } 127 | } 128 | 129 | .download-list { 130 | margin-top: 0; 131 | margin-bottom: $vertical-margindouble; 132 | 133 | small { 134 | display: block; 135 | line-height: 1.313; 136 | margin-bottom: ($vertical-margin)/2; 137 | color: $gray; 138 | font-family: $sans; 139 | } 140 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // 1. All configuration goes here 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | concat: { 8 | dist: { 9 | src: [ 10 | 'js/main/*.js', 11 | ], 12 | dest: 'js/production.js', // needs a better name, doncha think? 13 | } 14 | }, 15 | uglify: { 16 | build: { 17 | src: 'js/production.js', 18 | dest: 'js/production.min.js' 19 | } 20 | }, 21 | imagemin: { 22 | dynamic: { 23 | files: [{ 24 | expand: true, 25 | cwd: 'images/', 26 | src: ['**/*.{png,jpg,gif}'], 27 | dest: 'images/' 28 | }] 29 | } 30 | }, 31 | sass: { 32 | dist: { 33 | options: { 34 | sourcemap: 'none', 35 | // Can be nested, compact, compressed, expanded 36 | style: 'compressed', 37 | }, 38 | files: { 39 | 'css/style.css': 'scss/style.scss' 40 | } 41 | } 42 | }, 43 | autoprefixer: { 44 | options: { 45 | // Task-specific options go here. 46 | }, 47 | global: { 48 | options: { 49 | // Target-specific options go here. 50 | // browser-specific info: https://github.com/ai/autoprefixer#browsers 51 | // DEFAULT: browsers: ['> 1%', 'last 2 versions', 'ff 17', 'opera 12.1'] 52 | browsers: ['> 1%', 'last 2 versions', 'ff 17', 'opera 12.1', 'ie 8', 'ie 9'] 53 | }, 54 | src: 'css/style.css' 55 | }, 56 | }, 57 | watch: { 58 | // options: { 59 | // livereload: true, 60 | // }, 61 | scripts: { 62 | files: ['js/main.js'], 63 | tasks: ['concat', 'uglify'], 64 | options: { 65 | spawn: false, 66 | }, 67 | }, 68 | css: { 69 | files: ['scss/*.scss', 'scss/**/*.scss'], 70 | tasks: ['sass', 'autoprefixer'], 71 | options: { 72 | livereload: true, 73 | spawn: false, 74 | } 75 | }, 76 | html: { 77 | files: ['*.php', '**/*.php'], 78 | options: { 79 | livereload: true, 80 | spawn: false, 81 | } 82 | } 83 | } 84 | }); 85 | 86 | // 3. Where we tell Grunt we plan to use this plug-in. 87 | grunt.loadNpmTasks('grunt-contrib-concat'); // concatenate 88 | grunt.loadNpmTasks('grunt-contrib-uglify'); // minify 89 | grunt.loadNpmTasks('grunt-contrib-imagemin'); // optimize images 90 | grunt.loadNpmTasks('grunt-contrib-watch'); // watch files for changes 91 | grunt.loadNpmTasks('grunt-contrib-sass'); // Gettin Sassy! 92 | grunt.loadNpmTasks('grunt-autoprefixer'); // Auto-freaking-prefixer!!! 93 | 94 | // 4. Where we tell Grunt what to do when we type "grunt" into the terminal. 95 | grunt.registerTask('default', ['watch']); 96 | 97 | }; 98 | -------------------------------------------------------------------------------- /images/logo-history-wporg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 13 | 16 | 19 | 22 | 27 | 31 | 35 | 36 | 37 | 42 | 44 | 46 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /scss/templates/_page-typography.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Design and Code Samples */ 6 | .sample { 7 | padding: 20px; 8 | margin: 0 -20px; 9 | 10 | article { 11 | background: #fff; 12 | border: 2px solid rgba( $blue-dark, 0.4 ); 13 | } 14 | 15 | pre { 16 | border-radius: 0; 17 | margin: 0; 18 | padding: 30px 40px; 19 | max-height: 100%; 20 | overflow: auto; 21 | border: none; 22 | } 23 | } 24 | 25 | #typesetting-sample { 26 | font-famiy: "Open Sans", helvetica, arial, sans-serif; 27 | padding: 40px; 28 | -webkit-font-smoothing: antialiased; 29 | -moz-osx-font-smoothing: grayscale; 30 | h1 { 31 | font-family: "Merriweather", georgia, serif; 32 | font-size: 2.291em; 33 | font-weight: 700; 34 | line-height: 1.258; 35 | margin: 0 0 15px 0; 36 | } 37 | h1 a {} 38 | h1 a:hover {} 39 | 40 | h4 { 41 | font-weight: 700; 42 | font-size: 0.875em; 43 | line-height: 1.618; 44 | text-transform: uppercase; 45 | letter-spacing: 0.079em; 46 | margin: 0 0 15px 0; 47 | color: lighten( $gray-dark, 50% ); 48 | } 49 | h4 a { 50 | color: lighten( $gray-dark, 30% ); 51 | } 52 | h4 a:hover { 53 | color: $orange-fire; 54 | } 55 | 56 | p { 57 | margin: 0; 58 | font-weight: 400; 59 | font-size: 1em; 60 | line-height: 1.618; 61 | } 62 | } 63 | 64 | 65 | 66 | .pattern { 67 | padding: 15px 0 25px 0; 68 | color: rgba(0,0,0,0.6); 69 | line-height: 1.7; 70 | &:first-child { 71 | padding-top: 0; 72 | } 73 | &:last-child { 74 | border: none; 75 | padding-bottom: 0; 76 | margin-bottom: 0; 77 | } 78 | h3 { 79 | margin: 0 20px 0 0; 80 | font-family: "Open Sans", helvetica, arial, sans-serif; 81 | font-weight: 400; 82 | font-size: 1.4em; 83 | line-height: 1.618; 84 | color: rgba(0,0,0,0.8); 85 | } 86 | } 87 | 88 | 89 | /* Color Swatch */ 90 | .swatches { 91 | .swatch { 92 | .type-demo { 93 | line-height: 200px; 94 | width: 100%; 95 | text-align: center; 96 | } 97 | 98 | &.open-sans-300 .type-demo { 99 | font-family: 'Open Sans', arial, verdana, sans-serif; 100 | font-weight: 300; 101 | font-size: 100px; 102 | } 103 | 104 | &.open-sans-500 .type-demo { 105 | font-family: 'Open Sans', arial, verdana, sans-serif; 106 | font-weight: 500; 107 | font-size: 100px; 108 | } 109 | 110 | &.open-sans-title .type-demo { 111 | font-family: 'Open Sans', arial, verdana, sans-serif; 112 | font-weight: 700; 113 | text-transform: uppercase; 114 | font-size: 18px; 115 | } 116 | 117 | &.merriweather-700 .type-demo { 118 | font-family: 'Merriweather'; 119 | font-weight: 700; 120 | font-size: 100px; 121 | } 122 | 123 | &.merriweather-900 .type-demo { 124 | font-family: 'Merriweather'; 125 | font-weight: 900; 126 | font-size: 100px; 127 | } 128 | } 129 | } 130 | 131 | 132 | /* Type Swatch */ 133 | 134 | 135 | 136 | 137 | /* Syntax Highlighter (rainbow.js) Styles */ 138 | /* Modified version of the "GitHub theme," by Craig Campbell (v1.0.4) */ 139 | pre { 140 | border: 1px solid #ccc; 141 | word-wrap: break-word; 142 | padding: 16px 20px; 143 | line-height: 19px; 144 | margin-bottom: 20px; 145 | } 146 | 147 | code { 148 | border: 1px solid #eaeaea; 149 | margin: 0px 2px; 150 | padding: 0px 5px; 151 | font-size: 13px; 152 | } 153 | 154 | pre code { 155 | border: 0px; 156 | padding: 0px; 157 | margin: 0px; 158 | -moz-border-radius: 0px; 159 | -webkit-border-radius: 0px; 160 | border-radius: 0px; 161 | } 162 | 163 | pre, code { 164 | font-family: 'Source Code Pro', Consolas, 'Liberation Mono', Courier, monospace; 165 | color: #333; 166 | font-weight: 300; 167 | background: $gray-light; 168 | -moz-border-radius: 3px; 169 | -webkit-border-radius: 3px; 170 | border-radius: 3px; 171 | -webkit-font-smoothing: antialiased; 172 | -moz-osx-font-smoothing: grayscale; 173 | } 174 | 175 | pre, pre code { 176 | font-size: 14px; 177 | } 178 | 179 | pre .comment { 180 | color: #998; 181 | } 182 | 183 | pre .support { 184 | color: #0086B3; 185 | } 186 | 187 | pre .tag, pre .tag-name { 188 | color: $blue-dark; 189 | font-weight: 600; 190 | } 191 | 192 | pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function { 193 | font-weight: 500; 194 | } 195 | 196 | pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace { 197 | color: $gray-dark; 198 | } 199 | 200 | pre .constant.numeric, pre .keyword.unit, pre .hex-color { 201 | font-weight: normal; 202 | color: $blue-medium; 203 | } 204 | 205 | pre .entity.class { 206 | color: #458; 207 | } 208 | 209 | pre .entity.id, pre .entity.function { 210 | color: #900; 211 | } 212 | 213 | pre .attribute, pre .variable { 214 | color: $blue-medium; 215 | } 216 | 217 | pre .string, pre .support.value { 218 | font-weight: normal; 219 | color: $orange-fire; 220 | } 221 | 222 | pre .regexp { 223 | color: #009926; 224 | } 225 | -------------------------------------------------------------------------------- /scss/molecules/_wpcom-header.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // WordPress.com Header Navigation (non-WP theme) 3 | // 4 | // So blue. So good. 5 | // ========================================================================== 6 | 7 | 8 | // Let's try this BEM thing. Initially, I tried block_element-modifier, but I 9 | // like the ability to hyphen separate words in an element. 10 | // 11 | // syntax == block__element--modifier 12 | // Example: .wpcom-header__site-title--gigantor 13 | // 14 | // Why two underscores? 15 | // Readability. It's easier to scan through BEM with the extra gap. 16 | 17 | .wpcom-header { 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | height: 46px; 23 | background: #1e8cbe; 24 | box-shadow: 25 | inset 0 -1px 0 rgba(0, 86, 132, 0.8), 26 | 0 1px 3px rgba(0, 86, 132, 0.4) 27 | ; 28 | z-index: 9999; 29 | 30 | ul { 31 | border: 0; 32 | padding: 0; 33 | margin: 0; 34 | } 35 | a { 36 | color: #fff; 37 | font-size: em(14); // see functions.scss 38 | font-weight: 400; 39 | text-decoration: none; 40 | transition: all 0.15s ease-in-out; 41 | } 42 | .wpcom-logo { 43 | top: 7px; 44 | } 45 | } 46 | .wpcom-header__site-title { 47 | float: left; 48 | } 49 | .wpcom-nav { 50 | h3 { 51 | display: none; 52 | } 53 | > ul { // Top-level menu 54 | display: inline-block; 55 | height: 46px; 56 | line-height: 46px; 57 | margin: 0; 58 | outline: 0; 59 | 60 | ul { // Dropdown menu 61 | display: none; 62 | position: absolute; 63 | top: 45px; 64 | left: 0; 65 | width: auto; 66 | min-width: 220px; 67 | line-height: 46px; 68 | background: #fff; 69 | background: rgba(255,255,255,0.99); 70 | box-shadow: 71 | 0 0 2px rgba(0, 0, 0, 0.15), 72 | 0 3px 8px rgba(0, 0, 0, 0.1) 73 | ; 74 | z-index: 9999; // Maybe change this? 75 | 76 | ul { // Level 3+ menu 77 | top: 0; 78 | left: 100%; 79 | } 80 | li { 81 | float: none; 82 | display: block; 83 | margin: 0; 84 | height: auto; 85 | color: #1e8cbe; 86 | 87 | &:hover { 88 | > a { 89 | // Don't care for this hover 90 | // Will change 91 | color: #fff; 92 | background: $blue-light; 93 | } 94 | } 95 | } 96 | a { 97 | float: none; 98 | display: block; 99 | margin: 0; 100 | padding: 0 14px; 101 | height: auto; 102 | color: #1e8cbe; 103 | text-decoration: none; 104 | overflow: hidden; 105 | border-bottom: 1px solid #dfdfdf; 106 | border-color: rgba(0,0,0,0.1); 107 | } 108 | } 109 | > li { 110 | > ul { 111 | &:after { 112 | content: ''; 113 | position: absolute; 114 | bottom: 100%; 115 | left: 20px; 116 | width: 0; 117 | height: 0; 118 | border: 6px solid transparent; 119 | border-bottom-color: #fff; 120 | } 121 | } 122 | } 123 | } 124 | li { 125 | float: left; 126 | position: relative; 127 | display: inline-block; 128 | margin: 0; 129 | height: 46px; 130 | line-height: 46px; 131 | outline: 0; 132 | 133 | &:hover { 134 | > a { 135 | color: #78c8e6; 136 | } 137 | > ul { 138 | display: block; 139 | } 140 | } 141 | } 142 | a { 143 | display: inline-block; 144 | margin: 0; 145 | padding: 0 12px; 146 | height: 46px; 147 | color: #fff; 148 | line-height: 46px; 149 | text-decoration: none; 150 | border: none; 151 | overflow: hidden; 152 | outline: 0; 153 | } 154 | .current { 155 | a { 156 | background: #36a3ca; 157 | color: #fff; 158 | box-shadow: inset 0 -1px 0 rgba(0, 86, 132, 0.5); 159 | cursor: default; 160 | } 161 | } 162 | } 163 | 164 | @media screen and (max-width: 768px) { 165 | // A bit sloppy and could be refactored a bit. 166 | .wpcom-header { 167 | position: fixed; 168 | z-index: 10000; 169 | } 170 | .wpcom-header__site-title { 171 | margin-left: 6px; 172 | } 173 | .wpcom-nav { 174 | background: #fafafa; 175 | border-left: 1px solid #e7e7e7; 176 | box-shadow: 177 | inset 0 2px 2px -2px rgba(0, 0, 0, 0.15), 178 | inset 0 11px 8px -8px rgba(0, 0, 0, 0.1) 179 | ; 180 | 181 | a { 182 | display: block; 183 | color: #278dbc; 184 | line-height: 44px; 185 | border-bottom: 1px solid #f0f0f0; 186 | overflow: visible; 187 | 188 | &:hover { 189 | color: #78c8e6; 190 | } 191 | } 192 | .current { 193 | a { 194 | box-shadow: none; 195 | } 196 | } 197 | li { 198 | > ul { 199 | position: static; 200 | display: block; 201 | width: 100%; 202 | border-left: 5px solid #e7e7e7; 203 | background: transparent; 204 | box-shadow: none; 205 | 206 | a { 207 | border-bottom: 1px solid #f0f0f0; 208 | } 209 | &:after { 210 | display: none; 211 | } 212 | ul { 213 | border-left: 5px solid #e7e7e7; 214 | } 215 | li { 216 | &:hover { 217 | a { 218 | color: #78c8e6; 219 | background: transparent; 220 | } 221 | } 222 | } 223 | } 224 | } 225 | &:after { 226 | display: none; 227 | } 228 | } 229 | } -------------------------------------------------------------------------------- /scss/atoms/animation/_animation.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Animations 3 | * 4 | * Defines `slide-in-up` `slide-out-up` `scale-fade` 5 | * Used for section overlays 6 | */ 7 | 8 | body { 9 | // Setup default styles for some animation classes 10 | .slide-in-up { 11 | transform: translate3d( 0, 100%, 0 ); 12 | opacity: 0.4; 13 | } 14 | .scale-fade { 15 | opacity: 1; 16 | } 17 | .slide-in-left { 18 | transform: translate3d( -100%, 0, 0 ); 19 | } 20 | .show-in { 21 | opacity: 0; 22 | 23 | &:nth-child(10n + 2) { 24 | animation-delay: 0.05s !important; 25 | } 26 | &:nth-child(10n + 3) { 27 | animation-delay: 0.1s !important; 28 | } 29 | &:nth-child(10n + 4) { 30 | animation-delay: 0.15s !important; 31 | } 32 | &:nth-child(10n + 5) { 33 | animation-delay: 0.2s !important; 34 | } 35 | &:nth-child(10n + 6) { 36 | animation-delay: 0.25s !important; 37 | } 38 | &:nth-child(10n + 7) { 39 | animation-delay: 0.3s !important; 40 | } 41 | &:nth-child(10n + 8) { 42 | animation-delay: 0.35s !important; 43 | } 44 | &:nth-child(10n + 9) { 45 | animation-delay: 0.4s !important; 46 | } 47 | &:nth-child(10n + 10) { 48 | animation-delay: 0.45s !important; 49 | } 50 | } 51 | 52 | // Setup transition parameter on `animate` 53 | // Includes timings and animation curves 54 | &.animate { 55 | .slide-out-up { 56 | transition: transform 0.5s cubic-bezier( 0.23, 1, 0.32, 1 ); 57 | transform: translate3d( 0, 0, 0 ) ; 58 | } 59 | .slide-in-up { 60 | transition: transform 0.5s cubic-bezier( 0.215, 0.61, 0.355, 1 ), opacity 0.5s ease-in; 61 | } 62 | .slide-in-left { 63 | transition: transform 0.5s cubic-bezier( 0.215, 0.61, 0.355, 1 ), opacity 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); 64 | } 65 | .slide-out-right { 66 | transition: transform 0.5s cubic-bezier( 0.215, 0.61, 0.355, 1 ), opacity 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); 67 | } 68 | .scale-fade { 69 | transition: transform 0.5s, opacity 0.5s; 70 | transform-origin: 50%, 60px; 71 | } 72 | .fade { 73 | transition: opacity .5s cubic-bezier( 0.4, 1, 0.4, 1 ); 74 | } 75 | } 76 | 77 | // Transformations for overlay class animation 78 | &.overlay-opened { 79 | .slide-out-up { 80 | transform: translate3d( 0, -46px, 0 ); 81 | } 82 | .slide-in-up { 83 | transform: translate3d( 0, 0%, 0 ); 84 | opacity: 1; 85 | } 86 | .scale-fade { 87 | transform: scale( 0.85 ); 88 | opacity: 0; 89 | } 90 | .fade { 91 | opacity: 0; 92 | } 93 | } 94 | 95 | &.customizer-section { 96 | .slide-in-left { 97 | transform: translate3d( -40%, 0, 0 ); 98 | } 99 | } 100 | 101 | &.themes-section { 102 | .slide-out-right { 103 | transform: translate3d( 100%, 0, 0 ); 104 | } 105 | .slide-in-left { 106 | transform: translate3d( 0, 0, 0 ); 107 | } 108 | } 109 | } 110 | 111 | // Content sliding left and right to show sidebar 112 | 113 | @keyframes slideContentRight { 114 | 0% { 115 | transform: translate3d( 0, 0, 0 ); 116 | transform: translate3d( 0, 0, 0 ); 117 | } 118 | 119 | 70% { 120 | transform: translate3d( $sidebar-width + 20, 0, 0 ); 121 | } 122 | 123 | 100% { 124 | transform: translate3d( $sidebar-width, 0, 0 ); 125 | } 126 | } 127 | 128 | @keyframes slideContentLeft { 129 | 0% { 130 | transform: translate3d( 0, 0, 0 ); 131 | } 132 | 133 | 30% { 134 | transform: translate3d( 20px, 0, 0 ); 135 | } 136 | 137 | 100% { 138 | transform: translate3d( -$sidebar-width, 0, 0 ); 139 | } 140 | } 141 | 142 | // Sliding responsive filter and nav menus up and down 143 | 144 | @keyframes slideMenuDown { 145 | 0% { 146 | opacity: 0; 147 | transform: translate3d( 0, 0, 0 ); 148 | } 149 | 150 | 80% { 151 | opacity: 1; 152 | transform: translate3d( 0, 22px, 0 ); 153 | } 154 | 155 | 100% { 156 | opacity: 1; 157 | transform: translate3d( 0, 17px, 0 ); 158 | } 159 | } 160 | 161 | @keyframes slideMenuUp { 162 | 0% { 163 | opacity: 1; 164 | transform: translate3d( 0, 0, 0 ); 165 | } 166 | 167 | 20% { 168 | opacity: 1; 169 | transform: translate3d( 0, 5px, 0 ); 170 | } 171 | 172 | 100% { 173 | opacity: 0; 174 | transform: translate3d( 0, -20px, 0 ); 175 | } 176 | } 177 | 178 | // Rotating chevrons when expanding and collapsing sections 179 | 180 | @keyframes rotateOpen { 181 | 0% { 182 | transform: rotate(0); 183 | } 184 | 185 | 50% { 186 | transform: rotate(200deg) 187 | } 188 | 189 | 75% { 190 | transform: rotate(175deg); 191 | } 192 | 193 | 90% { 194 | transform: rotate(185deg) 195 | } 196 | 197 | 100% { 198 | transform: rotate(180deg) 199 | } 200 | } 201 | 202 | @keyframes rotateClosed { 203 | 0% { 204 | transform: rotate(180deg) 205 | } 206 | 207 | 50% { 208 | transform: rotate(-20deg) 209 | } 210 | 211 | 75% { 212 | transform: rotate(5deg); 213 | } 214 | 215 | 90% { 216 | transform: rotate(-5deg); 217 | } 218 | 219 | 100% { 220 | transform: rotate(0); 221 | } 222 | } 223 | 224 | // Simple animation to make elements appear 225 | @keyframes "appear" { 226 | 0% { 227 | opacity: 0; 228 | } 229 | 100% { 230 | opacity: 1; 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /scss/templates/_page-patterns.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Design and Code Samples */ 6 | .sample { 7 | padding: 20px; 8 | margin: 0 -20px; 9 | 10 | article { 11 | background: #fff; 12 | border: 2px solid rgba( $blue-dark, 0.4 ); 13 | } 14 | 15 | pre { 16 | border-radius: 0; 17 | margin: 0; 18 | padding: 30px 40px; 19 | max-height: 100%; 20 | overflow: auto; 21 | border: none; 22 | } 23 | } 24 | 25 | #typesetting-sample { 26 | font-famiy: "Open Sans", helvetica, arial, sans-serif; 27 | padding: 40px; 28 | -webkit-font-smoothing: antialiased; 29 | -moz-osx-font-smoothing: grayscale; 30 | h1 { 31 | font-family: "Merriweather", georgia, serif; 32 | font-size: 2.291em; 33 | font-weight: 700; 34 | line-height: 1.258; 35 | margin: 0 0 15px 0; 36 | } 37 | h1 a {} 38 | h1 a:hover {} 39 | 40 | h4 { 41 | font-weight: 700; 42 | font-size: 0.875em; 43 | line-height: 1.618; 44 | text-transform: uppercase; 45 | letter-spacing: 0.079em; 46 | margin: 0 0 15px 0; 47 | color: lighten( $gray-dark, 50% ); 48 | } 49 | h4 a { 50 | color: lighten( $gray-dark, 30% ); 51 | } 52 | h4 a:hover { 53 | color: $orange-fire; 54 | } 55 | 56 | p { 57 | margin: 0; 58 | fong-weight: 400; 59 | font-size: 1em; 60 | line-height: 1.618; 61 | } 62 | } 63 | 64 | 65 | 66 | .pattern { 67 | padding: 15px 0 25px 0; 68 | color: rgba(0,0,0,0.6); 69 | line-height: 1.7; 70 | &:first-child { 71 | padding-top: 0; 72 | } 73 | &:last-child { 74 | border: none; 75 | padding-bottom: 0; 76 | margin-bottom: 0; 77 | } 78 | h3 { 79 | margin: 0 20px 0 0; 80 | font-family: "Open Sans", helvetica, arial, sans-serif; 81 | font-weight: 400; 82 | font-size: 1.4em; 83 | line-height: 1.618; 84 | color: rgba(0,0,0,0.8); 85 | } 86 | } 87 | 88 | 89 | /* Color Swatch */ 90 | .swatches { 91 | padding: 2% 0; 92 | margin: 0 -2%; 93 | &:after { 94 | visibility: hidden; 95 | display: block; 96 | font-size: 0; 97 | content: " "; 98 | clear: both; 99 | height: 0; 100 | } 101 | 102 | .swatch { 103 | .type-demo { 104 | line-height: 200px; 105 | width: 100%; 106 | text-align: center; 107 | } 108 | 109 | &.open-sans-300 .type-demo { 110 | font-family: 'Open Sans', arial, verdana, sans-serif; 111 | font-weight: 300; 112 | font-size: 100px; 113 | } 114 | 115 | &.open-sans-500 .type-demo { 116 | font-family: 'Open Sans', arial, verdana, sans-serif; 117 | font-weight: 500; 118 | font-size: 100px; 119 | } 120 | 121 | &.open-sans-title .type-demo { 122 | font-family: 'Open Sans', arial, verdana, sans-serif; 123 | font-weight: 700; 124 | text-transform: uppercase; 125 | font-size: 18px; 126 | } 127 | 128 | &.merriweather-700 .type-demo { 129 | font-family: 'Merriweather'; 130 | font-weight: 700; 131 | font-size: 100px; 132 | } 133 | 134 | &.merriweather-900 .type-demo { 135 | font-family: 'Merriweather'; 136 | font-weight: 900; 137 | font-size: 100px; 138 | } 139 | } 140 | 141 | @media screen and ( min-width: 800px ) { 142 | .swatch { 143 | margin: 0 1%; 144 | } 145 | &.col-1 .swatch { width: 96%; } 146 | &.col-2 .swatch { width: 48%; } 147 | &.col-3 .swatch { width: 31.33%; } 148 | &.col-4 .swatch { width: 23%; } 149 | } 150 | } 151 | 152 | 153 | /* Type Swatch */ 154 | 155 | 156 | 157 | 158 | /* Syntax Highlighter (rainbow.js) Styles */ 159 | /* Modified version of the "GitHub theme," by Craig Campbell (v1.0.4) */ 160 | pre { 161 | border: 1px solid #ccc; 162 | word-wrap: break-word; 163 | padding: 16px 20px; 164 | line-height: 19px; 165 | margin-bottom: 20px; 166 | } 167 | 168 | code { 169 | border: 1px solid #eaeaea; 170 | margin: 0px 2px; 171 | padding: 0px 5px; 172 | font-size: 13px; 173 | } 174 | 175 | pre code { 176 | border: 0px; 177 | padding: 0px; 178 | margin: 0px; 179 | -moz-border-radius: 0px; 180 | -webkit-border-radius: 0px; 181 | border-radius: 0px; 182 | } 183 | 184 | pre, code { 185 | font-family: 'Source Code Pro', Consolas, 'Liberation Mono', Courier, monospace; 186 | color: #333; 187 | font-weight: 300; 188 | background: $gray-light; 189 | -moz-border-radius: 3px; 190 | -webkit-border-radius: 3px; 191 | border-radius: 3px; 192 | -webkit-font-smoothing: antialiased; 193 | -moz-osx-font-smoothing: grayscale; 194 | } 195 | 196 | pre, pre code { 197 | font-size: 14px; 198 | } 199 | 200 | pre .comment { 201 | color: #998; 202 | } 203 | 204 | pre .support { 205 | color: #0086B3; 206 | } 207 | 208 | pre .tag, pre .tag-name { 209 | color: $blue-dark; 210 | font-weight: 600; 211 | } 212 | 213 | pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function { 214 | font-weight: 500; 215 | } 216 | 217 | pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace { 218 | color: $gray-dark; 219 | } 220 | 221 | pre .constant.numeric, pre .keyword.unit, pre .hex-color { 222 | font-weight: normal; 223 | color: $blue-medium; 224 | } 225 | 226 | pre .entity.class { 227 | color: #458; 228 | } 229 | 230 | pre .entity.id, pre .entity.function { 231 | color: #900; 232 | } 233 | 234 | pre .attribute, pre .variable { 235 | color: $blue-medium; 236 | } 237 | 238 | pre .string, pre .support.value { 239 | font-weight: normal; 240 | color: $orange-fire; 241 | } 242 | 243 | pre .regexp { 244 | color: #009926; 245 | } -------------------------------------------------------------------------------- /scss/atoms/mixins/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Mixins 3 | // These are custom mixins developed to implement common patterns quickly. 4 | // ========================================================================== 5 | 6 | @import "responsive"; // Responsive Mixin with breakpoints 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | // Available Mixins 16 | // arrow 17 | // arrow-lazy 18 | // custom-scrollbar 19 | // full-width-bars 20 | // replace-image 21 | // retina-background 22 | 23 | @mixin arrow($size: 10px, $color: #ccc, $direction: top){ 24 | @if $direction == "right" { 25 | width: 0; 26 | height: 0; 27 | border-top: $size solid transparent; 28 | border-bottom: $size solid transparent; 29 | border-left: $size solid $color; 30 | } @else if $direction == "down" { 31 | width: 0; 32 | height: 0; 33 | border-left: $size solid transparent; 34 | border-right: $size solid transparent; 35 | border-top: $size solid $color; 36 | } @else if $direction == "left" { 37 | width: 0; 38 | height: 0; 39 | border-top: $size solid transparent; 40 | border-bottom: $size solid transparent; 41 | border-right:$size solid $color; 42 | } @else { 43 | width: 0; 44 | height: 0; 45 | border-left: $size solid transparent; 46 | border-right: $size solid transparent; 47 | border-bottom: $size solid $color; 48 | } 49 | } 50 | 51 | @mixin arrow-lazy($direction: top, $size: 10px, $color: #ccc, $center: 50%, $margin: -1px, $pseudo: before){ 52 | position: relative; 53 | border-color: $color; 54 | 55 | &:#{$pseudo} { 56 | position: absolute; 57 | content: ""; 58 | width: 0; 59 | height: 0; 60 | border-color: $color; 61 | 62 | @if $direction == "right" { 63 | top: $center; 64 | left: 100%; 65 | margin-left: $margin; 66 | margin-top: $size * -1; 67 | border-top: $size solid transparent; 68 | border-bottom: $size solid transparent; 69 | border-left: $size solid $color; 70 | border-left-color: inherit; 71 | } @else if $direction == "down" { 72 | top: 100%; 73 | left: $center; 74 | margin-top: $margin; 75 | margin-left: $size * -1; 76 | border-left: $size solid transparent; 77 | border-right: $size solid transparent; 78 | border-top: $size solid $color; 79 | border-top-color: inherit; 80 | } @else if $direction == "left" { 81 | top: $center; 82 | right: 100%; 83 | margin-right: $margin; 84 | margin-top: $size * -1; 85 | border-top: $size solid transparent; 86 | border-bottom: $size solid transparent; 87 | border-right:$size solid $color; 88 | border-right-color: inherit; 89 | } @else { 90 | bottom: 100%; 91 | left: $center; 92 | margin-bottom: $margin; 93 | margin-left: $size * -1; 94 | border-left: $size solid transparent; 95 | border-right: $size solid transparent; 96 | border-bottom: $size solid $color; 97 | border-bottom-color: inherit; 98 | } 99 | } 100 | } 101 | 102 | @mixin custom-scrollbar($width: .8em, $track: rgba(217, 217, 217, .5), $thumb: rgba(184, 184, 184, .5)){ 103 | ::-webkit-scrollbar { 104 | width: $width; 105 | } 106 | ::-webkit-scrollbar-track { 107 | background-color: $track; 108 | } 109 | ::-webkit-scrollbar-thumb { 110 | background: $thumb; 111 | @include box-shadow(inset .05em .05em 0 rgba(0, 0, 0, .1), inset 0 -.05em 0 rgba(0, 0, 0, .07)); 112 | } 113 | } 114 | 115 | @mixin full-width-bars() { 116 | // Still testing this one 117 | position: relative; 118 | z-index: 1; 119 | 120 | &:before { 121 | position: absolute; 122 | content: ""; 123 | display: block; 124 | top: 0; 125 | left: -5000px; 126 | height: 100%; 127 | width: 15000px; 128 | z-index: -1; 129 | @content; 130 | } 131 | } 132 | 133 | @mixin gradient($start, $end){ 134 | background-color: $end; 135 | background-image: -webkit-gradient(linear, left top, left bottom, from($start),to($end)); // Chrome, Safari 4+ 136 | background-image: -webkit-linear-gradient(top, $start, $end); // Chrome 10-25, iOS 5+, Safari 5.1+ 137 | background-image: -moz-linear-gradient(top, $start, $end); // Firefox 3.6-15 138 | background-image: -o-linear-gradient(top, $start, $end); // Opera 11.10-12.00 139 | background-image: linear-gradient(top, $start, $end); // Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ 140 | } 141 | 142 | @mixin replace-image($url, $width, $height) { 143 | // I totally stole this idea from Marcel Shields. 144 | // Read his article: http://css-tricks.com/replace-the-image-in-an-img-with-css/ 145 | display: block; 146 | width: $width; // Width of new image 147 | height: $height; // Height of new image 148 | padding-left: $width; // Equal to width of new image 149 | background: url($url) no-repeat; 150 | } 151 | 152 | @mixin retina-background ($url, $file-type, $width: auto, $repeat: repeat, $ratio: 1.5, $suffix: "@2x") { 153 | background: url($url + "." + $file-type); 154 | background-repeat: $repeat; 155 | // Media queries from http://git.io/k-x0wA 156 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 157 | only screen and (min--moz-device-pixel-ratio: $ratio), 158 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 159 | only screen and (min-resolution: #{round($ratio*96)}dpi), 160 | only screen and (min-resolution: #{$ratio}dppx) { 161 | background: url($url + $suffix + "." + $file-type); 162 | background-size: $width auto; 163 | } 164 | } 165 | 166 | 167 | // ========================================================================== 168 | // IE Mixins 169 | // ========================================================================== 170 | 171 | @mixin ie-gradient($start, $end){ 172 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$start}', EndColorStr='#{$end}'); 173 | } 174 | 175 | @mixin ie-opacity($opacity: 1){ 176 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity*100})"; 177 | filter: alpha(opacity=$opacity*100); 178 | } -------------------------------------------------------------------------------- /images/logo-wpcom-vertical.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 16 | 17 | 20 | 25 | 27 | 31 | 34 | 36 | 40 | 46 | 52 | 54 | 57 | 62 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /images/logo-wpcom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 16 | 17 | 20 | 24 | 26 | 30 | 33 | 35 | 39 | 45 | 51 | 53 | 56 | 60 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /logotype/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Logotype | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 | 110 | 116 |
117 | 118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /js/vendor/rainbow.min.js: -------------------------------------------------------------------------------- 1 | /* Rainbow v1.2 rainbowco.de | included languages: generic, javascript, html, css */ 2 | window.Rainbow=function(){function A(a){var b=a.getAttribute("data-language")||a.parentNode.getAttribute("data-language");if(!b){var c=/\blang(?:uage)?-(\w+)/;(a=a.className.match(c)||a.parentNode.className.match(c))&&(b=a[1])}return b}function B(a,b){for(var c in f[d]){c=parseInt(c,10);if(a==c&&b==f[d][c]?0:a<=c&&b>=f[d][c])delete f[d][c],delete j[d][c];if(a>=c&&ac&&b'+b+""}function r(a, 3 | b,c,i){if("undefined"===typeof a||null===a)i();else{var e=a.exec(c);if(e){++s;!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);var k=e[0],g=e.index,t=e[0].length+g,h=function(){function e(){r(a,b,c,i)}s%100>0?e():setTimeout(e,0)};if(B(g,t))h();else{var m=u(b.matches),l=function(a,c,i){if(a>=c.length)i(k);else{var d=e[c[a]];if(d){var g=b.matches[c[a]],f=g.language,h=g.name&&g.matches?g.matches:g,j=function(b,d,g){var f;f=0;var h;for(h=1;h/g,">").replace(/&(?![\w\#]+;)/g,"&"),b,c)}function o(a,b,c){if(b 2 | 3 | 4 | 5 | 6 | Iconography | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 |
40 | 41 |
42 |

Iconography

43 |

Icons carry a tremendous weight in conveying branding and design language. They give a UI its most recognizable elements of identity when used correctly.

44 |
45 | 46 |

Gridicons

47 |

Gridicons is the brand new icon set designed from the bottom up for WordPress.com. It features a consistent style.

48 | 49 |

Gridicons are born with a 24px base grid. Strokes are 2px thick and icons are solid. If an icon is hollow, it generally means the “inactive” version of that icon. For example an outline bookmark icon becomes solid once clicked.

50 | 51 |

Though Gridicons are vector graphics and theoretically infinitely scalable, in practice we have to work within the limitations of antialiasing so icons stay crisp. Since Gridicons are designed for 24px, they look perfect at that size. That’s why by default, this is the size you should be using.

52 | 53 |

If you need to use icons that are larger than 24px, other perfect sizes are 2x duplicates, such as 48px. You can use 36px as well but this will require the use of an additional offset-adjust feature.

54 | 55 |

Same thing if you need smaller than 24px icons. At this size, gridicons will look blurry, so you should avoid this if at all possible. 18px icons will not do for main navigation, for example.

56 | 57 |

The offset-adjust Hack

58 | 59 |

Some icons at 18 and 36px size needs an extra feature in order to look crisp. The code looks like this:

60 | 61 | 
 62 | .offset-adjust {
 63 |     transform: translate(.5px, .5px);
 64 | }
65 | 66 |

What this basically does is nudge the pixels up and to the left by half a pixel. In the case of 36px icons (1.5×24) what it means is that icons can be perfectly crisp. In the case of 18px icons, it means icons will be crisper, though not perfect. Just trust us on the math.

67 | 68 | The tricky part is that not all icons need this offset-adjust hack, only some icons do. We are currently working out how to best roll this feature out. 69 | 70 |

Do’s and Don’ts

71 | 72 |
    73 |
  • Do use Gridicons at 24px or 48px.
    • 74 |
  • Do use Gridicons at 36px if you add the offset-adjust hack on a per-icon basis.
    • 75 |
  • Only use 18px Gridicons if you really must, and don’t use it in main navigation.
    • 76 |
  • Don’t use Noticons or Dashicons; we want to phase them out.
    • 77 |
78 | 79 |

App Icons

80 | 81 |

WordPress apps for iOS, OSX, Android and even the favicons share the same overarching style:

82 | 83 |
    84 |
  • Flat in design, using the single-ring WordPress logo
    • 85 |
  • Background is Medium Blue
    • 86 |
  • Logo is white
    • 87 |
88 | 89 |

It was decided to make the icons medium blue instead of WordPress.com blue for contrast reasons. When updating or creating new versions of the icons, use the existing Sketch templates for iOS and Android for generating new icons. These are already adjusted to individual platform standards.

90 | 91 |

Favicon

92 | 93 |

The favicon requires additional work, as it needs to be highly compressed and work at tiny sizes:

94 | 95 |
    96 |
  • Do use the same general general design guidelines as the apps, medium blue and white.
    • 97 |
  • Don’t use roundrects or squares, use a circle
    • 98 |
  • Don’t bake in a drop shadow into the icon
    • 99 |
100 | 101 |

The 16px icon is the important one. It needs extra pixelhinting in order to work. But do any larger sizes (32, 64, 96) on the same grid as the 16px ones, don’t change the design just because there are more pixels to work with. The 192px version is used by Android bookmarks, so if you like you can use the Android icon of the same size for this resolution.

102 | 103 |

Once the favicons and saved as high quality PNGs, are designed, run the files through ImageAlpha to compress them as much as you can. The best way to compress them is to reduce the number of colors in the image. This app is amazing for that. You can shave off up to 70% of the filesize by reducing from 256 to maybe 32 colors, whatever is visually sufficient. Once they’re through ImageAlpha, run them through ImageOptim for further shavings.

104 | 105 |

Finally, build the favicon. Only include 16 and 32px sizes directly in the .ico file. If you need a 64px version, include it through a separate meta tag:

106 | 107 | 
<link rel="icon" type="image/png" href="favicon-64x64.png" sizes="64x64">
108 |

More resources

109 | 113 |
114 | 120 |
121 | 122 |
123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /typography/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Typography | WordPress.com Design Handbook 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 | 25 | 37 | 38 |
39 |
40 | 41 |
42 |

Typography

43 |

Expressive and utilitarian, serif and sans, our typefaces serve distinct roles: Merriweather is for content, system fonts are for interface.

44 |
45 | 46 |
47 |

Typefaces

48 |

WordPress.com defines the separation between content and user interface with typography. Our user interface is set in system fonts, and our content is set in a custom web font, Merriweather.

49 | 50 |

Merriweather

51 |

Designed by Eben Sorkin, Merriweather is a graceful, modern serif typeface. We use Merriweather only for content. This includes content created by our users, as well as pages and posts that we publish in our news blog, on our support site, and elsewhere. Merriweather is also used for headlines on our landing pages and marketing material. Merriweather is published under the SIL Open Font License and served by the WP.com CDN.

52 | 53 |

Merriweather Sans

54 |

Designed by Eben Sorkin, Merriweather Sans is the sans-serif pair to Merriweather. We use Merriweather Sans only for secondary brand content. This includes subheadlines and body copy used in marketing material and landing pages. Merriweather Sans is not intended for use in UI elements. Merriweather Sans is published under the SIL Open Font License and served by the WP.com CDN.

55 | 56 |

System Fonts

57 |

For our user interface, we use the best available system font on every platform. On OS X 10.11 and iOS 9, we use San Francisco. On Android 4 and higher, we use Roboto. On Windows 7 and higher, we use Segoe UI. We also include the standard system UI font for various flavors of Linux.

58 |
59 | 60 |
61 |

Weights and Styles

62 | 63 |

We use the regular (400) and bold (700) weights of Merriweather and Merriweather Sans. Use the regular weight in most contexts, and the bold weight when added contrast is needed.

64 | 65 |

We use the light (300), normal (400), and semibold (600) weights of system fonts.

66 | 67 |

When specifying a font-weight in CSS, always use the numeric value instead of keywords ("400" rather than "normal") to ensure that the correct weights are being loaded.

68 | 69 |

For text set in Merriweather, set the CSS font-smoothing property to antialiased/grayscale. For text set in system fonts, always use the browser’s default antialiasing.

70 |
71 | 72 |
73 |

Typographic Modular Scale

74 | 75 |
76 |
77 |

“A modular scale, like a musical scale, is a prearranged set of harmonious proportions.”

78 |
79 |
— Robert Bringhurst
80 |
81 | 82 |

A harmonic ratio helps in creating a more harmonious design. If we use the same scale across WordPress.com, things feel more cohesive — it’s as much about consistency as it is about harmony. Instead of using arbitrary numbers, we conform to a harmonic scale.

83 | 84 |

We use a double-stranded Perfect Fifth scale, based on the ideal text size of 16px and a secondary important number of 14px. We round the values to the nearest pixel for sanity. That gives us the following scale:

85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
PixelsEms
543.375
472.953
362.25
321.969
241.5
211.313
161
140.875
110.667
128 |
129 | 130 |
131 |

Resources

132 | 133 | 139 |
140 | 141 |
142 | 148 |
149 | 150 |
151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /scss/atoms/icons/_genericons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GENERICONS v.3.0.1 3 | // 4 | // Via http://genericons.com/ 5 | // ========================================================================== 6 | 7 | 8 | // The font was graciously generated by Font Squirrel (http://www.fontsquirrel.com). We love those guys. 9 | 10 | @font-face { 11 | font-family: 'Genericons'; 12 | src: url('../fonts/genericons/genericons-regular-webfont.eot'); 13 | src: url('../fonts/genericons/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'), 14 | url('../fonts/genericons/genericons-regular-webfont.woff') format('woff'), 15 | url('../fonts/genericons/genericons-regular-webfont.ttf') format('truetype'), 16 | url('../fonts/genericons/genericons-regular-webfont.svg#genericonsregular') format('svg'); 17 | font-weight: normal; 18 | font-style: normal; 19 | } 20 | 21 | 22 | // ========================================================================== 23 | // All Genericons 24 | // ========================================================================== 25 | 26 | [class*="genericon-"]:before { 27 | display: inline-block; 28 | width: 1.4em; 29 | font-size: 1.2em; 30 | line-height: 1; 31 | font-family: 'Genericons'; 32 | text-decoration: inherit; 33 | font-weight: normal; 34 | font-style: normal; 35 | text-align: center; 36 | vertical-align: top; 37 | } 38 | 39 | // IE7 and IE6 hacks 40 | [class*="genericon-"]:before { 41 | *overflow: auto; 42 | *zoom: 1; 43 | *display: inline; 44 | } 45 | 46 | 47 | // ========================================================================== 48 | // Individual icons 49 | // ========================================================================== 50 | 51 | 52 | // Post formats 53 | .genericon-standard:before { content: '\f100'; } 54 | .genericon-aside:before { content: '\f101'; } 55 | .genericon-image:before { content: '\f102'; } 56 | .genericon-gallery:before { content: '\f103'; } 57 | .genericon-video:before { content: '\f104'; } 58 | .genericon-status:before { content: '\f105'; } 59 | .genericon-quote:before { content: '\f106'; } 60 | .genericon-link:before { content: '\f107'; } 61 | .genericon-chat:before { content: '\f108'; } 62 | .genericon-audio:before { content: '\f109'; } 63 | 64 | // Social icons 65 | .genericon-github:before { content: '\f200'; } 66 | .genericon-dribbble:before { content: '\f201'; } 67 | .genericon-twitter:before { content: '\f202'; } 68 | .genericon-facebook:before { content: '\f203'; } 69 | .genericon-facebook-alt:before { content: '\f204'; } 70 | .genericon-wordpress:before { content: '\f205'; } 71 | .genericon-googleplus:before { content: '\f206'; } 72 | .genericon-linkedin:before { content: '\f207'; } 73 | .genericon-linkedin-alt:before { content: '\f208'; } 74 | .genericon-pinterest:before { content: '\f209'; } 75 | .genericon-pinterest-alt:before { content: '\f210'; } 76 | .genericon-flickr:before { content: '\f211'; } 77 | .genericon-vimeo:before { content: '\f212'; } 78 | .genericon-youtube:before { content: '\f213'; } 79 | .genericon-tumblr:before { content: '\f214'; } 80 | .genericon-instagram:before { content: '\f215'; } 81 | .genericon-codepen:before { content: '\f216'; } 82 | .genericon-polldaddy:before { content: '\f217'; } 83 | .genericon-googleplus-alt:before { content: '\f218'; } 84 | .genericon-path:before { content: '\f219'; } 85 | 86 | // Meta icons 87 | .genericon-comment:before { content: '\f300'; } 88 | .genericon-category:before { content: '\f301'; } 89 | .genericon-tag:before { content: '\f302'; } 90 | .genericon-time:before { content: '\f303'; } 91 | .genericon-user:before { content: '\f304'; } 92 | .genericon-day:before { content: '\f305'; } 93 | .genericon-week:before { content: '\f306'; } 94 | .genericon-month:before { content: '\f307'; } 95 | .genericon-pinned:before { content: '\f308'; } 96 | 97 | // Other icons 98 | .genericon-search:before { content: '\f400'; } 99 | .genericon-unzoom:before { content: '\f401'; } 100 | .genericon-zoom:before { content: '\f402'; } 101 | .genericon-show:before { content: '\f403'; } 102 | .genericon-hide:before { content: '\f404'; } 103 | .genericon-close:before { content: '\f405'; } 104 | .genericon-close-alt:before { content: '\f406'; } 105 | .genericon-trash:before { content: '\f407'; } 106 | .genericon-star:before { content: '\f408'; } 107 | .genericon-home:before { content: '\f409'; } 108 | .genericon-mail:before { content: '\f410'; } 109 | .genericon-edit:before { content: '\f411'; } 110 | .genericon-reply:before { content: '\f412'; } 111 | .genericon-feed:before { content: '\f413'; } 112 | .genericon-warning:before { content: '\f414'; } 113 | .genericon-share:before { content: '\f415'; } 114 | .genericon-attachment:before { content: '\f416'; } 115 | .genericon-location:before { content: '\f417'; } 116 | .genericon-checkmark:before { content: '\f418'; } 117 | .genericon-menu:before { content: '\f419'; } 118 | .genericon-refresh:before { content: '\f420'; } 119 | .genericon-minimize:before { content: '\f421'; } 120 | .genericon-maximize:before { content: '\f422'; } 121 | .genericon-404:before { content: '\f423'; } 122 | .genericon-spam:before { content: '\f424'; } 123 | .genericon-summary:before { content: '\f425'; } 124 | .genericon-cloud:before { content: '\f426'; } 125 | .genericon-key:before { content: '\f427'; } 126 | .genericon-dot:before { content: '\f428'; } 127 | .genericon-next:before { content: '\f429'; } 128 | .genericon-previous:before { content: '\f430'; } 129 | .genericon-expand:before { content: '\f431'; } 130 | .genericon-collapse:before { content: '\f432'; } 131 | .genericon-dropdown:before { content: '\f433'; } 132 | .genericon-dropdown-left:before { content: '\f434'; } 133 | .genericon-top:before { content: '\f435'; } 134 | .genericon-draggable:before { content: '\f436'; } 135 | .genericon-phone:before { content: '\f437'; } 136 | .genericon-send-to-phone:before { content: '\f438'; } 137 | .genericon-plugin:before { content: '\f439'; } 138 | .genericon-cloud-download:before { content: '\f440'; } 139 | .genericon-cloud-upload:before { content: '\f441'; } 140 | .genericon-external:before { content: '\f442'; } 141 | .genericon-document:before { content: '\f443'; } 142 | .genericon-book:before { content: '\f444'; } 143 | .genericon-cog:before { content: '\f445'; } 144 | .genericon-unapprove:before { content: '\f446'; } 145 | .genericon-cart:before { content: '\f447'; } 146 | .genericon-pause:before { content: '\f448'; } 147 | .genericon-stop:before { content: '\f449'; } 148 | .genericon-skip-back:before { content: '\f450'; } 149 | .genericon-skip-ahead:before { content: '\f451'; } 150 | .genericon-play:before { content: '\f452'; } 151 | .genericon-tablet:before { content: '\f453'; } 152 | .genericon-send-to-tablet:before { content: '\f454'; } 153 | .genericon-info:before { content: '\f455'; } 154 | .genericon-notice:before { content: '\f456'; } 155 | .genericon-help:before { content: '\f457'; } 156 | .genericon-fastforward:before { content: '\f458'; } 157 | .genericon-rewind:before { content: '\f459'; } 158 | .genericon-portfolio:before { content: '\f460'; } 159 | 160 | // Generic shapes 161 | .genericon-uparrow:before { content: '\f500'; } 162 | .genericon-rightarrow:before { content: '\f501'; } 163 | .genericon-downarrow:before { content: '\f502'; } 164 | .genericon-leftarrow:before { content: '\f503'; } -------------------------------------------------------------------------------- /images/handbook-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 15 | 16 | 17 | 18 | 21 | 25 | 27 | 31 | 34 | 36 | 40 | 45 | 51 | 53 | 56 | 60 | 64 | 65 | 66 | 67 | 68 | 70 | 71 | 77 | 78 | 81 | 83 | 84 | 86 | 88 | 90 | 94 | 97 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /images/handbook-logo-horizontal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | 18 | 23 | 25 | 29 | 32 | 34 | 38 | 44 | 50 | 52 | 56 | 61 | 65 | 66 | 67 | 69 | 70 | 76 | 77 | 81 | 83 | 84 | 86 | 88 | 90 | 94 | 98 | 102 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /scss/atoms/_normalize.scss: -------------------------------------------------------------------------------- 1 | // This is a combo of normalize.css v1.0.1 via h5bp.com 2 | // MIT License | git.io/normalize 3 | 4 | // ========================================================================== 5 | // HTML5 display definitions 6 | // ========================================================================== 7 | 8 | // Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. 9 | article, 10 | aside, 11 | details, 12 | figcaption, 13 | figure, 14 | footer, 15 | header, 16 | hgroup, 17 | nav, 18 | section, 19 | summary { 20 | display: block; 21 | } 22 | 23 | // Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 24 | audio, 25 | canvas, 26 | video { 27 | display: inline-block; 28 | *display: inline; 29 | *zoom: 1; 30 | } 31 | 32 | // Prevents modern browsers from displaying `audio` without controls. 33 | // Remove excess height in iOS 5 devices. 34 | audio:not([controls]) { 35 | display: none; 36 | height: 0; 37 | } 38 | 39 | // Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, 40 | // and Safari 4. 41 | // Known issue: no IE 6 support. 42 | [hidden] { 43 | display: none; 44 | } 45 | 46 | // ========================================================================== 47 | // Base 48 | // ========================================================================== 49 | 50 | // 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using 51 | // `em` units. 52 | // 2. Prevents iOS text size adjust after orientation change, without disabling 53 | // user zoom. 54 | html { 55 | font-size: 100%; // 1 56 | -webkit-text-size-adjust: 100%; // 2 57 | -ms-text-size-adjust: 100%; // 2 58 | } 59 | 60 | // Addresses `font-family` inconsistency between `textarea` and other form 61 | // elements. 62 | html, 63 | button, 64 | input, 65 | select, 66 | textarea { 67 | font-family: sans-serif; 68 | } 69 | 70 | // Addresses margins handled incorrectly in IE 6/7. 71 | body { 72 | margin: 0; 73 | } 74 | 75 | // ========================================================================== 76 | // Links 77 | // ========================================================================== 78 | 79 | // Addresses `outline` inconsistency between Chrome and other browsers. 80 | a:focus { 81 | outline: thin dotted; 82 | } 83 | 84 | // Improves readability when focused and also mouse hovered in all browsers. 85 | a:active, 86 | a:hover { 87 | outline: 0; 88 | } 89 | 90 | // ========================================================================== 91 | // Typography 92 | // ========================================================================== 93 | 94 | // Addresses font sizes and margins set differently in IE 6/7. 95 | // Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, 96 | // and Chrome. 97 | h1 { 98 | font-size: 2em; 99 | margin: 0.67em 0; 100 | } 101 | 102 | h2 { 103 | font-size: 1.5em; 104 | margin: 0.83em 0; 105 | } 106 | 107 | h3 { 108 | font-size: 1.17em; 109 | margin: 1em 0; 110 | } 111 | 112 | h4 { 113 | font-size: 1em; 114 | margin: 1.33em 0; 115 | } 116 | 117 | h5 { 118 | font-size: 0.83em; 119 | margin: 1.67em 0; 120 | } 121 | 122 | h6 { 123 | font-size: 0.75em; 124 | margin: 2.33em 0; 125 | } 126 | 127 | // Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. 128 | abbr[title] { 129 | border-bottom: 1px dotted; 130 | } 131 | 132 | // Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. 133 | b, 134 | strong { 135 | font-weight: $bold; 136 | } 137 | 138 | blockquote { 139 | margin: 1em 40px; 140 | } 141 | 142 | // Addresses styling not present in Safari 5 and Chrome. 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | // Addresses styling not present in IE 6/7/8/9. 148 | mark { 149 | background: #ff0; 150 | color: #000; 151 | } 152 | 153 | // Addresses margins set differently in IE 6/7. 154 | p, 155 | pre { 156 | margin: 1em 0; 157 | } 158 | 159 | // Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. 160 | code, 161 | kbd, 162 | pre, 163 | samp { 164 | font-family: monospace, serif; 165 | _font-family: 'courier new', monospace; 166 | font-size: 1em; 167 | } 168 | 169 | // Improves readability of pre-formatted text in all browsers. 170 | pre { 171 | white-space: pre; 172 | white-space: pre-wrap; 173 | word-wrap: break-word; 174 | } 175 | 176 | // Addresses CSS quotes not supported in IE 6/7. 177 | q { 178 | quotes: none; 179 | } 180 | 181 | // Addresses `quotes` property not supported in Safari 4. 182 | q:before, 183 | q:after { 184 | content: ''; 185 | content: none; 186 | } 187 | 188 | // Addresses inconsistent and variable font size in all browsers. 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | // Prevents `sub` and `sup` affecting `line-height` in all browsers. 194 | sub, 195 | sup { 196 | font-size: 75%; 197 | line-height: 0; 198 | position: relative; 199 | vertical-align: baseline; 200 | } 201 | 202 | sup { 203 | top: -0.5em; 204 | } 205 | 206 | sub { 207 | bottom: -0.25em; 208 | } 209 | 210 | // ========================================================================== 211 | // Lists 212 | // ========================================================================== 213 | 214 | // Addresses margins set differently in IE 6/7. 215 | dl, 216 | menu, 217 | ol, 218 | ul { 219 | margin: 1em 0; 220 | } 221 | 222 | dd { 223 | margin: 0 0 0 40px; 224 | } 225 | 226 | // Addresses paddings set differently in IE 6/7. 227 | menu, 228 | ol, 229 | ul { 230 | padding: 0 0 0 40px; 231 | } 232 | 233 | // Corrects list images handled incorrectly in IE 7. 234 | nav ul, 235 | nav ol { 236 | list-style: none; 237 | list-style-image: none; 238 | } 239 | 240 | // ========================================================================== 241 | // Embedded content 242 | // ========================================================================== 243 | 244 | // 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. 245 | // 2. Improves image quality when scaled in IE 7. 246 | img { 247 | border: 0; // 1 248 | -ms-interpolation-mode: bicubic; // 2 249 | } 250 | 251 | // Corrects overflow displayed oddly in IE 9. 252 | svg:not(:root) { 253 | overflow: hidden; 254 | } 255 | 256 | // ========================================================================== 257 | // Figures 258 | // ========================================================================== 259 | 260 | // Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 261 | figure { 262 | margin: 0; 263 | } 264 | 265 | // ========================================================================== 266 | // Forms 267 | // ========================================================================== 268 | 269 | // Corrects margin displayed oddly in IE 6/7. 270 | form { 271 | margin: 0; 272 | } 273 | 274 | // Define consistent border, margin, and padding. 275 | fieldset { 276 | border: 1px solid #c0c0c0; 277 | margin: 0 2px; 278 | padding: 0.35em 0.625em 0.75em; 279 | } 280 | 281 | // 1. Corrects color not being inherited in IE 6/7/8/9. 282 | // 2. Corrects text not wrapping in Firefox 3. 283 | // 3. Corrects alignment displayed oddly in IE 6/7. 284 | legend { 285 | border: 0; // 1 286 | padding: 0; 287 | white-space: normal; // 2 288 | *margin-left: -7px; // 3 289 | } 290 | 291 | // 1. Corrects font size not being inherited in all browsers. 292 | // 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, 293 | // and Chrome. 294 | // 3. Improves appearance and consistency in all browsers. 295 | button, 296 | input, 297 | select, 298 | textarea { 299 | font-size: 100%; // 1 300 | margin: 0; // 2 301 | vertical-align: baseline; // 3 302 | *vertical-align: middle; // 3 303 | } 304 | 305 | // Addresses Firefox 3+ setting `line-height` on `input` using `!important` in 306 | // the UA stylesheet. 307 | button, 308 | input { 309 | line-height: normal; 310 | } 311 | 312 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 313 | // and `video` controls. 314 | // 2. Corrects inability to style clickable `input` types in iOS. 315 | // 3. Improves usability and consistency of cursor style between image-type 316 | // `input` and others. 317 | // 4. Removes inner spacing in IE 7 without affecting normal text inputs. 318 | // Known issue: inner spacing remains in IE 6. 319 | button, 320 | html input[type="button"], // 1 321 | input[type="reset"], 322 | input[type="submit"] { 323 | -webkit-appearance: button; // 2 324 | cursor: pointer; // 3 325 | *overflow: visible; // 4 326 | } 327 | 328 | // Re-set default cursor for disabled elements. 329 | button[disabled], 330 | input[disabled] { 331 | cursor: default; 332 | } 333 | 334 | // 1. Addresses box sizing set to content-box in IE 8/9. 335 | // 2. Removes excess padding in IE 8/9. 336 | // 3. Removes excess padding in IE 7. 337 | // Known issue: excess padding remains in IE 6. 338 | input[type="checkbox"], 339 | input[type="radio"] { 340 | box-sizing: border-box; // 1 341 | padding: 0; // 2 342 | *height: 13px; // 3 343 | *width: 13px; // 3 344 | } 345 | 346 | // 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 347 | // 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 348 | // (include `-moz` to future-proof). 349 | input[type="search"] { 350 | -webkit-appearance: textfield; // 1 351 | -moz-box-sizing: content-box; 352 | -webkit-box-sizing: content-box; // 2 353 | box-sizing: content-box; 354 | } 355 | 356 | // Removes inner padding and search cancel button in Safari 5 and Chrome 357 | // on OS X. 358 | input[type="search"]::-webkit-search-cancel-button, 359 | input[type="search"]::-webkit-search-decoration { 360 | -webkit-appearance: none; 361 | } 362 | 363 | // Removes inner padding and border in Firefox 3+. 364 | button::-moz-focus-inner, 365 | input::-moz-focus-inner { 366 | border: 0; 367 | padding: 0; 368 | } 369 | 370 | // 1. Removes default vertical scrollbar in IE 6/7/8/9. 371 | // 2. Improves readability and alignment in all browsers. 372 | textarea { 373 | overflow: auto; // 1 374 | vertical-align: top; // 2 375 | } 376 | 377 | // ========================================================================== 378 | // Tables 379 | // ========================================================================== 380 | 381 | // Remove most spacing between table cells. 382 | table { 383 | border-collapse: collapse; 384 | border-spacing: 0; 385 | } 386 | 387 | 388 | // Sets box-sizing default to border-box on all elements 389 | *, 390 | *:before, 391 | *:after { 392 | // Paul Irish box sizing!!! 393 | // http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 394 | box-sizing: border-box; 395 | 396 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 397 | only screen and (min-resolution: 144dpi) { 398 | // Style adjustments for high resolution devices 399 | 400 | // Only looks good on HiDPI and on icons 401 | -webkit-font-smoothing: antialiased; 402 | 403 | } 404 | } -------------------------------------------------------------------------------- /js/vendor/modernizr-2.6.2.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f