├── .bowerrc ├── .gitignore ├── README.md ├── bower.json ├── config.rb ├── css ├── style-guide-overrides.css ├── style-guide-source.css └── style-guide.css ├── js └── style-guide.js ├── page-style-guide-source.twig ├── page-style-guide.twig ├── sass ├── components │ ├── _style-guide-imports.scss │ └── _style-guide-variables.scss ├── style-guide-overrides.scss ├── style-guide-source.scss └── style-guide.scss └── templates ├── components ├── style-mod.twig └── style-nav.twig └── style-guide.twig /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | *.sublime* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Upstatement Style Guide 2 | #### Template for Twig/Timber 3 | 4 | ### What Is This? 5 | A style guide starter theme that helps display typography, objects, and other design patterns. It’s templated using Twig & Timber for easy inclusion in our WordPress projects. 6 | 7 | The Style Guide is designed for easy use by our clients. It lets the designer **name components** and **write notes** about when to use them. It gives the client **code snips** that make it easy to copy, paste, and replicate our work. 8 | 9 | Check out this [live example](http://harvardlawreview.org/style-guide/) of the Style Guide in action for [The Harvard Law Review](http://harvardlawreview.org/style-guide/). 10 | 11 | ### How Does it Work? 12 | 13 | This package ships with some standard patterns (buttons, text styles, section headers, etc.) to help you get started. But nothing is set in stone. Delete anything you don’t want, replace anything the needs changing, and add custom components for your project. 14 | 15 | ### Installation 16 | 17 | 1. **Get the Style Guide** Download the zip file for this repo 18 | 2. **Add To Your Project** Place the folder in top level of your theme, this will be something like `wp-content/themes/[your theme name]` 19 | 3. **Install Dependencies** Navigate to the folder in terminal. Run `bower install` 20 | 4. **Process CSS** Navigate to the folder in terminal. Run `compass watch` 21 | 5. **Render the Style Guide** WordPress needs to know the Style Guide exists in order to render it. You’ll need to point WP to the two twig templates that show the Style Guide, `page-style-guide.twig` and `page-style-guide-source.twig`. These can be found at the top level of this repository. To do this, you have to take two steps. 22 | 23 | * First, **move the `page-style-guide.twig` and `page-style-guide-source.twig` files** to a directory where WordPress will find the `page-` prefix and render pages. This is commonly a folder named `views` or `templates` and probably contains several other pages with the same prefix. 24 | 25 | * Second, **create the pages in the WordPress Pages menu**. The pages should be named Style Guide and Style Guide Source. It’s important that their permalinks exactly match the name of the files between the `page-` prefix and `.twig` suffix. Here’s what it should look like … 26 | 27 | _Style Guide_ 28 | ![Style Guide](http://i.imgur.com/1gHvvfS.jpg) 29 | 30 | _Style Guide Source_ 31 | ![Style Guide Source](http://i.imgur.com/XM2tVRY.jpg) 32 | 33 | 34 | ### How To Use 35 | 36 | After you’ve installed and confirmed that WordPress is rendering the Style Guide, you’ll want to customize it. Here’s how. 37 | 38 | #### Naming 39 | First, you’ll want to personalize your new Style Guide with the project name. Do this via the `client` variable on line 3 of `style-guide.twig`. 40 | 41 | ```twig 42 | {% set client = ‘Your Client Name’ %} 43 | ``` 44 | 45 | You’ll also want to set a relative path so all the base style guide components (CSS, JS, etc.) will link correctly. You can do this all from the `path` variable on line 4 of `style-guide.twig` 46 | 47 | ```twig 48 | {% set path = '/wp-content/themes/your_theme’ %} 49 | ``` 50 | 51 | #### Add Custom Code 52 | Add the appropriate Fonts, CSS, JS, etc. for your project. You’ll do this in the file named `page-style-guide-source.twig`. 53 | 54 | Use the `header_scripts` and `footer_scripts` blocks to add your custom elements and have them load at the top or bottom of the page, respectively. 55 | 56 | ```twig 57 | {% block header_scripts %} 58 | {# Your Fonts, CSS, JS, etc. go here #} 59 | {% endblock header_scripts %} 60 | 61 | {% block footer_scripts %} 62 | {# Your Fonts, CSS, JS, etc. go here #} 63 | {% endblock footer_scripts %} 64 | ``` 65 | 66 | #### Add Your Elements 67 | You’ll want to augment the Style Guide with your own HTML components — typography, teases, buttons, etc. Do this in file named `page-style-guide-source.twig`. 68 | 69 | **Basic Style Example** 70 | The template accepts raw HTML as well as [Twig includes](http://twig.sensiolabs.org/doc/tags/include.html). In the most basic template, you can simply name your component and add the appropriate HTML. 71 | 72 | ```twig 73 | {# 74 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 75 | Headlines 76 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 77 | #} 78 | {% embed style_mod 79 | with { title:'Headlines' } %} 80 | 81 | {% block markup %} 82 |

Headline Level 1

83 |

Headline Level 2

84 |

Headline Level 3

85 | {% endblock markup %} 86 | 87 | {% endembed %} 88 | ``` 89 | 90 | **Adding Descriptions** 91 | You can also add a description of the component and give advice for when to use it in the design using the `descriptions` variable. 92 | 93 | ```twig 94 | {# 95 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 96 | Section Headers 97 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 98 | #} 99 | {% embed style_mod 100 | with { title:'Section Headers' } %} 101 | 102 | {% set descriptions = [ 103 | 'Describes the contents of a section (for instance, Must Reads)', 104 | 'Fancy h3 should be used sparingly' 105 | ] 106 | %} 107 | 108 | {% block markup %} 109 |

Section h1

110 |

Section h2

111 |

Section h3

112 |

Section h4

113 | {% endblock markup %} 114 | 115 | {% endembed %} 116 | ``` 117 | 118 | **Adding Custom Classes** 119 | Each style mod receives a unique class to help you style overrides when necessary. You can also add your own custom class to the `style-mod` container that wraps your HTML via the `class` variable, passed using the `with` directive on the style_mod embed. Here’s an example in use. 120 | 121 | ```twig 122 | {# 123 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 124 | Article Pullquote 125 | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 126 | #} 127 | {% embed style_mod 128 | with { title:'Article Pullquote', 129 | class: 'no-dropcap’ 130 | } %} 131 | 132 | {% block markup %} 133 |
134 |

Assume that no search for this weapon was underway; our best guess is that even Sherlock Holmes never would have found it in the absence of the confession.

135 |
136 | {% endblock markup %} 137 | 138 | {% endembed %} 139 | ``` 140 | 141 | #### Overrides 142 | Sometimes when you add project HTML, you’ll want to customize certain design attributes for the Style Guide alone. Make any necessary overrides in `sass/style-guide-overrides.scss` 143 | 144 | 145 | 146 | ### Dependencies 147 | * **NPM** - [Install NPM](https://www.npmjs.org/package/npm-install) 148 | * **Bower** - [Install Bower](http://bower.io/#install-bower) 149 | * **Compass** - [Install Compass](http://compass-style.org/install/) 150 | 151 | ### What’s Included? 152 | 153 | The files and what each one does. 154 | 155 | * **Style Guide** *style-guide.twig* 156 | Base template. Set client name here. 157 | 158 | * **Style Guide Source** *page-style-guide-source.twig* 159 | Contains This is where you’ll do most of your work. 160 | 161 | * **Style Guide Container** *page-style-guide.twig* 162 | There should be no need to touch this file. 163 | 164 | 165 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ups-style-guide-twig", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/Upstatement/style-guide-twig", 5 | "authors": [ 6 | "Tito Bottitta " 7 | ], 8 | "description": "Upstatement Style Guide for Twig/Timber", 9 | "license": "MIT", 10 | "private": true, 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "jquery": "~2.1.1", 20 | "google-code-prettify": "~1.0.3", 21 | "modernizr": "~2.8.3", 22 | "Upbase": "git@github.com:Upstatement/upbase.git#~0.1.91" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | # Set this to the root of your project when deployed: 3 | http_path = "/" 4 | css_dir = "css" 5 | sass_dir = "sass" 6 | images_dir = "images" 7 | javascripts_dir = "js" 8 | fonts_dir = "sass/fonts" 9 | relative_assets = true 10 | add_import_path "bower_components/Upbase/components" 11 | line_comments = true 12 | output_style = :compressed 13 | # output_style = :compact :compressed :nested :expanded 14 | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | # relative_assets = true 17 | -------------------------------------------------------------------------------- /css/style-guide-overrides.css: -------------------------------------------------------------------------------- 1 | *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.ui-block:last-child,.ui-block.last{margin-right:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.style-mod .h1,.style-mod .h2,.style-mod .h3,.style-mod .h4,.style-mod .h5,.style-mod .txt-sm,.style-mod .txt,.style-mod .txt-lg{margin-bottom:20px}.style-mod .article-byline-mod{margin-bottom:0}.style-mod .article-txt{max-width:600px}.style-mod .article-lead-art-mod{max-width:680px}.style-mod .comment-mod{max-width:680px}.style-mod.section-headers .section-h2,.style-mod.section-headers .section-h{margin-bottom:40px}.style-mod .btn-large,.style-mod .btn-medium,.style-mod .btn-small{margin-right:30px}.style-mod .section-h3,.style-mod .section-h4{text-align:center}.style-mod .fancy-grid{background-color:#fdfaf3}.style-mod .placeholder{background:#cdcdcd;width:90%;height:120px;margin-top:15px}.style-mod .star-line{margin-bottom:30px}.style-mod .search{width:16px}@media (min-width: 900px){.style-mod .pullquote{margin-left:0px;margin-right:0px}}.style-example--link-types>a{font-size:16px;margin-right:50px}.style-example--link-types .hdr-logo-img-wide{width:120px}.no-dc .article-txt>p:first-of-type:first-letter{font:normal 18px/180% "Hoefler Titling A","Hoefler Titling B",Georgia,Times,Times New Roman,serif;float:none;display:inline;margin:0;color:#333;text-transform:none}.no-dc .article-txt>p.pullquote:first-of-type:first-letter{color:#156627;font:italic 300 26px/146% "Hoefler Titling A","Hoefler Titling B",Georgia,Times,Times New Roman,serif}@media (min-width: 500px){.no-dc .article-txt>p.pullquote:first-of-type:first-letter{font-size:32px}}.no-dc .article-txt>p>strong:first-of-type:first-letter{font-weight:bold}.article-txt h1:first-child{margin-top:0}.color-mod{width:80px;height:110px;display:inline-block;position:relative;margin:10px 20px 10px 0;border:1px solid #ccc}.color-txt{position:absolute;width:100%;text-align:center;padding:5px 0;bottom:0;background-color:white;border:1px solid #ccc}.color-name{font:600 12px "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;display:block}.color-hex{font:400 12px "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;text-transform:uppercase}.sample-content{height:130px;font:400 18px/155% "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;background-color:#fdfaf3;padding:20px}.bg-red{background-color:#9B1518}.bg-green{background-color:#156627}.bg-blue{background-color:#2658A8}.bg-purple{background-color:#6B1F5E}.bg-black{background-color:#000}.site-icon-mod .hdr-logo-img-wide{display:block;margin-bottom:20px}.chimp-wrap{padding:5%;width:100%;font-size:1.3em;line-height:1.4em;text-align:center}.chimp-img{width:89%;max-width:902px}.chimp-section{padding:0 2em 5em 2em}.chimp-section p{padding:0 3em}.chimp-section h2{text-align:center}.chimp-section em{font-weight:600}.chimp-section a{color:inherit;text-decoration:underline}.chimp-section a:hover{text-decoration:none}.chimp-list{list-style-type:circle;text-align:left;padding-left:14%} 2 | -------------------------------------------------------------------------------- /css/style-guide-source.css: -------------------------------------------------------------------------------- 1 | *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.ui-block:last-child,.ui-block.last{margin-right:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.style-group-h{color:#000;padding:0px 7px 9px;font-size:16px;margin-bottom:20px;text-shadow:rgba(255,255,255,0.15) 0 -1px 1px;border-bottom:1px solid #e5e5e5;text-transform:uppercase;letter-spacing:1px}.style-mod{background-color:#fff;margin-bottom:40px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0 5px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0 5px;box-shadow:rgba(0,0,0,0.1) 0px 0 5px;overflow:hidden}.style-mod>.inner{padding:24px}.style-hgroup{background-color:#ededed;padding:8px 16px 7px;border-bottom:1px solid #ddd;position:relative;*zoom:1}.style-hgroup:after{content:"";display:table;clear:both}.style-example-rel{position:relative}.style-h{font-size:12px;color:#999;float:left}.code-btn{font-size:0.69231em;letter-spacing:1px;text-transform:uppercase;color:#999;padding:5px 11px 6px;margin-top:-4px;position:absolute;right:10px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.code-btn:hover{background-color:#ddd;cursor:pointer}.style-details{-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;height:0;display:none;border-top:1px solid #e5e5e5;background-color:#333;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0;border-radius:0 0 2px 2px}.style-details>.inner{padding:14px 16px}.details-off .style-details,.details-all-on .details-off .style-details{display:none}.details-on .style-details,.details-all-on .style-details{display:block;height:auto}.detail-h{font:normal bold 0.84615em "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;color:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);opacity:0.6}.style-meta{border-bottom:1px solid #444}.code-example .detail-h:hover{cursor:pointer}.code-copy{display:inline-block;text-indent:-9999em;height:20px;width:19px;margin-left:2px;top:-3px;position:relative;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.touch .code-copy,.detail-h:hover .code-copy{filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1}.detail-list{max-width:600px;list-style:square outside;padding:0 0 0 22px;color:#bbb}.detail-list>li{margin-bottom:6px}.detail-list>li>p{color:#ddd}.html-code{padding:0;color:#666;font:normal 12px/130% "Courier New",Courier,mono;white-space:pre;white-space:pre-wrap;word-wrap:break-word}.html-code::-moz-selection{background-color:rgba(0,0,0,0.1);color:#fff;text-shadow:none}.html-code::selection{background-color:rgba(0,0,0,0.1);color:#fff;text-shadow:none;-webkit-appearance:none}.html-code .nocode{background-color:none;color:#000}.html-code .str{color:#ffa0a0}.html-code .kwd{color:#f0e68c;font-weight:bold}.html-code .com{color:#ffa0a0}.html-code .typ{color:#98fb98}.html-code .lit{color:#cd5c5c}.html-code .pun{color:rgba(255,255,255,0.35)}.html-code .tag{color:#f0e68c;font-weight:bold}.html-code .atn{color:#bdb76b;font-weight:bold}.html-code .atv{color:#87ceeb}.html-code .dec{color:#98fb98}.html-code .pln{color:rgba(255,255,255,0.5)}.html-code .pln:first-child{width:20px;height:14px;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline}.html-code li:last-child .pln:first-child{width:0;margin-top:4px}.html-code .highlight{color:#b32d47}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0{list-style-type:none}li.L1{list-style-type:none}li.L2{list-style-type:none}li.L3{list-style-type:none}li.L4{list-style-type:none}li.L5{list-style-type:none}li.L6{list-style-type:none}li.L7{list-style-type:none}li.L8{list-style-type:none}li.L9{list-style-type:none}li.L10{list-style-type:none}li.L11{list-style-type:none}li.L12{list-style-type:none}li.L13{list-style-type:none}li.L14{list-style-type:none}li.L15{list-style-type:none}li.L16{list-style-type:none}li.L17{list-style-type:none}li.L18{list-style-type:none}li.L19{list-style-type:none}li.L20{list-style-type:none}li.L21{list-style-type:none}li.L22{list-style-type:none}li.L23{list-style-type:none}li.L24{list-style-type:none}li.L25{list-style-type:none}li.L26{list-style-type:none}li.L27{list-style-type:none}li.L28{list-style-type:none}li.L29{list-style-type:none}li.L30{list-style-type:none}li.L31{list-style-type:none}li.L32{list-style-type:none}li.L33{list-style-type:none}li.L34{list-style-type:none}li.L35{list-style-type:none}li.L36{list-style-type:none}li.L37{list-style-type:none}li.L38{list-style-type:none}li.L39{list-style-type:none}li.L40{list-style-type:none}li.L41{list-style-type:none}li.L42{list-style-type:none}li.L43{list-style-type:none}li.L44{list-style-type:none}li.L45{list-style-type:none}li.L46{list-style-type:none}li.L47{list-style-type:none}li.L48{list-style-type:none}li.L49{list-style-type:none}li.L50{list-style-type:none}@media print{pre{background-color:none}pre .str,code .str{color:#060}pre .kwd,code .kwd{color:#006;font-weight:bold}pre .com,code .com{color:#600;font-style:italic}pre .typ,code .typ{color:#404;font-weight:bold}pre .lit,code .lit{color:#044}pre .pun,code .pun{color:#440}pre .pln,code .pln{color:#000}pre .tag,code .tag{color:#006;font-weight:bold}pre .atn,code .atn{color:#404}pre .atv,code .atv{color:#060}} 2 | -------------------------------------------------------------------------------- /css/style-guide.css: -------------------------------------------------------------------------------- 1 | *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.ui-block:last-child,.ui-block.last{margin-right:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{line-height:0;vertical-align:middle}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small;-webkit-overflow-scrolling:touch}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace, sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}ul,ol{list-style:none}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#1d78af;color:#FFF;text-shadow:none}::selection{background:#1d78af;color:#FFF;text-shadow:none}a:link{-webkit-tap-highlight-color:#1d78af}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.a11y-only{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}a{text-decoration:none}.style-guide-inner{-moz-transition-property:-moz-transform,width;-o-transition-property:-o-transform,width;-webkit-transition-property:-webkit-transform,width;transition-property:transform,width;-moz-transition-duration:0.2s,0.4s;-o-transition-duration:0.2s,0.4s;-webkit-transition-duration:0.2s,0.4s;transition-duration:0.2s,0.4s;-moz-transition-timing-function:ease-in,ease-in;-o-transition-timing-function:ease-in,ease-in;-webkit-transition-timing-function:ease-in,ease-in;transition-timing-function:ease-in,ease-in;margin:0 auto;display:block;height:15000px}.nav-active .style-guide-inner{-moz-transform:translateX(220px);-ms-transform:translateX(220px);-webkit-transform:translateX(220px);transform:translateX(220px)}.auto .style-guide-inner{width:100%}.large .style-guide-inner{width:1074px}.medium .style-guide-inner{width:680px}.small .style-guide-inner{width:320px}.sticky .style-guide-inner{margin-top:40px}.style-layout,.style-content{margin:0 auto}.style-bd-outer,.style-bd-inner{-moz-transition:width 0.2s ease-in;-o-transition:width 0.2s ease-in;-webkit-transition:width 0.2s ease-in;transition:width 0.2s ease-in;background-color:#f6f6f6}.style-bd-outer{overflow-y:scroll}.style-content{padding:40px 20px 35px;background-color:#f6f6f6;*zoom:1}.style-content:after{content:"";display:table;clear:both}.sticky .style-content{margin-top:80px}.nav-active .style-content{-moz-transform:translate3d(220px, 0, 0);-ms-transform:translate3d(220px, 0, 0);-webkit-transform:translate3d(220px, 0, 0);transform:translate3d(220px, 0, 0)}.style-main{margin:0 auto;max-width:1074px}i{font-style:normal}.style-hdr{background-color:#000;padding:25px 30px 20px;position:relative;*zoom:1;border-bottom:1px solid #fff;min-width:700px}.style-hdr:after{content:"";display:table;clear:both}.style-page-h{font:normal bold 2.15385em "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;color:#fff;float:left}.style-page-h .thin{font-weight:normal}.upstatement-logo{float:right;width:120px;margin-top:2px}.page-browser{background-color:#f5f5f5;margin-bottom:120px}.browser-mod{background-color:#fff;margin:50px auto 80px;max-width:1400px}@media (min-width: 960px){.browser-mod{width:90%;border:1px solid #e5e5e5;border-top:0}}.browser-h{font:bold 10px Arial,Helvetica,Verdana,sans-serif;padding:10px 5%;margin:0;text-transform:uppercase;letter-spacing:1px;background-color:#ededed;border-bottom:#ddd}@media (min-width: 600px){.browser-h{font-size:11px}}.browser-list{font:normal 16px Arial,Helvetica,Verdana,sans-serif}@media (min-width: 600px){.browser-list{font-size:21px}}.browser-list>li>a{display:block;color:#222;text-decoration:none;padding:12px 5%;border-bottom:1px solid #ededed;position:relative}@media (min-width: 600px){.browser-list>li>a{padding:14px 5%}}.browser-list>li>a:before,.browser-list>li>a:after{content:'';position:absolute;z-index:56}.browser-list>li>a:before{top:13px;right:20px;-moz-transform:rotate(0.1deg);-ms-transform:rotate(0.1deg);-webkit-transform:rotate(0.1deg);transform:rotate(0.1deg);border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #000;border-right:0px solid transparent;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=15);opacity:0.15}@media (min-width: 600px){.browser-list>li>a:before{top:18px}}.browser-list>li>a:after{top:14px;right:22px;-moz-transform:rotate(0.1deg);-ms-transform:rotate(0.1deg);-webkit-transform:rotate(0.1deg);transform:rotate(0.1deg);border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #fff;border-right:0px solid transparent}@media (min-width: 600px){.browser-list>li>a:after{top:19px}}.browser-list>li>a:hover:before{border-left-color:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1}.browser-list>li>a:hover:after{border-left-color:#1d78af}.browser-list>li>a:hover{color:#fff;background-color:#1d78af;text-shadow:rgba(0,0,0,0.1) 0 -1px 0}.browser-list-sub{display:block;color:#999;font:normal 11px Arial,Helvetica,Verdana,sans-serif;text-rendering:optimizeLegibility}.nav-trigger{width:18px;height:16px;float:left;margin:11px 8px 11px 30px}.controls-nav-list{padding:0 30px;margin-left:40px}.controls-nav{height:40px;position:relative;display:block;background-color:#fff;border-bottom:1px solid #e5e5e5;-moz-box-shadow:rgba(0,0,0,0.15) 0px 0 5px;-webkit-box-shadow:rgba(0,0,0,0.15) 0px 0 5px;box-shadow:rgba(0,0,0,0.15) 0px 0 5px;min-width:700px}.sticky .controls-nav{position:fixed;top:0;width:100%;z-index:9999}.size-li{display:inline-block;padding:11px 15px 0 0}.size-a{font-size:0.84615em;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:2px 7px;color:#000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-transition:background 0.1s ease-out;-o-transition:background 0.1s ease-out;-webkit-transition:background 0.1s ease-out;transition:background 0.1s ease-out}.size-a:hover{background-color:#dfdfdf}.size-a-on,.small .size-a-small,.medium .size-a-medium,.large .size-a-large,.auto .size-a-auto{background-color:#000;color:#fff}.size-a-on:hover,.small .size-a-small:hover,.medium .size-a-medium:hover,.large .size-a-large:hover,.auto .size-a-auto:hover{background-color:#000}.query-sim{width:100%;height:100%}.container-width{height:100%;overflow:visible;-moz-transition:width 0.5s ease-in;-o-transition:width 0.5s ease-in;-webkit-transition:width 0.5s ease-in;transition:width 0.5s ease-in}.small .container-width{width:350px}.medium .container-width{width:650px}.large .container-width{width:1150px}.auto .container-width{width:100%}.all-code-btn{font-size:0.84615em;letter-spacing:1px;text-transform:uppercase;color:#989898;padding:6px 11px;display:block;margin-right:10px;position:absolute;right:10px;top:7px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.style-hdr .all-code-btn,.all-code-btn:hover{background-color:#ddd;cursor:pointer}.style-nav{-moz-transition:-moz-transform 0.2s ease-in;-o-transition:-o-transform 0.2s ease-in;-webkit-transition:-webkit-transform 0.2s ease-in;transition:transform 0.2s ease-in;-moz-transform:translateX(-220px);-ms-transform:translateX(-220px);-webkit-transform:translateX(-220px);transform:translateX(-220px);width:220px;padding:20px 0;text-align:right;position:absolute;display:block;height:100%;background-color:#222;border-right:1px solid #e5e5e5}.nav-active .style-nav{-moz-transform:translateX(0);-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}.sticky .style-nav{position:fixed;top:0;padding:60px 0 20px;overflow:scroll}.style-nav-h{font:800 12px "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:8px;color:#fff;padding:0.3em 2em 0.3em 1em}.style-nav-h:first-child{margin-top:0}.style-nav-h>a{color:#fff}.style-nav-list>li{display:block;margin-bottom:1px}.style-nav-list>li>a{color:#999;font-weight:500;font-size:1em;text-align:right;line-height:1.5em;text-decoration:none;padding:0.5em 2em 0.5em 1em;display:block;text-shadow:rgba(0,0,0,0.75) 0 -1px 1px;-moz-transition:background 0.1s ease-out;-o-transition:background 0.1s ease-out;-webkit-transition:background 0.1s ease-out;transition:background 0.1s ease-out}.active .style-nav-list>li>a,.style-nav-list>li>a:hover{color:#444;background-color:#e5e5e5;text-shadow:rgba(255,255,255,0.75) 0 -1px 1px} 2 | -------------------------------------------------------------------------------- /js/style-guide.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | $(".style-example").each(function(){ 4 | var $this = $(this); 5 | var html = $this.html(); 6 | var $code = $this.closest('.style-mod').find('.html-code'); 7 | html = html.replace(//g, ">"); 9 | html = html.trim(); 10 | $code.html(html); 11 | }); 12 | 13 | $("body").on("click", ".details-trigger", function(){ 14 | var $this = $(this); 15 | var $mod = $this.closest(".style-mod"); // find the closest style mod 16 | var $mods = $(".style-guide-inner").contents().find(".style-mod"); // find all style mods 17 | var $verb = $this.find(".verb"); // find this verb 18 | var $verbs = $(".style-guide-inner").contents().find(".verb"); // find all verbs 19 | var $body = $(".style-guide-inner").contents().find('body'); 20 | 21 | // If it's a standard detail trigger ... 22 | if ($this.hasClass("code-btn")) { 23 | // ... add the show command to the parent module 24 | if ($mod.hasClass("details-on")) { 25 | $verb.text("Show"); 26 | $mod.removeClass("details-on").addClass("details-off"); 27 | } else { 28 | $verb.text("Hide"); 29 | $mod.removeClass("details-off").addClass("details-on"); 30 | } 31 | // Otherwise it's the show all code button ... 32 | } else { 33 | // so add class to the body 34 | if ($body.hasClass("details-all-on")) { 35 | $verbs.text("Show"); 36 | $body.removeClass("details-all-on"); 37 | // Clean all mods with an active class, set them to on state 38 | $mods.removeClass("details-on details-off").addClass("details-off"); 39 | } else { 40 | $verbs.text("Hide"); 41 | $body.addClass("details-all-on"); 42 | // Clean all mods with an active class, set them to off state 43 | $mods.removeClass("details-on details-off").addClass("details-on"); 44 | } 45 | } 46 | }); 47 | 48 | var innerIframe = $(".style-guide-inner"); 49 | $('.nav-trigger').click(function(){ 50 | $('.style-bd-outer').toggleClass('nav-active'); 51 | }); 52 | 53 | $('.style-nav-link').click(function(){ 54 | $('.style-bd-outer').toggleClass('nav-active'); 55 | }); 56 | 57 | $(window).on('scroll', function(){ 58 | var scrollTop = $(window).scrollTop(); 59 | if (scrollTop > 80){ 60 | $('body').addClass('sticky'); 61 | } else { 62 | $('body').removeClass('sticky'); 63 | } 64 | }); 65 | 66 | // reset iframe sizes 67 | $('.size-a-large').click(function(e){ 68 | e.preventDefault(); 69 | $('body').addClass('large'); 70 | $('body').removeClass('auto medium small'); 71 | }); 72 | 73 | $('.size-a-medium').click(function(e){ 74 | e.preventDefault(); 75 | $('body').addClass('medium'); 76 | $('body').removeClass('auto large small'); 77 | }); 78 | 79 | $('.size-a-small').click(function(e){ 80 | e.preventDefault(); 81 | $('body').addClass('small'); 82 | $('body').removeClass('auto large medium'); 83 | }); 84 | 85 | $('.size-a-auto').click(function(e){ 86 | e.preventDefault(); 87 | $('body').addClass('auto'); 88 | $('body').removeClass('medium large small'); 89 | }); 90 | 91 | }); 92 | // var iframeHeight = $('.style-guide-inner').contents().find('.style-bd-inner').height(); 93 | // $('.style-guide-inner').css('height', iframeHeight + 'px'); 94 | // $(window).resize(function(){ 95 | // console.log('iframeHeight = ' + iframeHeight); 96 | // $('.style-guide-inner').css('height', iframeHeight + 'px'); 97 | // }); -------------------------------------------------------------------------------- /page-style-guide-source.twig: -------------------------------------------------------------------------------- 1 | {# Style Guide Source #} 2 | 3 | {% extends "/style-guide/templates/style-guide.twig" %} 4 | 5 | {# Variables #} 6 | {% set body_classes = 'style-bd-inner' %} 7 | {% set code_highlights = true %} 8 | {% set style_mod = 'style-guide/templates/components/style-mod.twig' %} 9 | 10 | {% block header_scripts %} 11 | {# Your Fonts, CSS, JS, etc. go here #} 12 | 13 | 14 | 15 | {% endblock header_scripts %} 16 | 17 | {% block footer_scripts %} 18 | 19 | {% endblock footer_scripts %} 20 | 21 | 22 | {% block content %} 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 |

Typography

37 | 38 |
39 | 40 | {# 41 | ~~~~~~~~~~~~~~~~~~ 42 | Headlines 43 | ~~~~~~~~~~~~~~~~~~ 44 | #} 45 | {% embed style_mod 46 | with { title:'Headlines' } %} 47 | 48 | {% block markup %} 49 |

Headline Level 1

50 |

Headline Level 2

51 |

Headline Level 3

52 | {% endblock markup %} 53 | 54 | {% endembed %} 55 | 56 | 57 | {# 58 | ~~~~~~~~~~~~~~~~~~ 59 | Headlines with Links 60 | ~~~~~~~~~~~~~~~~~~ 61 | #} 62 | {% embed style_mod 63 | with { title:'Headlines with Links' } %} 64 | 65 | {% block markup %} 66 |

Headline Level 1 With Link

67 |

Headline Level 2 With Link

68 |

Headline Level 3 With Link

69 | {% endblock markup %} 70 | 71 | {% endembed %} 72 | 73 | 74 | {# 75 | ~~~~~~~~~~~~~~~~~~ 76 | Section Headers 77 | ~~~~~~~~~~~~~~~~~~ 78 | #} 79 | {% embed style_mod 80 | with { title:'Section Headers' } %} 81 | 82 | {% set descriptions = [ 83 | 'Describes the contents of a section (for instance, Must Reads)', 84 | 'Fancy h3 should be used sparingly' 85 | ] 86 | %} 87 | 88 | {% block markup %} 89 |

Section h1

90 |

Section h2

91 |

Section h3

92 |

Section h4

93 | {% endblock markup %} 94 | 95 | {% endembed %} 96 | 97 | 98 | {# 99 | ~~~~~~~~~~~~~~~~~~ 100 | Section Headers with Links 101 | ~~~~~~~~~~~~~~~~~~ 102 | #} 103 | {% embed style_mod 104 | with { title:'Section Headers with Links' } %} 105 | 106 | {% block markup %} 107 |

Section h1

108 |

Section h2

109 |

Section h3

110 |

Section h4

111 | {% endblock markup %} 112 | 113 | {% endembed %} 114 | 115 | 116 | {# 117 | ~~~~~~~~~~~~~~~~~~ 118 | Overline 119 | ~~~~~~~~~~~~~~~~~~ 120 | #} 121 | {% embed style_mod 122 | with { title:'Overline' } %} 123 | 124 | {% block markup %} 125 |
Sample Overline
126 | {% endblock markup %} 127 | 128 | {% endembed %} 129 | 130 | 131 | {# 132 | ~~~~~~~~~~~~~~~~~~ 133 | Links 134 | ~~~~~~~~~~~~~~~~~~ 135 | #} 136 | {% embed style_mod 137 | with { title:'Links', 138 | class: 'link-types' 139 | } %} 140 | 141 | {% set descriptions = [ 142 | 'Used for cover teases', 143 | 'May appear with an illustration (.illo) or without (.no-illo)' 144 | ] 145 | %} 146 | 147 | {% block markup %} 148 | Primary Link 149 | Light Link 150 | Secondary Link 151 | {% endblock markup %} 152 | 153 | {% endembed %} 154 | 155 |
156 | 157 | 158 | 159 | 160 | 161 | 162 |

Articles

163 | 164 |
165 | 166 | {# 167 | ~~~~~~~~~~~~~~~~~~ 168 | Headline 169 | ~~~~~~~~~~~~~~~~~~ 170 | #} 171 | {% embed style_mod 172 | with { title:'Headline' } %} 173 | 174 | {% block markup %} 175 |

Sample Headline

176 | {% endblock markup %} 177 | 178 | {% endembed %} 179 | 180 | 181 | {# 182 | ~~~~~~~~~~~~~~~~~~ 183 | Article Deck 184 | ~~~~~~~~~~~~~~~~~~ 185 | #} 186 | {% embed style_mod 187 | with { title:'Article Deck' } %} 188 | 189 | {% block markup %} 190 |

Sample Tease Deckhead

191 | {% endblock markup %} 192 | 193 | {% endembed %} 194 | 195 | 196 | {# 197 | ~~~~~~~~~~~~~~~~~~ 198 | Article Byline 199 | ~~~~~~~~~~~~~~~~~~ 200 | #} 201 | {% embed style_mod 202 | with { title:'Article Byline' } %} 203 | 204 | {% block markup %} 205 |

By Tito Bottitta & Nathan Hass

206 | {% endblock markup %} 207 | 208 | {% endembed %} 209 | 210 | 211 | {# 212 | ~~~~~~~~~~~~~~~~~~ 213 | Dateline 214 | ~~~~~~~~~~~~~~~~~~ 215 | #} 216 | {% embed style_mod 217 | with { title:'Dateline' } %} 218 | 219 | {% block markup %} 220 |

Dec 31, 2013

221 | {% endblock markup %} 222 | 223 | {% endembed %} 224 | 225 | 226 | {# 227 | ~~~~~~~~~~~~~~~~~~ 228 | Article Text 229 | ~~~~~~~~~~~~~~~~~~ 230 | #} 231 | {% embed style_mod 232 | with { title:'Article Text' } %} 233 | 234 | {% block markup %} 235 |
236 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a link in article text. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

237 |

This is article text. Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

238 |

This is a block quote. Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

239 |

This is article text. Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

240 |
241 | {% endblock markup %} 242 | 243 | {% endembed %} 244 | 245 | 246 | {# 247 | ~~~~~~~~~~~~~~~~~~ 248 | Article Headlines 249 | ~~~~~~~~~~~~~~~~~~ 250 | #} 251 | {% embed style_mod 252 | with { title:'Article Headlines' 253 | } %} 254 | 255 | {% block markup %} 256 |
257 |

h1 - Headline Level 1

258 |

Professor Waldron wishes that I had said more about how to achieve the changes that we both seem to favor. I too wish that I had said more. I wish that I had more to say.

259 |

h2 - Headline Level 2

260 |

I hope it is not churlish to point out that the explanation of how to get from here to there is also underdeveloped in Waldrons’ own work about judicial review.

261 |

h3 - Headline Level 3

262 |

In any event, I can say at least this much: The United States Supreme Court is not about to announce that henceforth it will disobey constitutional commands, and Congress is not about to enact legislation formally disavowing the Constitution.

263 |

h4 - Headline Level 4

264 |

Moreover, here as elsewhere, unilateral disarmament is a bad idea. It makes no sense for one side to forego constitutional argument while the other uses it to its advantage.

265 |
h5 - Headline Level 5
266 |

If there is to be change, then, it must first be on the cultural level, and cultural change occurs one conversation at a time. If there are to be conversations, though, the issue must first be salient, and right now it is not.

267 |
h6 - Headline Level 6
268 |

To claim that my book, read by a tiny number of people, the vast majority of whom disagree with it, will make the issue salient would border on clinical narcissism. Putting the issue on the table requires action by culturally significant figures.

269 |
270 | {% endblock markup %} 271 | 272 | {% endembed %} 273 | 274 | 275 | {# 276 | ~~~~~~~~~~~~~~~~~~ 277 | Article Lists 278 | ~~~~~~~~~~~~~~~~~~ 279 | #} 280 | {% embed style_mod 281 | with { title:'Article Lists' 282 | } %} 283 | 284 | {% block markup %} 285 |
286 |

Regular List

287 |
    288 |
  • List Link
    • 289 |
  • List Bold
    • 290 |
  • List Italic
    • 291 |
292 |

Numbered List

293 |
    294 |
  1. List Link
    2. 295 |
  2. List Bold
    3. 296 |
  3. List Italic
    4. 297 |
298 |

List Inside List

299 |
    300 |
  • Main List Item 1
    • 301 |
      302 |
    • Sub List Link
      • 303 |
    • Sub List Bold
      • 304 |
    • Sub List Italic
      • 305 |
    306 |
  • Main List Item 2
    • 307 |
  • Main List Item 3
    • 308 |
309 |
310 | {% endblock markup %} 311 | 312 | {% endembed %} 313 | 314 | 315 | {# 316 | ~~~~~~~~~~~~~~~~~~ 317 | Article Blockquote 318 | ~~~~~~~~~~~~~~~~~~ 319 | #} 320 | {% embed style_mod 321 | with { title:'Article Blockquote' 322 | } %} 323 | 324 | {% block markup %} 325 |
326 |
327 |

“Perhaps that change will never come. Still, even if bold disarmament proves impossible, we might negotiate a less ambitious mutual arms reduction treaty.”

328 |

“We might at least agree to stop pretending that italic constitutional text unambiguously and finally resolves the disputes between us.”

329 |
    330 |
  • List Link
    • 331 |
  • List Bold
    • 332 |
  • List Italic
    • 333 |
334 |
335 |
336 | {% endblock markup %} 337 | 338 | {% endembed %} 339 | 340 | 341 | {# 342 | ~~~~~~~~~~~~~~~~~~ 343 | Article Pullquote 344 | ~~~~~~~~~~~~~~~~~~ 345 | #} 346 | {% embed style_mod 347 | with { title:'Article Pullquote' 348 | } %} 349 | 350 | {% block markup %} 351 |
352 |

353 | Assume that no search for this weapon was underway; our best guess is that even Sherlock Holmes never would have found it in the absence of the confession. 354 |

355 |
356 | {% endblock markup %} 357 | 358 | {% endembed %} 359 | 360 | 361 | {# 362 | ~~~~~~~~~~~~~~~~~~ 363 | Article Elements 364 | ~~~~~~~~~~~~~~~~~~ 365 | #} 366 | {% embed style_mod 367 | with { title:'Article Elements', 368 | class: 'no-dc' 369 | } %} 370 | 371 | {% block markup %} 372 |
373 |

This is a text link

374 |

Strong is used to indicate strong importance

375 |

The i element really shouldn't be used but WordPress employs it and most normal users do, too.

376 |

The b element is stylistically different text from normal text, without any special importance

377 |

The em element is text that is set off from the normal text

378 |

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

379 |

This text has a strikethrough

380 |

Superscript®

381 |

Subscript for things like H2O

382 |

This small text is small for for fine print, etc.

383 |

Keybord input: Cmd

384 |

This is a citation

385 |

The dfn element indicates a definition.

386 |
387 | {% endblock markup %} 388 | 389 | {% endembed %} 390 | 391 | 392 | {# 393 | ~~~~~~~~~~~~~~~~~~ 394 | Article Tables 395 | ~~~~~~~~~~~~~~~~~~ 396 | #} 397 | {% embed style_mod 398 | with { title:'Article Tables' 399 | } %} 400 | 401 | {% block markup %} 402 |
403 |

This is what a table embedded in article text looks like.

404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 |
#First NameLast NameTeam
1JenniferHeathHLR
2BarackObamaPotus
3TitoBottittaUpstatement
435 |
436 | {% endblock markup %} 437 | 438 | {% endembed %} 439 | 440 |
441 | 442 | 443 | 444 | 445 | 446 | 447 |

Lists

448 | 449 |
450 | 451 | {# 452 | ~~~~~~~~~~~~~~~~~~ 453 | Bulleted Lists 454 | ~~~~~~~~~~~~~~~~~~ 455 | #} 456 | {% embed style_mod 457 | with { title:'Bulleted Lists' } %} 458 | 459 | {% block markup %} 460 |
461 | 475 |
476 | {% endblock markup %} 477 | 478 | {% endembed %} 479 | 480 | 481 | {# 482 | ~~~~~~~~~~~~~~~~~~~~~~~~ 483 | Bulleted List with Complex Content 484 | ~~~~~~~~~~~~~~~~~~~~~~~~ 485 | #} 486 | {% embed style_mod 487 | with { title:'Bulluted List with Complex Content' 488 | } %} 489 | 490 | {% block markup %} 491 |
492 |
    493 |
  • 494 |

    Typical Bulleted Headline

    495 |

    Supporting text for headline. What happens in the supporting text contains a link?

    496 |
    • 497 |
  • 498 |

    Bulleted Headline with Link

    499 |

    Supporting text for headline. What happens in the supporting text contains a link?

    500 |
    • 501 |
  • 502 |

    Supporting text for headline. What happens in the supporting text contains a link?I ask you again. What would happen if the supporting text contained a link? Would it be styled properly?

    503 |
    • 504 |
505 |
506 | {% endblock markup %} 507 | 508 | {% endembed %} 509 | 510 | 511 | {# 512 | ~~~~~~~~~~~~~~~~~~~~~~~~ 513 | Numbered List 514 | ~~~~~~~~~~~~~~~~~~~~~~~~ 515 | #} 516 | {% embed style_mod 517 | with { title:'Numbered List' } %} 518 | 519 | {% block markup %} 520 | 525 | {% endblock markup %} 526 | 527 | {% endembed %} 528 | 529 | 530 | {# 531 | ~~~~~~~~~~~~~~~~~~~~~~~~ 532 | Alphabetical List 533 | ~~~~~~~~~~~~~~~~~~~~~~~~ 534 | #} 535 | {% embed style_mod 536 | with { title:'Alphabetical List' } %} 537 | 538 | {% block markup %} 539 |
    540 |
  1. Sample list item
    2. 541 |
  2. Sample list item
    3. 542 |
  3. Sample list item
    4. 543 |
  4. Sample list item
    5. 544 |
545 | {% endblock markup %} 546 | 547 | {% endembed %} 548 | 549 | 550 | {# 551 | ~~~~~~~~~~~~~~~~~~~~~~~~ 552 | Horizontal List 553 | ~~~~~~~~~~~~~~~~~~~~~~~~ 554 | #} 555 | {% embed style_mod 556 | with { title:'Horizontal List' } %} 557 | 558 | {% block markup %} 559 | 564 | {% endblock markup %} 565 | 566 | {% endembed %} 567 | 568 | 569 | {# 570 | ~~~~~~~~~~~~~~~~~~~~~~~~ 571 | List In List 572 | ~~~~~~~~~~~~~~~~~~~~~~~~ 573 | #} 574 | {% embed style_mod 575 | with { title:'List In List' } %} 576 | 577 | {% block markup %} 578 | 588 | {% endblock markup %} 589 | 590 | {% endembed %} 591 | 592 |
593 | 594 | 595 | 596 | 597 | 598 | 599 |

Objects

600 | 601 |
602 | 603 | {# 604 | ~~~~~~~~~~~~~~~~~~~~~~~~ 605 | Colors 606 | ~~~~~~~~~~~~~~~~~~~~~~~~ 607 | #} 608 | {% embed style_mod 609 | with { title:'Colors' } %} 610 | 611 | {% block markup %} 612 |
613 |
614 | Color Name 615 | ColorVal 616 |
617 |
618 |
619 |
620 | Color Name 621 | ColorVal 622 |
623 |
624 |
625 |
626 | Color Name 627 | ColorVal 628 |
629 |
630 |
631 |
632 | Color Name 633 | ColorVal 634 |
635 |
636 | {% endblock markup %} 637 | 638 | {% endembed %} 639 | 640 |
641 | 642 | 643 | 644 | 645 | 646 | 647 |

Forms

648 | 649 |
650 | 651 | {# 652 | ~~~~~~~~~~~~~~~~~~~~~~~~ 653 | Text Input 654 | ~~~~~~~~~~~~~~~~~~~~~~~~ 655 | #} 656 | {% embed style_mod 657 | with { title:'Text Input' } %} 658 | 659 | {% block markup %} 660 |
661 |
662 | 663 |
664 | 665 |
666 |
667 |
668 | {% endblock markup %} 669 | 670 | {% endembed %} 671 | 672 | 673 | {# 674 | ~~~~~~~~~~~~~~~~~~~~~~~~ 675 | Text Input Large 676 | ~~~~~~~~~~~~~~~~~~~~~~~~ 677 | #} 678 | {% embed style_mod 679 | with { title:'Text Input Large' } %} 680 | 681 | {% block markup %} 682 |
683 |
684 | 685 |
686 | 687 |
688 |
689 |
690 | {% endblock markup %} 691 | 692 | {% endembed %} 693 | 694 | 695 | {# 696 | ~~~~~~~~~~~~~~~~~~~~~~~~ 697 | Text Input Small 698 | ~~~~~~~~~~~~~~~~~~~~~~~~ 699 | #} 700 | {% embed style_mod 701 | with { title:'Text Input Small' } %} 702 | 703 | {% block markup %} 704 |
705 |
706 | 707 |
708 | 709 |
710 |
711 |
712 | {% endblock markup %} 713 | 714 | {% endembed %} 715 | 716 | 717 | {# 718 | ~~~~~~~~~~~~~~~~~~~~~~~~ 719 | Text Input with Button 720 | ~~~~~~~~~~~~~~~~~~~~~~~~ 721 | #} 722 | {% embed style_mod 723 | with { title:'Text Input with Button' } %} 724 | 725 | {% block markup %} 726 |
727 |
728 | 729 |
730 | 731 | 732 |
733 |
734 |
735 | {% endblock markup %} 736 | 737 | {% endembed %} 738 | 739 | 740 | {# 741 | ~~~~~~~~~~~~~~~~~~~~~~~~ 742 | Radio Button 743 | ~~~~~~~~~~~~~~~~~~~~~~~~ 744 | #} 745 | {% embed style_mod 746 | with { title:'Radio Button' } %} 747 | 748 | {% block markup %} 749 |
750 |
751 | 752 |
753 |
754 | 755 |
756 |
757 | 758 |
759 |
760 | {% endblock markup %} 761 | 762 | {% endembed %} 763 | 764 | 765 | {# 766 | ~~~~~~~~~~~~~~~~~~~~~~~~ 767 | Text Input 768 | ~~~~~~~~~~~~~~~~~~~~~~~~ 769 | #} 770 | {% embed style_mod 771 | with { title:'Text Input' } %} 772 | 773 | {% block markup %} 774 |
775 |
776 | 777 |
778 | 779 |
780 |
781 |
782 | {% endblock markup %} 783 | 784 | {% endembed %} 785 | 786 | 787 | {# 788 | ~~~~~~~~~~~~~~~~~~~~~~~~ 789 | Text Area 790 | ~~~~~~~~~~~~~~~~~~~~~~~~ 791 | #} 792 | {% embed style_mod 793 | with { title:'Text Area' } %} 794 | 795 | {% block markup %} 796 |
797 |
798 | 799 |
800 |
801 | 802 |
803 |
804 |
805 | {% endblock markup %} 806 | 807 | {% endembed %} 808 | 809 |
810 | 811 | 812 | 813 | 814 | 815 | 816 |

Tables

817 | 818 |
819 | 820 | {# 821 | ~~~~~~~~~~~~~~~~~~~~~~~~ 822 | Basic Table 823 | ~~~~~~~~~~~~~~~~~~~~~~~~ 824 | #} 825 | {% embed style_mod 826 | with { title:'Basic Table' } %} 827 | 828 | {% block markup %} 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 |
#First NameLast NameTeam
1JenniferHeathHLR
2BarackObamaPotus
3TitoBottittaUpstatement
859 | {% endblock markup %} 860 | 861 | {% endembed %} 862 | 863 | 864 | {# 865 | ~~~~~~~~~~~~~~~~~~~~~~~~ 866 | Table Responsive 867 | ~~~~~~~~~~~~~~~~~~~~~~~~ 868 | #} 869 | {% embed style_mod 870 | with { title:'Table Responsive' } %} 871 | 872 | {% block markup %} 873 |
874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 |
#First NameLast NameTeam
1JenniferHeathHLR
2BarackObamaPotus
3TitoBottittaUpstatement
904 |
905 | {% endblock markup %} 906 | 907 | {% endembed %} 908 | 909 |
910 | 911 |
912 | 913 |
914 | 915 | {% endblock content %} 916 | -------------------------------------------------------------------------------- /page-style-guide.twig: -------------------------------------------------------------------------------- 1 | {# Style Guide #} 2 | 3 | {% extends "/style-guide/templates/style-guide.twig" %} 4 | 5 | {% set body_classes = 'style-bd-outer auto' %} 6 | 7 | {% block header_scripts %} 8 | 9 | {% endblock header_scripts %} 10 | 11 | {% block content %} 12 | 13 | 14 | 15 |
16 |

{{client}} Style Library

17 |
18 | 19 | 29 | 30 | 31 | 32 | 33 | 34 | {% endblock content %} 35 | -------------------------------------------------------------------------------- /sass/components/_style-guide-imports.scss: -------------------------------------------------------------------------------- 1 | @import "base.scss"; 2 | @import "variables"; 3 | @import "components/style-guide-variables"; 4 | @import "reset"; 5 | -------------------------------------------------------------------------------- /sass/components/_style-guide-variables.scss: -------------------------------------------------------------------------------- 1 | $style-sans: "Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; 2 | $nav-width: 220px; 3 | $neg-nav-width: -220px; 4 | -------------------------------------------------------------------------------- /sass/style-guide-overrides.scss: -------------------------------------------------------------------------------- 1 | // ============================================= 2 | 3 | // Style Guide Overrides 4 | 5 | // ============================================= 6 | 7 | // Bring in all Compass Helpers 8 | @import "components/style-guide-imports.scss"; 9 | 10 | .h1, .h2, .h3, .h4, .h5, 11 | .txt-sm, .txt, .txt-lg { 12 | margin-bottom: 20px; 13 | } 14 | 15 | .btn-large, 16 | .btn-medium, 17 | .btn-small { 18 | margin-right: 30px; 19 | } 20 | -------------------------------------------------------------------------------- /sass/style-guide-source.scss: -------------------------------------------------------------------------------- 1 | // ============================================= 2 | 3 | // Style Guide Source 4 | 5 | // ============================================= 6 | 7 | 8 | // Bring in all Compass Helpers 9 | @import "components/style-guide-imports.scss"; 10 | 11 | // 12 | // Style Example 13 | // 14 | 15 | // Set universal side padding here 16 | $side-pad: 16px; 17 | 18 | .style-group-h { 19 | color: #000; 20 | padding: 0px 7px 9px; 21 | font-size: 16px; 22 | margin-bottom: 20px; 23 | @include text-shadow(rgba(255,255,255,.15) 0 -1px 1px); 24 | border-bottom: 1px solid #e5e5e5; 25 | text-transform: uppercase; 26 | letter-spacing: 1px; 27 | } 28 | 29 | .style-mod { 30 | background-color: #fff; 31 | margin-bottom: 40px; 32 | @include border-radius(2px); 33 | @include box-shadow(rgba(0,0,0,.1) 0px 0 5px); // border-bottom: 1px solid #e5e5e5; 34 | overflow: hidden; 35 | // max-width:700px; 36 | > .inner { 37 | padding: 24px; 38 | } 39 | } 40 | 41 | .style-hgroup { 42 | // Box 43 | background-color: #ededed; 44 | padding: 8px $side-pad 7px; 45 | border-bottom: 1px solid #ddd; 46 | position: relative; 47 | @include pie-clearfix; 48 | } 49 | 50 | .style-example-rel { 51 | position: relative; 52 | } 53 | 54 | .style-h { 55 | font-size: 12px; 56 | color: #999; 57 | @include float(left); 58 | } 59 | 60 | .code-btn { 61 | font-size: em(9); 62 | letter-spacing: 1px; 63 | text-transform: uppercase; 64 | color: #999; 65 | padding: 5px 11px 6px; 66 | margin-top: -4px; 67 | position: absolute; 68 | right: 10px; 69 | @include border-radius(100px); 70 | @include trans; 71 | @include user-select; 72 | &:hover { 73 | background-color: #ddd; 74 | cursor: pointer; 75 | } 76 | } 77 | 78 | // 79 | // Details 80 | // 81 | 82 | .style-details { 83 | @include trans; 84 | height: 0; 85 | display: none; 86 | border-top: 1px solid #e5e5e5; 87 | background-color: #333; 88 | @include border-radius(0 0 2px 2px); 89 | > .inner { 90 | padding: 14px $side-pad; 91 | } 92 | 93 | // Show and hide details 94 | .details-off &, 95 | .details-all-on .details-off & { 96 | // Second line allows for toggling 97 | // of individual snips while the 98 | // show all button is active 99 | display: none; 100 | } 101 | .details-on &, 102 | .details-all-on & { 103 | display: block; 104 | height: auto; 105 | } 106 | } 107 | 108 | .detail-h { 109 | font: normal bold em(11) $style-sans; 110 | letter-spacing: 1px; 111 | text-transform: uppercase; 112 | margin-bottom: 8px; 113 | color: #fff; 114 | @include opacity(.6); 115 | } 116 | 117 | .style-meta { 118 | border-bottom: 1px solid #444; 119 | } 120 | 121 | .code-example { 122 | .detail-h:hover { 123 | cursor: pointer; 124 | } 125 | } 126 | 127 | .code-copy { 128 | display: inline-block; 129 | text-indent: -9999em; 130 | height: 20px; 131 | width: 19px; 132 | margin-left: 2px; 133 | top: -3px; 134 | // TODO: 135 | // - Change image-url path in config.rb 136 | // - Add icon-copy or remove completely 137 | //background: transparent image-url('icon-copy.png') no-repeat 50% 50%; 138 | position: relative; 139 | @include opacity(0); 140 | @include trans; 141 | 142 | .touch &, 143 | .detail-h:hover & { 144 | @include opacity(1); 145 | } 146 | } 147 | 148 | .detail-list { 149 | max-width: 600px; 150 | list-style: square outside; 151 | padding: 0 0 0 22px; 152 | color: #bbb; 153 | > li { 154 | margin-bottom: 6px; 155 | } 156 | > li > p { 157 | color: #ddd; 158 | } 159 | } 160 | 161 | // 162 | // Code 163 | // 164 | 165 | .html-code { 166 | padding: 0; 167 | color: #666; 168 | font: normal 12px/130% $mono; 169 | white-space: pre; 170 | white-space: pre-wrap; 171 | word-wrap: break-word; 172 | &::-moz-selection { 173 | background-color: rgba(0,0,0,.1); 174 | color: #fff; 175 | text-shadow: none; 176 | } 177 | &::selection { 178 | background-color: rgba(0,0,0,.1); 179 | color: #fff; 180 | text-shadow: none; 181 | -webkit-appearance: none; 182 | } 183 | 184 | .nocode { background-color: none; color: #000 } 185 | .str { color: #ffa0a0 } /* string - pink */ 186 | .kwd { color: #f0e68c; font-weight: bold } 187 | .com { color: #ffa0a0 } /* comment - skyblue */ 188 | .typ { color: #98fb98 } /* type - lightgreen */ 189 | .lit { color: #cd5c5c } /* literal - darkred */ 190 | .pun { color: rgba(255, 255, 255, .35); } /* punctuation */ 191 | .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ 192 | .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ 193 | .atv { color: #87ceeb } /* attribute value - pink */ 194 | .dec { color: #98fb98 } /* decimal - lightgreen */ 195 | .pln { color: rgba(255, 255, 255, .5); 196 | 197 | &:first-child { 198 | width: 20px; 199 | height: 14px; 200 | @include inline-block; } 201 | } // plaintext 202 | 203 | li:last-child .pln:first-child { 204 | width: 0; 205 | margin-top: 4px; } 206 | 207 | .highlight { 208 | color: rgba(179, 45, 71, 1.0); 209 | } 210 | } // .html-code 211 | 212 | /* Specify class=linenums on a pre to get line numbering */ 213 | ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ 214 | @for $i from 0 through 50 { 215 | li.L#{$i} { 216 | list-style-type: none; 217 | } 218 | } 219 | /* Alternate shading for lines */ 220 | li.L1,li.L3,li.L5,li.L7,li.L9 { } 221 | 222 | @media print { 223 | pre { background-color: none } 224 | pre .str, code .str { color: #060 } 225 | pre .kwd, code .kwd { color: #006; font-weight: bold } 226 | pre .com, code .com { color: #600; font-style: italic } 227 | pre .typ, code .typ { color: #404; font-weight: bold } 228 | pre .lit, code .lit { color: #044 } 229 | pre .pun, code .pun { color: #440 } 230 | pre .pln, code .pln { color: #000 } 231 | pre .tag, code .tag { color: #006; font-weight: bold } 232 | pre .atn, code .atn { color: #404 } 233 | pre .atv, code .atv { color: #060 } 234 | } 235 | 236 | 237 | -------------------------------------------------------------------------------- /sass/style-guide.scss: -------------------------------------------------------------------------------- 1 | // ============================================= 2 | 3 | // Style Guide 4 | 5 | // ============================================= 6 | 7 | // Bring in all Compass Helpers 8 | @import "components/style-guide-imports.scss"; 9 | 10 | // 11 | // Universal 12 | // 13 | 14 | a { text-decoration: none; } 15 | i { font-style: normal; } 16 | 17 | 18 | 19 | // 20 | // iframe 21 | // 22 | 23 | .style-guide-inner { 24 | @include transition-property(transform, width); 25 | @include transition-duration(.2s, .4s); 26 | @include transition-timing-function(ease-in, ease-in); 27 | .nav-active & { 28 | @include translateX($nav-width); 29 | } 30 | margin: 0 auto; 31 | display: block; 32 | height: 15000px; 33 | .auto & { 34 | width: 100%; 35 | } 36 | .large & { 37 | width: 1074px; 38 | } 39 | .medium & { 40 | width: 680px; 41 | } 42 | .small & { 43 | width: 320px; 44 | } 45 | .sticky & { 46 | margin-top: 40px; 47 | } 48 | } 49 | 50 | 51 | 52 | // 53 | // Layout 54 | // 55 | 56 | 57 | .style-layout { 58 | margin: 0 auto; 59 | } 60 | 61 | .style-bd-outer, 62 | .style-bd-inner { 63 | @include trans(.2s, width); 64 | background-color: #f6f6f6 65 | } 66 | 67 | .style-bd-outer { 68 | overflow-y: scroll; 69 | } 70 | 71 | .style-content { 72 | // @include trans(.3s); 73 | @extend .style-layout; 74 | padding: 40px 20px 35px; 75 | background-color: #f6f6f6; 76 | @include pie-clearfix; 77 | .sticky & { 78 | margin-top: 80px; 79 | } 80 | .nav-active & { 81 | @include transform(translate3d($nav-width,0,0)); 82 | } 83 | } 84 | 85 | .style-main { 86 | margin: 0 auto; 87 | max-width:1074px; 88 | } 89 | 90 | 91 | 92 | // 93 | // Header 94 | // 95 | 96 | .style-hdr { 97 | background-color: #000; 98 | padding: 25px 30px 20px; 99 | position: relative; 100 | @include pie-clearfix; 101 | border-bottom: 1px solid #fff; 102 | min-width: 700px; 103 | } 104 | 105 | .style-page-h { 106 | font: normal bold em(28) $style-sans; 107 | color: #fff; 108 | float: left; 109 | .thin { 110 | font-weight: normal; 111 | } 112 | } 113 | 114 | .upstatement-logo { 115 | float: right; 116 | width: 120px; 117 | margin-top:2px; 118 | } 119 | 120 | 121 | 122 | // 123 | // Pages 124 | // 125 | 126 | .page-browser { 127 | background-color: #f5f5f5; 128 | margin-bottom: 120px; 129 | } 130 | 131 | .browser-mod { 132 | background-color: #fff; 133 | margin: 50px auto 80px; 134 | max-width: 1400px; 135 | @media (min-width: 960px) { 136 | width: 90%; 137 | border: 1px solid #e5e5e5; 138 | border-top: 0; 139 | } 140 | } 141 | 142 | .browser-h { 143 | font: bold 10px $sans; 144 | padding: 10px 5%; 145 | margin: 0; 146 | text-transform: uppercase; 147 | letter-spacing: 1px; 148 | background-color: #ededed; 149 | border-bottom: #ddd; 150 | @media (min-width: 600px) { 151 | font-size: 11px; 152 | } 153 | } 154 | 155 | .browser-list { 156 | font: normal 16px $sans; 157 | @media (min-width: 600px) { 158 | font-size: 21px; 159 | } 160 | > li > a { 161 | display: block; 162 | color: #222; 163 | text-decoration: none; 164 | padding: 12px 5%; 165 | border-bottom: 1px solid #ededed; 166 | position: relative; 167 | @media (min-width: 600px) { 168 | padding: 14px 5%; 169 | } 170 | &:before, 171 | &:after { 172 | content:''; 173 | position: absolute; 174 | z-index: 56; 175 | } 176 | &:before { 177 | top: 13px; 178 | right: 20px; 179 | @include triangle (right, 8px, #000); 180 | @include opacity(.15); 181 | @media (min-width: 600px) { 182 | top: 18px; 183 | } 184 | } 185 | &:after { 186 | top: 14px; 187 | right: 22px; 188 | @include triangle(right, 7px, #fff); 189 | @media (min-width: 600px) { 190 | top: 19px; 191 | } 192 | } 193 | &:hover:before { 194 | border-left-color: #fff; 195 | @include opacity(1); 196 | } 197 | &:hover:after { 198 | border-left-color: $blue; 199 | } 200 | &:hover { 201 | color: #fff; 202 | background-color: $blue; 203 | @include text-shadow(rgba(0,0,0,.1) 0 -1px 0); 204 | } 205 | } 206 | } // browser-list 207 | 208 | .browser-list-sub { 209 | display: block; 210 | color: #999; 211 | font: normal 11px $sans; 212 | text-rendering: optimizeLegibility; 213 | } 214 | 215 | 216 | 217 | // 218 | // Controls Nav 219 | // 220 | @mixin hamburger-bg { 221 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOC41IDE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOC41IDE1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTcuMSwyLjhIMS40QzAuNiwyLjgsMCwyLjIsMCwxLjRTMC42LDAsMS40LDBoMTUuN2MwLjgsMCwxLjQsMC42LDEuNCwxLjRTMTcuOSwyLjgsMTcuMSwyLjh6Ii8+Cgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTcuMSw4LjlIMS40QzAuNiw4LjksMCw4LjMsMCw3LjVzMC42LTEuNCwxLjQtMS40aDE1LjdjMC44LDAsMS40LDAuNiwxLjQsMS40UzE3LjksOC45LDE3LjEsOC45eiIvPgoJPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE3LjEsMTVIMS40QzAuNiwxNSwwLDE0LjMsMCwxMy41czAuNi0xLjQsMS40LTEuNGgxNS43YzAuOCwwLDEuNCwwLjYsMS40LDEuNFMxNy45LDE1LDE3LjEsMTV6Ii8+CjwvZz4KPC9zdmc+Cg==); 222 | } 223 | 224 | .nav-trigger { 225 | //@include svg(burger, no-cover); 226 | @include size(18px 16px); 227 | float: left; 228 | margin: 11px 8px 11px 30px; 229 | } 230 | 231 | .controls-nav-list { 232 | padding: 0 30px; 233 | margin-left: 40px; 234 | } 235 | 236 | .controls-nav { 237 | height:40px; 238 | position: relative; 239 | display: block; 240 | background-color: #fff; 241 | border-bottom: 1px solid #e5e5e5; 242 | @include box-shadow(rgba(0,0,0,.15) 0px 0 5px); 243 | min-width: 700px; 244 | .sticky & { 245 | position: fixed; 246 | top: 0; 247 | width: 100%; 248 | z-index: 9999; 249 | } 250 | } 251 | 252 | .size-li { 253 | display: inline-block; 254 | padding: 11px 15px 0 0; 255 | } 256 | 257 | .size-a { 258 | font-size: em(11); 259 | letter-spacing: 1px; 260 | text-transform: uppercase; 261 | text-align: center; 262 | padding: 2px 7px; 263 | color: #000; 264 | @include border-radius(2px); 265 | @include trans(.1s, background, ease-out); 266 | &:hover { 267 | background-color: #dfdfdf; 268 | } 269 | } 270 | 271 | .size-a-on { 272 | background-color: #000; 273 | color: #fff; 274 | &:hover { 275 | background-color: #000; 276 | } 277 | } 278 | 279 | .small .size-a-small { 280 | @extend .size-a-on; 281 | } 282 | .medium .size-a-medium { 283 | @extend .size-a-on; 284 | } 285 | .large .size-a-large { 286 | @extend .size-a-on; 287 | } 288 | .auto .size-a-auto { 289 | @extend .size-a-on; 290 | } 291 | 292 | .query-sim { 293 | width: 100%; 294 | height: 100%; 295 | } 296 | 297 | .container-width { 298 | height: 100%; 299 | overflow: visible; 300 | @include trans(width, .5s); 301 | .small & { 302 | width: 350px; 303 | } 304 | .medium & { 305 | width: 650px; 306 | } 307 | .large & { 308 | width: 1150px; 309 | } 310 | .auto & { 311 | width: 100%; 312 | } 313 | } 314 | 315 | .all-code-btn { 316 | font-size: em(11); 317 | letter-spacing: 1px; 318 | text-transform: uppercase; 319 | color: #989898; 320 | padding: 6px 11px; 321 | display: block; 322 | margin-right: 10px; 323 | position: absolute; 324 | right: 10px; 325 | top: 7px; 326 | @include border-radius(100px); 327 | @include trans; 328 | @include user-select; 329 | .style-hdr &, 330 | &:hover { 331 | background-color: #ddd; 332 | cursor: pointer; 333 | } 334 | } 335 | 336 | 337 | 338 | // 339 | // Colors 340 | // 341 | 342 | .color-mod { 343 | width: 80px; 344 | height: 110px; 345 | display: inline-block; 346 | position: relative; 347 | margin: 10px 20px 10px 0; 348 | border: 1px solid #ccc; 349 | } 350 | 351 | .color-txt { 352 | position: absolute; 353 | width: 100%; 354 | text-align: center; 355 | padding: 5px 0; 356 | bottom: 0; 357 | background-color: white; 358 | border: 1px solid #ccc; 359 | } 360 | 361 | .color-name { 362 | font: 600 12px $style-sans; 363 | display: block; 364 | } 365 | 366 | .color-hex { 367 | font: 400 12px $style-sans; 368 | text-transform: uppercase; 369 | } 370 | 371 | 372 | 373 | // 374 | // Style Guide Navigation 375 | // 376 | 377 | .style-nav { 378 | @include trans(.2s, transform); 379 | @include translateX($neg-nav-width); 380 | width: $nav-width; 381 | padding: 20px 0; 382 | text-align: right; 383 | position: absolute; 384 | display: block; 385 | height: 100%; 386 | //style 387 | background-color: #222; 388 | border-right: 1px solid #e5e5e5; 389 | .nav-active & { 390 | @include translateX(0); 391 | } 392 | .sticky & { 393 | // @include unabsolute; 394 | position: fixed; 395 | top: 0; 396 | padding: 60px 0 20px; 397 | overflow: scroll; 398 | } 399 | } 400 | 401 | .style-nav-h { 402 | // font: normal bold em(12) $style-sans; 403 | // letter-spacing: 1px; 404 | font: 800 12px $style-sans; 405 | letter-spacing: 1px; 406 | text-transform: uppercase; 407 | margin-top: 8px; 408 | color: #fff; 409 | padding: 0.3em 2em 0.3em 1em; 410 | &:first-child { 411 | margin-top: 0; 412 | } 413 | > a { 414 | color: #fff; 415 | } 416 | } 417 | 418 | .style-nav-list { 419 | > li { 420 | display: block; 421 | margin-bottom: 1px; 422 | } 423 | > li > a { 424 | color: #999; 425 | font-weight: 500; 426 | font-size: 1em; 427 | text-align: right; 428 | line-height: 1.5em; 429 | text-decoration: none; 430 | padding: 0.5em 2em 0.5em 1em; 431 | display: block; 432 | @include text-shadow(rgba(0,0,0,.75) 0 -1px 1px); 433 | @include trans(.1s, background, ease-out); 434 | .active &, 435 | &:hover { 436 | color: #444; 437 | background-color: #e5e5e5; 438 | @include text-shadow(rgba(255,255,255,.75) 0 -1px 1px); 439 | } 440 | } 441 | } // style-nav-list 442 | -------------------------------------------------------------------------------- /templates/components/style-mod.twig: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{title}}

4 | Show Code 5 |
6 |
7 |
8 | {% block markup %} 9 | 10 | {% endblock markup %} 11 |
12 |
13 |
14 | 15 | 16 | {% if descriptions %} 17 | 18 | {% block descriptions %} 19 | 20 |
21 |

Description

22 |
    23 | {% for description in descriptions %} 24 |

  • {{description}}

    • 25 | {% endfor %} 26 |
27 |
28 | 29 | {% endblock descriptions %} 30 | 31 | {% endif %} {# /descriptions #} 32 | 33 |
34 |

Code Snip Copy to clipboard

35 | 

36 | 		

37 | 	
 
38 | 
 
39 | 


--------------------------------------------------------------------------------
/templates/components/style-nav.twig:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |  
46 | 


--------------------------------------------------------------------------------
/templates/style-guide.twig:
--------------------------------------------------------------------------------
 1 | {# Style Guide Template #}
 2 | 
 3 | {% set client = 'Client Name' %}
 4 | {% set path = '/wp-content/themes/your_theme' %}
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 |   
11 | 	
12 | 	  
13 | 	  
14 | 
15 | 	  {{client}}: Style Library
16 | 
17 | 		
18 | 
19 | 	    
20 | 
21 | 	    {% block header_scripts %}
22 | 	        {# Contains optional, template-specific scripts #}
23 | 	    {% endblock header_scripts %}
24 | 
25 | 	    
26 | 
27 | 	
28 | 
29 | 	
30 | 
31 | 		{% block content %}
32 | 		    {# Primary page content #}
33 | 		{% endblock content %}
34 | 
35 | 		
47 | 
48 | 	
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------