├── .gitignore ├── Gemfile ├── bower.json ├── scss ├── ink │ ├── components │ │ ├── _outlook-first.scss │ │ ├── _global.scss │ │ ├── _panels.scss │ │ ├── _alignment.scss │ │ ├── _block-grid.scss │ │ ├── _normalize.scss │ │ ├── _media-query.scss │ │ ├── _grid.scss │ │ ├── _type.scss │ │ └── _buttons.scss │ └── _settings.scss └── ink.scss ├── CONTRIBUTING.md ├── templates ├── boilerplate.html ├── base │ ├── basic.html │ └── hero.html └── examples │ └── basic.html ├── package.json ├── LICENSE.md ├── docs ├── examples │ ├── panels.html │ ├── visibility-classes.html │ ├── panel-sub-grid.html │ ├── offset-columns.html │ ├── center-class.html │ ├── basic-sub-grid.html │ ├── basic-grid.html │ ├── images.html │ ├── full-width.html │ ├── panel-sidebar.html │ ├── text-pad.html │ ├── even-columns.html │ ├── basic-block-grid.html │ └── buttons.html ├── test │ ├── index.php │ └── vendor │ │ └── geshi │ │ ├── javascript.php │ │ ├── yaml.php │ │ ├── sql.php │ │ ├── reg.php │ │ ├── html5.php │ │ └── jquery.php ├── components │ ├── changelog.php │ ├── compatibility.php │ ├── getting-started.php │ ├── sub-grid.php │ ├── visibility-classes.php │ ├── buttons.php │ ├── panels.php │ ├── block-grid.php │ └── images.php └── docs.php ├── README.md └── Gruntfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | build/ 4 | .sass-cache/ -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gem "sass", ">= 3.2.5", "<= 3.3.13" -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ink", 3 | "version": "1.0.5", 4 | "main": ["./css/ink.css"], 5 | "ignore": [ 6 | "**/.*", 7 | "docs", 8 | "*.md", 9 | "*.js", 10 | "*.json" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /scss/ink/components/_outlook-first.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-outlook-first-classes: $include-html-classes !default; 11 | 12 | @include exports("outlook-first") { 13 | @if $include-html-outlook-first-classes { 14 | /* Outlook First */ 15 | 16 | body.outlook p { 17 | display: inline !important; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /scss/ink.scss: -------------------------------------------------------------------------------- 1 | /********************************************** 2 | * Ink v1.0.5 - Copyright 2013 ZURB Inc * 3 | **********************************************/ 4 | 5 | // Make sure the charset is set appropriately 6 | @charset "UTF-8"; 7 | 8 | // Behold, here are all the Ink components. 9 | @import 10 | "ink/settings", 11 | "ink/components/normalize", 12 | "ink/components/grid", 13 | "ink/components/block-grid", 14 | "ink/components/alignment", 15 | "ink/components/type", 16 | "ink/components/panels", 17 | "ink/components/buttons", 18 | "ink/components/outlook-first", 19 | "ink/components/media-query"; -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Ink 2 | 3 | ## Contributing 4 | 5 | 1. Fork it. 6 | 2. Create your feature branch (`git checkout -b my-new-feature`). 7 | 3. Test your changes to the best of your ability. We suggest utilizing the templates by running `grunt make:templates` and testing the compiled versions in the build folder. It's expecially helpful if you can provide a Litmus test with your pull request. 8 | 4. Update the documentation to reflect your changes if they add or changes current functionality. Run `grunt make:docs` to compile the documentation into the build folder and preview it. 9 | 5. Commit your changes (`git commit -am 'Added some feature'`). 10 | 6. Push to the branch (`git push origin my-new-feature`). 11 | 7. Create a new pull request. -------------------------------------------------------------------------------- /scss/ink/components/_global.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "../functions"; 6 | 7 | // We use this to control whether or not CSS classes come through in the gem files. // Change 8 | $include-html-classes: true !default; 9 | $include-html-global-classes: $include-html-classes !default; 10 | 11 | $column-gutter: 20px !default; 12 | 13 | $container-width: 580px !default; 14 | 15 | $text-padding: 10px !default; 16 | 17 | $panel-padding: 10px !default; 18 | 19 | $paragraph-margin-bottom: 10px !default; 20 | 21 | // We use these to make sure border radius matches unless we want it different. 22 | $global-radius: 3px !default; 23 | $global-rounded: 500px !default; 24 | 25 | @include exports("global") { 26 | @if $include-html-global-classes { 27 | 28 | } 29 | } -------------------------------------------------------------------------------- /scss/ink/components/_panels.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | 11 | // 12 | // @variables 13 | // 14 | 15 | $include-html-panel-classes: $include-html-classes !default; 16 | 17 | $panel-bg: #f2f2f2 !default; 18 | $panel-border-style: solid !default; 19 | $panel-border-color: #d9d9d9 !default; 20 | $panel-border-size: 1px !default; 21 | 22 | @include exports("panel") { 23 | @if $include-html-panel-classes { 24 | /* Panels */ 25 | 26 | .panel { 27 | background: color2hex($panel-bg); 28 | border: $panel-border-size $panel-border-style color2hex($panel-border-color); 29 | padding: $panel-padding !important; 30 | } 31 | 32 | .sub-grid table { 33 | width: 100%; 34 | } 35 | 36 | .sub-grid td.sub-columns { 37 | padding-bottom: 0; 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /templates/boilerplate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 19 | 20 | 21 | 22 | 23 | 30 | 31 |
24 |
25 | 26 | 27 | 28 |
29 |
32 | 33 | -------------------------------------------------------------------------------- /scss/ink/components/_alignment.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-alignment-classes: $include-html-classes !default; 11 | 12 | @include exports("alignment") { 13 | @if $include-html-alignment-classes { 14 | /* Alignment and Visibility Classes */ 15 | 16 | table.center, td.center { 17 | text-align: center; 18 | } 19 | 20 | h1.center, 21 | h2.center, 22 | h3.center, 23 | h4.center, 24 | h5.center, 25 | h6.center, 26 | p.center { 27 | text-align: center; 28 | } 29 | 30 | span.center { 31 | display: block; 32 | width: 100%; 33 | text-align: center; 34 | } 35 | 36 | img.center { 37 | margin: 0 auto; 38 | float: none; 39 | } 40 | 41 | .show-for-small, 42 | .hide-for-desktop { 43 | display: none; 44 | width: 0; 45 | mso-hide: all; 46 | overflow: hidden; 47 | } 48 | 49 | .show-for-small *, 50 | .hide-for-desktop * { 51 | mso-hide:all; 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ink", 3 | "version": "1.0.5", 4 | "description": "Ink is a responsive email framework for making emails that look great on any device.", 5 | "directories": { 6 | "doc": "docs" 7 | }, 8 | "dependencies": { 9 | "grunt": "~0.4.1", 10 | "grunt-cli": "~0.1.9" 11 | }, 12 | "devDependencies": { 13 | "assemble": "~0.4.33", 14 | "grunt-contrib-clean": "^0.6.0", 15 | "grunt-contrib-copy": "^0.5.0", 16 | "grunt-contrib-sass": "^0.8.1", 17 | "grunt-contrib-watch": "^0.6.1", 18 | "grunt-exec": "^0.4.6", 19 | "grunt-newer": "^0.7.0", 20 | "grunt-regex-replace": "^0.2.6", 21 | "grunt-shell": "^1.0.1", 22 | "load-grunt-tasks": "^0.6.0" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "git://github.com/zurb/ink.git" 27 | }, 28 | "keywords": [ 29 | "ink", 30 | "responsive", 31 | "email", 32 | "css", 33 | "framework" 34 | ], 35 | "author": "ZURB", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/zurb/ink/issues" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 ZURB, inc. 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /scss/ink/components/_block-grid.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-grid-classes: $include-html-classes !default; 11 | $include-html-block-grid-classes: $include-html-grid-classes !default; 12 | 13 | // We use this to control the maximum number of block grid elements per row 14 | $block-grid-elements: 8 !default; 15 | $block-grid-default-spacing: $column-gutter !default; 16 | 17 | $align-block-grid-to-grid: false !default; 18 | @if $align-block-grid-to-grid { 19 | $block-grid-default-spacing: $column-gutter; 20 | } 21 | 22 | // 23 | // Block Grid Mixins 24 | // 25 | 26 | // Generate markup for block grid. 27 | // 28 | @mixin block-grid-html-classes() { 29 | @for $i from 2 through $block-grid-elements { 30 | .#{number2word($i)}-up td { 31 | width: floor(($container-width - $i * $block-grid-default-spacing) / $i); 32 | } 33 | } 34 | } 35 | 36 | @include exports("block-grid") { 37 | @if $include-html-block-grid-classes { 38 | /* Block Grid */ 39 | 40 | .block-grid { 41 | width: 100%; 42 | max-width: $container-width; 43 | } 44 | 45 | .block-grid td { 46 | display: inline-block; 47 | padding: $block-grid-default-spacing / 2; 48 | } 49 | 50 | @include block-grid-html-classes(); 51 | } 52 | } -------------------------------------------------------------------------------- /docs/examples/panels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 65 | 66 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 58 | 59 |
39 | 40 | 41 | 42 | 54 | 55 |
43 | 44 | 45 | 46 | 49 | 50 | 51 |
47 | td.panel 48 |
52 | 53 |
56 | 57 |
60 | 61 | 62 | 63 |
64 |
67 | 68 | -------------------------------------------------------------------------------- /docs/examples/visibility-classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 78 | 79 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 71 | 72 |
39 | 40 | 41 | 42 | 67 | 68 |
43 | 44 | 45 | 46 | 51 | 52 | 53 |
47 | 48 | .show-for-small 49 | 50 |
54 | 55 | 56 | 57 | 62 | 63 | 64 |
58 | 59 | .hide-for-small 60 | 61 |
65 | 66 |
69 | 70 |
73 | 74 | 75 | 76 |
77 |
80 | 81 | -------------------------------------------------------------------------------- /docs/examples/panel-sub-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 80 | 81 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 73 | 74 |
39 | 40 | 41 | 42 | 69 | 70 |
43 | 44 | 45 | 46 | 64 | 65 | 66 |
47 | 48 | 49 | 50 | 55 | 60 | 61 |
51 | 52 | Left Sub-Column 53 | 54 | 56 | 57 | Right Sub-Column 58 | 59 |
62 | 63 |
67 | 68 |
71 | 72 |
75 | 76 | 77 | 78 |
79 |
82 | 83 | -------------------------------------------------------------------------------- /docs/test/index.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | Ink Docs TEST 16 | 17 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 48 | 49 | -------------------------------------------------------------------------------- /docs/examples/offset-columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 27 | 28 | 29 | 30 | 31 | 86 | 87 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 79 | 80 |
39 | 40 | 41 | 42 | 56 | 57 |
43 | 44 | 45 | 46 | 51 | 52 | 53 |
47 | 48 | Twelve Columns 49 | 50 |
54 | 55 |
58 | 59 | 60 | 61 | 75 | 76 |
62 | 63 | 64 | 65 | 70 | 71 | 72 |
66 | 67 | Eight columns, offset by four 68 | 69 |
73 | 74 |
77 | 78 |
81 | 82 | 83 | 84 |
85 |
88 | 89 | -------------------------------------------------------------------------------- /docs/examples/center-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 86 | 87 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 79 | 80 |
39 | 40 | 41 | 42 | 58 | 75 | 76 |
43 | 44 | 45 | 46 | 53 | 54 | 55 |
47 |
48 | 49 | Centered content 50 | 51 |
52 |
56 | 57 | 		59 | 60 | 61 | 62 | 70 | 71 | 72 |
63 |
64 | 65 | 66 | 67 | 68 |
69 |
73 | 74 |
77 | 78 |
81 | 82 | 83 | 84 |
85 |
88 | 89 | -------------------------------------------------------------------------------- /docs/components/changelog.php: -------------------------------------------------------------------------------- 1 |

Changelog

2 |

All the latest and greatest changes to Ink.

3 |
4 |

1.0 - Public Release

5 |
1.0.5
6 | 22 |
1.0.4
23 | 33 |
1.0.3
34 | 39 |
1.0.2
40 | 44 |
1.0.1
45 | 48 |
1.0.0
49 | 58 | -------------------------------------------------------------------------------- /scss/ink/components/_normalize.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-normalize-classes: $include-html-classes !default; 11 | $include-hyphens: false !default; 12 | 13 | // We use these to style the
element 14 | $hr-color: #d9d9d9 !default; 15 | $hr-height: 1px !default; 16 | 17 | 18 | @include exports("normalize") { 19 | @if $include-html-normalize-classes { 20 | /* Client-specific Styles and Reset */ 21 | 22 | #outlook a { 23 | padding:0; 24 | } 25 | 26 | body { 27 | width:100% !important; 28 | min-width: 100%; 29 | -webkit-text-size-adjust:100%; 30 | -ms-text-size-adjust:100%; 31 | margin:0; 32 | padding:0; 33 | } 34 | 35 | /* .ExternalClass applies to Outlook.com (the artist formerly known as Hotmail) */ 36 | 37 | .ExternalClass { 38 | width:100%; 39 | 40 | &, 41 | p, 42 | span, 43 | font, 44 | td, 45 | div { 46 | line-height: 100%; 47 | } 48 | } 49 | 50 | 51 | 52 | 53 | #backgroundTable { 54 | margin:0; 55 | padding:0; 56 | width:100% !important; 57 | line-height: 100% !important; 58 | } 59 | 60 | img { 61 | outline:none; 62 | text-decoration:none; 63 | -ms-interpolation-mode: bicubic; 64 | width: auto; 65 | max-width: 100%; 66 | float: left; 67 | clear: both; 68 | display: block; 69 | } 70 | 71 | center { 72 | width: 100%; 73 | min-width: $container-width; 74 | } 75 | 76 | a img { 77 | border: none; 78 | } 79 | 80 | p { 81 | margin: 0 0 0 $paragraph-margin-bottom; 82 | } 83 | 84 | table { 85 | border-spacing: 0; 86 | border-collapse: collapse; 87 | } 88 | 89 | td { 90 | word-break: break-word; 91 | @if $include-hyphens == true { 92 | -webkit-hyphens: auto; 93 | -moz-hyphens: auto; 94 | hyphens: auto; 95 | } 96 | @else { 97 | -webkit-hyphens: none; 98 | -moz-hyphens: none; 99 | hyphens: none; 100 | } 101 | border-collapse: collapse !important; 102 | } 103 | 104 | table, tr, td { 105 | padding: 0; 106 | vertical-align: top; 107 | text-align: left; 108 | } 109 | 110 | hr { 111 | color: color2hex($hr-color); 112 | background-color: color2hex($hr-color); 113 | height: $hr-height; 114 | border: none; 115 | } 116 | } 117 | } -------------------------------------------------------------------------------- /docs/examples/basic-sub-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 | 31 | 32 | 33 | 34 | 84 | 85 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 77 | 78 |
43 | 44 | 45 | 46 | 61 | 73 | 74 |
47 | 48 | 49 | 50 | 53 | 56 | 57 | 58 |
51 | .eight.sub-columns 52 | 54 | .four.sub-columns 55 |
59 | 60 | 		62 | 63 | 64 | 65 | 68 | 69 | 70 |
66 | .four columns 67 |
71 | 72 |
75 | 76 |
79 | 80 | 81 | 82 |
83 |
86 | 87 | -------------------------------------------------------------------------------- /docs/examples/basic-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 | 31 | 32 | 33 | 34 | 92 | 93 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 82 | 83 | 84 | 85 | 86 |
table.container
46 | 47 | 48 | 49 | 50 | 51 | 63 | 75 | 76 | 77 | 78 | 79 |
table.row
52 | 53 | 54 | 55 | 58 | 59 | 60 |
56 | .eight.columns 57 |
61 | 62 | 		64 | 65 | 66 | 67 | 70 | 71 | 72 |
68 | .four.columns 69 |
73 | 74 |
 
80 | 81 |
 
87 | 88 | 89 | 90 |
91 |
94 | 95 | -------------------------------------------------------------------------------- /docs/examples/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 31 | 32 | 33 | 34 | 35 | 86 | 87 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 79 | 80 |
44 | 45 | 46 | 47 | 61 | 75 | 76 |
48 | 49 | 50 | 51 | 56 | 57 | 58 |
52 | 53 | 54 | 55 |
59 | 60 | 		62 | 63 | 64 | 65 | 70 | 71 | 72 |
66 | 67 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, mollitia, vero tempore consectetur similique perspiciatis nisi nulla neque modi facilis. Eveniet, cupiditate, recusandae quasi repellat alias dolorem qui possimus et.

68 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, doloremque, amet, cupiditate explicabo magni dolores aliquam dicta enim voluptatibus hic optio neque quasi officia culpa minima numquam iusto illo dolorem?

69 |
73 | 74 |
77 | 78 |
81 | 82 | 83 | 84 |
85 |
88 | 89 | -------------------------------------------------------------------------------- /docs/components/compatibility.php: -------------------------------------------------------------------------------- 1 |

Supported Clients

2 |

We test and support all the major email clients … even Outlook.

3 |
4 |

We support as many email clients and as much of the market as possible, however, we simply can't test for everything. As a result, we've decided to test the following clients, based on a combination of their market share and our ability to reliably test them with the devices and software we have access to.

5 |

While we will help out as much as possible with issues regarding other clients (and are more than willing to accept pull requests that add support for additional clients), we can't devote a lot of time or effort at this point to fixing issues related to email clients not in the following table.

6 |

Tested Clients

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✔Does not fully support the Ink grid. Responsive layouts should be accomplished using the block-grid.
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
-------------------------------------------------------------------------------- /docs/examples/full-width.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 | 30 | 31 | 32 | 33 | 96 | 97 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 61 | 62 |
41 | 42 | 43 | 44 | 57 | 58 |
45 | 46 | 47 | 48 | 52 | 53 | 54 |
49 |
Normal Row
50 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!

51 |
55 | 56 |
59 | 60 |
63 | 64 | 65 | 66 | 89 | 90 |
67 |
68 | 69 | 70 | 71 | 84 | 85 |
72 | 73 | 74 | 75 | 79 | 80 | 81 |
76 |
Full Width Row
77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!

78 |
82 | 83 |
86 | 87 |
88 |
91 | 92 | 93 | 94 |
95 |
98 | 99 | -------------------------------------------------------------------------------- /docs/docs.php: -------------------------------------------------------------------------------- 1 | 38 |
39 |
40 |
41 | 55 |
56 |
57 |
58 | 59 | 60 | 61 |
62 | 63 | 64 | 65 |
66 | 67 | 68 | 69 |
70 | 71 | 72 | 73 |
74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 |
82 | 83 | 84 | 85 |
86 | 87 | 88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 | 96 | 97 |
98 |
99 |
100 |
-------------------------------------------------------------------------------- /docs/examples/panel-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 87 | 88 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 80 | 81 |
39 | 40 | 41 | 42 | 63 | 76 | 77 |
43 | 44 | 45 | 46 | 58 | 59 | 60 |
47 |
Main content
48 |

49 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae. 50 |

51 |

52 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae. 53 |

54 |

55 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae. 56 |

57 |
61 | 62 | 		64 | 65 | 66 | 67 | 71 | 72 | 73 |
68 |
Panel content
69 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. 70 |
74 | 75 |
78 | 79 |
82 | 83 | 84 | 85 |
86 |
89 | 90 | -------------------------------------------------------------------------------- /scss/ink/components/_media-query.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-media-query-classes: $include-html-classes !default; 11 | 12 | $small-container-width: 95% !default; 13 | 14 | // Media Query Ranges 15 | $small-range: (0px, $container-width * (600px / 580px)) !default; 16 | 17 | $screen: "only screen" !default; 18 | 19 | $landscape: "#{$screen} and (orientation: landscape)" !default; 20 | $portrait: "#{$screen} and (orientation: portrait)" !default; 21 | 22 | $small-up: $screen !default; 23 | $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default; 24 | 25 | @include exports("media-query") { 26 | @if $include-html-media-query-classes { 27 | /* Media Queries */ 28 | 29 | @media #{$small-only} { 30 | 31 | table[class="body"] img { 32 | max-width: auto !important; 33 | max-height: auto !important; 34 | } 35 | 36 | table[class="body"] center { 37 | min-width: 0 !important; 38 | } 39 | 40 | table[class="body"] .container { 41 | width: $small-container-width !important; 42 | } 43 | 44 | table[class="body"] .row { 45 | width: 100% !important; 46 | display: block !important; 47 | } 48 | 49 | table[class="body"] .wrapper { 50 | display: block !important; 51 | padding-right: 0 !important; 52 | } 53 | 54 | table[class="body"] .columns, 55 | table[class="body"] .column { 56 | table-layout: fixed !important; 57 | float: none !important; 58 | width: 100% !important; 59 | padding-right: 0px !important; 60 | padding-left: 0px !important; 61 | display: block !important; 62 | } 63 | 64 | table[class="body"] .wrapper.first .columns, 65 | table[class="body"] .wrapper.first .column { 66 | display: table !important; 67 | } 68 | 69 | table[class="body"] table.columns td, 70 | table[class="body"] table.column td { 71 | width: 100% !important; 72 | } 73 | 74 | @for $i from 1 through $total-columns { 75 | table[class="body"] .columns td.#{number2word($i)}, 76 | table[class="body"] .column td.#{number2word($i)} { 77 | width: grid-calc-pct($i, $total-columns) !important; 78 | } 79 | } 80 | table[class="body"] td%offset-by{ 81 | padding-left: 0 !important; 82 | } 83 | @for $i from 1 through ($total-columns - 1) { 84 | .offset-by-#{number2word($i)} { 85 | @extend %offset-by; 86 | } 87 | } 88 | 89 | table[class="body"] table.columns td.expander { 90 | width: 1px !important; 91 | } 92 | 93 | table[class="body"] .right-text-pad, 94 | table[class="body"] .text-pad-right { 95 | padding-left: $text-padding !important; 96 | } 97 | 98 | table[class="body"] .left-text-pad, 99 | table[class="body"] .text-pad-left { 100 | padding-right: $text-padding !important; 101 | } 102 | 103 | table[class="body"] .hide-for-small, 104 | table[class="body"] .show-for-desktop { 105 | display: none !important; 106 | } 107 | 108 | table[class="body"] .show-for-small, 109 | table[class="body"] .hide-for-desktop { 110 | display : block !important; 111 | width : auto !important; 112 | overflow : visible !important; 113 | } 114 | } 115 | } 116 | } -------------------------------------------------------------------------------- /scss/ink/components/_grid.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-grid-classes: $include-html-classes !default; 11 | $include-html-sub-colums-grid-classes: $include-html-grid-classes !default; 12 | 13 | $total-columns: 12 !default; 14 | 15 | $wrapper-padding-top: 10px !default; 16 | $column-cell-padding-bottom: 10px !default; 17 | 18 | $sub-column-padding-right: $column-gutter / 2 !default; 19 | 20 | @include exports("grid") { 21 | @if $include-html-grid-classes { 22 | /* Responsive Grid */ 23 | 24 | table.body { 25 | height: 100%; 26 | width: 100%; 27 | } 28 | 29 | table.container { 30 | width: $container-width; 31 | margin: 0 auto; 32 | text-align: inherit; 33 | } 34 | 35 | table.row { 36 | padding: 0px; 37 | width: 100%; 38 | position: relative; 39 | } 40 | 41 | table.container table.row { 42 | display: block; 43 | } 44 | 45 | td.wrapper { 46 | padding: $wrapper-padding-top $column-gutter 0px 0px; 47 | position: relative; 48 | } 49 | 50 | table.columns, 51 | table.column { 52 | margin: 0 auto; 53 | } 54 | 55 | table.columns td, 56 | table.column td { 57 | padding: 0px 0px $column-cell-padding-bottom; 58 | } 59 | 60 | @if $include-html-sub-colums-grid-classes { 61 | table.columns td.sub-columns, 62 | table.column td.sub-columns, 63 | table.columns td.sub-column, 64 | table.column td.sub-column { 65 | padding-right: $sub-column-padding-right; 66 | } 67 | 68 | td.sub-column, td.sub-columns { 69 | min-width: 0px; 70 | } 71 | } 72 | 73 | table.row td.last, 74 | table.container td.last { 75 | padding-right: 0px; 76 | } 77 | 78 | @for $i from 1 through $total-columns { 79 | table.#{number2word($i)} { 80 | width: grid-calc-px($i, $total-columns, $container-width, $column-gutter); 81 | } 82 | } 83 | 84 | @for $i from 1 through $total-columns { 85 | table.#{number2word($i)} center { 86 | min-width: grid-calc-px($i, $total-columns, $container-width, $column-gutter); 87 | } 88 | } 89 | 90 | @for $i from 1 through $total-columns { 91 | table.#{number2word($i)} .panel center { 92 | min-width: grid-calc-px($i, $total-columns, $container-width, $column-gutter) - 2 * $panel-padding; 93 | } 94 | } 95 | 96 | @for $i from 1 through $total-columns { 97 | .body .columns td.#{number2word($i)}, 98 | .body .column td.#{number2word($i)} { 99 | width: grid-calc-pct($i, $total-columns); 100 | } 101 | } 102 | 103 | @for $i from 1 through ($total-columns - 1) { 104 | td.offset-by-#{number2word($i)} { 105 | padding-left: grid-calc-px($i, $total-columns, $container-width, $column-gutter) + $column-gutter; 106 | } 107 | } 108 | td.expander { 109 | visibility: hidden; 110 | width: 0px; 111 | padding: 0 !important; 112 | } 113 | 114 | table.columns .text-pad, 115 | table.column .text-pad { 116 | padding-left: $text-padding; 117 | padding-right: $text-padding; 118 | } 119 | 120 | table.columns .left-text-pad, 121 | table.columns .text-pad-left, 122 | table.column .left-text-pad, 123 | table.column .text-pad-left { 124 | padding-left: $text-padding; 125 | } 126 | 127 | table.columns .right-text-pad, 128 | table.columns .text-pad-right, 129 | table.column .right-text-pad, 130 | table.column .text-pad-right { 131 | padding-right: $text-padding; 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /scss/ink/components/_type.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-type-classes: $include-html-classes !default; 11 | 12 | // We use these to control font styles 13 | $base-font-color: #222222 !default; 14 | $base-font-family: Helvetica, Arial, sans-serif !default; 15 | $base-font-weight: normal !default; 16 | $base-line-height: 1.3 !default; 17 | 18 | $body-font-size: 14px !default; 19 | $body-line-height: 19px !default; 20 | 21 | // We use these to control header font sizes 22 | $h1-font-size: 40px !default; 23 | $h2-font-size: 36px !default; 24 | $h3-font-size: 32px !default; 25 | $h4-font-size: 28px !default; 26 | $h5-font-size: 24px !default; 27 | $h6-font-size: 20px !default; 28 | 29 | // A general styling 30 | $small-font-size: 10px !default; 31 | 32 | // We use these to style lead paragraphs 33 | $paragraph-lead-font-size: 18px !default; 34 | $paragraph-lead-line-height: 21px !default; 35 | 36 | // We use these to style anchors 37 | $anchor-text-decoration: none !default; 38 | $anchor-font-color: #2ba6cb !default; 39 | $anchor-font-color-visited: $anchor-font-color !default; 40 | $anchor-font-color-hover: #2795b6 !default; 41 | $anchor-font-color-active: $anchor-font-color-hover !default; 42 | 43 | $header-anchor-font-color: $anchor-font-color !default; 44 | $header-anchor-font-color-visited: $header-anchor-font-color !default; 45 | $header-anchor-font-color-active: $header-anchor-font-color !default; 46 | 47 | @include exports("type") { 48 | @if $include-html-type-classes { 49 | /* Typography */ 50 | 51 | body, table.body, h1, h2, h3, h4, h5, h6, p, td { 52 | color: color2hex($base-font-color); 53 | font-family: $base-font-family; 54 | font-weight: $base-font-weight; 55 | padding:0; 56 | margin: 0; 57 | text-align: left; 58 | line-height: $base-line-height; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | word-break: normal; 63 | } 64 | 65 | h1 {font-size: $h1-font-size;} 66 | h2 {font-size: $h2-font-size;} 67 | h3 {font-size: $h3-font-size;} 68 | h4 {font-size: $h4-font-size;} 69 | h5 {font-size: $h5-font-size;} 70 | h6 {font-size: $h6-font-size;} 71 | body, table.body, p, td {font-size: $body-font-size;line-height:$body-line-height;} 72 | 73 | p.lead, p.lede, p.leed { 74 | font-size: $paragraph-lead-font-size; 75 | line-height:$paragraph-lead-line-height; 76 | } 77 | 78 | p { 79 | margin-bottom: $paragraph-margin-bottom; 80 | } 81 | 82 | small { 83 | font-size: $small-font-size; 84 | } 85 | 86 | a { 87 | color: color2hex($anchor-font-color); 88 | text-decoration: $anchor-text-decoration; 89 | } 90 | 91 | a:hover { 92 | color: color2hex($anchor-font-color-hover) !important; 93 | } 94 | 95 | a:active { 96 | color: color2hex($anchor-font-color-active) !important; 97 | } 98 | 99 | a:visited { 100 | color: color2hex($anchor-font-color-visited) !important; 101 | } 102 | 103 | h1 a, 104 | h2 a, 105 | h3 a, 106 | h4 a, 107 | h5 a, 108 | h6 a { 109 | color: color2hex($header-anchor-font-color); 110 | } 111 | 112 | h1 a:active, 113 | h2 a:active, 114 | h3 a:active, 115 | h4 a:active, 116 | h5 a:active, 117 | h6 a:active { 118 | color: color2hex($header-anchor-font-color-active) !important; 119 | } 120 | 121 | h1 a:visited, 122 | h2 a:visited, 123 | h3 a:visited, 124 | h4 a:visited, 125 | h5 a:visited, 126 | h6 a:visited { 127 | color: color2hex($header-anchor-font-color-visited) !important; 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /docs/examples/text-pad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 27 | 28 | 29 | 30 | 31 | 108 | 109 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 101 | 102 |
40 | 41 | 42 | 43 | 66 | 67 |
44 | 45 | 46 | 47 | 51 | 52 | 53 |
48 |
.twelve.columns.text-pad
49 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinctio vero doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit expedita cumque esse repudiandae alias aperiam earum.

50 |
54 | 55 | 56 | 57 | 61 | 62 | 63 |
58 |
No .text-pad
59 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinct vero doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit expedita cumque esse repudiandae alias aperiam earum.

60 |
64 | 65 |
68 | 69 | 70 | 71 | 84 | 97 | 98 |
72 | 73 | 74 | 75 | 79 | 80 | 81 |
76 |
.left-text-pad
77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinctio vero doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit expedita cumque esse repudiandae alias aperiam earum.

78 |
82 | 83 | 		85 | 86 | 87 | 88 | 92 | 93 | 94 |
89 |
.right-text-pad
90 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinctio vero doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit expedita cumque esse repudiandae alias aperiam earum.

91 |
95 | 96 |
99 | 100 |
103 | 104 | 105 | 106 |
107 |
110 | 111 | 112 | -------------------------------------------------------------------------------- /docs/components/getting-started.php: -------------------------------------------------------------------------------- 1 |

Getting Started

2 |

Dive into creating your responsive email.

3 |
4 |

The Boilerplate

5 |

6 | Starting a new Ink project is fairly straightforward. If you aren’t using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a <link> tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the <style> tag in the head before running your email through an inliner. 7 |

8 |
Boilerplate.html
9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 28 | 29 | 30 | 31 | 32 | 39 | 40 |
33 |
34 | 35 | 36 | 37 |
38 |
41 | 42 | ' 43 | , 'html'); ?> 44 |
45 |

46 | If you’re applying a background color to your entire email, be sure to attach it to the table with a class of body as well as to the actual <body> tag, since some clients remove this by default. 47 |

48 |
Inline Styles
49 | 51 | 52 | ... 53 | 54 | 55 | 56 | 57 | ... 58 | 59 |
60 | ' 61 | , 'html'); ?> 62 |
63 |
CSS
64 | 69 |
70 |
71 |

Sending Your Email

72 |

Sending HTML email is a lot different than sending plain text email. While it may be tempting to just open the email in a browser and click “share” or to use the “Insert HTML” function of your favorite email client, this often strips off a lot of the styling and makes your email completely unusable on mobile devices.

73 |

To get the best results, we recommend that you send your HTML email using an Email Service Provider (ESP) such as Mailchimp or Campaign Monitor. If you’re just running a quick test and don't want to sign up for an ESP, sending from the command line using a scripting language like PHP or Ruby usually works fine.

74 |
75 |

Testing and Troubleshooting

76 |

Since targeting a diverse range of email clients requires some specific and rather quirky markup, Ink doesn’t always preview properly in the browser. When doing browser tests, we recommend using the latest version of Chrome, Safari or Opera, since Ink doesn’t always display properly in Firefox or Internet Explorer.

77 |

Testing in the browser isn't enough, however, and you should always test in actual email clients. If you don't have access to the actual clients you want to test, a testing service like Litmus or Email on Acid can help.

78 |

If you're having trouble with an email, the first thing to check is the markup. Often times a simple error like a forgotten <tr> or a nested tag that’s been closed in the wrong order can wreak havoc on your design. If that’s not the problem, it could be an issue with your ESP. Some senders prepend an <html> tag to your message, which causes the DOCTYPE tag to not be interpreted by the email recipient. To see if this is what’s happening, try sending a test email to yourself and using the “show original” or “raw source” option in your mail client to manually inspect the code.

-------------------------------------------------------------------------------- /docs/components/sub-grid.php: -------------------------------------------------------------------------------- 1 |

Sub-Grid

2 |

A non-stacking grid for even more versatile layouts.

3 |
4 | 5 |

Grids Within Grids

6 |

While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a <td> tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.

7 |

The last .sub-columns <td> in the .columns <table> should be given a class of last in order for the gutter padding to be properly maintained.

8 |
Basic Sub-Grid Example
9 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 26 | 27 | 28 |
17 | 18 | .eight.sub-columns 19 | 20 | 22 | 23 | .four.sub-columns 24 | 25 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 40 | 41 | 42 |
36 | 37 | .four columns 38 | 39 |
43 | 44 | 45 | 46 | ', 47 | 'html') ?> 48 |
49 |
Non-Collapsing Sub-Grid Columns
50 | 51 |
52 |
53 |

Compatibility

54 |
55 |
56 |
57 |

The sub-grid works as expected in most major email clients.

58 |
59 |
60 | Toggle Full Table 61 |
62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 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 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✔
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
142 |
143 |
144 |
-------------------------------------------------------------------------------- /docs/components/visibility-classes.php: -------------------------------------------------------------------------------- 1 |

Visibility Classes

2 |

Selectively show content for different screen sizes.

3 |
4 | 5 |

By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes can be used on any element. Due to Outlook's lack of support for certain CSS properties, the Ink visibiility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007/2010/2013.

6 |

Note: If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.

7 |
Using Visibility Classes
8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 |
17 | 18 | .show-for-small 19 | 20 |
24 | 25 | 26 | 27 | 28 | 33 | 34 | 35 |
29 | 30 | .hide-for-small 31 | 32 |
36 | 37 | 38 | 39 | ', 40 | 'html') ?> 41 |
42 |
Content Visibility
43 | 44 |
45 |
46 |

Breakdown

47 |

Available visibility classes:

48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
.hide-for-small
.show-for-small
56 |
57 |
58 |

Compatibility

59 |
60 |
61 |
62 |

Visibility classes work as expected in most major email clients, but do not currently support Gmail.

63 |
64 |
65 | Toggle Full Table 66 |
67 |
68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 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 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✘Not yet implemented. Support will be added soon.
Gmail (Mobile, iOS, Android)✘Not yet implemented. Support will be added soon.
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
147 |
148 |
149 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sassy Ink 2 | 3 | > The *unofficial* Sass port of [Ink](http://zurb.com/ink), Zurb's responsive email framework. If you are going to build a responsive HTML email, treat yourself to the most customizable version of the leading framework, Sassy Ink. 4 | 5 | Please let me know if you use Sassy Ink. 6 | 7 | ## Why use Sassy Ink? 8 | 9 | 1. Zurb's Ink is the leading responsive email framework. Sassy Ink provides 80 or so customizable variables. You can have it your way. 10 | 1. It makes clients happy. Clients never want framework defaults. Sassy Ink makes it easy to customize container width, number of columns, gutter width, break point, colors, font sizes, font-families, margins, padding, etc... 11 | 1. Pretty closely follows [Foundation](http://foundation.zurb.com/)'s Sass structure and naming conventions. If you are familiar with Foundation (or even Bootstrap), you are familiar with Sassy Ink. 12 | 1. You can easily verify that you are getting all the benefits of Ink because the generated CSS is as close to Zurb's original `ink.css` as possible. If you don't touch the default variables, the differences are trivial. 13 | 14 | It is a great start for a simple Sass port. 15 | 16 | ## Contributing 17 | 18 | There is much left to do, so please feel free to pitch in. 19 | 20 | 21 | ## _settings.scss 22 | 23 | You will want to make changes to the settings file which includes 80 or so variables that can be customized for each component. Making changes is simple, in `_settings.scss` find the element you want to style. Find the variable, uncomment the style, and change its value. Be sure to compile Sass stylesheets to CSS in order see any changes. 24 | 25 | ## Runtime Dependencies 26 | 27 | Per the `Gemfile`: 28 | 29 | **sass** <= 3.3.13 & >= 3.2.5 30 | 31 | As of this writing, Sassy Ink is still compatible with [Compass](http://compass-style.org/) versions 0.12.2 through 1.0.1 (as long Sass is between version 3.2.5 and 3.3.13), [Koala](http://koala-app.com/) 2.0.3, and [CodeKit](https://incident57.com/codekit/) 2.1.3. It also appears to be compatible with [Scout](http://mhs.github.io/scout-app/) 0.7.1, even though Scout looks like it's using Sass 3.2.1. I haven't tested any others. Please let me know if you do. 32 | 33 | It is **not** *necessarily* compatible with Sass >= 3.4 because assigning to global variables by default is deprecated. Using `!global` to fix this is incompatible with Sass < 3.3 and would break current versions of Koala and Scout; most versions of Compass less than 1.0.1 (August 18, 2014); and probably several other Sass compilers. Fortunately, the incompatibility is limited to the `export` mixin, which is used to prevent styles from being loaded multiple times for components that rely on other components. So, unless you are doing customization beyond setting variables in `_settings.scss`, this is not likely to be a problem. Yet, it seems worth mentioning. 34 | 35 | ## Precision 36 | 37 | In order to have the same number of significant digits as in the original Zurb `ink.css`, you must set the precision to 6. For example: 38 | 39 | sass --precision 6 scss/ink.scss css/ink.css 40 | 41 | In the Compass `config.rb`: 42 | 43 | Sass::Script::Number.precision = 6 44 | 45 | In `Gruntfile.js`: 46 | 47 | grunt.initConfig({ 48 | sass: { 49 | dist: { 50 | options: { 51 | precision: 6 52 | }, 53 | files: { 54 | 'css/ink.css': 'scss/ink.scss' 55 | } 56 | } 57 | } 58 | }); 59 | grunt.loadNpmTasks('grunt-contrib-sass'); 60 | 61 | ## Testing 62 | 63 | The only testing I am doing so far is comparing the Saas generated `ink.css` with a slightly massaged Zurb's [`ink.css` version 1.0.5.](https://github.com/zurb/ink/blob/416e0666bfe54a5c9f5dbeaa4c26d29b95b80c0c/css/ink.css) Please note Zurb's [`ink.css` on GitHub](https://github.com/zurb/ink/blob/master/css/ink.css) does not necessarly match the [version distributed on their website](http://zurb.com/ink/). 64 | 65 | ### Massaging 66 | 67 | 1. Run the CSS file through a Sass compiler to clean up some white space issues (`sass --precision 6 --style expanded test/fixtures/ink.css test/results/target.css`) 68 | 1. Remove an annoying line-break difference (`s/(table\[class="body"\] td\.offset\-by\-)(\w+)\s*?(,?\s*)(?=\1\w+)/$1$2, /g`) 69 | 1. Rename filename for the sourceMappingURL, should one exist, from 'target' to 'ink'. 70 | 71 | ### Diff 72 | 73 | `diff -bBs test/results/target.css test/results/ink.css` 74 | 75 | Files test/results/target.css and test/results/ink.css are identical 76 | 77 | ## To Do 78 | 79 | * I haven't yet figured out what to do with the docs, `CONTRIBUTING.md`, `Gruntfile.js`, `bower.json`, etc... 80 | 81 | ## Credit 82 | 83 | * [ZURB](http://www.zurb.com) (obvious) 84 | * [René Meye](https://github.com/renemeye)'s [pull request #61](https://github.com/zurb/ink/pull/61). (less obvious) 85 | 86 | ### Ink 87 | 88 | 89 | Ink is a responsive email framework, used to make HTML emails look great on any client or device. It includes a 12-column grid, as well as some simple UI elements for rapid prototyping. 90 | 91 | Homepage: http://zurb.com/ink
92 | Documentation: http://zurb.com/ink/docs.php
93 | Download: http://zurb.com/ink/download.php 94 | 95 | Ink was made by [ZURB](http://www.zurb.com), is MIT-licensed, and absolutely free to use. -------------------------------------------------------------------------------- /scss/ink/_settings.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | // 6 | // INK SETTINGS 7 | // 8 | 9 | // Allows the use of rem-calc() or lower-bound() in your settings 10 | @import "functions"; 11 | 12 | // $base-line-height: 1.3; 13 | 14 | // We use this to control whether or not CSS classes come through in the gem files. 15 | // $include-html-classes: true; 16 | 17 | 18 | 19 | // 20 | // $GLOBAL 21 | // 22 | 23 | // $include-hyphens : false; 24 | // $include-html-global-classes: $include-html-classes; 25 | 26 | // We use these to control font styles 27 | // $base-font-color: #222222; 28 | // $base-font-family: Helvetica, Arial, sans-serif; 29 | // $base-font-weight: normal; 30 | 31 | // $body-font-size: 14px; 32 | // $body-line-height: 19px; 33 | 34 | // We use these as default colors throughout 35 | // $primary-color: #2795b6; 36 | // $secondary-color: #e9e9e9; 37 | // $alert-color: #c60f13; 38 | // $success-color: #5da423; 39 | 40 | // We use this to control how much we darken things on hover 41 | // $secondary-border-color: #d0d0d0; 42 | // $alert-border-color: #457a1a; 43 | // $success-border-color: #970b0e; 44 | 45 | // We use these to make sure border radius matches unless we want it different. 46 | // $global-radius: 3px; 47 | // $global-rounded: 500px; 48 | 49 | // $column-gutter: 20px; 50 | 51 | 52 | 53 | // 54 | // $NORMALIZE 55 | // 56 | 57 | // $include-html-normalize-classes: $include-html-classes; 58 | 59 | 60 | 61 | // 62 | // $ALIGNMENT 63 | // 64 | 65 | // $include-html-alignment-classes: $include-html-classes; 66 | 67 | 68 | 69 | // 70 | // $GRID 71 | // 72 | 73 | // $include-html-grid-classes: $include-html-classes; 74 | // $include-html-sub-colums-grid-classes: $include-html-grid-classes; 75 | 76 | // $container-width: 580px; 77 | // $small-container-width: 95%; 78 | // $total-columns: 12; 79 | 80 | // $wrapper-padding-top: 10px; 81 | // $column-cell-padding-bottom: 10px; 82 | // $text-padding: 10px; 83 | 84 | // $sub-column-padding-right: $column-gutter / 2; 85 | 86 | 87 | 88 | // 89 | // $MEDIA-QUERY-RANGES 90 | // 91 | 92 | // $include-html-media-query-classes: $include-html-classes; 93 | 94 | // $small-range: (0px, $container-width * (600px / 580px)); 95 | 96 | // $screen: "only screen"; 97 | 98 | // $landscape: "#{$screen} and (orientation: landscape)"; 99 | // $portrait: "#{$screen} and (orientation: portrait)"; 100 | 101 | // $small-up: $screen; 102 | // $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; 103 | 104 | 105 | 106 | // 107 | // $OUTLOOK-FIRST 108 | // 109 | 110 | // $include-html-outlook-first-classes: $include-html-classes; 111 | 112 | 113 | 114 | // 115 | // $TYPOGRAPHY 116 | // 117 | 118 | // $include-html-type-classes: $include-html-classes; 119 | 120 | // We use these to control header font sizes 121 | // $h1-font-size: 40px; 122 | // $h2-font-size: 36px; 123 | // $h3-font-size: 32px; 124 | // $h4-font-size: 28px; 125 | // $h5-font-size: 24px; 126 | // $h6-font-size: 20px; 127 | 128 | // A general styling 129 | // $small-font-size: 10px; 130 | 131 | // We use these to style lead paragraphs 132 | // $paragraph-margin-bottom: 10px; 133 | // $paragraph-lead-font-size: 18px; 134 | // $paragraph-lead-line-height: 21px; 135 | 136 | // We use these to style anchors 137 | // $anchor-text-decoration: none; 138 | // $anchor-font-color: #2ba6cb; 139 | // $anchor-font-color-visited: $anchor-font-color; 140 | // $anchor-font-color-hover: #2795b6; 141 | // $anchor-font-color-active: $anchor-font-color-hover; 142 | 143 | // $header-anchor-font-color: $anchor-font-color; 144 | // $header-anchor-font-color-visited: $header-anchor-font-color; 145 | // $header-anchor-font-color-active: $header-anchor-font-color; 146 | 147 | // We use these to style the
element 148 | // $hr-color: #d9d9d9; 149 | // $hr-height: 1px; 150 | 151 | 152 | 153 | // 154 | // $BLOCK-GRID 155 | // 156 | 157 | // $include-html-block-grid-classes: $include-html-grid-classes; 158 | 159 | // We use this to control the maximum number of block grid elements per row 160 | // $block-grid-elements: 8; 161 | // $block-grid-default-spacing: $column-gutter; 162 | // $align-block-grid-to-grid: false; 163 | 164 | 165 | 166 | // 167 | // $BUTTONS 168 | // 169 | 170 | // $include-html-button-classes: $include-html-classes; 171 | 172 | // We use these to build padding for buttons. 173 | // $button-dft: 8px 0; 174 | // $button-tny: 5px 0; 175 | // $button-sml: 8px 0; 176 | // $button-med: 12px 0; 177 | // $button-lrg: 21px 0; 178 | 179 | // We use these to control button text styles. 180 | // $button-font-family: $base-font-family; 181 | // $button-font-color: #ffffff; 182 | // $button-font-color-alt: #555555; 183 | // $button-font-tny: 12px; 184 | // $button-font-sml: 16px; 185 | // $button-font-med: 20px; 186 | // $button-font-lrg: 24px; 187 | 188 | // We use these to control button border styles. 189 | // $button-border-width: 1px; 190 | // $button-border-style: solid; 191 | // $button-bg: #2ba6cb; 192 | // $button-border-color: #2284a1; 193 | 194 | // We use this to set the default radius used throughout the core. 195 | // $button-radius: $global-radius; 196 | // $button-round: $global-rounded; 197 | 198 | 199 | 200 | // 201 | // $PANELS 202 | // 203 | 204 | // $include-html-panel-classes: $include-html-classes; 205 | 206 | // We use these to control the background and border styles 207 | // $panel-bg: #f2f2f2; 208 | // $panel-border-style: solid; 209 | // $panel-border-size: 1px; 210 | 211 | // We use this to control how much we darken things on hover 212 | // $panel-border-color: #d9d9d9; 213 | 214 | // We use this to set default padding 215 | // $panel-padding: 10px; -------------------------------------------------------------------------------- /docs/components/buttons.php: -------------------------------------------------------------------------------- 1 |

Buttons

2 |

Dynamic and effective calls to action.

3 |
4 |

Structure

5 |

To create buttons that look great in most clients, make a table of class button to wrap your <a> tag. Buttons expand to the full width of their container by default, so if you don't want them to expand all the way, consider placing them in a sub-grid or block-grid element.

6 |
A Basic Button
7 | 9 | 10 | 11 | Button Label 12 | 13 | 14 | ' 15 | , 'html'); ?> 16 |
17 |
18 |

Style Classes

19 |

Several built in styling classes can be applied to the same element as the button class is applied to in order to adjust the button's appearance.

20 |

Size

21 |

Size classes affect the button's vertical padding. The available size classes are:

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
.button (same as .small-button)
.tiny-button
.small-button
.medium-button
.large-button
39 |

Color

40 |

Color classes denote the purpose of the button, and are used to change its background color. The available color classes are:

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
none (same as .primary)
.primary
.secondary
.alert
.success
58 |

Border Radius

59 |

Radius classes cause the corners of the buttons to be rounded in clients that support the border-radius property. The available radius classes are:

60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
none (no border-radius)
.radius
.round
71 |
72 |

Examples

73 |

Buttons expand to the width of their parent container by default, so it's recommended that you contain them within a sub-grid or a relatively small number of columns on the main grid.

74 |
Button Demo
75 |

All the button modifiers demonstrated. The rows of buttons are contained to .four.columns or .six.columns sections of the grid for clarity.

76 | 77 |
78 |
79 |

Compatibility

80 |
81 |
82 |
83 |

The buttons are compatible with most major clients.

84 |
85 |
86 | Toggle Full Table 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 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✔
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
168 |
169 |
170 |
171 | -------------------------------------------------------------------------------- /docs/components/panels.php: -------------------------------------------------------------------------------- 1 |

Panels

2 |

Quickly highlight important content.

3 |
4 | 5 |

Add a class of panel to a <td> in a .columns table in order to give it a default border and background color. Great for offsetting important content or for quickly prototyping a layout.

6 |
Panel Markup
7 | 9 | 10 | 11 | 12 | Panel content 13 | 14 | 15 | 16 | 17 | ', 18 | 'html') ?> 19 |
20 |
Panel Example
21 | 22 |
23 |
24 |

Examples

25 |

Sidebar Panel

26 |

A common patten is to have a panel section serve as a sidebar to offset it from the primary content.

27 |
Sidebar Panel Markup
28 | 30 | 31 | 32 | 33 | 34 | 35 | 40 | 41 | 42 |
36 | 37 | Main content 38 | 39 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 54 | 55 | 56 |
50 | 51 | Panel content 52 | 53 |
57 | 58 | 59 | 60 | ', 61 | 'html') ?> 62 |
63 |
Sidebar Panel
64 | 65 |
66 |
67 |

Panels With Sub-grids

68 |

Nesting a sub-grid under a panel is non-intuitive, since the sub-grid columns would normally be applied to the <td> elements directly under the .columns table. To get around this, give the <td> a class of .panel and a class of .sub-grid. You can then put a <table> inside the <td> and create the sub-columns using the <td> elements of the inner table, as shown below.

69 |
Panel Sub-Grid Markup
70 | 72 | 73 | 74 | 75 | 76 | 77 | 82 | 87 | 88 |
78 | 79 | Left Sub-Column 80 | 81 | 83 | 84 | Right Sub-Column 85 | 86 |
89 | 90 | 91 | 92 | 93 | ', 94 | 'html') ?> 95 |
96 |
Sub-Grid Panel
97 | 98 |
99 |
100 |

Compatibility

101 |
102 |
103 |
104 |

Panels work as expected in most major email clients.

105 |
106 |
107 | Toggle Full Table 108 |
109 |
110 | 111 |
112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✔
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
189 |
190 |
191 |
-------------------------------------------------------------------------------- /docs/components/block-grid.php: -------------------------------------------------------------------------------- 1 |

Block-Grid

2 |

An even-width element grid that doesn't use media queries.

3 |
4 |

Evenly Spaced Blocks

5 |

For cases where neither the Ink grid nor the Ink sub-grid is appropriate, the block-grid can often be quite useful. Block-grid elements automatically align to the left and are pushed down to the next row individually as the viewport gets smaller...all without using media queries.

6 |

Block-grids consist of a table with class block-grid applied to it, along with a class in the pattern 'number-up' (ex. .two-up, .three-up, etc.) to describe how many even-sized elements should be placed per row. Extra care should be taken to ensure that there aren't any whitespace characters or newlines between the closing <td> of a block-grid element and the opening <td> of the preceding element, since some clients will render the whitespace as a gap between the elements.

7 |
Basic Block-Grid Markup
8 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 |
16 | 17 | Column #1 18 | 19 | 20 | 21 | Column #2 22 | 23 |
26 | 27 | 28 | 29 | ', 30 | 'html') ?> 31 |
32 |
Visual Example of Block-Grids
33 | 34 |
35 |
36 |

Examples

37 |

Multi-column Layouts in Gmail

38 |

A major use case for block-grids, since they don't rely on media queries, is to create multi-column layouts for Gmail. The simplest way to accomplish this is to create a .two-up block-grid and use the block-grid elements as your column structures. As a progressive enhancement, adding a media query that expands the columns to 100% width under 600px would cause the columns to take up the whole screen on mobile clients that support media queries, while not breaking the reflow pattern for those that don't.

39 |
Gmail Two Column Layout
40 | 42 | 43 | 44 | 45 | 46 | 47 | 56 | 57 |
48 | 49 | Main Content 50 | 51 | 52 | 53 | Right Sidebar 54 | 55 |
58 | 59 | 60 | 61 | ', 62 | 'html') ?> 63 |
64 |
Block-Grid Column Progressive Enhancement (Optional)
65 | 72 |
73 | 75 |
76 |

Compatibility

77 |
78 |
79 |
80 |

The block-grid works as expected in most major email clients.

81 |
82 |
83 | Toggle Full Table 84 |
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 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔Make sure that there isn't any whitespace between your <td> elements, otherwise Thunderbird will add a gap between your block-grid elements.
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✔
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
165 |
166 |
167 |
168 | -------------------------------------------------------------------------------- /docs/examples/even-columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 207 | 208 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 200 | 201 |
38 | 39 | 40 | 41 | 55 | 56 |
42 | 43 | 44 | 45 | 50 | 51 | 52 |
46 | 47 | twelve.columns 48 | 49 |
53 | 54 |
57 | 58 | 59 | 60 | 74 | 88 | 89 |
61 | 62 | 63 | 64 | 69 | 70 | 71 |
65 | 66 | .six.columns 67 | 68 |
72 | 73 | 		75 | 76 | 77 | 78 | 83 | 84 | 85 |
79 | 80 | .six.columns 81 | 82 |
86 | 87 |
90 | 91 | 92 | 93 | 107 | 121 | 135 | 136 |
94 | 95 | 96 | 97 | 102 | 103 | 104 |
98 | 99 | .four.columns 100 | 101 |
105 | 106 | 		108 | 109 | 110 | 111 | 116 | 117 | 118 |
112 | 113 | .four.columns 114 | 115 |
119 | 120 | 		122 | 123 | 124 | 125 | 130 | 131 | 132 |
126 | 127 | .four.columns 128 | 129 |
133 | 134 |
137 | 138 | 139 | 140 | 154 | 168 | 182 | 196 | 197 |
141 | 142 | 143 | 144 | 149 | 150 | 151 |
145 | 146 | .three.columns 147 | 148 |
152 | 153 | 		155 | 156 | 157 | 158 | 163 | 164 | 165 |
159 | 160 | .three.columns 161 | 162 |
166 | 167 | 		169 | 170 | 171 | 172 | 177 | 178 | 179 |
173 | 174 | .three.columns 175 | 176 |
180 | 181 | 		183 | 184 | 185 | 186 | 191 | 192 | 193 |
187 | 188 | .three.columns 189 | 190 |
194 | 195 |
198 | 199 |
202 | 203 | 204 | 205 |
206 |
209 | 210 | -------------------------------------------------------------------------------- /scss/ink/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-button-classes: $include-html-classes !default; 11 | 12 | // We use these to build padding for buttons. 13 | $button-dft: 8px 0 !default; 14 | $button-tny: 5px 0 !default; 15 | $button-sml: 8px 0 !default; 16 | $button-med: 12px 0 !default; 17 | $button-lrg: 21px 0 !default; 18 | 19 | // We use these to control button text styles. 20 | $button-font-family: $base-font-family !default; 21 | $button-font-color: #ffffff !default; 22 | $button-font-color-alt: #555555 !default; 23 | $button-font-tny: 12px !default; 24 | $button-font-sml: 16px !default; 25 | $button-font-med: 20px !default; 26 | $button-font-lrg: 24px !default; 27 | 28 | // We use these to control button border styles. 29 | $button-border-width: 1px !default; 30 | $button-border-style: solid !default; 31 | $button-bg: #2ba6cb !default; 32 | $button-border-color: #2284a1 !default; 33 | 34 | // We use these as default colors throughout 35 | $primary-color: #2795b6 !default; 36 | $secondary-color: #e9e9e9 !default; 37 | $alert-color: #c60f13 !default; 38 | $success-color: #5da423 !default; 39 | $secondary-border-color: #d0d0d0 !default; 40 | $alert-border-color: #970b0e !default; 41 | $success-border-color: #457a1a !default; 42 | 43 | // We use this to set the default radius used throughout the core. 44 | $button-radius: $global-radius !default; 45 | $button-round: $global-rounded !default; 46 | 47 | @include exports("buttons") { 48 | @if $include-html-button-classes { 49 | /* Buttons */ 50 | 51 | table.button, 52 | table.tiny-button, 53 | table.small-button, 54 | table.medium-button, 55 | table.large-button { 56 | width: 100%; 57 | overflow: hidden; 58 | } 59 | 60 | table.button td, 61 | table.tiny-button td, 62 | table.small-button td, 63 | table.medium-button td, 64 | table.large-button td { 65 | display: block; 66 | width: auto !important; 67 | text-align: center; 68 | background: color2hex($button-bg); 69 | border: $button-border-width $button-border-style color2hex($button-border-color); 70 | color: color2hex($button-font-color); 71 | padding: $button-dft; 72 | line-height: initial !important; 73 | } 74 | 75 | table.tiny-button td { 76 | padding: $button-tny; 77 | } 78 | 79 | table.small-button td { 80 | padding: $button-sml; 81 | } 82 | 83 | table.medium-button td { 84 | padding: $button-med; 85 | } 86 | 87 | table.large-button td { 88 | padding: $button-lrg; 89 | } 90 | 91 | table.button td a, 92 | table.tiny-button td a, 93 | table.small-button td a, 94 | table.medium-button td a, 95 | table.large-button td a { 96 | font-weight: bold; 97 | text-decoration: none; 98 | font-family: $button-font-family; 99 | color: color2hex($button-font-color); 100 | font-size: $button-font-sml; 101 | display: block; 102 | height: 100%; 103 | width: 100%; 104 | } 105 | 106 | table.tiny-button td a { 107 | font-size: $button-font-tny; 108 | font-weight: normal; 109 | } 110 | 111 | table.small-button td a { 112 | font-size: $button-font-sml; 113 | } 114 | 115 | table.medium-button td a { 116 | font-size: $button-font-med; 117 | } 118 | 119 | table.large-button td a { 120 | font-size: $button-font-lrg; 121 | } 122 | 123 | table.button:hover td, 124 | table.button:visited td, 125 | table.button:active td { 126 | background: color2hex($primary-color) !important; 127 | } 128 | 129 | table.button:hover td a, 130 | table.button:visited td a, 131 | table.button:active td a { 132 | color: color2hex($button-font-color) !important; 133 | } 134 | 135 | table.button:hover td, 136 | table.tiny-button:hover td, 137 | table.small-button:hover td, 138 | table.medium-button:hover td, 139 | table.large-button:hover td { 140 | background: color2hex($primary-color) !important; 141 | } 142 | 143 | table.button:hover td a, 144 | table.button:active td a, 145 | table.button td a:visited, 146 | table.tiny-button:hover td a, 147 | table.tiny-button:active td a, 148 | table.tiny-button td a:visited, 149 | table.small-button:hover td a, 150 | table.small-button:active td a, 151 | table.small-button td a:visited, 152 | table.medium-button:hover td a, 153 | table.medium-button:active td a, 154 | table.medium-button td a:visited, 155 | table.large-button:hover td a, 156 | table.large-button:active td a, 157 | table.large-button td a:visited { 158 | color: color2hex($button-font-color) !important; 159 | } 160 | 161 | table.secondary td { 162 | background: color2hex($secondary-color); 163 | border-color: color2hex($secondary-border-color); 164 | color: color2hex($button-font-color-alt); 165 | } 166 | 167 | table.secondary td a { 168 | color: color2hex($button-font-color-alt); 169 | } 170 | 171 | table.secondary:hover td { 172 | background: color2hex($secondary-border-color) !important; 173 | color: color2hex($button-font-color-alt); 174 | } 175 | 176 | table.secondary:hover td a, 177 | table.secondary td a:visited, 178 | table.secondary:active td a { 179 | color: color2hex($button-font-color-alt) !important; 180 | } 181 | 182 | table.success td { 183 | background: color2hex($success-color); 184 | border-color: color2hex($success-border-color); 185 | } 186 | 187 | table.success:hover td { 188 | background: color2hex($success-border-color) !important; 189 | } 190 | 191 | table.alert td { 192 | background: color2hex($alert-color); 193 | border-color: color2hex($alert-border-color); 194 | } 195 | 196 | table.alert:hover td { 197 | background: color2hex($alert-border-color) !important; 198 | } 199 | 200 | table.radius td { 201 | -webkit-border-radius: $global-radius; 202 | -moz-border-radius: $global-radius; 203 | border-radius: $global-radius; 204 | } 205 | 206 | table.round td { 207 | -webkit-border-radius: $global-rounded; 208 | -moz-border-radius: $global-rounded; 209 | border-radius: $global-rounded; 210 | } 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /docs/test/vendor/geshi/javascript.php: -------------------------------------------------------------------------------- 1 | 'Javascript', 48 | 'COMMENT_SINGLE' => array(1 => '//'), 49 | 'COMMENT_MULTI' => array('/*' => '*/'), 50 | 'COMMENT_REGEXP' => array( 51 | //Regular Expressions 52 | 2 => "/(?<=[\\s^])(s|tr|y)\\/(?!\*)(?!\s)(?:\\\\.|(?!\n)[^\\/\\\\])+(? GESHI_CAPS_NO_CHANGE, 55 | 'QUOTEMARKS' => array("'", '"'), 56 | 'ESCAPE_CHAR' => '\\', 57 | 'KEYWORDS' => array( 58 | 1 => array( 59 | //reserved/keywords; also some non-reserved keywords 60 | 'break','case','catch','const','continue', 61 | 'default','delete','do', 62 | 'else', 63 | 'finally','for','function', 64 | 'get','goto', 65 | 'if','in','instanceof', 66 | 'new', 67 | 'prototype', 68 | 'return', 69 | 'set','static','switch', 70 | 'this','throw','try','typeof', 71 | 'var','void' 72 | ), 73 | 2 => array( 74 | //reserved/non-keywords; metaconstants 75 | 'false','null','true','undefined','NaN','Infinity' 76 | ), 77 | 3 => array( 78 | //magic properties/functions 79 | '__proto__','__defineGetter__','__defineSetter__','hasOwnProperty','hasProperty' 80 | ), 81 | 4 => array( 82 | //type constructors 83 | 'Object', 'Function', 'Date', 'Math', 'String', 'Number', 'Boolean', 'Array' 84 | ), 85 | 5 => array( 86 | //reserved, but invalid in language 87 | 'abstract','boolean','byte','char','class','debugger','double','enum','export','extends', 88 | 'final','float','implements','import','int','interface','long','native', 89 | 'short','super','synchronized','throws','transient','volatile' 90 | ), 91 | ), 92 | 'SYMBOLS' => array( 93 | '(', ')', '[', ']', '{', '}', 94 | '+', '-', '*', '/', '%', 95 | '!', '@', '&', '|', '^', 96 | '<', '>', '=', 97 | ',', ';', '?', ':' 98 | ), 99 | 'CASE_SENSITIVE' => array( 100 | GESHI_COMMENTS => false, 101 | 1 => true, 102 | 2 => true, 103 | 3 => true, 104 | 4 => true, 105 | 5 => true 106 | ), 107 | 'STYLES' => array( 108 | 'KEYWORDS' => array( 109 | 1 => 'color: #000066; font-weight: bold;', 110 | 2 => 'color: #003366; font-weight: bold;', 111 | 3 => 'color: #000066;', 112 | 5 => 'color: #FF0000;' 113 | ), 114 | 'COMMENTS' => array( 115 | 1 => 'color: #006600; font-style: italic;', 116 | 2 => 'color: #009966; font-style: italic;', 117 | 'MULTI' => 'color: #006600; font-style: italic;' 118 | ), 119 | 'ESCAPE_CHAR' => array( 120 | 0 => 'color: #000099; font-weight: bold;' 121 | ), 122 | 'BRACKETS' => array( 123 | 0 => 'color: #009900;' 124 | ), 125 | 'STRINGS' => array( 126 | 0 => 'color: #3366CC;' 127 | ), 128 | 'NUMBERS' => array( 129 | 0 => 'color: #CC0000;' 130 | ), 131 | 'METHODS' => array( 132 | 1 => 'color: #660066;' 133 | ), 134 | 'SYMBOLS' => array( 135 | 0 => 'color: #339933;' 136 | ), 137 | 'REGEXPS' => array( 138 | ), 139 | 'SCRIPT' => array( 140 | 0 => '', 141 | 1 => '', 142 | 2 => '', 143 | 3 => '' 144 | ) 145 | ), 146 | 'URLS' => array( 147 | 1 => '', 148 | 2 => '', 149 | 3 => '', 150 | 4 => '', 151 | 5 => '' 152 | ), 153 | 'OOLANG' => true, 154 | 'OBJECT_SPLITTERS' => array( 155 | 1 => '.' 156 | ), 157 | 'REGEXPS' => array( 158 | ), 159 | 'STRICT_MODE_APPLIES' => GESHI_MAYBE, 160 | 'SCRIPT_DELIMITERS' => array( 161 | 0 => array( 162 | '' 163 | ), 164 | 1 => array( 165 | '' 166 | ) 167 | ), 168 | 'HIGHLIGHT_STRICT_BLOCK' => array( 169 | 0 => true, 170 | 1 => true 171 | ) 172 | ); 173 | 174 | ?> -------------------------------------------------------------------------------- /docs/examples/basic-block-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 31 | 32 | 33 | 34 | 35 | 165 | 166 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 158 | 159 |
44 | 45 | 46 | 47 | 52 | 53 |
48 | .two-up 49 | 50 | .two-up 51 |
54 | 55 | 56 | 57 | 64 | 65 |
58 | .three-up 59 | 60 | .three-up 61 | 62 | .three-up 63 |
66 | 67 | 68 | 69 | 78 | 79 |
70 | .four-up 71 | 72 | .four-up 73 | 74 | .four-up 75 | 76 | .four-up 77 |
80 | 81 | 82 | 83 | 94 | 95 |
84 | .five-up 85 | 86 | .five-up 87 | 88 | .five-up 89 | 90 | .five-up 91 | 92 | .five-up 93 |
96 | 97 | 98 | 99 | 112 | 113 |
100 | .six-up 101 | 102 | .six-up 103 | 104 | .six-up 105 | 106 | .six-up 107 | 108 | .six-up 109 | 110 | .six-up 111 |
114 | 115 | 116 | 117 | 132 | 133 |
118 | .seven-up 119 | 120 | .seven-up 121 | 122 | .seven-up 123 | 124 | .seven-up 125 | 126 | .seven-up 127 | 128 | .seven-up 129 | 130 | .seven-up 131 |
134 | 135 | 136 | 137 | 154 | 155 |
138 | .eight-up 139 | 140 | .eight-up 141 | 142 | .eight-up 143 | 144 | .eight-up 145 | 146 | .eight-up 147 | 148 | .eight-up 149 | 150 | .eight-up 151 | 152 | .eight-up 153 |
156 | 157 |
160 | 161 | 162 | 163 |
164 |
167 | 168 | -------------------------------------------------------------------------------- /docs/components/images.php: -------------------------------------------------------------------------------- 1 |

Retina Images

2 |

Accent your emails with rich, high resolution images.

3 |
4 |

Markup

5 |

The days of having to choose between supporting Outlook or retina devices are over. To use high resolution images, put height and width HTML attributes on the <img> tag, corresponding to the scaled size of the image in a desktop view (the width of its .columns container). On small screen devices, Ink will cause the image to expand to its full width (or the width or its parent element, whichever is smaller).

6 |
Image Markup
7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ', 18 | 'html') ?> 19 |
20 |
21 |

Column Sizes

22 |

Below is a chart of the sizes images should be to fully fit various sizes of grid columns on a desktop (larger than 600px) view. Height should be determined with respect to width and should also be explicitly declared on the <img> tag.

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
Number of ColumnsInternal Width (in px)
130
280
3130
4180
5230
6280
7330
8380
9430
10480
11530
12580
77 |
78 |

Examples

79 |

Newsletter Images

80 |

A common pattern in email newsletters is to have an image on the left with description text next to it. We use this layout quite frequently on ZURB emails and thought that it looked awkward when the small image begins to float in the center of the screen on mobile devices. To compensate for this, we use a full-width image that's scaled down on the desktop view.

81 |
Newsletter 3-9 Image
82 | 84 | 85 | 86 | 87 | 88 | 89 | 94 | 95 | 96 |
90 | 91 | 92 | 93 |
97 | 98 | 99 | 100 | 101 | 102 | 103 | 108 | 109 | 110 |
104 | 105 | Text Content 106 | 107 |
111 | 112 | 113 | 114 | ', 115 | 'html') ?> 116 |
117 |
Retina Newsletter Image Demo
118 | 119 |
120 |
121 |

Compatibility

122 |
123 |
124 |
125 |

Retina images work as expected in most major email clients, with some caveats in Gmail (Mobile, iOS, Android).

126 |
127 |
128 | Toggle Full Table 129 |
130 |
131 | 132 |
133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 |
ClientSupportedNotes
Apple Mail (Desktop)✔
Apple Mail (iOS)✔
Outlook (2000, 2002, 2003)✔
Outlook (2007, 2010, 2013)✔
Outlook (2011)✔
Thunderbird✔
Android✔
Gmail (Desktop)✔
Gmail (Mobile, iOS, Android)✘Since the inline sizing will not be overwritten in mobile Gmail, retina images should not be used with block-grid based layouts (they're fine with the standard grid.
Outlook 2011 for Mac✔
AOL Mail✔
Hotmail✔
Outlook.com✔
210 |
211 |
212 |
-------------------------------------------------------------------------------- /docs/test/vendor/geshi/yaml.php: -------------------------------------------------------------------------------- 1 | : since PHP offers no variable-width lookbehind, 29 | * these blocks will still be highlighted even when commented out. As it happens, 30 | * any line ending with | or > could result in the unintentional highlighting of 31 | * all remaining lines in the file, just because I couldn't check for this regex 32 | * as a lookbehind: '/:(\s+)(!!(\w+)(\s+))?/' 33 | * If there is a workaround for that, it needs implemented. 34 | * * I may be missing some operators. I deliberately omitted inline array notation 35 | * as, in general, it's ugly and tends to conflict with plain-text. Ensuring all 36 | * highlighted list delimiters are not plain text would be as simple as checking 37 | * that they follow a colon directly. Alas, without variable-length lookbehinds, 38 | * if there is a way to do so in GeSHi I am unaware of it. 39 | * * I kind of whored the comment regexp array. It seemed like a safe bet, so it's 40 | * where I crammed everything. Some of it may need moved elsewhere for neatness. 41 | * * The !!typename highlight needs not to interfere with ": |" and ": >": Pairing 42 | * key: !!type | value is perfectly legal, but again due to lookbehind issues, I 43 | * can't add a case for that. Also, it is likely that multiple spaces can be put 44 | * between the colon and pipe symbol, which would also break it. 45 | * 46 | ************************************************************************************* 47 | * 48 | * This file is part of GeSHi. 49 | * 50 | * GeSHi is free software; you can redistribute it and/or modify it 51 | * under the terms of the GNU General Public License as published by 52 | * the Free Software Foundation; either version 2 of the License, or 53 | * (at your option) any later version. 54 | * 55 | * GeSHi is distributed in the hope that it will be useful, 56 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 57 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 58 | * GNU General Public License for more details. 59 | * 60 | * You should have received a copy of the GNU General Public License 61 | * along with GeSHi; if not, write to the Free Software 62 | * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA 63 | * 64 | ************************************************************************************/ 65 | 66 | $language_data = array ( 67 | 'LANG_NAME' => 'YAML', 68 | 'COMMENT_SINGLE' => array(), 69 | 'COMMENT_MULTI' => array(), 70 | //Keys 71 | 'COMMENT_REGEXP' => array( // ENTRY ZERO SHOULD CHECK FOR (\n(\s*)([^#%]+?):(\s+)(!!(\w+)(\s+))?) AS A LOOKBEHIND, BUT IT CAN'T. 72 | 0 => '/(?<=\s[\|>]\n)(\s+)(.*)((?=[\n$])(([\n^](\1(.*)|(?=[\n$])))*)|$)/', // Pipe blocks and > blocks. 73 | 1 => '/#(.*)/', // Blue # comments 74 | 2 => '/%(.*)/', // Red % comments 75 | 3 => '/(^|\n)([^#%^\n]+?)(?=: )/', // Key-value names 76 | 4 => '/(^|\n)([^#%^\n]+?)(?=:\n)/',// Key-group names 77 | 5 => '/(?<=^---)(\s*)!(\S+)/', // Comments after --- 78 | 6 => '/(?<=: )(\s*)\&(\S+)/', // References 79 | 7 => '/(?<=: )(\s*)\*(\S+)/', // Dereferences 80 | 8 => '/!!(\w+)/', // Types 81 | //9 => '/(?<=\n)(\s*)-(?!-)/', // List items: This needs to search within comments 3 and 4, but I don't know how. 82 | ), 83 | 'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE, 84 | 'QUOTEMARKS' => array('"'), 85 | 'ESCAPE_CHAR' => '', 86 | 'KEYWORDS' => array( 87 | 1 => array( 88 | 'all','any','none', "yes", "no" 89 | ), 90 | ), 91 | 'SYMBOLS' => array( 92 | 1 => array('---', '...'), 93 | 2 => array(': ', ">\n", "|\n", '<<:', ":\n") // It'd be nice if I could specify that the colon must 94 | // follow comment 3 or 4 to be considered, and the > and | 95 | // must follow such a colon. 96 | ), 97 | 'CASE_SENSITIVE' => array( 98 | GESHI_COMMENTS => false, 99 | 1 => false, 100 | ), 101 | 'STYLES' => array( 102 | 'KEYWORDS' => array( 103 | 1 => 'font-weight: bold;' 104 | ), 105 | 'COMMENTS' => array( 106 | 0 => 'color: #303050;background-color: #F5F5F5', 107 | 1 => 'color: blue;', 108 | 2 => 'font-weight: bold; color: red;', 109 | 3 => 'color: green;', 110 | 4 => 'color: #007F45;', 111 | 5 => 'color: #7f7fFF;', 112 | 6 => 'color: #FF7000;', 113 | 7 => 'color: #FF45C0;', 114 | 8 => 'font-weight: bold; color: #005F5F;', 115 | //9 => 'font-weight: bold; color: #000000;', 116 | ), 117 | 'ESCAPE_CHAR' => array( 118 | ), 119 | 'BRACKETS' => array( 120 | ), 121 | 'STRINGS' => array( 122 | 0 => 'color: #CF00CF;' 123 | ), 124 | 'NUMBERS' => array( 125 | // 0 => 'color: #33f;' // Don't highlight numbers, really... 126 | ), 127 | 'METHODS' => array( 128 | 1 => '', 129 | 2 => '' 130 | ), 131 | 'SYMBOLS' => array( 132 | 1 => 'color: cyan;', 133 | 2 => 'font-weight: bold; color: brown;' 134 | ), 135 | 'REGEXPS' => array( 136 | ), 137 | 'SCRIPT' => array( 138 | 0 => '' 139 | ) 140 | ), 141 | 'URLS' => array(1 => ''), 142 | 'OOLANG' => false, 143 | 'OBJECT_SPLITTERS' => array( ), 144 | 'REGEXPS' => array( ), 145 | 'STRICT_MODE_APPLIES' => GESHI_NEVER, 146 | 'SCRIPT_DELIMITERS' => array( ), 147 | 'HIGHLIGHT_STRICT_BLOCK' => array( ) 148 | ); 149 | 150 | ?> -------------------------------------------------------------------------------- /docs/test/vendor/geshi/sql.php: -------------------------------------------------------------------------------- 1 | 'SQL', 58 | 'COMMENT_SINGLE' => array(1 =>'--'), 59 | 'COMMENT_MULTI' => array('/*' => '*/'), 60 | 'CASE_KEYWORDS' => 1, 61 | 'QUOTEMARKS' => array("'", '"', '`'), 62 | 'ESCAPE_CHAR' => '\\', 63 | 'KEYWORDS' => array( 64 | 1 => array( 65 | 'ADD', 'ALL', 'ALTER', 'AND', 'AS', 'ASC', 'AUTO_INCREMENT', 66 | 'BEFORE', 'BEGIN', 'BETWEEN', 'BIGINT', 'BINARY', 'BLOB', 'BOOLEAN', 'BOTH', 'BY', 67 | 'CALL', 'CASE', 'CAST', 'CEIL', 'CEILING', 'CHANGE', 'CHAR', 'CHAR_LENGTH', 'CHARACTER', 68 | 'CHARACTER_LENGTH', 'CHECK', 'CLOB', 'COALESCE', 'COLLATE', 'COLUMN', 'COLUMNS', 69 | 'CONNECT', 'CONSTRAINT', 'CONVERT', 'COUNT', 'CREATE', 'CROSS', 'CURRENT', 70 | 'CURRENT_DATE', 'CURRENT_TIME', 'CURRENT_TIMESTAMP', 'CURRENT_USER', 71 | 'DATA', 'DATABASE', 'DATABASES', 'DATE', 'DAY', 'DEC', 'DECIMAL', 'DECLARE', 72 | 'DEFAULT', 'DELAYED', 'DELETE', 'DESC', 'DESCRIBE', 'DISTINCT', 'DOUBLE', 73 | 'DOMAIN', 'DROP', 74 | 'ELSE', 'ENCLOSED', 'END', 'ESCAPED', 'EXCEPT', 'EXEC', 'EXECUTE', 'EXISTS', 'EXP', 75 | 'EXPLAIN', 'EXTRACT', 76 | 'FALSE', 'FIELD', 'FIELDS', 'FILTER', 'FIRST', 'FLOAT', 'FLOOR', 'FLUSH', 'FOR', 77 | 'FOREIGN', 'FROM', 'FULL', 'FUNCTION', 78 | 'GET', 'GROUP', 'GROUPING', 'GO', 'GOTO', 'GRANT', 'GRANTED', 79 | 'HAVING', 'HOUR', 80 | 'IDENTIFIED', 'IDENTITY', 'IF', 'IGNORE', 'IN', 'INCREMENT', 'INDEX', 'INFILE', 'INNER', 81 | 'INOUT', 'INPUT', 'INSERT', 'INT', 'INTEGER', 'INTERSECT', 'INTERSECTION', 'INTERVAL', 82 | 'INTO', 'IS', 83 | 'JOIN', 84 | 'KEY', 'KEYS', 'KILL', 85 | 'LANGUAGE', 'LARGE', 'LAST', 'LEADING', 'LEFT', 'LENGTH', 'LIKE', 'LIMIT', 'LINES', 'LOAD', 86 | 'LOCAL', 'LOCK', 'LOW_PRIORITY', 'LOWER', 87 | 'MATCH', 'MAX', 'MERGE', 'MIN', 'MINUTE', 'MOD', 'MODIFIES', 'MODIFY', 'MONTH', 88 | 'NATIONAL', 'NATURAL', 'NCHAR', 'NEW', 'NEXT', 'NEXTVAL', 'NONE', 'NOT', 89 | 'NULL', 'NULLABLE', 'NULLIF', 'NULLS', 'NUMBER', 'NUMERIC', 90 | 'OF', 'OLD', 'ON', 'ONLY', 'OPEN', 'OPTIMIZE', 'OPTION', 91 | 'OPTIONALLY', 'OR', 'ORDER', 'OUT', 'OUTER', 'OUTFILE', 'OVER', 92 | 'POSITION', 'POWER', 'PRECISION', 'PREPARE', 'PRIMARY', 'PROCEDURAL', 'PROCEDURE', 93 | 'READ', 'REAL', 'REF', 'REFERENCES', 'REFERENCING', 'REGEXP', 'RENAME', 'REPLACE', 94 | 'RESULT', 'RETURN', 'RETURNS', 'REVOKE', 'RIGHT', 'RLIKE', 'ROLLBACK', 'ROW', 95 | 'ROW_NUMBER', 'ROWS', 'RESTRICT', 'ROLE', 'ROUTINE', 'ROW_COUNT', 96 | 'SAVEPOINT', 'SEARCH', 'SECOND', 'SECTION', 'SELECT', 'SELF', 'SEQUENCE', 97 | 'SESSION', 'SET', 'SETVAL', 'SHOW', 'SIMILAR', 'SIZE', 'SMALLINT', 'SOME', 98 | 'SONAME', 'SOURCE', 'SPACE', 'SQL', 'SQRT', 'START', 'STATUS', 99 | 'STRAIGHT_JOIN', 'STRUCTURE', 'STYLE', 'SUBSTRING', 'SUM', 100 | 'TABLE', 'TABLE_NAME', 'TABLES', 'TERMINATED', 'TEMPORARY', 'THEN', 'TIME', 101 | 'TIMESTAMP', 'TO', 'TRAILING', 'TRANSACTION', 'TRIGGER', 'TRIM', 'TRUE', 'TRUNCATE', 102 | 'TRUSTED', 'TYPE', 103 | 'UNDER', 'UNION', 'UNIQUE', 'UNKNOWN', 'UNLOCK', 'UNSIGNED', 104 | 'UPDATE', 'UPPER', 'USE', 'USER', 'USING', 105 | 'VALUE', 'VALUES', 'VARCHAR', 'VARIABLES', 'VARYING', 'VIEW', 106 | 'WHEN', 'WHERE', 'WITH', 'WITHIN', 'WITHOUT', 'WORK', 'WRITE', 107 | 'XOR', 108 | 'YEAR', 109 | 'ZEROFILL' 110 | ) 111 | ), 112 | 'SYMBOLS' => array( 113 | '(', ')', '=', '<', '>', '|', ',', '.', '+', '-', '*', '/' 114 | ), 115 | 'CASE_SENSITIVE' => array( 116 | GESHI_COMMENTS => false, 117 | 1 => false 118 | ), 119 | 'STYLES' => array( 120 | 'KEYWORDS' => array( 121 | 1 => 'color: #993333; font-weight: bold;' 122 | ), 123 | 'COMMENTS' => array( 124 | 1 => 'color: #808080; font-style: italic;', 125 | //2 => 'color: #808080; font-style: italic;', 126 | 'MULTI' => 'color: #808080; font-style: italic;' 127 | ), 128 | 'ESCAPE_CHAR' => array( 129 | 0 => 'color: #000099; font-weight: bold;' 130 | ), 131 | 'BRACKETS' => array( 132 | 0 => 'color: #66cc66;' 133 | ), 134 | 'STRINGS' => array( 135 | 0 => 'color: #ff0000;' 136 | ), 137 | 'NUMBERS' => array( 138 | 0 => 'color: #cc66cc;' 139 | ), 140 | 'METHODS' => array( 141 | ), 142 | 'SYMBOLS' => array( 143 | 0 => 'color: #66cc66;' 144 | ), 145 | 'SCRIPT' => array( 146 | ), 147 | 'REGEXPS' => array( 148 | ) 149 | ), 150 | 'URLS' => array( 151 | 1 => '' 152 | ), 153 | 'OOLANG' => false, 154 | 'OBJECT_SPLITTERS' => array( 155 | ), 156 | 'REGEXPS' => array( 157 | ), 158 | 'STRICT_MODE_APPLIES' => GESHI_NEVER, 159 | 'SCRIPT_DELIMITERS' => array( 160 | ), 161 | 'HIGHLIGHT_STRICT_BLOCK' => array( 162 | ) 163 | ); 164 | 165 | ?> -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | assemble: { 5 | options: {partials: 'css/*.css'}, 6 | templates: { 7 | src: 'templates/**/*.html', 8 | dest: 'build/downloads', 9 | cwd: './' 10 | }, 11 | docsDev: { 12 | src: 'docs/examples/*.html', 13 | dest: 'build/docs', 14 | cwd: './' 15 | }, 16 | docsDeploy: { 17 | src: 'docs/examples/*.html', 18 | dest: 'build', 19 | cwd: './' 20 | } 21 | }, 22 | shell: { 23 | makeStage: { 24 | command: [ 25 | 'rm -rf build', 26 | 'mkdir build', 27 | 'mkdir build/downloads', 28 | 'mkdir build/downloads/templates', 29 | 'mkdir build/downloads/framework', 30 | 'mkdir build/docs', 31 | ].join('&&') 32 | }, 33 | zipTemplates: { 34 | command: [ 35 | 'cd build/downloads/templates/base', 36 | 'cp * ../', 37 | 'cd ../', 38 | 'rm -rf base', 39 | 'zip all-templates.zip *.html', 40 | 'for i in *.html; do zip "${i%}.zip" "$i"; done', 41 | 'cd ../../../' 42 | ].join('&&') 43 | }, 44 | zipFramework: { 45 | command: [ 46 | 'cp css/ink.css build/downloads/framework/ink.css', 47 | 'cp templates/boilerplate.html build/downloads/framework/boilerplate.html', 48 | 'cp -r build/downloads/templates/examples build/downloads/framework/examples', 49 | 'cd build/downloads/framework', 50 | 'zip -r ink-<%= pkg.version %>.zip *', 51 | 'cd ../../../', 52 | ].join('&&') 53 | }, 54 | linkFramework: { 55 | command: [ 56 | 'cd build/downloads', 57 | 'echo \'.zip\" ?>\' > latest.php', 58 | 'cd ../../', 59 | ].join('&&') 60 | }, 61 | deployDownloads: { 62 | command: [ 63 | 'cd build/downloads', 64 | 'rsync -r . ink@zurb.com:/var/www/ink/shared/downloads', 65 | 'cd ../../' 66 | ].join('&&') 67 | }, 68 | testDocs: { 69 | command: [ 70 | 'cp -r docs/test/* build/docs', 71 | 'cp -r docs/components build/docs/components', 72 | 'cp docs/docs.php build/docs/docs.php', 73 | ].join('&&') 74 | }, 75 | deployDocs: { 76 | command: [ 77 | 'rsync -r docs build --exclude test --exclude examples', 78 | 'cd build/docs', 79 | 'rsync -r . ink@zurb.com:/var/www/ink/shared/docs', 80 | 'cd ../../' 81 | ].join('&&') 82 | }, 83 | cleanUp: { 84 | command: [ 85 | 'rm -rf build', 86 | 'echo "Deploy Completed"' 87 | ].join('&&') 88 | }, 89 | }, 90 | watch: { 91 | docs: { 92 | files: ['docs/docs.php', 'docs/**/*.php', 'docs/**/*.html', 'css/*.css'], 93 | tasks: ['shell:makeStage', 'assemble:docsDev', 'shell:testDocs'], 94 | options: { 95 | livereload: true, 96 | }, 97 | }, 98 | sassTest: { 99 | files: ['scss/*.scss', 'scss/ink/*.scss', 'scss/ink/components/*.scss'], 100 | tasks: ['sass:test', 'exec:sassTestDiff'], 101 | }, 102 | sassWatch: { 103 | files: ['scss/*.scss', 'scss/ink/*.scss', 'scss/ink/components/*.scss'], 104 | tasks: ['sass:test', 'copy:sassTest2Dist', 'exec:sassTestDiff'], 105 | } 106 | }, 107 | 108 | 109 | clean: { 110 | sassCss: ["css"], 111 | sassTest: ["test/results"], 112 | }, 113 | copy: { 114 | sassDeploy: { 115 | src: 'scss/**', 116 | dest: 'build/downloads/framework/', 117 | }, 118 | sassTest2Dist: { 119 | src: 'test/results/ink.css', 120 | dest: 'css/ink.css', 121 | }, 122 | 123 | }, 124 | sass: { 125 | options: { 126 | style: 'expanded', 127 | precision: 6 128 | }, 129 | dist: { 130 | files: { 131 | 'css/ink.css': 'scss/ink.scss' 132 | }, 133 | }, 134 | dev: { 135 | files: { 136 | 'css/ink.css': 'scss/ink.scss' 137 | }, 138 | }, 139 | test: { 140 | files: { 141 | 'test/results/ink.css': 'scss/ink.scss', 142 | }, 143 | }, 144 | testTarget: { 145 | files: { 146 | 'test/results/target.css': 'test/fixtures/ink.css' 147 | }, 148 | }, 149 | }, 150 | "regex-replace": { 151 | sassPrepTestTarget: { 152 | src: ['test/results/target.css'], 153 | actions: [ 154 | { 155 | name: 'Remove annoying linebreak difference', 156 | search: /(table\[class="body"\] td\.offset\-by\-)(\w+)\s*?(,?\s*)(?=\1\w+)/g, 157 | replace: '$1$2, ', 158 | }, 159 | { 160 | name: 'Change filename of sourcemap to \'ink\' to pass the diff test', 161 | search: /(\/\*# sourceMappingURL=)(\w+)(\.css\.map)/, 162 | replace: '$1ink$3', 163 | }, 164 | ], 165 | } 166 | }, 167 | exec: { 168 | sassTestDiff: { 169 | command: [ 170 | 'diff -bB --brief test/results/target.css test/results/ink.css', 171 | ';', 172 | 'diff -bB test/results/target.css test/results/ink.css > test/results/diff.txt', 173 | ';', 174 | 'diff -bBs test/results/target.css test/results/ink.css', 175 | '&&', 176 | 'rm test/results/diff.txt', 177 | ].join(''), 178 | exitCode: [0], 179 | }, 180 | }, 181 | }); 182 | 183 | require('load-grunt-tasks')(grunt, {pattern: ['grunt-*', 'assemble']}); 184 | 185 | grunt.registerTask('make:templates', ['assemble:templates', 'shell:zipTemplates']); 186 | grunt.registerTask('deploy:downloads', ['shell:makeStage', 'assemble:templates', 'shell:zipTemplates', 'shell:zipFramework', 'shell:linkFramework', 'shell:deployDownloads', 'shell:cleanUp']); 187 | grunt.registerTask('make:docs', ['shell:makeStage', 'assemble:docsDev', 'shell:testDocs']); 188 | grunt.registerTask('deploy:docs', ['shell:makeStage', 'assemble:docsDeploy', 'shell:deployDocs', 'shell:cleanUp']); 189 | grunt.registerTask('default', ['make:docs', 'watch:docs']); 190 | 191 | grunt.registerTask('sassy:clean', ['clean:sassCss', 'clean:sassTest']); 192 | grunt.registerTask('sassy:test:clean', ['clean:sassTest']); 193 | grunt.registerTask('sassy:test:target', ['newer:sass:testTarget']); 194 | grunt.registerTask('sassy:test:init', ['sassy:test:clean', 'sassy:test:target']); 195 | grunt.registerTask('sassy:test:sass', ['sass:test', 'regex-replace:sassPrepTestTarget', 'exec:sassTestDiff']); 196 | grunt.registerTask('sassy:test', ['sassy:test:target', 'sassy:test:sass']); 197 | grunt.registerTask('sassy:test:watch', ['sassy:test', 'watch:sassTest']); 198 | grunt.registerTask('sassy:make', ['sass:dev']); 199 | grunt.registerTask('sassy', ['sassy:clean', 'sassy:test', 'copy:sassTest2Dist', 'watch:sassWatch']); 200 | 201 | grunt.registerTask('sassy:make:templates', ['sass:dist', 'make:templates']); 202 | grunt.registerTask('sassy:deploy:downloads', ['shell:makeStage', 'sass:dist', 'copy:sassDeploy', 'assemble:templates', 'shell:zipTemplates', 'shell:zipFramework', 'shell:linkFramework', 'shell:deployDownloads', 'shell:cleanUp']); 203 | grunt.registerTask('sassy:make:docs', ['sass:dist', 'make:docs']); 204 | grunt.registerTask('sassy:deploy:docs', ['sass:dist', 'deploy:docs']); 205 | grunt.registerTask('sassy:default', ['sass:dist', 'default']); 206 | 207 | 208 | 209 | }; -------------------------------------------------------------------------------- /docs/examples/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 248 | 249 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 241 | 242 |
39 | 40 | 41 | 42 | 62 | 82 | 83 |
43 | 44 | 45 | 46 | 57 | 58 | 59 |
47 | 48 | 49 | 50 | 53 | 54 |
51 | .tiny-button 52 |
55 | 56 |
60 | 61 | 		63 | 64 | 65 | 66 | 77 | 78 | 79 |
67 | 68 | 69 | 70 | 73 | 74 |
71 | .small-button 72 |
75 | 76 |
80 | 81 |
84 | 85 | 86 | 87 | 107 | 127 | 128 |
88 | 89 | 90 | 91 | 102 | 103 | 104 |
92 | 93 | 94 | 95 | 98 | 99 |
96 | .medium-button 97 |
100 | 101 |
105 | 106 | 		108 | 109 | 110 | 111 | 122 | 123 | 124 |
112 | 113 | 114 | 115 | 118 | 119 |
116 | .large-button 117 |
120 | 121 |
125 | 126 |
129 | 130 | 131 | 132 | 152 | 172 | 192 | 193 |
133 | 134 | 135 | 136 | 147 | 148 | 149 |
137 | 138 | 139 | 140 | 143 | 144 |
141 | .secondary 142 |
145 | 146 |
150 | 151 | 		153 | 154 | 155 | 156 | 167 | 168 | 169 |
157 | 158 | 159 | 160 | 163 | 164 |
161 | .alert 162 |
165 | 166 |
170 | 171 | 		173 | 174 | 175 | 176 | 187 | 188 | 189 |
177 | 178 | 179 | 180 | 183 | 184 |
181 | .success 182 |
185 | 186 |
190 | 191 |
194 | 195 | 196 | 197 | 217 | 237 | 238 |
198 | 199 | 200 | 201 | 212 | 213 | 214 |
202 | 203 | 204 | 205 | 208 | 209 |
206 | .radius 207 |
210 | 211 |
215 | 216 | 		218 | 219 | 220 | 221 | 232 | 233 | 234 |
222 | 223 | 224 | 225 | 228 | 229 |
226 | .round 227 |
230 | 231 |
235 | 236 |
239 | 240 |
243 | 244 | 245 | 246 |
247 |
250 | 251 | -------------------------------------------------------------------------------- /docs/test/vendor/geshi/reg.php: -------------------------------------------------------------------------------- 1 | 'Microsoft Registry', 64 | 'COMMENT_SINGLE' => array(1 =>';'), 65 | 'COMMENT_MULTI' => array( ), 66 | 'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE, 67 | 'QUOTEMARKS' => array(), 68 | 'ESCAPE_CHAR' => '', 69 | 'KEYWORDS' => array( 70 | // 1 => array(), 71 | // 2 => array(), 72 | /* Registry Key Constants Not Used */ 73 | 3 => array( 74 | 'HKEY_LOCAL_MACHINE', 75 | 'HKEY_CLASSES_ROOT', 76 | 'HKEY_CURRENT_USER', 77 | 'HKEY_USERS', 78 | 'HKEY_CURRENT_CONFIG', 79 | 'HKEY_DYN_DATA', 80 | 'HKLM', 'HKCR', 'HKCU', 'HKU', 'HKCC', 'HKDD' 81 | ) 82 | ), 83 | 'SYMBOLS' => array( 84 | '=' 85 | ), 86 | 'CASE_SENSITIVE' => array( 87 | GESHI_COMMENTS => false, 88 | // 1 => false, 89 | // 2 => false, 90 | 3 => false 91 | ), 92 | 'STYLES' => array( 93 | 'KEYWORDS' => array( 94 | // 1 => 'color: #00CCFF;', 95 | // 2 => 'color: #0000FF;', 96 | 3 => 'color: #800000;' 97 | ), 98 | 'COMMENTS' => array( 99 | 1 => 'color: #009900;' 100 | ), 101 | 'ESCAPE_CHAR' => array( 102 | ), 103 | 'BRACKETS' => array( 104 | 0 => 'color: #000000;' 105 | ), 106 | 'STRINGS' => array( 107 | 0 => 'color: #009900;' 108 | ), 109 | 'NUMBERS' => array( 110 | ), 111 | 'METHODS' => array( 112 | ), 113 | 'SYMBOLS' => array( 114 | 0 => 'color: #000000;' 115 | ), 116 | 'SCRIPT' => array( 117 | ), 118 | 'REGEXPS' => array( 119 | 0 => 'color: #00CCFF;', 120 | 1 => 'color: #0000FF;', 121 | 2 => '', 122 | 3 => 'color: #0000FF;', 123 | 4 => 'color: #0000FF;', 124 | 5 => '', 125 | 6 => '', 126 | 7 => '', 127 | 8 => 'color: #FF6600;', 128 | ) 129 | ), 130 | 'URLS' => array( 131 | // 1 => '', 132 | // 2 => '', 133 | 3 => '' 134 | ), 135 | 'OOLANG' => false, 136 | 'OBJECT_SPLITTERS' => array( 137 | ), 138 | 'REGEXPS' => array( 139 | // Highlight Key Delimiters 140 | 0 => array( 141 | GESHI_SEARCH => '((^|\\n)\\s*)(\\\\\\[(.*)\\\\\\])(\\s*(\\n|$))', 142 | GESHI_REPLACE => '\\3', 143 | GESHI_MODIFIERS => '', 144 | GESHI_BEFORE => '\\1', 145 | GESHI_AFTER => '\\5' 146 | // GESHI_CLASS => 'kw1' 147 | ), 148 | // Highlight File Format Header Version 5 149 | 1 => array( 150 | GESHI_SEARCH => '(^\s*)(Windows Registry Editor Version \d+\.\d+)(\s*$)', 151 | GESHI_REPLACE => '\\2', 152 | GESHI_MODIFIERS => 'm', 153 | GESHI_BEFORE => '\\1', 154 | GESHI_AFTER => '\\3', 155 | GESHI_CLASS => 'geshi_registry_header' 156 | ), 157 | // Highlight File Format Header Version 4 158 | 2 => array( 159 | GESHI_SEARCH => '(^\\s*)(REGEDIT\s?\d+)(\s*$)', 160 | GESHI_REPLACE => '\\2', 161 | GESHI_MODIFIERS => 'm', 162 | GESHI_BEFORE => '\\1', 163 | GESHI_AFTER => '\\3', 164 | GESHI_CLASS => 'geshi_registry_header' 165 | ), 166 | // Highlight dword: 32 bit integer values 167 | 3 => array( 168 | GESHI_SEARCH => '(=\s*)(dword:[0-9a-fA-F]{8})(\s*$)', 169 | GESHI_REPLACE => '\\2', 170 | GESHI_MODIFIERS => 'm', 171 | GESHI_BEFORE => '\\1', 172 | GESHI_AFTER => '\\3' 173 | // GESHI_CLASS => 'kw2' 174 | ), 175 | // Highlight variable names 176 | 4 => array( 177 | GESHI_SEARCH => '(^\s*)(\".*?\")(\s*=)', 178 | GESHI_REPLACE => '\\2', 179 | GESHI_MODIFIERS => 'm', 180 | GESHI_BEFORE => '\\1', 181 | GESHI_AFTER => '\\3', 182 | GESHI_CLASS => 'geshi_variable' 183 | ), 184 | // Highlight String Values 185 | 5 => array( 186 | GESHI_SEARCH => '(=\s*)(\".*?\")(\s*$)', 187 | GESHI_REPLACE => '\\2', 188 | GESHI_MODIFIERS => 'm', 189 | GESHI_BEFORE => '\\1', 190 | GESHI_AFTER => '\\3', 191 | GESHI_CLASS => 'st0' 192 | ), 193 | // Highlight Hexadecimal Values (Single-Line and Multi-Line) 194 | 6 => array( 195 | GESHI_SEARCH => '(=\s*\n?\s*)(hex:[0-9a-fA-F]{2}(,(\\\s*\n\s*)?[0-9a-fA-F]{2})*)', 196 | GESHI_REPLACE => '\\2', 197 | GESHI_MODIFIERS => 'm', 198 | GESHI_BEFORE => '\\1', 199 | GESHI_AFTER => '', 200 | GESHI_CLASS => 'kw2' 201 | ), 202 | // Highlight Default Variable 203 | 7 => array( 204 | GESHI_SEARCH => '(^\s*)(@)(\s*=)', 205 | GESHI_REPLACE => '\\2', 206 | GESHI_MODIFIERS => 'm', 207 | GESHI_BEFORE => '\\1', 208 | GESHI_AFTER => '\\3', 209 | GESHI_CLASS => 'geshi_variable' 210 | ), 211 | // Highlight GUID's found anywhere. 212 | 8 => array( 213 | GESHI_SEARCH => '(\{[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\})', 214 | GESHI_REPLACE => '\\1', 215 | GESHI_MODIFIERS => 'i', 216 | GESHI_BEFORE => '', 217 | GESHI_AFTER => '', 218 | GESHI_CLASS => 'geshi_guid' 219 | ) 220 | ), 221 | 'STRICT_MODE_APPLIES' => GESHI_NEVER, 222 | 'SCRIPT_DELIMITERS' => array( 223 | ), 224 | 'HIGHLIGHT_STRICT_BLOCK' => array( 225 | ), 226 | 'PARSER_CONTROL' => array( 227 | 'ENABLE_FLAGS' => array( 228 | 'NUMBERS' => GESHI_NEVER, 229 | ) 230 | ) 231 | ); 232 | 233 | ?> 234 | -------------------------------------------------------------------------------- /docs/test/vendor/geshi/html5.php: -------------------------------------------------------------------------------- 1 | 'HTML5', 54 | 'COMMENT_SINGLE' => array(), 55 | 'COMMENT_MULTI' => array(), 56 | 'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE, 57 | 'QUOTEMARKS' => array("'", '"'), 58 | 'ESCAPE_CHAR' => '', 59 | 'KEYWORDS' => array( 60 | 2 => array( 61 | 'a', 'abbr', 'address', 'article', 'area', 'aside', 'audio', 62 | 63 | 'base', 'bdo', 'blockquote', 'body', 'br', 'button', 'b', 64 | 65 | 'caption', 'cite', 'code', 'colgroup', 'col', 'canvas', 'command', 'datalist', 'details', 66 | 67 | 'dd', 'del', 'dfn', 'div', 'dl', 'dt', 68 | 69 | 'em', 'embed', 70 | 71 | 'fieldset', 'form', 'figcaption', 'figure', 'footer', 72 | 73 | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'hr', 'html', 'header', 'hgroup', 74 | 75 | 'iframe', 'ilayer', 'img', 'input', 'ins', 'isindex', 'i', 76 | 77 | 'kbd', 'keygen', 78 | 79 | 'label', 'legend', 'link', 'li', 80 | 81 | 'map', 'meta', 'mark', 'meter', 82 | 83 | 'noscript', 'nav', 84 | 85 | 'object', 'ol', 'optgroup', 'option', 'output', 86 | 87 | 'param', 'pre', 'p', 'progress', 88 | 89 | 'q', 90 | 91 | 'rp', 'rt', 'ruby', 92 | 93 | 'samp', 'script', 'select', 'small', 'span', 'strong', 'style', 'sub', 'sup', 's', 'section', 'source', 'summary', 94 | 95 | 'table', 'tbody', 'td', 'textarea', 'text', 'tfoot', 'thead', 'th', 'title', 'tr', 'time', 96 | 97 | 'ul', 98 | 99 | 'var', 'video', 100 | 101 | 'wbr', 102 | ), 103 | 3 => array( 104 | 'abbr', 'accept-charset', 'accept', 'accesskey', 'action', 'align', 'alink', 'alt', 'archive', 'axis', 'autocomplete', 'autofocus', 105 | 'background', 'bgcolor', 'border', 106 | 'cellpadding', 'cellspacing', 'char', 'charoff', 'charset', 'checked', 'cite', 'class', 'classid', 'clear', 'code', 'codebase', 'codetype', 'color', 'cols', 'colspan', 'compact', 'content', 'coords', 'contenteditable', 'contextmenu', 107 | 'data', 'datetime', 'declare', 'defer', 'dir', 'disabled', 'draggable', 'dropzone', 108 | 'enctype', 109 | 'face', 'for', 'frame', 'frameborder', 'form', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget', 110 | 'headers', 'height', 'href', 'hreflang', 'hspace', 'http-equiv', 'hidden', 111 | 'id', 'ismap', 112 | 'label', 'lang', 'language', 'link', 'longdesc', 113 | 'marginheight', 'marginwidth', 'maxlength', 'media', 'method', 'multiple', 'min', 'max', 114 | 'name', 'nohref', 'noresize', 'noshade', 'nowrap', 'novalidate', 115 | 'object', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onselect', 'onsubmit', 'onunload', 'onafterprint', 'onbeforeprint', 'onbeforeonload', 'onerror', 'onhaschange', 'onmessage', 'onoffline', 'ononline', 'onpagehide', 'onpageshow', 'onpopstate', 'onredo', 'onresize', 'onstorage', 'onundo', 'oncontextmenu', 'onformchange', 'onforminput', 'oninput', 'oninvalid', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onmousewheel', 'onscroll', 'oncanplay', 'oncanplaythrough', 'ondurationchange', 'onemptied', 'onended', 'onloadeddata', 'onloadedmetadata', 'onloadstart', 'onpause', 'onplay', 'onplaying', 'onprogress', 'onratechange', 'onreadystatechange', 'onseeked', 'onseeking', 'onstalled', 'onsuspend', 'ontimeupdate', 'onvolumechange', 'onwaiting', 116 | 'profile', 'prompt', 'pattern', 'placeholder', 117 | 'readonly', 'rel', 'rev', 'rowspan', 'rows', 'rules', 'required', 118 | 'scheme', 'scope', 'scrolling', 'selected', 'shape', 'size', 'span', 'src', 'standby', 'start', 'style', 'summary', 'spellcheck', 'step', 119 | 'tabindex', 'target', 'text', 'title', 'type', 120 | 'usemap', 121 | 'valign', 'value', 'valuetype', 'version', 'vlink', 'vspace', 122 | 'width' 123 | ) 124 | ), 125 | 'SYMBOLS' => array( 126 | '/', '=' 127 | ), 128 | 'CASE_SENSITIVE' => array( 129 | GESHI_COMMENTS => false, 130 | 2 => false, 131 | 3 => false, 132 | ), 133 | 'STYLES' => array( 134 | 'KEYWORDS' => array( 135 | 2 => 'color: #6ab825;', 136 | 3 => 'color: #bbbbbb;' 137 | ), 138 | 'COMMENTS' => array( 139 | ), 140 | 'ESCAPE_CHAR' => array( 141 | 0 => 'color: #ed9d13;' 142 | ), 143 | 'BRACKETS' => array( 144 | 0 => 'color: #66cc66;' 145 | ), 146 | 'STRINGS' => array( 147 | 0 => 'color: #ed9d13;' 148 | ), 149 | 'NUMBERS' => array( 150 | 0 => 'color: #cc66cc;' 151 | ), 152 | 'METHODS' => array( 153 | ), 154 | 'SYMBOLS' => array( 155 | 0 => 'color: #6ab825;' 156 | ), 157 | 'SCRIPT' => array( 158 | -2 => 'color: #404040;', // CDATA 159 | -1 => 'color: #999999;', // comments 160 | 0 => 'color: #cd2828;', 161 | 1 => 'color: #ddbb00;', 162 | 2 => 'color: #6ab825;' 163 | ), 164 | 'REGEXPS' => array( 165 | ) 166 | ), 167 | 'URLS' => array( 168 | 2 => 'http://december.com/html/4/element/{FNAMEL}.html', 169 | 3 => '' 170 | ), 171 | 'OOLANG' => false, 172 | 'OBJECT_SPLITTERS' => array( 173 | ), 174 | 'REGEXPS' => array( 175 | ), 176 | 'STRICT_MODE_APPLIES' => GESHI_ALWAYS, 177 | 'SCRIPT_DELIMITERS' => array( 178 | -2 => array( 179 | ' ']]>' 180 | ), 181 | -1 => array( 182 | '', 183 | '/*' => '*/' 184 | ), 185 | 0 => array( 186 | ' '>' 187 | ), 188 | 1 => array( 189 | '&' => ';' 190 | ), 191 | 2 => array( 192 | '<' => '>' 193 | ) 194 | ), 195 | 'HIGHLIGHT_STRICT_BLOCK' => array( 196 | -2 => false, 197 | -1 => false, 198 | 0 => false, 199 | 1 => false, 200 | 2 => true 201 | ), 202 | 'TAB_WIDTH' => 4, 203 | 'PARSER_CONTROL' => array( 204 | 'KEYWORDS' => array( 205 | 2 => array( 206 | 'DISALLOWED_BEFORE' => '(?<=<|<\/)', 207 | 'DISALLOWED_AFTER' => '(?=\s|\/|>)', 208 | ) 209 | ) 210 | ) 211 | ); 212 | 213 | ?> -------------------------------------------------------------------------------- /templates/base/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 90 | 91 | 92 | 93 | 94 | 255 | 256 |
95 |
96 | 97 | 98 | 99 | 124 | 125 |
100 |
101 | 102 | 103 | 104 | 119 | 120 |
105 | 106 | 107 | 108 | 111 | 114 | 115 | 116 |
109 | 110 | 112 | BASIC 113 |
117 | 118 |
121 | 122 |
123 |
126 | 127 | 128 | 129 | 250 | 251 |
130 | 131 | 132 | 133 | 147 | 148 |
134 | 135 | 136 | 137 | 142 | 143 | 144 |
138 |

Hi, Susan Calvin

139 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.

140 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.

141 |
145 | 146 |
149 | 150 | 151 | 152 | 164 | 165 |
153 | 154 | 155 | 156 | 159 | 160 | 161 |
157 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

158 |
162 | 163 |
166 | 167 | 168 | 169 | 211 | 225 | 226 |
170 | 171 | 172 | 173 | 206 | 207 | 208 |
174 | 175 |
Connect With Us:
176 | 177 | 178 | 179 | 182 | 183 | 184 | 185 |
186 | 187 | 188 | 189 | 192 | 193 | 194 | 195 |
196 | 197 | 198 | 199 | 202 | 203 |
200 | Google + 201 |
204 | 205 |
209 | 210 | 		212 | 213 | 214 | 215 | 220 | 221 | 222 |
216 |
Contact Info:
217 |

Phone: 408.341.0600

218 |

Email: hseldon@trantor.com

219 |
223 | 224 |
227 | 228 | 229 | 230 | 231 | 245 | 246 |
232 | 233 | 234 | 235 | 240 | 241 | 242 |
236 |
237 |

Terms | Privacy | Unsubscribe

238 |
239 |
243 | 244 |
247 | 248 | 249 |
252 | 253 |
254 |
257 | 258 | -------------------------------------------------------------------------------- /templates/examples/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 90 | 91 | 92 | 93 | 94 | 255 | 256 |
95 |
96 | 97 | 98 | 99 | 124 | 125 |
100 |
101 | 102 | 103 | 104 | 119 | 120 |
105 | 106 | 107 | 108 | 111 | 114 | 115 | 116 |
109 | 110 | 112 | BASIC 113 |
117 | 118 |
121 | 122 |
123 |
126 | 127 | 128 | 129 | 250 | 251 |
130 | 131 | 132 | 133 | 147 | 148 |
134 | 135 | 136 | 137 | 142 | 143 | 144 |
138 |

Hi, Susan Calvin

139 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.

140 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.

141 |
145 | 146 |
149 | 150 | 151 | 152 | 164 | 165 |
153 | 154 | 155 | 156 | 159 | 160 | 161 |
157 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

158 |
162 | 163 |
166 | 167 | 168 | 169 | 211 | 225 | 226 |
170 | 171 | 172 | 173 | 206 | 207 | 208 |
174 | 175 |
Connect With Us:
176 | 177 | 178 | 179 | 182 | 183 | 184 | 185 |
186 | 187 | 188 | 189 | 192 | 193 | 194 | 195 |
196 | 197 | 198 | 199 | 202 | 203 |
200 | Google + 201 |
204 | 205 |
209 | 210 | 		212 | 213 | 214 | 215 | 220 | 221 | 222 |
216 |
Contact Info:
217 |

Phone: 408.341.0600

218 |

Email: hseldon@trantor.com

219 |
223 | 224 |
227 | 228 | 229 | 230 | 231 | 245 | 246 |
232 | 233 | 234 | 235 | 240 | 241 | 242 |
236 |
237 |

Terms | Privacy | Unsubscribe

238 |
239 |
243 | 244 |
247 | 248 | 249 |
252 | 253 |
254 |
257 | 258 | -------------------------------------------------------------------------------- /docs/test/vendor/geshi/jquery.php: -------------------------------------------------------------------------------- 1 | 'jQuery', 42 | 'COMMENT_SINGLE' => array(1 => '//'), 43 | 'COMMENT_MULTI' => array('/*' => '*/'), 44 | //Regular Expressions 45 | 'COMMENT_REGEXP' => array(2 => "/(?<=[\\s^])s\\/(?:\\\\.|(?!\n)[^\\/\\\\])+\\/(?:\\\\.|(?!\n)[^\\/\\\\])+\\/[gimsu]*(?=[\\s$\\.\\;])|(?<=[\\s^(=])m?\\/(?:\\\\.|(?!\n)[^\\/\\\\])+\\/[gimsu]*(?=[\\s$\\.\\,\\;\\)])/iU"), 46 | 'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE, 47 | 'QUOTEMARKS' => array("'", '"'), 48 | 'ESCAPE_CHAR' => '\\', 49 | 'KEYWORDS' => array( 50 | 1 => array( 51 | 'as', 'break', 'case', 'catch', 'continue', 'decodeURI', 'delete', 'do', 52 | 'else', 'encodeURI', 'eval', 'finally', 'for', 'if', 'in', 'is', 'item', 53 | 'instanceof', 'return', 'switch', 'this', 'throw', 'try', 'typeof', 'void', 54 | 'while', 'write', 'with' 55 | ), 56 | 2 => array( 57 | 'class', 'const', 'default', 'debugger', 'export', 'extends', 'false', 58 | 'function', 'import', 'namespace', 'new', 'null', 'package', 'private', 59 | 'protected', 'public', 'super', 'true', 'use', 'var' 60 | ), 61 | 3 => array( 62 | // common functions for Window object 63 | 'alert', 'back', 'close', 'confirm', 'forward', 'home', 64 | 'name', 'navigate', 'onblur', 'onerror', 'onfocus', 'onload', 'onmove', 65 | 'onresize', 'onunload', 'open', 'print', 'prompt', 'status', 66 | //'blur', 'focus', 'scroll', // Duplicate with kw9 67 | //'stop', //Duplicate with kw10 68 | ), 69 | 4 => array( 70 | // jQuery Core Functions 71 | 'jQuery', 'each', 'size', 'length', 'selector', 'context', 'eq', 72 | 'index', 'data', 'removeData', 'queue', 'dequeue', 'noConflict' 73 | //'get', //Duplicate with kw11 74 | ), 75 | 5 => array( 76 | // jQuery Attribute Functions 77 | 'attr', 'removeAttr', 'addClass', 'hasClass', 'removeClass', 'toggleClass', 78 | 'html', 'text', 'val', 79 | ), 80 | 6 => array( 81 | // jQuery Traversing Functions 82 | 'filter', 'not', 'slice', 'add', 'children', 'closest', 83 | 'contents', 'find', 'next', 'nextAll', 'parent', 'parents', 84 | 'prev', 'prevAll', 'siblings', 'andSelf', 'end', 85 | //'is', //Dup with kw1 86 | //'offsetParent', //Duplicate with kw8 87 | //'map', //Duplicate with kw12 88 | ), 89 | 7 => array( 90 | // jQuery Manipulation Functions 91 | 'append', 'appendTo', 'prepend', 'prependTo', 'after', 'before', 'insertAfter', 92 | 'insertBefore', 'wrap', 'wrapAll', 'wrapInner', 'replaceWith', 'replaceAll', 93 | 'empty', 'remove', 'clone', 94 | ), 95 | 8 => array( 96 | // jQuery CSS Functions 97 | 'css', 'offset', 'offsetParent', 'position', 'scrollTop', 'scrollLeft', 98 | 'height', 'width', 'innerHeight', 'innerWidth', 'outerHeight', 'outerWidth', 99 | ), 100 | 9 => array( 101 | // jQuery Events Functions 102 | 'ready', 'bind', 'one', 'trigger', 'triggerHandler', 'unbind', 'live', 103 | 'die', 'hover', 'blur', 'change', 'click', 'dblclick', 'error', 104 | 'focus', 'keydown', 'keypress', 'keyup', 'mousedown', 'mouseenter', 105 | 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'resize', 106 | 'scroll', 'select', 'submit', 'unload', 107 | //'toggle', //Duplicate with kw10 108 | //'load', //Duplicate with kw11 109 | ), 110 | 10 => array( 111 | // jQuery Effects Functions 112 | 'show', 'hide', 'toggle', 'slideDown', 'slideUp', 'slideToggle', 'fadeIn', 113 | 'fadeOut', 'fadeTo', 'animate', 'stop', 114 | ), 115 | 11 => array( 116 | // jQuery Ajax Functions 117 | 'ajax', 'load', 'get', 'getJSON', 'getScript', 'post', 'ajaxComplete', 118 | 'ajaxError', 'ajaxSend', 'ajaxStart', 'ajaxStop', 'ajaxSuccess', 'ajaxSetup', 119 | 'serialize', 'serializeArray', 120 | ), 121 | 12 => array( 122 | // jQuery Utility Functions 123 | 'support', 'browser', 'version', 'boxModal', 'extend', 'grep', 'makeArray', 124 | 'map', 'inArray', 'merge', 'unique', 'isArray', 'isFunction', 'trim', 125 | 'param', 126 | ), 127 | ), 128 | 'SYMBOLS' => array( 129 | 0 => array( 130 | '(', ')', '[', ']', '{', '}', 131 | '+', '-', '*', '/', '%', 132 | '!', '@', '&', '|', '^', 133 | '<', '>', '=', 134 | ',', ';', '?', ':' 135 | ), 136 | 1 => array( 137 | '$' 138 | ) 139 | ), 140 | 'CASE_SENSITIVE' => array( 141 | GESHI_COMMENTS => false, 142 | 1 => false, 143 | 2 => false, 144 | 3 => false, 145 | 4 => false, 146 | 5 => false, 147 | 6 => false, 148 | 7 => false, 149 | 8 => false, 150 | 9 => false, 151 | 10 => false, 152 | 11 => false, 153 | 12 => false 154 | ), 155 | 'STYLES' => array( 156 | 'KEYWORDS' => array( 157 | 1 => 'color: #000066; font-weight: bold;', 158 | 2 => 'color: #003366; font-weight: bold;', 159 | 3 => 'color: #000066;', 160 | 4 => 'color: #000066;', 161 | 5 => 'color: #000066;', 162 | 6 => 'color: #000066;', 163 | 7 => 'color: #000066;', 164 | 8 => 'color: #000066;', 165 | 9 => 'color: #000066;', 166 | 10 => 'color: #000066;', 167 | 11 => 'color: #000066;', 168 | 12 => 'color: #000066;' 169 | ), 170 | 'COMMENTS' => array( 171 | 1 => 'color: #006600; font-style: italic;', 172 | 2 => 'color: #009966; font-style: italic;', 173 | 'MULTI' => 'color: #006600; font-style: italic;' 174 | ), 175 | 'ESCAPE_CHAR' => array( 176 | 0 => 'color: #000099; font-weight: bold;' 177 | ), 178 | 'BRACKETS' => array( 179 | 0 => 'color: #009900;' 180 | ), 181 | 'STRINGS' => array( 182 | 0 => 'color: #3366CC;' 183 | ), 184 | 'NUMBERS' => array( 185 | 0 => 'color: #CC0000;' 186 | ), 187 | 'METHODS' => array( 188 | 1 => 'color: #660066;' 189 | ), 190 | 'SYMBOLS' => array( 191 | 0 => 'color: #339933;', 192 | 1 => 'color: #000066;' 193 | ), 194 | 'REGEXPS' => array( 195 | ), 196 | 'SCRIPT' => array( 197 | 0 => '', 198 | 1 => '', 199 | 2 => '', 200 | 3 => '' 201 | ) 202 | ), 203 | 'URLS' => array( 204 | 1 => '', 205 | 2 => '', 206 | 3 => '', 207 | 4 => 'http://docs.jquery.com/Core/{FNAME}', 208 | 5 => 'http://docs.jquery.com/Attributes/{FNAME}', 209 | 6 => 'http://docs.jquery.com/Traversing/{FNAME}', 210 | 7 => 'http://docs.jquery.com/Manipulation/{FNAME}', 211 | 8 => 'http://docs.jquery.com/CSS/{FNAME}', 212 | 9 => 'http://docs.jquery.com/Events/{FNAME}', 213 | 10 => 'http://docs.jquery.com/Effects/{FNAME}', 214 | 11 => 'http://docs.jquery.com/Ajax/{FNAME}', 215 | 12 => 'http://docs.jquery.com/Utilities/{FNAME}' 216 | ), 217 | 'OOLANG' => true, 218 | 'OBJECT_SPLITTERS' => array( 219 | 1 => '.' 220 | ), 221 | 'REGEXPS' => array( 222 | ), 223 | 'STRICT_MODE_APPLIES' => GESHI_MAYBE, 224 | 'SCRIPT_DELIMITERS' => array( 225 | 0 => array( 226 | '' 227 | ), 228 | 1 => array( 229 | '' 230 | ) 231 | ), 232 | 'HIGHLIGHT_STRICT_BLOCK' => array( 233 | 0 => true, 234 | 1 => true 235 | ) 236 | ); 237 | 238 | ?> -------------------------------------------------------------------------------- /templates/base/hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 86 | 87 | 88 | 89 | 90 | 307 | 308 |
91 |
92 | 93 | 94 | 95 | 96 | 123 | 124 |
97 |
98 | 99 | 100 | 101 | 118 | 119 |
102 | 103 | 104 | 105 | 106 | 109 | 112 | 113 | 114 | 115 |
107 | 108 | 110 | HERO 111 |
116 | 117 |
120 | 121 |
122 |
125 |
126 | 127 | 128 | 129 | 302 | 303 |
130 | 131 | 132 | 133 | 134 | 150 | 151 |
135 | 136 | 137 | 138 | 145 | 146 | 147 |
139 | 140 |

Hi, Elijah Baily

141 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

142 | 143 | 144 |
148 | 149 |
152 | 153 | 154 | 155 | 169 | 170 |
156 | 157 | 158 | 159 | 164 | 165 | 166 |
160 | 161 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

162 | 163 |
167 | 168 |
171 | 172 | 173 | 174 | 189 | 190 |
175 | 176 | 177 | 178 | 184 | 185 | 186 |
179 | 180 |

Title Ipsum This is a note.

181 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 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.

182 | 183 |
187 | 188 |
191 | 192 | 193 | 194 | 195 | 215 | 216 |
196 | 197 | 198 | 199 | 210 | 211 | 212 |
200 | 201 | 202 | 203 | 206 | 207 |
204 | Click Me! 205 |
208 | 209 |
213 | 214 |
217 | 218 | 219 | 220 | 221 | 263 | 277 | 278 |
222 | 223 | 224 | 225 | 258 | 259 | 260 |
226 | 227 |
Connect With Us:
228 | 229 | 230 | 231 | 234 | 235 | 236 | 237 |
238 | 239 | 240 | 241 | 244 | 245 | 246 | 247 |
248 | 249 | 250 | 251 | 254 | 255 |
252 | Google + 253 |
256 | 257 |
261 | 262 | 		264 | 265 | 266 | 267 | 272 | 273 | 274 |
268 |
Contact Info:
269 |

Phone: 408.341.0600

270 |

Email: hseldon@trantor.com

271 |
275 | 276 |
279 | 280 | 281 | 282 | 283 | 297 | 298 |
284 | 285 | 286 | 287 | 292 | 293 | 294 |
288 |
289 |

Terms | Privacy | Unsubscribe

290 |
291 |
295 | 296 |
299 | 300 | 301 |
304 | 305 |
306 |
309 | 310 | --------------------------------------------------------------------------------