├── .env ├── demo ├── img │ ├── twitter.png │ ├── facebook.png │ ├── pinterest.png │ └── google-plus.png ├── scss │ └── main.scss ├── css │ ├── main.css │ └── main.css.map ├── index.html └── index-temp.html ├── sache.json ├── .gitignore ├── scss ├── addons │ ├── _hidden.scss │ ├── _visible.scss │ ├── _breakpoint.scss │ └── _type.scss ├── _fluid-email.scss ├── layout │ ├── _sub-col.scss │ ├── _wrapper.scss │ ├── _row.scss │ ├── _col.scss │ └── _gallery.scss ├── components │ └── _button.scss ├── base │ ├── _placeholder.scss │ ├── _variables.scss │ └── _functions.scss ├── main.scss └── reset │ └── _reset.scss ├── docker-compose.yml ├── bower.json ├── changelog.md ├── LICENSE ├── package.json ├── index.html ├── index-temp.html ├── gulpfile.js ├── css ├── main.css └── main.css.map ├── README.md └── index-final.html /.env: -------------------------------------------------------------------------------- 1 | #.env 2 | COMPOSE_HTTP_TIMEOUT=36000 -------------------------------------------------------------------------------- /demo/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/fluid-email/HEAD/demo/img/twitter.png -------------------------------------------------------------------------------- /demo/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/fluid-email/HEAD/demo/img/facebook.png -------------------------------------------------------------------------------- /demo/img/pinterest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/fluid-email/HEAD/demo/img/pinterest.png -------------------------------------------------------------------------------- /demo/img/google-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/fluid-email/HEAD/demo/img/google-plus.png -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Fluid-email", 3 | "description": "Mobile-first email framework.", 4 | "tags": ["email", "newsletter", "responsive", "css", "scss", "sass", "mixins", "grid", "gallery"] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | *.codekit 3 | *.sublime-project 4 | *.sublime-workspace 5 | *.scssc 6 | *.swp 7 | 8 | /.codekit-cache/ 9 | /design/ 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | README.html 14 | changelog.html 15 | LICENSE 16 | package.json 17 | .ftppass 18 | secret.json -------------------------------------------------------------------------------- /scss/addons/_hidden.scss: -------------------------------------------------------------------------------- 1 | @import "breakpoint"; 2 | 3 | // *** hidden *** // 4 | @mixin hidden($key){ 5 | @if type-of($key) == 'number' { 6 | @include bp('min' $key) { display: none !important; } 7 | } @else if type-of($key) == list { 8 | @include bp($key) { display: none !important; } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '2' 2 | 3 | services: 4 | web: 5 | image: cmcdev/web:2.7.1 6 | ports: 7 | - 3000:3000 8 | # - 3001:3001 9 | volumes: 10 | - .:/www/web/ 11 | working_dir: /www/web 12 | container_name: newsletter 13 | # command: sh 14 | entrypoint: sh /www/start.sh 15 | stdin_open: true 16 | tty: true -------------------------------------------------------------------------------- /scss/_fluid-email.scss: -------------------------------------------------------------------------------- 1 | // *** fluid email *** // 2 | 3 | // base 4 | @import "base/variables"; 5 | @import "base/functions"; 6 | @import "base/placeholder"; 7 | 8 | // addons 9 | @import "addons/breakpoint"; 10 | @import "addons/visible"; 11 | @import "addons/hidden"; 12 | @import "addons/type"; 13 | 14 | // reset 15 | @import "reset/reset"; 16 | 17 | // layout 18 | @import "layout/wrapper"; 19 | @import "layout/row"; 20 | @import "layout/col"; 21 | @import "layout/sub-col"; 22 | @import "layout/gallery"; 23 | 24 | // components 25 | @import "components/button"; 26 | -------------------------------------------------------------------------------- /scss/addons/_visible.scss: -------------------------------------------------------------------------------- 1 | @import "breakpoint"; 2 | 3 | // *** visible *** // 4 | @mixin visible($key){ 5 | $new-key: (); 6 | 7 | @if type-of($key) == 'number' { 8 | @include bp('max' $key) { display: none !important; } 9 | } @else if type-of($key) == list { 10 | @if nth($key, 1) == 0 { 11 | $key: list-remove($key, 0); 12 | } @else { 13 | $new-key: append($new-key, 0); 14 | } 15 | 16 | // append $key to $new-key 17 | @each $item in $key { 18 | $new-key: append($new-key, $item); 19 | } 20 | 21 | @include bp($new-key) { display: none !important; } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/layout/_sub-col.scss: -------------------------------------------------------------------------------- 1 | // *** sub-col *** // 2 | 3 | // sub col 4 | @mixin sub-col($key){ 5 | $cols: ro-get-next($key, 'of', $cols); 6 | 7 | // set up column 8 | $column: 0; 9 | @if type-of($key) == 'number' { 10 | $column: $key; 11 | } @else if type-of($key) == 'list' { 12 | @if index($key, 'of') { 13 | $column: ro-get-prev($key, 'of'); 14 | } @else { 15 | @each $item in $key { 16 | @if type-of($item) == 'number' and 17 | unitless($item) { 18 | $column: $item; 19 | } 20 | } 21 | } 22 | } 23 | 24 | width: percentage($column / $cols); 25 | } -------------------------------------------------------------------------------- /scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | // *** wrapper *** // 2 | 3 | // wrapper 4 | table { 5 | // &.body center { min-width: $wrapper; } // Force gmail (App) show desktop version 6 | &.wrapper { 7 | max-width: $wrapper; 8 | // width: $wrapper; // Force gmail (App) show desktop version 9 | margin: 0 auto; 10 | text-align: inherit; 11 | } 12 | 13 | // For Apple Mail (it doesn't support max-width) 14 | // @include bp(max $wrapper) { 15 | // &[class="wrapper"] { width: 92% !important; } 16 | // &[class="body"] center { min-width: 0 !important; } 17 | // } 18 | @include bp(min ($wrapper + 1px)) { 19 | &[class="wrapper"] { width: $wrapper !important; } 20 | } 21 | } -------------------------------------------------------------------------------- /scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | // *** buttons *** // 2 | 3 | @mixin button ($key){ 4 | $background-color: ro-get-type($key, 'color', false, '#3ab7e4'); 5 | $padding: ro-get-type($key, 'string', $fe-button-radius-styles, '15px 20px'); 6 | $radius: ro-get($key, $fe-button-radius-styles, false); 7 | 8 | display: inline-block; 9 | border-style: solid; 10 | text-align: center; 11 | box-sizing: border-box; 12 | 13 | // background-color 14 | @if $background-color { 15 | background-color: $background-color; 16 | border-color: $background-color; 17 | border-type: solid; 18 | color: contrast($background-color); 19 | } 20 | 21 | // padding 22 | @if $padding { border-width: unquote($padding); } 23 | 24 | // border-radius 25 | @if $radius == 'radius' { 26 | border-radius: $fe-button-radius; 27 | } @else if $radius == 'round' { 28 | border-radius: $fe-button-round; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fluid-email", 3 | "version": "0.0.1", 4 | "main": [ 5 | "scss/*.scss", 6 | "index.html" 7 | ], 8 | "keywords": [ 9 | "responsive", 10 | "fluid", 11 | "email", 12 | "newsletter", 13 | "css", 14 | "mixins", 15 | "scss", 16 | "sass", 17 | "grid", 18 | "gallery", 19 | "breakpoint" 20 | ], 21 | "authors": [ 22 | "William Lin " 23 | ], 24 | "description": "Mobile-first email framework build with scss.", 25 | "license": "MIT", 26 | "ignore": [ 27 | "**/.*", 28 | ".gitignore", 29 | ".sublime-project", 30 | ".codekit", 31 | "bower.json", 32 | "README.md", 33 | "changelog.md", 34 | "node_modules", 35 | "bower_components", 36 | "LICENSE" 37 | ], 38 | "homepage": "https://github.com/ganlanyuan/fluid-email", 39 | "repository": { 40 | "type": "git", 41 | "url": "https://github.com/ganlanyuan/fluid-email.git" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changlog 2 | 3 | ### v1.1.1 4 | + Simplify mixins. 5 | + Add media query on `block`. 6 | 7 | ### v1.1.0 8 | + Update `span`, `sub-span`. 9 | + Add `block`. 10 | + Fix some issues, and now it works on most email clients. 11 | 12 | ### v1.0.0 13 | + Update all mixins. 14 | + Change '.container' to make Gmail(mobile) responsive. 15 | + Remove gallery. 16 | 17 | ### v0.1.0 18 | + Fix a layout issue on `Outlook 2007/2010/2013` and `Gmail App (Android)`. 19 | + Simplify `grid` and `gallery`. 20 | 21 | ### v0.0.5 22 | + Update `grid`, now you don't need to put tags directly next to each other in html. 23 | + Update `gallery`: automaticly set width for each gallery cell on the platfroms that don't support CSS3 mediaquery. 24 | 25 | ### v0.0.4 26 | + Fix `gallery`, `grid`. 27 | + Simplify `button`. 28 | 29 | ### v0.0.3 30 | + Update `gallery`. 31 | 32 | ### v0.0.2 33 | + Redefined functions `em`, `toem` and `torem`. 34 | + Remove @mediaquery from `grid` and `gallery`. 35 | + Add ad style. 36 | 37 | ### v0.0.1 38 | + Feature: responsive grid and sub grid 39 | + Feature: gallery 40 | + Feature: button 41 | + Feature: breakpoint 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 William Lin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /scss/layout/_row.scss: -------------------------------------------------------------------------------- 1 | // *** row *** // 2 | 3 | // row 4 | .row { 5 | width: 100%; 6 | font-size: 0; // remove blank space between inline-block elements 7 | // Webkit: collapse white-space between units 8 | // letter-spacing: -0.31em; 9 | // Webkit: fixes text-rendering: optimizeLegibility 10 | text-rendering: optimizespeed; 11 | // Sets the font stack to fonts known to work properly with the above letter 12 | // and word spacings. See: https://github.com/yahoo/pure/issues/41/ 13 | // The following font stack makes gallery work on all known environments. 14 | // * FreeSans: Ships with many Linux distros, including Ubuntu 15 | // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and 16 | // Arial to get picked up by the browser, even though neither is available 17 | // in Chrome OS. 18 | // * Droid Sans: Ships with all versions of Android. 19 | // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. 20 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 21 | 22 | // Opera as of 12 on Windows needs word-spacing. 23 | // The ".opera-only" selector is used to prevent actual prefocus styling 24 | // and is not required in markup. 25 | .opera-only :-o-prefocus, & { word-spacing: -0.43em; } 26 | } 27 | -------------------------------------------------------------------------------- /scss/base/_placeholder.scss: -------------------------------------------------------------------------------- 1 | // *** placeholder *** // 2 | %layout-base { 3 | // &, > tbody, > tbody > tr {text-align: $gallery-align; } 4 | font-size: 0; // remove blank space between inline-block elements 5 | // Webkit: collapse white-space between units 6 | // letter-spacing: -0.31em; 7 | // Webkit: fixes text-rendering: optimizeLegibility 8 | text-rendering: optimizespeed; 9 | // Sets the font stack to fonts known to work properly with the above letter 10 | // and word spacings. See: https://github.com/yahoo/pure/issues/41/ 11 | // The following font stack makes gallery work on all known environments. 12 | // * FreeSans: Ships with many Linux distros, including Ubuntu 13 | // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and 14 | // Arial to get picked up by the browser, even though neither is available 15 | // in Chrome OS. 16 | // * Droid Sans: Ships with all versions of Android. 17 | // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. 18 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 19 | 20 | // Opera as of 12 on Windows needs word-spacing. 21 | // The ".opera-only" selector is used to prevent actual prefocus styling 22 | // and is not required in markup. 23 | .opera-only :-o-prefocus, & { word-spacing: -0.43em; } 24 | } 25 | %layout-item-base { 26 | display: inline-block; 27 | font-size: 16px; // restore font-size 28 | // letter-spacing: 0; // restore letter-spacing 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docker-web", 3 | "version": "1.0.3", 4 | "description": "Packages for front-end tasks.", 5 | "main": "gulpfile.js", 6 | "devDependencies": { 7 | "browser-sync": "^2.14.0", 8 | "gulp": "^3.9.1", 9 | "gulp-batch": "^1.0.5", 10 | "gulp-colorize-svgs": "git+https://git@github.com/unic/gulp-colorize-svgs.git", 11 | "gulp-concat": "^2.6.0", 12 | "gulp-connect-php": "0.0.8", 13 | "gulp-imagemin": "^3.0.2", 14 | "gulp-inject": "^4.1.0", 15 | "gulp-inline-css": "^3.1.0", 16 | "gulp-jshint": "^2.0.1", 17 | "gulp-modernizr": "^1.0.0-alpha", 18 | "gulp-plumber": "^1.1.0", 19 | "gulp-rename": "^1.2.2", 20 | "gulp-replace": "^0.5.4", 21 | "gulp-ruby-sass": "^2.1.0", 22 | "gulp-sass": "^2.3.2", 23 | "gulp-sourcemaps": "^1.6.0", 24 | "gulp-streamify": "^1.0.2", 25 | "gulp-svg2png": "^2.0.0", 26 | "gulp-svgmin": "^1.2.2", 27 | "gulp-svgstore": "^6.0.0", 28 | "gulp-uglify": "^2.0.0", 29 | "jshint": "^2.9.3", 30 | "jshint-stylish": "^2.2.1", 31 | "merge-stream": "^1.0.0" 32 | }, 33 | "scripts": { 34 | "test": "echo \"Error: no test specified\" && exit 1" 35 | }, 36 | "repository": { 37 | "type": "git", 38 | "url": "git+git@github.com:ganlanyuan/dockerfile.git" 39 | }, 40 | "author": "", 41 | "license": "ISC", 42 | "bugs": { 43 | "url": "https://github.com/ganlanyuan/dockerfile/issues" 44 | }, 45 | "homepage": "https://github.com/ganlanyuan/dockerfile", 46 | "dependencies": {} 47 | } 48 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newsletter 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 52 | 53 |
36 |
37 | 38 | 39 | 40 | 41 | 46 | 47 |
42 | 43 | 44 | 45 |
48 | 49 | 50 |
51 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /scss/addons/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // *** breakpoint *** // 2 | @mixin ro-breakpoint($key){ 3 | $condition: args-get($key, ('min' 'max'), 'min'); 4 | $media-type: args-get($key, $ro-media-type); 5 | $media-feature: args-get($key, $ro-media-features, 'width'); 6 | 7 | $media-string: if($media-type, '#{$media-type} and ', ''); 8 | $selector: ''; 9 | $bps-em: (); 10 | 11 | // get breakpoints 12 | @each $item in $key { 13 | @if type-of($item) == 'number' { 14 | @if strip-unit($item) == 0 { 15 | $item: 0em; 16 | } @else { 17 | $item: em($item); 18 | } 19 | 20 | $bps-em: append($bps-em, $item); 21 | } 22 | } 23 | $length: length($bps-em); 24 | 25 | @if $length == 1 { 26 | $bp: if($breakpoint-fix and $condition == 'max', (nth($bps-em, 1) - em(1)), nth($bps-em, 1)); 27 | $selector: $media-string + '(#{$condition}-#{$media-feature}: #{$bp})'; 28 | } @else if $length >= 2 { 29 | @for $i from 1 through $length { 30 | @if number-odd-even($i) == 'odd' { 31 | $selector: $selector + ', ' + $media-string + ' (min-#{$media-feature}: #{nth($bps-em, $i)})'; 32 | } @else if number-odd-even($i) == 'even' { 33 | $bp-max: if($breakpoint-fix, (nth($bps-em, $i) - em(1)), nth($bps-em, $i)); 34 | $selector: $selector + 'and (max-#{$media-feature}: #{$bp-max})'; 35 | } 36 | } 37 | // remove the first ', ' 38 | @if str-index($selector, ', ') == 1 { $selector: str-slice($selector, 3); } 39 | } 40 | 41 | // *** output *** // 42 | @media #{unquote($selector)} { @content; } 43 | } 44 | 45 | @mixin bp($key) { 46 | @include ro-breakpoint($key) { 47 | @content; 48 | }; 49 | } -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | // *** fluid email *** // 2 | @import "fluid-email"; 3 | 4 | // *** main *** // 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | @media only screen and (max-device-width: 480px) { 13 | // A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to "unstyle" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled. 14 | // Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/. 15 | // a[href^="tel"], a[href^="sms"] { 16 | // text-decoration: none; 17 | // color: black; // or whatever your want 18 | // pointer-events: none; 19 | // cursor: default; 20 | // .mobile_link & { 21 | // text-decoration: default; 22 | // color: orange !important; // or whatever your want 23 | // pointer-events: auto; 24 | // cursor: default; 25 | // } 26 | // } 27 | } 28 | // More Specific Targeting 29 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 30 | // ipad (tablets, smaller screens, etc) 31 | } 32 | @media only screen and (-webkit-min-device-pixel-ratio: 2) { 33 | // Put your iPhone 4g styles in here // 34 | } 35 | // Following Android targeting from: 36 | // http://developer.android.com/guide/webapps/targeting.html 37 | // http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ 38 | @media only screen and (-webkit-device-pixel-ratio:.75){ 39 | // Put CSS for low density (ldpi) Android layouts in here // 40 | } 41 | @media only screen and (-webkit-device-pixel-ratio:1){ 42 | // Put CSS for medium density (mdpi) Android layouts in here // 43 | } 44 | @media only screen and (-webkit-device-pixel-ratio:1.5){ 45 | // Put CSS for high density (hdpi) Android layouts in here // 46 | } 47 | -------------------------------------------------------------------------------- /scss/layout/_col.scss: -------------------------------------------------------------------------------- 1 | // *** col *** // 2 | 3 | @mixin col($key){ 4 | // merge list items 5 | @each $item in $key { 6 | @if type-of($item) == 'list' { 7 | $key: join($item, reject($key, $item), 'space'); 8 | } 9 | } 10 | 11 | $cols: ro-get-next($key, 'of', $cols); 12 | $gutter: $gutter; 13 | 14 | // set up column 15 | $col: 0; 16 | @if type-of($key) == 'number' { 17 | $col: $key; 18 | } @else if type-of($key) == 'list' { 19 | @if index($key, 'of') { 20 | $col: ro-get-prev($key, 'of'); 21 | } @else { 22 | @each $item in $key { 23 | @if type-of($item) == 'number' and 24 | unitless($item) { 25 | $col: $item; 26 | } 27 | } 28 | } 29 | } 30 | 31 | // set up gutter 32 | @each $item in $key { 33 | @if type-of($item) == 'number' and 34 | not unitless($item) { 35 | $gutter: $item; 36 | } 37 | } 38 | // strip unit when gutter == 0 39 | @if strip-unit($gutter) == 0 { 40 | $gutter: 0; 41 | } 42 | 43 | $px_width: ($col * $content / $cols); 44 | $percent_width: percentage($col / $cols); 45 | 46 | // desktop, non-mediaquery 47 | @extend %col; 48 | min-width: $px_width; 49 | min-width: -webkit-calc(#{$percent_width}); 50 | min-width: calc(#{$percent_width}); 51 | width: $percent_width; 52 | width: -webkit-calc(#{$content * $faciend} - #{100% * $faciend}); 53 | width: calc(#{$content * $faciend} - #{100% * $faciend}); 54 | max-width: 100%; 55 | } 56 | 57 | %col { 58 | display: inline-block; 59 | font-size: 16px; // restore font-size 60 | letter-spacing: 0; // restore letter-spacing 61 | // padding: ($gutter / 2); 62 | 63 | // mediaquery 64 | @include bp(max $wrapper) { 65 | width: 100% !important; 66 | box-sizing: border-box; 67 | } 68 | } 69 | 70 | // generate css 71 | @if $generate-css { 72 | .col { 73 | padding: ($gutter / 2); 74 | @for $i from 1 through $cols { 75 | &-#{$i} { 76 | @include col($i of $cols); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /scss/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // variables 2 | //----------------------------- 3 | 4 | // generate css 5 | $generate-css: true !default; 6 | $breakpoint-fix: true !default; 7 | 8 | // layout 9 | $wrapper: 600px !default; 10 | $content: 560px !default; 11 | $cols: 12 !default; 12 | $gutter: 16px !default; 13 | 14 | $gallery-cols: 6 !default; 15 | $gallery-align: left !default; 16 | 17 | $faciend: 1000; 18 | 19 | // font 20 | $helvetica: "'Helvetica Neue', Helvetica, Arial, sans-serif"; 21 | $arial: "Arial, Helvetica, sans-serif"; 22 | $opensans: "'Open Sans', Arial, sans-serif"; 23 | $lato: "'Lato', Arial, sans-serif"; 24 | $oswald: "'Oswald', Arial, sans-serif"; 25 | $georgia: "Georgia, 'Times New Roman', Times, Baskerville, serif"; 26 | 27 | // color 28 | $color: ( 29 | 'border': #e6e6e6, 30 | 'brand': #41bae9, 31 | 'bg': #f1f1f1, 32 | 'link': #333, 33 | ); 34 | 35 | // base 36 | $fe-em-base: 16px !default; 37 | $fe-rem-base: 16px !default; 38 | 39 | // breakpoint 40 | $ro-media-type: all, aural, braille, handheld, print, projection, screen, tty, tv, embossed !default; 41 | $ro-media-features: 'width', 'height' !default; 42 | 43 | // type 44 | $fe-font-weights: thin, hairline, extra light, ultra light, lighter, light, normal, medium, semi bold, demi bold, bold, bolder, extra bold, black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit !default; 45 | $fe-font-styles: italic, oblique, style-normal, style-inherit !default; 46 | $fe-text-aligns: left, right, center, justify, align-inherit !default; 47 | $fe-text-transforms: capitalize, uppercase, lowercase, none, full-width, transform-inherit !default; 48 | 49 | // media list 50 | $fe-media-type: 'media', 'media-body'; 51 | $fe-media-direction: left, right; 52 | 53 | // button 54 | $fe-button-radius-styles: 'radius', 'round' !default; 55 | $fe-button-radius: 0.45em !default; 56 | $fe-button-round: 1000px !default; 57 | $fe-button-hover-lightness: 10% !default; 58 | 59 | // visibility 60 | $fe-even: 2 4 6 8 10 12 14 16 18 20; 61 | $fe-odd: 1 3 5 7 9 11 13 15 17 19; 62 | -------------------------------------------------------------------------------- /scss/addons/_type.scss: -------------------------------------------------------------------------------- 1 | // *** type *** // 2 | @mixin type($key){ 3 | $check: join(join(join($fe-font-weights, $fe-font-styles), $fe-text-aligns), $fe-text-transforms); 4 | 5 | // set up font-size, font-weight, line-height 6 | $font-size: null; 7 | $font-weight: null; 8 | $line-height: null; 9 | @each $item in $key { 10 | @if type-of($item) == 'number' { 11 | @if unitless($item) { 12 | @if $item >= 100 { 13 | $font-weight: $item; 14 | } @else { 15 | $line-height: $item; 16 | } 17 | } @else { 18 | $font-size: $item; 19 | } 20 | } 21 | } 22 | 23 | // set up font-family, font-weight, font-style, text-align, text-transform 24 | $font-family: ro-get-type($key, 'string', $check); 25 | $font-weight: ro-get($key, $fe-font-weights); 26 | $font-style: ro-get($key, $fe-font-styles); 27 | $text-align: ro-get($key, $fe-text-aligns); 28 | $text-transform: ro-get($key, $fe-text-transforms); 29 | 30 | // remove prefix 31 | @if type-of($font-weight) == 'string' { 32 | $font-weight: str-cut($font-weight, '-', after); 33 | } 34 | @if type-of($font-style) == 'string' { 35 | $font-style: str-cut($font-style, '-', after); 36 | } 37 | @if type-of($text-align) == 'string' { 38 | $text-align: str-cut($text-align, '-', after); 39 | } 40 | @if type-of($text-transform) == 'string' { 41 | $text-transform: str-cut($text-transform, '-', after); 42 | } 43 | 44 | 45 | // *** output *** // 46 | @if $font-size { 47 | font-size: $font-size; 48 | @if unit($font-size) == 'px' { 49 | font-size: rem($font-size); 50 | } 51 | } 52 | @if $line-height { 53 | line-height: $line-height; 54 | } 55 | @if $font-weight { 56 | font-weight: $font-weight; 57 | } 58 | @if $font-style { 59 | font-style: $font-style; 60 | } 61 | @if $text-align { 62 | text-align: $text-align; 63 | } 64 | @if $text-transform { 65 | text-transform: $text-transform; 66 | } 67 | @if $font-family { 68 | font-family: unquote($font-family); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /demo/scss/main.scss: -------------------------------------------------------------------------------- 1 | $content: 584px; 2 | @import '../../scss/fluid-email'; 3 | 4 | td.gutter { padding: ($gutter / 2); } 5 | #backgroundTable { background-color: #eee; } 6 | .wrapper.main { background-color: #fff; } 7 | .topbar { 8 | padding: 10px; 9 | background-color: #444; 10 | color: #fff; 11 | a { 12 | color: #fff; 13 | text-decoration: underline; 14 | } 15 | } 16 | .view { 17 | width: 100%; 18 | font-size: 11px; 19 | text-align: left; 20 | } 21 | .h4 { 22 | @include type(23px 1.2 bold $georgia); 23 | } 24 | .h5 { 25 | @include type(13px 1.3 bold $georgia); 26 | padding-bottom: 10px; 27 | } 28 | .h6 { 29 | @include type(13px 1.3); 30 | padding-top: 6px; 31 | } 32 | .p { 33 | @include type(13px $georgia); 34 | padding: 13px 0; 35 | } 36 | .gap { 37 | padding-top: 20px; 38 | } 39 | .logo { 40 | font-size: 36px !important; 41 | } 42 | .date { 43 | padding-top: 30px; 44 | text-align: right; 45 | font-size: 12px; 46 | color: #999; 47 | a { 48 | color: #999; 49 | text-decoration: underline; 50 | } 51 | } 52 | .button { 53 | @include button(#3ab7e4 radius); 54 | margin-top: 10px; 55 | color: #fff !important; 56 | &-2 { 57 | @include button(#D80017 round); 58 | color: #fff !important; 59 | margin-top: 10px; 60 | } 61 | } 62 | .topnews-img { 63 | a { display: block;} 64 | } 65 | .related { 66 | td { padding-bottom: 16px; } 67 | } 68 | .img-related { 69 | width: 107px; 70 | padding-right: 16px; 71 | img { vertical-align: top; } 72 | } 73 | .img-box { 74 | padding-right: 10px; 75 | padding-bottom: 10px; 76 | } 77 | .sub-col { 78 | &-4 { @include sub-col(4 of 12); } 79 | &-8 { @include sub-col(8 of 12); } 80 | } 81 | .copyright { 82 | padding-bottom: 30px; 83 | line-height: 1.6; 84 | font-size: 12px; 85 | color: #999; 86 | a { color: #999; } 87 | .primary { color: #333; } 88 | } 89 | 90 | .gallery2 { 91 | @include gallery2(1 to 2 480px); 92 | } 93 | .gallery3 { 94 | @include gallery2(1 to 3 300px); 95 | } 96 | .gallery6 { 97 | @include gallery2(3 to 6 180px); 98 | } 99 | [class*='gallery'] img { width: 100%; } -------------------------------------------------------------------------------- /scss/layout/_gallery.scss: -------------------------------------------------------------------------------- 1 | // *** gallery *** // 2 | 3 | @mixin gallery($key) { 4 | $columns: 1; 5 | $item-width-max: $content; 6 | 7 | // set up per-row, gallery-row 8 | @if type-of($key) == 'number' { 9 | $columns: $key; 10 | } @else if type-of($key) == 'list' { 11 | @each $item in $key { 12 | @if type-of($item) == 'number' { 13 | @if unitless($item) { 14 | $columns: $item; 15 | } @else { 16 | $item-width-max: $item; 17 | } 18 | } 19 | } 20 | } 21 | 22 | $px_width: ($item-width-max / $columns); 23 | $percent_width: percentage(1 / $columns); 24 | 25 | @extend %layout-base; 26 | 27 | > tbody > tr > td { 28 | @extend %layout-item-base; 29 | 30 | min-width: $px_width; 31 | width: $percent_width; 32 | min-width: -webkit-calc(#{$percent_width}); 33 | min-width: calc(#{$percent_width}); 34 | width: -webkit-calc(#{$item-width-max * $faciend} - #{100% * $faciend}); 35 | width: calc(#{$item-width-max * $faciend} - #{100% * $faciend}); 36 | max-width: 100%; 37 | } 38 | 39 | // constrict the images to container width 40 | img { max-width: $px_width; } 41 | } 42 | 43 | 44 | @if $generate-css { 45 | .gallery { 46 | @for $i from 2 through $gallery-cols { 47 | &-#{$i} { 48 | @include gallery($i center); 49 | } 50 | } 51 | } 52 | } 53 | 54 | @mixin gallery2($key) { 55 | $column-mobile: false; 56 | $column-desktop: false; 57 | $item-width-max: false; 58 | 59 | @if index($key, 'to') { 60 | $column-mobile: args-get-prev($key, 'to'); 61 | $column-desktop: args-get-next($key, 'to'); 62 | } 63 | @each $item in $key { 64 | @if not $item-width-max and type-of($item) == 'number' and not unitless($item) { 65 | $item-width-max: $item; 66 | } 67 | } 68 | 69 | // set default values 70 | @if not $item-width-max { $item-width-max: $content; } 71 | @if not $column-mobile { $column-mobile: 1; } 72 | @if not $column-desktop { $column-desktop: 2; } 73 | 74 | // get width 75 | $width-mobile: percentage(1 / $column-mobile); 76 | $width-desktop: percentage(1 / $column-desktop); 77 | 78 | @extend %layout-base; 79 | > tbody > tr > td { 80 | @extend %layout-item-base; 81 | 82 | // 1. For Lotus Notes, Outlook for Windows, Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). They don't support calc. 83 | // 2. For older versions of Android (5.0-) and iOS (iOS7-) 84 | 85 | min-width: ($item-width-max / $column-desktop); // 1 86 | width: $width-desktop; // 1 87 | 88 | max-width: $width-mobile; // for mobile 89 | min-width: -webkit-calc(#{$width-desktop}); // 2 90 | min-width: calc(#{$width-desktop}); // for desktop 91 | width: -webkit-calc(#{$item-width-max * $faciend} - #{$width-mobile * $faciend}); // 2 92 | width: calc(#{$item-width-max * $faciend} - #{$width-mobile * $faciend}); // breakpoint magic 93 | } 94 | } -------------------------------------------------------------------------------- /index-temp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newsletter 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 52 | 53 |
36 |
37 | 38 | 39 | 40 | 41 | 46 | 47 |
some text 42 | 43 | 44 | 45 |
48 | 49 | 50 |
51 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const packages = require('/www/package.json'); 3 | const $ = require('gulp-load-plugins')({ 4 | config: packages 5 | }); 6 | const browserSync = require('browser-sync').create(); 7 | const path = require('path'); 8 | 9 | var srcPath = 'demo/'; 10 | var config = { 11 | html: srcPath + 'index.html', 12 | sass: srcPath + 'scss/main.scss', 13 | css: srcPath + 'css/main.css', 14 | dest: srcPath + '', 15 | postfixTemp: '-temp', 16 | postfixOutput: '-final', 17 | }; 18 | 19 | function errorlog (error) { 20 | console.error.bind(error); 21 | this.emit('end'); 22 | } 23 | 24 | // Default Task 25 | gulp.task('default', [ 26 | // 'inject', 27 | // 'inline', 28 | // 'compile', 29 | 'server', 30 | 'watch', 31 | ]); 32 | 33 | // watch 34 | gulp.task('watch', function () { 35 | gulp.watch(config.sass, ['compile']); 36 | gulp.watch(config.html, ['concat']); 37 | gulp.watch('**/*.html').on('change', browserSync.reload); 38 | }); 39 | 40 | // SASS Task 41 | gulp.task('sass', function () { 42 | return gulp.src(config.sass) 43 | .pipe($.sourcemaps.init()) 44 | .pipe($.sass({ 45 | outputStyle: 'expanded', 46 | precision: 7 47 | }).on('error', $.sass.logError)) 48 | .pipe($.rename(function (path) { 49 | path.extname = '.css'; 50 | return path; 51 | })) 52 | .pipe($.sourcemaps.write('.')) 53 | .pipe(gulp.dest(srcPath + 'css')) 54 | .pipe(browserSync.stream()); 55 | }); 56 | 57 | function inlineStyles () { 58 | return gulp.src(config.html.replace('.html', config.postfixTemp + '.html')) 59 | .pipe($.inlineCss({ 60 | applyLinkTags: false, 61 | removeLinkTags: true, 62 | // applyStyleTags: false, 63 | // removeStyleTags: false, 64 | preserveMediaQueries: true 65 | })) 66 | .pipe($.replace(/(calc\()(\S+)(\+|-|\*|\/)(\S+)(\))/g, '$1$2 $3 $4$5')) 67 | .pipe($.rename(function (path) { 68 | path.basename = path.basename.replace(config.postfixTemp, config.postfixOutput); 69 | })) 70 | .pipe(gulp.dest(config.dest)); 71 | } 72 | 73 | function injectStyles () { 74 | return gulp.src(config.html) 75 | .pipe($.inject(gulp.src(config.css), { 76 | starttag: '/* css:css */', 77 | endtag: '/* endinject */', 78 | transform: function (filePath, file) { return file.contents.toString(); } 79 | })) 80 | .pipe($.rename(function (path) { path.basename += config.postfixTemp; })) 81 | .pipe(gulp.dest(config.dest)); 82 | }; 83 | 84 | gulp.task('inject', () => { injectStyles() }); 85 | gulp.task('inline', () => { inlineStyles() }); 86 | gulp.task('pre-compile', ['sass'], () => { injectStyles() }); 87 | gulp.task('compile', ['pre-compile'], () => { inlineStyles() }); 88 | gulp.task('concat', ['inject'], () => { inlineStyles() }); 89 | 90 | // Server 91 | gulp.task('server', () => { 92 | browserSync.init({ 93 | server: { baseDir: './'}, 94 | ghostMode: { 95 | clicks: false, 96 | forms: false, 97 | scroll: false 98 | }, 99 | open: false, 100 | notify: false 101 | }); 102 | }); -------------------------------------------------------------------------------- /scss/reset/_reset.scss: -------------------------------------------------------------------------------- 1 | // *** reset *** // 2 | 3 | body{ // Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. 4 | width:100% !important; 5 | min-width: 100%; 6 | height: auto; 7 | -webkit-text-size-adjust:100%; 8 | -ms-text-size-adjust:100%; 9 | margin:0; 10 | padding:0; 11 | } 12 | // Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. 13 | .ExternalClass {width:100%;} // Force Hotmail to display emails at full width 14 | .ExternalClass { // Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ 15 | &, 16 | & p, 17 | & span, 18 | & font, 19 | & td, 20 | & div {line-height: 100%;} 21 | } 22 | #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} 23 | 24 | div, p, a, li, td { -webkit-text-size-adjust: none; } // Override the minimum font size on the iPhone and iPad 25 | p {margin: 1em 0;} // Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/ 26 | td { text-align: left; } 27 | table, tr, td { 28 | padding: 0; 29 | vertical-align: top; 30 | } 31 | table { // Remove spacing around Outlook 07, 10 tables 32 | border-spacing: 0; 33 | border-collapse: collapse; 34 | mso-table-lspace:0pt; 35 | mso-table-rspace:0pt; 36 | width: 100%; 37 | &.body { 38 | height: 100%; 39 | center { width: 100%; } 40 | } 41 | } 42 | td { 43 | margin: 0; 44 | word-break: break-word; 45 | -webkit-hyphens: auto; 46 | -moz-hyphens: auto; 47 | hyphens: auto; 48 | border-collapse: collapse !important; // Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes. 49 | // More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/ 50 | // http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/ 51 | } 52 | img { 53 | outline:none; 54 | text-decoration: none; 55 | -ms-interpolation-mode: bicubic; // "-ms-interpolation-mode: bicubic" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes) 56 | max-width: 100%; 57 | a & { border: none; } // "border:none" removes border when linking images. 58 | } 59 | .img-fix { display: block; } // Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the "image_fix" class to any image you need to fix. 60 | hr { 61 | // margin-left: ($gutter / 2); 62 | // margin-right: ($gutter / 2); 63 | margin: 0; 64 | height: 1px; 65 | color: map-get($color, border); 66 | background-color: map-get($color, border); 67 | border: none; 68 | } 69 | h1,h2,h3,h4,h5,h6{ 70 | display:block; 71 | margin:0; 72 | padding:0; 73 | color: black !important; // Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support). Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size. 74 | a { 75 | color: blue !important; 76 | &:active { color: red !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. 77 | &:visited { color: purple !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. 78 | } 79 | } 80 | .full { width: 100%; } 81 | 82 | /* Typography */ 83 | #outlook p { display: inline !important; } 84 | #outlook a { padding:0; } // Force Outlook to provide a "view in browser" menu link. 85 | body, table.body { 86 | color: #222222; 87 | font-family: Helvetica, Arial, sans-serif; 88 | } 89 | small { font-size: 10px; } 90 | a { 91 | color: map-get($color, link); 92 | text-decoration: none; 93 | &[href^=tel], 94 | &[href^=sms]{ 95 | color:inherit; 96 | cursor:default; 97 | text-decoration:none; 98 | } 99 | } 100 | p,a,li,td,blockquote { mso-line-height-rule:exactly; } 101 | p,a,li,td,body,table,blockquote{ 102 | -ms-text-size-adjust:100%; 103 | -webkit-text-size-adjust:100%; 104 | } 105 | 106 | /* Alignment */ 107 | .center { 108 | &, 109 | table &, 110 | td &, 111 | h1 &, 112 | h2 &, 113 | h3 &, 114 | h4 &, 115 | h5 &, 116 | h6 &, 117 | p &, 118 | span & { 119 | text-align: center; 120 | } 121 | } 122 | span.center { 123 | display: block; 124 | text-align: center; 125 | } 126 | img.center { 127 | margin: 0 auto; 128 | float: none; 129 | } -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | .gallery-2,.gallery-3,.gallery-4,.gallery-5,.gallery-6{font-size:0;letter-spacing:-0.31em;text-rendering:optimizespeed;font-family:FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif}.gallery-2 .opera-only :-o-prefocus,.gallery-3 .opera-only :-o-prefocus,.gallery-4 .opera-only :-o-prefocus,.gallery-5 .opera-only :-o-prefocus,.gallery-6 .opera-only :-o-prefocus,.gallery-2,.gallery-3,.gallery-4,.gallery-5,.gallery-6{word-spacing:-0.43em}.gallery-2>tbody>tr>td,.gallery-3>tbody>tr>td,.gallery-4>tbody>tr>td,.gallery-5>tbody>tr>td,.gallery-6>tbody>tr>td{display:inline-block;font-size:16px;letter-spacing:0}body{width:100% !important;min-width:100%;height:auto;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}#backgroundTable{margin:0;padding:0;width:100% !important;line-height:100% !important}div,p,a,li,td{-webkit-text-size-adjust:none}p{margin:1em 0}td{text-align:left}table,tr,td{padding:0;vertical-align:top}table{border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%}table.body{height:100%}table.body center{width:100%}td{margin:0;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;border-collapse:collapse !important}img{outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;max-width:100%}a img{border:none}.img-fix{display:block}hr{margin:0;height:1px;color:#e6e6e6;background-color:#e6e6e6;border:none}h1,h2,h3,h4,h5,h6{display:block;margin:0;padding:0;color:black !important}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:blue !important}h1 a:active,h2 a:active,h3 a:active,h4 a:active,h5 a:active,h6 a:active{color:red !important}h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{color:purple !important}.full{width:100%}#outlook p{display:inline !important}#outlook a{padding:0}body,table.body{color:#222222;font-family:Helvetica, Arial, sans-serif}small{font-size:10px}a{color:#333;text-decoration:none}a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}p,a,li,td,blockquote{mso-line-height-rule:exactly}p,a,li,td,body,table,blockquote{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}.center,table .center,td .center,h1 .center,h2 .center,h3 .center,h4 .center,h5 .center,h6 .center,p .center,span .center{text-align:center}span.center{display:block;text-align:center}img.center{margin:0 auto;float:none}table.wrapper{max-width:600px;margin:0 auto;text-align:inherit}@media args-get{table[class="wrapper"]{width:600px !important}}.row{width:100%;font-size:0;letter-spacing:-0.31em;text-rendering:optimizespeed;font-family:FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif}.row .opera-only :-o-prefocus,.row{word-spacing:-0.43em}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{display:inline-block;font-size:16px;letter-spacing:0}@media args-get{.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:100% !important;box-sizing:border-box}}.col{padding:8px}.col-1{min-width:40px;min-width:-webkit-calc(8.3333333%);min-width:calc(8.3333333%);width:8.3333333%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-2{min-width:80px;min-width:-webkit-calc(16.6666667%);min-width:calc(16.6666667%);width:16.6666667%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-3{min-width:120px;min-width:-webkit-calc(25%);min-width:calc(25%);width:25%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-4{min-width:160px;min-width:-webkit-calc(33.3333333%);min-width:calc(33.3333333%);width:33.3333333%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-5{min-width:200px;min-width:-webkit-calc(41.6666667%);min-width:calc(41.6666667%);width:41.6666667%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-6{min-width:240px;min-width:-webkit-calc(50%);min-width:calc(50%);width:50%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-7{min-width:280px;min-width:-webkit-calc(58.3333333%);min-width:calc(58.3333333%);width:58.3333333%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-8{min-width:320px;min-width:-webkit-calc(66.6666667%);min-width:calc(66.6666667%);width:66.6666667%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-9{min-width:360px;min-width:-webkit-calc(75%);min-width:calc(75%);width:75%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-10{min-width:400px;min-width:-webkit-calc(83.3333333%);min-width:calc(83.3333333%);width:83.3333333%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-11{min-width:440px;min-width:-webkit-calc(91.6666667%);min-width:calc(91.6666667%);width:91.6666667%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.col-12{min-width:480px;min-width:-webkit-calc(100%);min-width:calc(100%);width:100%;width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-2>tbody>tr>td{min-width:240px;width:50%;min-width:-webkit-calc(50%);min-width:calc(50%);width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-2 img{max-width:240px}.gallery-3>tbody>tr>td{min-width:160px;width:33.3333333%;min-width:-webkit-calc(33.3333333%);min-width:calc(33.3333333%);width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-3 img{max-width:160px}.gallery-4>tbody>tr>td{min-width:120px;width:25%;min-width:-webkit-calc(25%);min-width:calc(25%);width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-4 img{max-width:120px}.gallery-5>tbody>tr>td{min-width:96px;width:20%;min-width:-webkit-calc(20%);min-width:calc(20%);width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-5 img{max-width:96px}.gallery-6>tbody>tr>td{min-width:80px;width:16.6666667%;min-width:-webkit-calc(16.6666667%);min-width:calc(16.6666667%);width:-webkit-calc(480000px - 100000%);width:calc(480000px - 100000%);max-width:100%}.gallery-6 img{max-width:80px} 2 | 3 | /*# sourceMappingURL=main.css.map */ 4 | -------------------------------------------------------------------------------- /scss/base/_functions.scss: -------------------------------------------------------------------------------- 1 | // *** function *** // 2 | 3 | // em 4 | @function em($pxval, $base: $fe-em-base) { 5 | @if unit($pxval) == 'em' or unit($pxval) == 'rem' { @return $pxval; } 6 | @else { 7 | @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); } 8 | @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); } 9 | @return ($pxval / $base) * 1em; 10 | } 11 | } 12 | 13 | // rem 14 | @function rem($pxval, $base: $fe-rem-base) { 15 | @if unit($pxval) == 'rem' or unit($pxval) == 'em' { @return $pxval; } 16 | @else { 17 | @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); } 18 | @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); } 19 | @return ($pxval / $base) * 1rem; 20 | } 21 | } 22 | 23 | // strip-unit 24 | @function strip-unit($val) { 25 | @return ($val / ($val * 0 + 1)); 26 | } 27 | 28 | // opposite 29 | @function opposite($direction){ 30 | @if $direction == left { 31 | @return right; 32 | } @else if $direction == right { 33 | @return left; 34 | } @else if $direction == top { 35 | @return bottom; 36 | } @else if $direction == bottom { 37 | @return top; 38 | } @else { 39 | @return false; 40 | } 41 | } 42 | 43 | // reject 44 | @function reject($list, $val){ 45 | $_return: (); 46 | 47 | @if type-of($list) == 'list' { 48 | @for $i from 1 through length($list) { 49 | @if nth($list, $i) != $val { 50 | $_return: append($_return, nth($list, $i)); 51 | } 52 | } 53 | } @else { 54 | $_return: $list; 55 | } 56 | 57 | @return $_return; 58 | } 59 | 60 | // ro-get 61 | @function ro-get($key, $arg, $def:false){ 62 | $_return: $def; 63 | 64 | @if type-of($arg) == 'string' { 65 | @if index($key, $arg) { 66 | $_return: true; 67 | } 68 | } @else if type-of($arg) == 'list' { 69 | @each $item in $arg { 70 | @if index($key, $item) { 71 | $_return: $item; 72 | } 73 | } 74 | } 75 | 76 | @return $_return; 77 | } 78 | 79 | // ro-get-type 80 | @function ro-get-type($key, $arg, $check:false, $def:false) { 81 | $_return: $def; 82 | 83 | @each $item in $key { 84 | @if type-of($item) == $arg { 85 | @if $check { 86 | @if not index($check, $item) { 87 | $_return: $item; 88 | } 89 | } @else { 90 | $_return: $item; 91 | } 92 | } 93 | } 94 | 95 | @return $_return; 96 | } 97 | 98 | // ro-get-prev 99 | @function ro-get-prev($list, $val, $def:false) { 100 | $this-index: index($list, $val); 101 | @if $this-index { 102 | @return nth($list, ($this-index - 1)); 103 | } @else { 104 | @return $def; 105 | } 106 | } 107 | 108 | // ro-get-next 109 | @function ro-get-next($list, $val, $def:false) { 110 | $this-index: index($list, $val); 111 | @if $this-index { 112 | @return nth($list, ($this-index + 1)); 113 | } @else { 114 | @return $def; 115 | } 116 | } 117 | 118 | // selector functions 119 | @function selector-str(){ 120 | $sel: &; 121 | $sel-str: (nth($sel, 1) + ''); 122 | 123 | @return $sel-str; 124 | } 125 | @function selector-str-sliced($len){ 126 | @return str-slice(selector-str(), $len, str-length(selector-str())) + ', '; 127 | } 128 | @function str-remove-comma($key){ 129 | @return str-slice($key, 1, (str-length($key) - 2)); 130 | } 131 | 132 | 133 | // plus-one 134 | @function plus-one ($key) { 135 | @if type-of($key) == 'number' { 136 | @if unitless($key) { 137 | $key: $key + 1; 138 | } @else if unit($key) == 'px' { 139 | $key: $key + 1px; 140 | } @else if unit($key) == 'em' { 141 | $key: $key + em(1); 142 | } @else if unit($key) == 'rem' { 143 | $key: $key + rem(1); 144 | } 145 | } 146 | 147 | @return $key; 148 | } 149 | 150 | // minus-one 151 | @function minus-one ($key) { 152 | @if type-of($key) == 'number' { 153 | @if unitless($key) { 154 | $key: $key - 1; 155 | } @else if unit($key) == 'px' { 156 | $key: $key - 1px; 157 | } @else if unit($key) == 'em' { 158 | $key: $key - em(1); 159 | } @else if unit($key) == 'rem' { 160 | $key: $key - rem(1); 161 | } 162 | } 163 | 164 | @return $key; 165 | } 166 | 167 | // str-cut 168 | @function str-cut($string, $separator, $position) { 169 | $i: 1; 170 | $final-string: ''; 171 | $length: str-length($string); 172 | 173 | @if str-index($string, $separator) { 174 | $i: str-index($string, $separator); 175 | @if $position == after { 176 | $i: $i + 1; 177 | $final-string: str-slice($string, $i, $length); 178 | } @else if $position == before { 179 | $i: $i - 1; 180 | $final-string: str-slice($string, 1, $i); 181 | } 182 | } @else { 183 | $final-string: $string; 184 | } 185 | 186 | @return $final-string; 187 | } 188 | 189 | // span-calc 190 | @function span-calc ($col, $cols, $gutter){ 191 | $_return: ''; 192 | 193 | $col-percentage: percentage($col / $cols); 194 | $col-gutter: ($gutter * $col / $cols); 195 | $_return: '#{$col-percentage}' + ' + ' + '#{$col-gutter}'; 196 | @return $_return; 197 | } 198 | 199 | @function args-get($key, $arg, $def:false){ 200 | $result: $def; 201 | 202 | // string: return true/false when exists 203 | @if type-of($arg) == 'string' { 204 | @if index($key, $arg) { 205 | $result: true; 206 | } 207 | } @else if type-of($arg) == 'list' { 208 | 209 | // list: return item itself when the item exists 210 | @each $item in $arg { 211 | @if index($key, $item) { 212 | $result: $item; 213 | } 214 | } 215 | } 216 | 217 | @return $result; 218 | } 219 | 220 | @function args-get-prev($list, $val, $default:false) { 221 | @if type-of($list) == 'list' { 222 | $index: index($list, $val); 223 | 224 | @if $index { 225 | @if $index >= 2 { 226 | @return nth($list, ($index - 1)); 227 | } @else { 228 | 229 | @return $default; 230 | } 231 | } @else { 232 | 233 | @return $default; 234 | } 235 | } @else { 236 | 237 | @return $default; 238 | } 239 | } 240 | 241 | @function args-get-next($list, $val, $default:false) { 242 | @if type-of($list) == 'list' { 243 | $index: index($list, $val); 244 | 245 | @if $index { 246 | @if length($list) >= ($index + 1) { 247 | @return nth($list, ($index + 1)); 248 | } @else { 249 | 250 | @return $default; 251 | } 252 | } @else { 253 | 254 | @return $default; 255 | } 256 | } @else { 257 | 258 | @return $default; 259 | } 260 | } 261 | 262 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fluid-email 2 | Mobile-first email framework build with scss. 3 | [demo](http://creatiointl.org/william/fluid-email/demo.html) 4 | 5 | [changelog](https://github.com/ganlanyuan/fluid-email/blob/master/changelog.md) 6 | 7 | **Tips** 8 | + Don't use standard tags like `h1`, `h2`,...,`p`. 9 | + Every element only can have a maximum of one class. But if you will bring css inline later, ignore this rule. 10 | + Don't use css shorthand like: font: 10px/18px Arial, sans-serif. 11 | + Give your images a short and simple name: like logo.png, not logo_email_2011_08.png. 12 | + Use `attribute selectors` in your media queries to avoid a glitch which appears in Yahoo! Mail. Please refer to [this article](https://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/). 13 | + Wider than 320px column width will break the layout in Android Gmail App. 14 | + Wider image than its container will break the layout in outlook 07/10/13 because of their non-support of `max-width`. 15 | 16 | ## Process 17 | 1. Write you css/sass 18 | 2. Bring your css inline (recommend [mailermailer inliner tool](http://www.mailermailer.com/labs/tools/magic-css-inliner-tool.rwp)) 19 | 3. Test your email at [Litmus](https://litmus.com/) or [campaignmonitor.com](https://www.campaignmonitor.com/) 20 | 21 | ## Install 22 | ```` 23 | $ bower install fluid-email 24 | ```` 25 | 26 | ## Don't use SASS? 27 | You can use `css/main.css` directly. 28 | 29 | ## Usage 30 | **Basic structure** 31 | We use `wrapper`to constrain the main content on bigger screen, but since Lotus Notes 8 & Outlook don't support `max-width`, we need add a conditional wherever we use `wrapper`. You can change the `wrapper` width in `_variable.scss`. 32 | `
` element is required to fix an layout issue on Gmail App (Android). 33 | ```` html 34 | 35 | 36 | 37 | 54 | 55 |
38 |
39 | 40 | 41 | 42 | 43 | 48 | 49 |
44 | 45 | 46 | 47 |
50 | 51 | 52 |
53 |
56 | 57 | ```` 58 | **Settings** 59 | The default grid is 12 columns, gallery is 6 columns. 60 | You can directly change the settings in `_variables.scss`, 61 | ```sass 62 | // *** 1 variables.scss *** // 63 | // generate css 64 | $generate-css: true !default; 65 | 66 | // layout 67 | $wrapper: 600px !default; 68 | $content: 560px !default; 69 | $cols: 12 !default; 70 | $gutter: 16px !default; 71 | 72 | $gallery-cols: 6 !default; 73 | $gallery-align: left !default; 74 | ``` 75 | Or change it before you @import `fluid-email` 76 | ```sass 77 | $wrapper: 640px; 78 | $content: 560px; 79 | @import "path/to/fluid-email"; 80 | ``` 81 | **Grid** 82 | ```` html 83 | 84 | 85 | 88 | 91 | 92 |
86 | 87 | 89 | 90 |
93 | ```` 94 | **Sub-grid** 95 | ```` html 96 | 97 | 98 | 101 | 104 | 105 |
99 | 100 | 102 | 103 |
106 | ```` 107 | ```sass 108 | @mixin sub-col($key) 109 | // pattern 110 | $key: $column of $columns 111 | 112 | // Usage 113 | .main { @include sub-col(4 of 12); } 114 | .aside { @include sub-col(8 of 12); } 115 | ``` 116 | 117 | **Gallery** 118 | ```` html 119 | 120 | 121 | 124 | 127 | 128 |
122 | 123 | 125 | 126 |
129 | ```` 130 | ```sass 131 | @mixin gallery($column $item-width-max) 132 | // $columns: positive integer. Columns per row. 133 | // $item-width-max: px | em | rem | …. `max-width` of each column. When the width of each column reaches this value, each row will split into many columns as defined in `$columns`. 134 | 135 | .gallery-2 { @include gallery(2 300px); } 136 | ``` 137 | 138 | **Button** 139 | ```` html 140 | 141 | button 142 | 143 | ```` 144 | ```` sass 145 | @mixin button($key) 146 | // pattern 147 | $key: $background-color $padding $radius 148 | 149 | // Usage 150 | .button { 151 | @include button(#25d6ec '10px 15px' round); 152 | // $radius: round; (radius | round) 153 | } 154 | ```` 155 | 156 | **type** 157 | `type` is a shorthand mixin for type. 158 | ```` scss 159 | @mixin type($key); 160 | // pattern 161 | $key: $font-size $font-weight $font-style $line-height $font-family $text-align $text-transform 162 | 163 | h1 { @include type(20px 'Georgia, Helvetica, sans-serif' center 1.4 bold italic) } 164 | // font-size: 20px; 165 | // font-weight: bold; 166 | // font-style: italic; 167 | // font-family: 'Georgia, Helvetica, sans-serif'; 168 | // text-align: center; 169 | // line-height: 1.4; 170 | 171 | // Tips: to set 'font-weight', 'font-style', 'text-align' or 'text-transform' value 172 | // to 'inherit' or 'normal', 173 | // you need add prefix 'weight-', 'style-' or 'transform-'. 174 | 175 | // $ro-font-weights: thin, hairline, 'extra light', 'ultra light', lighter, light, normal, medium, 'semi bold', 'demi bold', bold, bolder, 'extra bold', black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit !default; 176 | // $ro-font-styles: italic, oblique, style-normal, style-inherit !default; 177 | // $ro-text-aligns: left, right, center, justify, align-inherit !default; 178 | // $ro-text-transforms: capitalize, uppercase, lowercase, none, full-width, transform-inherit !default; 179 | ```` 180 | 181 | **Breakpoint** 182 | ```` sass 183 | @include bp(min 480) {...} // output: @media (min-width: 30em) {...} 184 | @include bp(max 480 screen) {...} // output: @media screen and (max-width: 30em) {...} 185 | @include bp(480 640) {...} // output: @media (min-width: 30em) and (max-width: 40em) {...} 186 | .header { @include bp(min 480) {...} } // output: @media (min-width: 30em) { .header {...}; } 187 | ```` 188 | 189 | **Visibility** 190 | ```` sass 191 | @include visible($key); 192 | @include hidden($key); 193 | // pattern 194 | $key: $media $breakpoints 195 | 196 | // Usage 197 | .show-on-mobile { @include visible(screen 800); 198 | .show-on-desktop { @include hidden(null 400 800); 199 | // only works on the platforms that support CSS3 mediaquery 200 | ```` 201 | 202 | ## Compatibility 203 | **Desktop Clients** 204 | Apple Mail 7 ✓ 205 | Apple Mail 8 ✓ 206 | Lotus Notes 8.5 ✓ 207 | Outlook 2000 ✓ 208 | Outlook 2002 ✓ 209 | Outlook 2003 ✓ 210 | Outlook 2007 ✓ 211 | Outlook 2010 ✓ 212 | Outlook 2011 ✓ 213 | Outlook 2013 ✓ 214 | Outlook 2016 ✓ 215 | Thunderbird 31 ✓ 216 | 217 | **Mobile Clients** 218 | Android 2.3 ✓ 219 | Android 4.2 ✓ 220 | Gmail App (Android) ✓ 221 | iPad (Retina) ✓ 222 | iPad Mini ✓ 223 | iPhone 5s (iOS 7) ✓ 224 | iPhone 5s (iOS 8) ✓ 225 | iPhone 6 ✓ 226 | iPhone 6 Plus ✓ 227 | Windows Phone 8 ✓ 228 | 229 | **Web-based Clients** 230 | AOL Mail (Explorer) ✓ 231 | AOL Mail (Firefox) ✓ 232 | AOL Mail (Chrome) ✓ 233 | Gmail (Explorer) ✓ 234 | Gmail (Firefox) ✓ 235 | Gmail (Chrome) ✓ 236 | Outlook.com (Explorer) ✓ 237 | Outlook.com (Firefox) ✓ 238 | Outlook.com (Chrome) ✓ 239 | Yahoo! Mail (Explorer) ✓ 240 | Yahoo! Mail (Firefox) ✓ 241 | Yahoo! Mail (Chrome) ✓ 242 | 243 | ## Thanks and reference 244 | 245 | 246 | 247 | 248 | 249 | [Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate) 250 | [ink](http://zurb.com/ink/) 251 | -------------------------------------------------------------------------------- /index-final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newsletter 7 | 8 | 16 | 17 | 18 | 22 | 23 | 24 | 28 | 29 | 35 | 36 | 37 | 38 | 39 | 56 | 57 |
40 |
41 | 42 | 43 | 44 | 45 | 50 | 51 |
some text 46 | 47 | 48 | 49 |
52 | 53 | 54 |
55 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /demo/css/main.css: -------------------------------------------------------------------------------- 1 | .gallery-2, .gallery-3, .gallery-4, .gallery-5, .gallery-6, .gallery2, .gallery3, .gallery6 { 2 | font-size: 0; 3 | text-rendering: optimizespeed; 4 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .gallery-2 .opera-only :-o-prefocus, .gallery-3 .opera-only :-o-prefocus, .gallery-4 .opera-only :-o-prefocus, .gallery-5 .opera-only :-o-prefocus, .gallery-6 .opera-only :-o-prefocus, .gallery2 .opera-only :-o-prefocus, .gallery3 .opera-only :-o-prefocus, .gallery6 .opera-only :-o-prefocus, .gallery-2, .gallery-3, .gallery-4, .gallery-5, .gallery-6, .gallery2, .gallery3, .gallery6 { 8 | word-spacing: -0.43em; 9 | } 10 | 11 | .gallery-2 > tbody > tr > td, .gallery-3 > tbody > tr > td, .gallery-4 > tbody > tr > td, .gallery-5 > tbody > tr > td, .gallery-6 > tbody > tr > td, .gallery2 > tbody > tr > td, .gallery3 > tbody > tr > td, .gallery6 > tbody > tr > td { 12 | display: inline-block; 13 | font-size: 16px; 14 | } 15 | 16 | body { 17 | width: 100% !important; 18 | min-width: 100%; 19 | height: auto; 20 | -webkit-text-size-adjust: 100%; 21 | -ms-text-size-adjust: 100%; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | .ExternalClass { 27 | width: 100%; 28 | } 29 | 30 | .ExternalClass, 31 | .ExternalClass p, 32 | .ExternalClass span, 33 | .ExternalClass font, 34 | .ExternalClass td, 35 | .ExternalClass div { 36 | line-height: 100%; 37 | } 38 | 39 | #backgroundTable { 40 | margin: 0; 41 | padding: 0; 42 | width: 100% !important; 43 | line-height: 100% !important; 44 | } 45 | 46 | div, p, a, li, td { 47 | -webkit-text-size-adjust: none; 48 | } 49 | 50 | p { 51 | margin: 1em 0; 52 | } 53 | 54 | td { 55 | text-align: left; 56 | } 57 | 58 | table, tr, td { 59 | padding: 0; 60 | vertical-align: top; 61 | } 62 | 63 | table { 64 | border-spacing: 0; 65 | border-collapse: collapse; 66 | mso-table-lspace: 0pt; 67 | mso-table-rspace: 0pt; 68 | width: 100%; 69 | } 70 | 71 | table.body { 72 | height: 100%; 73 | } 74 | 75 | table.body center { 76 | width: 100%; 77 | } 78 | 79 | td { 80 | margin: 0; 81 | word-break: break-word; 82 | -webkit-hyphens: auto; 83 | -moz-hyphens: auto; 84 | hyphens: auto; 85 | border-collapse: collapse !important; 86 | } 87 | 88 | img { 89 | outline: none; 90 | text-decoration: none; 91 | -ms-interpolation-mode: bicubic; 92 | max-width: 100%; 93 | } 94 | 95 | a img { 96 | border: none; 97 | } 98 | 99 | .img-fix { 100 | display: block; 101 | } 102 | 103 | hr { 104 | margin: 0; 105 | height: 1px; 106 | color: #e6e6e6; 107 | background-color: #e6e6e6; 108 | border: none; 109 | } 110 | 111 | h1, h2, h3, h4, h5, h6 { 112 | display: block; 113 | margin: 0; 114 | padding: 0; 115 | color: black !important; 116 | } 117 | 118 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 119 | color: blue !important; 120 | } 121 | 122 | h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { 123 | color: red !important; 124 | } 125 | 126 | h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { 127 | color: purple !important; 128 | } 129 | 130 | .full { 131 | width: 100%; 132 | } 133 | 134 | /* Typography */ 135 | #outlook p { 136 | display: inline !important; 137 | } 138 | 139 | #outlook a { 140 | padding: 0; 141 | } 142 | 143 | body, table.body { 144 | color: #222222; 145 | font-family: Helvetica, Arial, sans-serif; 146 | } 147 | 148 | small { 149 | font-size: 10px; 150 | } 151 | 152 | a { 153 | color: #333; 154 | text-decoration: none; 155 | } 156 | 157 | a[href^=tel], a[href^=sms] { 158 | color: inherit; 159 | cursor: default; 160 | text-decoration: none; 161 | } 162 | 163 | p, a, li, td, blockquote { 164 | mso-line-height-rule: exactly; 165 | } 166 | 167 | p, a, li, td, body, table, blockquote { 168 | -ms-text-size-adjust: 100%; 169 | -webkit-text-size-adjust: 100%; 170 | } 171 | 172 | /* Alignment */ 173 | .center, 174 | table .center, 175 | td .center, 176 | h1 .center, 177 | h2 .center, 178 | h3 .center, 179 | h4 .center, 180 | h5 .center, 181 | h6 .center, 182 | p .center, 183 | span .center { 184 | text-align: center; 185 | } 186 | 187 | span.center { 188 | display: block; 189 | text-align: center; 190 | } 191 | 192 | img.center { 193 | margin: 0 auto; 194 | float: none; 195 | } 196 | 197 | table.wrapper { 198 | max-width: 600px; 199 | margin: 0 auto; 200 | text-align: inherit; 201 | } 202 | 203 | @media (min-width: 37.5625em) { 204 | table[class="wrapper"] { 205 | width: 600px !important; 206 | } 207 | } 208 | 209 | .row { 210 | width: 100%; 211 | font-size: 0; 212 | letter-spacing: -0.31em; 213 | text-rendering: optimizespeed; 214 | font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 215 | } 216 | 217 | .row .opera-only :-o-prefocus, .row { 218 | word-spacing: -0.43em; 219 | } 220 | 221 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 222 | display: inline-block; 223 | font-size: 16px; 224 | letter-spacing: 0; 225 | } 226 | 227 | @media (max-width: 37.4375em) { 228 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 229 | width: 100% !important; 230 | box-sizing: border-box; 231 | } 232 | } 233 | 234 | .col { 235 | padding: 8px; 236 | } 237 | 238 | .col-1 { 239 | min-width: 48.6666667px; 240 | min-width: -webkit-calc(8.3333333%); 241 | min-width: calc(8.3333333%); 242 | width: 8.3333333%; 243 | width: -webkit-calc(584000px - 100000%); 244 | width: calc(584000px - 100000%); 245 | max-width: 100%; 246 | } 247 | 248 | .col-2 { 249 | min-width: 97.3333333px; 250 | min-width: -webkit-calc(16.6666667%); 251 | min-width: calc(16.6666667%); 252 | width: 16.6666667%; 253 | width: -webkit-calc(584000px - 100000%); 254 | width: calc(584000px - 100000%); 255 | max-width: 100%; 256 | } 257 | 258 | .col-3 { 259 | min-width: 146px; 260 | min-width: -webkit-calc(25%); 261 | min-width: calc(25%); 262 | width: 25%; 263 | width: -webkit-calc(584000px - 100000%); 264 | width: calc(584000px - 100000%); 265 | max-width: 100%; 266 | } 267 | 268 | .col-4 { 269 | min-width: 194.6666667px; 270 | min-width: -webkit-calc(33.3333333%); 271 | min-width: calc(33.3333333%); 272 | width: 33.3333333%; 273 | width: -webkit-calc(584000px - 100000%); 274 | width: calc(584000px - 100000%); 275 | max-width: 100%; 276 | } 277 | 278 | .col-5 { 279 | min-width: 243.3333333px; 280 | min-width: -webkit-calc(41.6666667%); 281 | min-width: calc(41.6666667%); 282 | width: 41.6666667%; 283 | width: -webkit-calc(584000px - 100000%); 284 | width: calc(584000px - 100000%); 285 | max-width: 100%; 286 | } 287 | 288 | .col-6 { 289 | min-width: 292px; 290 | min-width: -webkit-calc(50%); 291 | min-width: calc(50%); 292 | width: 50%; 293 | width: -webkit-calc(584000px - 100000%); 294 | width: calc(584000px - 100000%); 295 | max-width: 100%; 296 | } 297 | 298 | .col-7 { 299 | min-width: 340.6666667px; 300 | min-width: -webkit-calc(58.3333333%); 301 | min-width: calc(58.3333333%); 302 | width: 58.3333333%; 303 | width: -webkit-calc(584000px - 100000%); 304 | width: calc(584000px - 100000%); 305 | max-width: 100%; 306 | } 307 | 308 | .col-8 { 309 | min-width: 389.3333333px; 310 | min-width: -webkit-calc(66.6666667%); 311 | min-width: calc(66.6666667%); 312 | width: 66.6666667%; 313 | width: -webkit-calc(584000px - 100000%); 314 | width: calc(584000px - 100000%); 315 | max-width: 100%; 316 | } 317 | 318 | .col-9 { 319 | min-width: 438px; 320 | min-width: -webkit-calc(75%); 321 | min-width: calc(75%); 322 | width: 75%; 323 | width: -webkit-calc(584000px - 100000%); 324 | width: calc(584000px - 100000%); 325 | max-width: 100%; 326 | } 327 | 328 | .col-10 { 329 | min-width: 486.6666667px; 330 | min-width: -webkit-calc(83.3333333%); 331 | min-width: calc(83.3333333%); 332 | width: 83.3333333%; 333 | width: -webkit-calc(584000px - 100000%); 334 | width: calc(584000px - 100000%); 335 | max-width: 100%; 336 | } 337 | 338 | .col-11 { 339 | min-width: 535.3333333px; 340 | min-width: -webkit-calc(91.6666667%); 341 | min-width: calc(91.6666667%); 342 | width: 91.6666667%; 343 | width: -webkit-calc(584000px - 100000%); 344 | width: calc(584000px - 100000%); 345 | max-width: 100%; 346 | } 347 | 348 | .col-12 { 349 | min-width: 584px; 350 | min-width: -webkit-calc(100%); 351 | min-width: calc(100%); 352 | width: 100%; 353 | width: -webkit-calc(584000px - 100000%); 354 | width: calc(584000px - 100000%); 355 | max-width: 100%; 356 | } 357 | 358 | .gallery-2 > tbody > tr > td { 359 | min-width: 292px; 360 | width: 50%; 361 | min-width: -webkit-calc(50%); 362 | min-width: calc(50%); 363 | width: -webkit-calc(584000px - 100000%); 364 | width: calc(584000px - 100000%); 365 | max-width: 100%; 366 | } 367 | 368 | .gallery-2 img { 369 | max-width: 292px; 370 | } 371 | 372 | .gallery-3 > tbody > tr > td { 373 | min-width: 194.6666667px; 374 | width: 33.3333333%; 375 | min-width: -webkit-calc(33.3333333%); 376 | min-width: calc(33.3333333%); 377 | width: -webkit-calc(584000px - 100000%); 378 | width: calc(584000px - 100000%); 379 | max-width: 100%; 380 | } 381 | 382 | .gallery-3 img { 383 | max-width: 194.6666667px; 384 | } 385 | 386 | .gallery-4 > tbody > tr > td { 387 | min-width: 146px; 388 | width: 25%; 389 | min-width: -webkit-calc(25%); 390 | min-width: calc(25%); 391 | width: -webkit-calc(584000px - 100000%); 392 | width: calc(584000px - 100000%); 393 | max-width: 100%; 394 | } 395 | 396 | .gallery-4 img { 397 | max-width: 146px; 398 | } 399 | 400 | .gallery-5 > tbody > tr > td { 401 | min-width: 116.8px; 402 | width: 20%; 403 | min-width: -webkit-calc(20%); 404 | min-width: calc(20%); 405 | width: -webkit-calc(584000px - 100000%); 406 | width: calc(584000px - 100000%); 407 | max-width: 100%; 408 | } 409 | 410 | .gallery-5 img { 411 | max-width: 116.8px; 412 | } 413 | 414 | .gallery-6 > tbody > tr > td { 415 | min-width: 97.3333333px; 416 | width: 16.6666667%; 417 | min-width: -webkit-calc(16.6666667%); 418 | min-width: calc(16.6666667%); 419 | width: -webkit-calc(584000px - 100000%); 420 | width: calc(584000px - 100000%); 421 | max-width: 100%; 422 | } 423 | 424 | .gallery-6 img { 425 | max-width: 97.3333333px; 426 | } 427 | 428 | td.gutter { 429 | padding: 8px; 430 | } 431 | 432 | #backgroundTable { 433 | background-color: #eee; 434 | } 435 | 436 | .wrapper.main { 437 | background-color: #fff; 438 | } 439 | 440 | .topbar { 441 | padding: 10px; 442 | background-color: #444; 443 | color: #fff; 444 | } 445 | 446 | .topbar a { 447 | color: #fff; 448 | text-decoration: underline; 449 | } 450 | 451 | .view { 452 | width: 100%; 453 | font-size: 11px; 454 | text-align: left; 455 | } 456 | 457 | .h4 { 458 | font-size: 23px; 459 | font-size: 1.4375rem; 460 | line-height: 1.2; 461 | font-weight: bold; 462 | font-family: Georgia, 'Times New Roman', Times, Baskerville, serif; 463 | } 464 | 465 | .h5 { 466 | font-size: 13px; 467 | font-size: 0.8125rem; 468 | line-height: 1.3; 469 | font-weight: bold; 470 | font-family: Georgia, 'Times New Roman', Times, Baskerville, serif; 471 | padding-bottom: 10px; 472 | } 473 | 474 | .h6 { 475 | font-size: 13px; 476 | font-size: 0.8125rem; 477 | line-height: 1.3; 478 | padding-top: 6px; 479 | } 480 | 481 | .p { 482 | font-size: 13px; 483 | font-size: 0.8125rem; 484 | font-family: Georgia, 'Times New Roman', Times, Baskerville, serif; 485 | padding: 13px 0; 486 | } 487 | 488 | .gap { 489 | padding-top: 20px; 490 | } 491 | 492 | .logo { 493 | font-size: 36px !important; 494 | } 495 | 496 | .date { 497 | padding-top: 30px; 498 | text-align: right; 499 | font-size: 12px; 500 | color: #999; 501 | } 502 | 503 | .date a { 504 | color: #999; 505 | text-decoration: underline; 506 | } 507 | 508 | .button { 509 | display: inline-block; 510 | border-style: solid; 511 | text-align: center; 512 | box-sizing: border-box; 513 | background-color: #3ab7e4; 514 | border-color: #3ab7e4; 515 | border-type: solid; 516 | color: contrast(#3ab7e4); 517 | border-width: 15px 20px; 518 | border-radius: 0.45em; 519 | margin-top: 10px; 520 | color: #fff !important; 521 | } 522 | 523 | .button-2 { 524 | display: inline-block; 525 | border-style: solid; 526 | text-align: center; 527 | box-sizing: border-box; 528 | background-color: #D80017; 529 | border-color: #D80017; 530 | border-type: solid; 531 | color: contrast(#D80017); 532 | border-width: 15px 20px; 533 | border-radius: 1000px; 534 | color: #fff !important; 535 | margin-top: 10px; 536 | } 537 | 538 | .topnews-img a { 539 | display: block; 540 | } 541 | 542 | .related td { 543 | padding-bottom: 16px; 544 | } 545 | 546 | .img-related { 547 | width: 107px; 548 | padding-right: 16px; 549 | } 550 | 551 | .img-related img { 552 | vertical-align: top; 553 | } 554 | 555 | .img-box { 556 | padding-right: 10px; 557 | padding-bottom: 10px; 558 | } 559 | 560 | .sub-col-4 { 561 | width: 33.3333333%; 562 | } 563 | 564 | .sub-col-8 { 565 | width: 66.6666667%; 566 | } 567 | 568 | .copyright { 569 | padding-bottom: 30px; 570 | line-height: 1.6; 571 | font-size: 12px; 572 | color: #999; 573 | } 574 | 575 | .copyright a { 576 | color: #999; 577 | } 578 | 579 | .copyright .primary { 580 | color: #333; 581 | } 582 | 583 | .gallery2 > tbody > tr > td { 584 | min-width: 240px; 585 | width: 50%; 586 | max-width: 100%; 587 | min-width: -webkit-calc(50%); 588 | min-width: calc(50%); 589 | width: -webkit-calc(480000px - 100000%); 590 | width: calc(480000px - 100000%); 591 | } 592 | 593 | .gallery3 > tbody > tr > td { 594 | min-width: 100px; 595 | width: 33.3333333%; 596 | max-width: 100%; 597 | min-width: -webkit-calc(33.3333333%); 598 | min-width: calc(33.3333333%); 599 | width: -webkit-calc(300000px - 100000%); 600 | width: calc(300000px - 100000%); 601 | } 602 | 603 | .gallery6 > tbody > tr > td { 604 | min-width: 30px; 605 | width: 16.6666667%; 606 | max-width: 33.3333333%; 607 | min-width: -webkit-calc(16.6666667%); 608 | min-width: calc(16.6666667%); 609 | width: -webkit-calc(180000px - 33333.3333333%); 610 | width: calc(180000px - 33333.3333333%); 611 | } 612 | 613 | [class*='gallery'] img { 614 | width: 100%; 615 | } 616 | 617 | /*# sourceMappingURL=main.css.map */ 618 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fluid-email 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 36 | 47 | 48 | 49 | 377 | 378 | 379 | 410 | 411 | 412 |
37 |
38 | 39 | 40 | 41 | 42 | 43 |
View this email in your browser
44 | 45 |
46 |
50 |
51 | 52 | 53 | 54 | 55 | 371 | 372 | 373 |
56 | 57 | 58 | 59 | 68 | 88 | 89 | 90 |
60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 		69 | 70 | 71 | 72 | 84 | 85 | 86 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
Greeks take Europe to the brink as showdown looms over bailout
Prime Minister Alexis Tsipras won a confidence vote in Parliament over his plans. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate suscipit, laudantium perspiciatis ipsum quaerat doloribus.
83 |
87 |
91 | 92 | 93 | 94 | 95 | 96 | 97 |
98 | 99 | 100 | 101 | 139 | 159 | 160 | 161 |
102 | 103 | 104 | 105 | 135 | 136 | 137 |
106 | 107 | 108 | 109 | 112 | 115 | 116 | 117 | 120 | 123 | 124 | 125 | 128 | 131 | 132 | 133 |
110 | 111 | 113 | Faith leaders join call for Britain to take in more Syrian refugees 114 |
118 | 119 | 121 | India bishop stresses need for Church to spread religious tolerance 122 |
126 | 127 | 129 | John I. William Jr. is first African American to head an ELCA college 130 |
134 |
138 | 		140 | 141 | 142 | 143 | 155 | 156 | 157 |
144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |
An example of button
154 |
158 |
162 | 163 | 164 | 165 | 168 | 169 | 170 |
166 |
167 |
171 | 172 | 173 | 174 | 194 | 214 | 234 | 235 | 236 |
175 | 176 | 177 | 178 | 190 | 191 | 192 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 |
Christian Bakery Closed for Refusing Lesbian Wedding Cake Breaks Record
189 |
193 | 		195 | 196 | 197 | 198 | 210 | 211 | 212 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 |
Luis Palau, Years After China Gaffe, Maintains That Evangelists
209 |
213 | 		215 | 216 | 217 | 218 | 230 | 231 | 232 |
219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 |
Imprisoned Pastor Saeed Abedini Has Dream He Will Be Free by Daughter
229 |
233 |
237 | 238 | 239 | 240 | 243 | 244 | 245 |
241 |
242 |
246 | 247 | 248 | 249 | 269 | 289 | 309 | 329 | 349 | 367 | 368 | 369 |
250 | 251 | 252 | 253 | 265 | 266 | 267 |
254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 |
Christian Bakery
264 |
268 | 		270 | 271 | 272 | 273 | 285 | 286 | 287 |
274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 |
Luis Palau
284 |
288 | 		290 | 291 | 292 | 293 | 305 | 306 | 307 |
294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 |
Imprisoned Pastor
304 |
308 | 		310 | 311 | 312 | 313 | 325 | 326 | 327 |
314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 |
Christian Bakery
324 |
328 | 		330 | 331 | 332 | 333 | 345 | 346 | 347 |
334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 |
Luis Palau
344 |
348 | 		350 | 351 | 352 | 353 | 363 | 364 | 365 |
354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 |
Imprisoned Pastor
362 |
366 |
370 |
374 | 375 |
376 |
380 |
381 | 382 | 383 | 384 | 385 | 404 | 405 | 406 |
386 | 387 | 388 | 389 | 395 | 396 | 397 | 400 | 401 | 402 |
390 |   391 |   392 |   393 | 394 |
This email was sent to test@gmail.com
398 | Unsubscribe | Privacy Policy | User Agreement | Contact Us
399 | Brand · 711 5th Avenue, New York City, NY · New York, Ny 10007
403 |
407 | 408 |
409 |
413 | 414 | -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.css","sources":["main.scss","_fluid-email.scss","base/_variables.scss","base/_functions.scss","base/_placeholder.scss","addons/_breakpoint.scss","addons/_visible.scss","addons/_hidden.scss","addons/_type.scss","reset/_reset.scss","layout/_wrapper.scss","layout/_row.scss","layout/_col.scss","layout/_sub-col.scss","layout/_gallery.scss","components/_button.scss"],"sourcesContent":["// *** fluid email *** //\n@import \"fluid-email\";\n\n// *** main *** //\n\n\n\n\n\n\n\n@media only screen and (max-device-width: 480px) {\n // A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to \"unstyle\" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.\n // Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/.\n // a[href^=\"tel\"], a[href^=\"sms\"] {\n // text-decoration: none;\n // color: black; // or whatever your want\n // pointer-events: none;\n // cursor: default;\n // .mobile_link & {\n // text-decoration: default;\n // color: orange !important; // or whatever your want\n // pointer-events: auto;\n // cursor: default;\n // }\n // }\n}\n// More Specific Targeting\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {\n // ipad (tablets, smaller screens, etc)\n}\n@media only screen and (-webkit-min-device-pixel-ratio: 2) {\n // Put your iPhone 4g styles in here //\n}\n// Following Android targeting from:\n// http://developer.android.com/guide/webapps/targeting.html\n// http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ \n@media only screen and (-webkit-device-pixel-ratio:.75){\n // Put CSS for low density (ldpi) Android layouts in here //\n}\n@media only screen and (-webkit-device-pixel-ratio:1){\n // Put CSS for medium density (mdpi) Android layouts in here //\n}\n@media only screen and (-webkit-device-pixel-ratio:1.5){\n // Put CSS for high density (hdpi) Android layouts in here //\n}\n","// *** fluid email *** //\n\n// base\n@import \"base/variables\";\n@import \"base/functions\";\n@import \"base/placeholder\";\n\n// addons\n@import \"addons/breakpoint\";\n@import \"addons/visible\";\n@import \"addons/hidden\";\n@import \"addons/type\";\n\n// reset\n@import \"reset/reset\";\n\n// layout\n@import \"layout/wrapper\";\n@import \"layout/row\";\n@import \"layout/col\";\n@import \"layout/sub-col\";\n@import \"layout/gallery\";\n\n// components\n@import \"components/button\";\n","// variables\n//-----------------------------\n\n// generate css\n$generate-css: true !default;\n$breakpoint-fix: true !default;\n\n// layout\n$wrapper: 600px !default;\n$content: 480px !default;\n$cols: 12 !default;\n$gutter: 16px !default;\n\n$gallery-cols: 6 !default;\n$gallery-align: left !default;\n\n$faciend: 1000;\n\n// font\n$helvetica: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";\n$arial: \"Arial, Helvetica, sans-serif\";\n$opensans: \"'Open Sans', Arial, sans-serif\";\n$lato: \"'Lato', Arial, sans-serif\";\n$oswald: \"'Oswald', Arial, sans-serif\";\n$georgia: \"Georgia, 'Times New Roman', Times, Baskerville, serif\";\n\n// color\n$color: (\n 'border': #e6e6e6,\n 'brand': #41bae9,\n 'bg': #f1f1f1,\n 'link': #333,\n);\n\n// base\n$fe-em-base: 16px !default;\n$fe-rem-base: 16px !default;\n\n// breakpoint\n$ro-media-type: all, aural, braille, handheld, print, projection, screen, tty, tv, embossed !default;\n$ro-media-features: 'width', 'height' !default;\n\n// type\n$fe-font-weights: thin, hairline, extra light, ultra light, lighter, light, normal, medium, semi bold, demi bold, bold, bolder, extra bold, black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit !default;\n$fe-font-styles: italic, oblique, style-normal, style-inherit !default;\n$fe-text-aligns: left, right, center, justify, align-inherit !default;\n$fe-text-transforms: capitalize, uppercase, lowercase, none, full-width, transform-inherit !default;\n\n// media list\n$fe-media-type: 'media', 'media-body';\n$fe-media-direction: left, right;\n\n// button\n$fe-button-radius-styles: 'radius', 'round' !default;\n$fe-button-radius: 0.45em !default;\n$fe-button-round: 1000px !default;\n$fe-button-hover-lightness: 10% !default;\n\n// visibility\n$fe-even: 2 4 6 8 10 12 14 16 18 20;\n$fe-odd: 1 3 5 7 9 11 13 15 17 19;\n","// *** function *** //\n\n// em\n@function em($pxval, $base: $fe-em-base) {\n @if unit($pxval) == 'em' or unit($pxval) == 'rem' { @return $pxval; }\n @else {\n @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); }\n @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); }\n @return ($pxval / $base) * 1em;\n } \n}\n\n// rem\n@function rem($pxval, $base: $fe-rem-base) {\n @if unit($pxval) == 'rem' or unit($pxval) == 'em' { @return $pxval; }\n @else {\n @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); }\n @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); }\n @return ($pxval / $base) * 1rem;\n } \n}\n\n// strip-unit\n@function strip-unit($val) {\n @return ($val / ($val * 0 + 1));\n}\n\n// opposite\n@function opposite($direction){\n @if $direction == left { \n @return right; \n } @else if $direction == right { \n @return left; \n } @else if $direction == top { \n @return bottom; \n } @else if $direction == bottom { \n @return top; \n } @else { \n @return false; \n }\n}\n\n// reject\n@function reject($list, $val){\n $_return: ();\n\n @if type-of($list) == 'list' {\n @for $i from 1 through length($list) {\n @if nth($list, $i) != $val {\n $_return: append($_return, nth($list, $i));\n }\n }\n } @else {\n $_return: $list;\n }\n\n @return $_return;\n}\n\n// ro-get\n@function ro-get($key, $arg, $def:false){\n $_return: $def;\n\n @if type-of($arg) == 'string' {\n @if index($key, $arg) {\n $_return: true;\n } \n } @else if type-of($arg) == 'list' {\n @each $item in $arg {\n @if index($key, $item) {\n $_return: $item;\n } \n }\n }\n\n @return $_return;\n}\n\n// ro-get-type\n@function ro-get-type($key, $arg, $check:false, $def:false) {\n $_return: $def;\n\n @each $item in $key {\n @if type-of($item) == $arg {\n @if $check {\n @if not index($check, $item) {\n $_return: $item;\n }\n } @else {\n $_return: $item;\n }\n }\n }\n\n @return $_return;\n}\n\n// ro-get-prev\n@function ro-get-prev($list, $val, $def:false) {\n $this-index: index($list, $val);\n @if $this-index {\n @return nth($list, ($this-index - 1));\n } @else {\n @return $def;\n }\n}\n\n// ro-get-next\n@function ro-get-next($list, $val, $def:false) {\n $this-index: index($list, $val);\n @if $this-index {\n @return nth($list, ($this-index + 1));\n } @else {\n @return $def;\n }\n}\n\n// selector functions\n@function selector-str(){\n $sel: &;\n $sel-str: (nth($sel, 1) + '');\n\n @return $sel-str;\n}\n@function selector-str-sliced($len){\n @return str-slice(selector-str(), $len, str-length(selector-str())) + ', ';\n}\n@function str-remove-comma($key){\n @return str-slice($key, 1, (str-length($key) - 2));\n}\n\n\n// plus-one\n@function plus-one ($key) {\n @if type-of($key) == 'number' {\n @if unitless($key) {\n $key: $key + 1;\n } @else if unit($key) == 'px' {\n $key: $key + 1px;\n } @else if unit($key) == 'em' {\n $key: $key + em(1);\n } @else if unit($key) == 'rem' {\n $key: $key + rem(1);\n }\n }\n\n @return $key;\n}\n\n// minus-one\n@function minus-one ($key) {\n @if type-of($key) == 'number' {\n @if unitless($key) {\n $key: $key - 1;\n } @else if unit($key) == 'px' {\n $key: $key - 1px;\n } @else if unit($key) == 'em' {\n $key: $key - em(1);\n } @else if unit($key) == 'rem' {\n $key: $key - rem(1);\n }\n }\n\n @return $key;\n}\n\n// str-cut\n@function str-cut($string, $separator, $position) {\n $i: 1;\n $final-string: '';\n $length: str-length($string);\n\n @if str-index($string, $separator) {\n $i: str-index($string, $separator);\n @if $position == after {\n $i: $i + 1;\n $final-string: str-slice($string, $i, $length);\n } @else if $position == before {\n $i: $i - 1;\n $final-string: str-slice($string, 1, $i);\n }\n } @else {\n $final-string: $string;\n }\n\n @return $final-string;\n}\n\n// span-calc\n@function span-calc ($col, $cols, $gutter){\n $_return: '';\n\n $col-percentage: percentage($col / $cols);\n $col-gutter: ($gutter * $col / $cols);\n $_return: '#{$col-percentage}' + ' + ' + '#{$col-gutter}';\n @return $_return;\n}\n\n@function args-get-prev($list, $val, $default:false) {\n @if type-of($list) == 'list' {\n $index: index($list, $val);\n\n @if $index {\n @if $index >= 2 {\n @return nth($list, ($index - 1));\n } @else {\n \n @return $default;\n }\n } @else {\n\n @return $default;\n }\n } @else {\n\n @return $default;\n }\n}\n\n@function args-get-next($list, $val, $default:false) {\n @if type-of($list) == 'list' {\n $index: index($list, $val);\n\n @if $index {\n @if length($list) >= ($index + 1) {\n @return nth($list, ($index + 1));\n } @else {\n \n @return $default;\n }\n } @else {\n\n @return $default;\n }\n } @else {\n\n @return $default;\n }\n}\n\n","// *** placeholder *** //\n%layout-base {\n // &, > tbody, > tbody > tr {text-align: $gallery-align; }\n font-size: 0; // remove blank space between inline-block elements\n // Webkit: collapse white-space between units\n letter-spacing: -0.31em; \n // Webkit: fixes text-rendering: optimizeLegibility\n text-rendering: optimizespeed; \n // Sets the font stack to fonts known to work properly with the above letter\n // and word spacings. See: https://github.com/yahoo/pure/issues/41/\n // The following font stack makes gallery work on all known environments.\n // * FreeSans: Ships with many Linux distros, including Ubuntu\n // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and\n // Arial to get picked up by the browser, even though neither is available\n // in Chrome OS.\n // * Droid Sans: Ships with all versions of Android.\n // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.\n font-family: FreeSans, Arimo, \"Droid Sans\", Helvetica, Arial, sans-serif;\n\n // Opera as of 12 on Windows needs word-spacing.\n // The \".opera-only\" selector is used to prevent actual prefocus styling\n // and is not required in markup.\n .opera-only :-o-prefocus, & { word-spacing: -0.43em; }\n}\n%layout-item-base {\n display: inline-block;\n font-size: 16px; // restore font-size\n letter-spacing: 0; // restore letter-spacing\n}\n","// *** breakpoint *** //\n@mixin ro-breakpoint($key){\n $condition: args-get($key, ('min' 'max'), 'min');\n $media-type: args-get($key, $ro-media-type);\n $media-feature: args-get($key, $ro-media-features, 'width');\n\n $media-string: if($media-type, '#{$media-type} and ', '');\n $selector: '';\n $bps-em: ();\n\n // get breakpoints\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if strip-unit($item) == 0 {\n $item: 0em;\n } @else {\n $item: em($item);\n }\n\n $bps-em: append($bps-em, $item);\n }\n }\n $length: length($bps-em);\n\n @if $length == 1 {\n $bp: if($breakpoint-fix and $condition == 'max', (nth($bps-em, 1) - em(1)), nth($bps-em, 1));\n $selector: $media-string + '(#{$condition}-#{$media-feature}: #{$bp})';\n } @else if $length >= 2 {\n @for $i from 1 through $length {\n @if number-odd-even($i) == 'odd' {\n $selector: $selector + ', ' + $media-string + ' (min-#{$media-feature}: #{nth($bps-em, $i)})';\n } @else if number-odd-even($i) == 'even' {\n $bp-max: if($breakpoint-fix, (nth($bps-em, $i) - em(1)), nth($bps-em, $i));\n $selector: $selector + 'and (max-#{$media-feature}: #{$bp-max})';\n }\n }\n // remove the first ', '\n @if str-index($selector, ', ') == 1 { $selector: str-slice($selector, 3); }\n }\n\n // *** output *** //\n @media #{unquote($selector)} { @content; }\n}\n\n@mixin bp($key) {\n @include ro-breakpoint($key) {\n @content;\n };\n}","@import \"breakpoint\";\n\n// *** visible *** //\n@mixin visible($key){\n $new-key: ();\n\n @if type-of($key) == 'number' {\n @include bp('max' $key) { display: none !important; }\n } @else if type-of($key) == list {\n @if nth($key, 1) == 0 {\n $key: list-remove($key, 0);\n } @else {\n $new-key: append($new-key, 0);\n }\n\n // append $key to $new-key \n @each $item in $key {\n $new-key: append($new-key, $item);\n }\n\n @include bp($new-key) { display: none !important; }\n }\n}\n","@import \"breakpoint\";\n\n// *** hidden *** //\n@mixin hidden($key){\n @if type-of($key) == 'number' {\n @include bp('min' $key) { display: none !important; }\n } @else if type-of($key) == list {\n @include bp($key) { display: none !important; }\n }\n}\n","// *** type *** //\n@mixin type($key){\n $check: join(join(join($fe-font-weights, $fe-font-styles), $fe-text-aligns), $fe-text-transforms);\n\n // set up font-size, font-weight, line-height\n $font-size: null;\n $font-weight: null;\n $line-height: null;\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if unitless($item) {\n @if $item >= 100 {\n $font-weight: $item;\n } @else {\n $line-height: $item;\n }\n } @else {\n $font-size: $item;\n }\n }\n }\n\n // set up font-family, font-weight, font-style, text-align, text-transform\n $font-family: ro-get-type($key, 'string', $check);\n $font-weight: ro-get($key, $fe-font-weights); \n $font-style: ro-get($key, $fe-font-styles);\n $text-align: ro-get($key, $fe-text-aligns);\n $text-transform: ro-get($key, $fe-text-transforms);\n\n // remove prefix\n @if type-of($font-weight) == 'string' {\n $font-weight: str-cut($font-weight, '-', after);\n }\n @if type-of($font-style) == 'string' {\n $font-style: str-cut($font-style, '-', after);\n }\n @if type-of($text-align) == 'string' {\n $text-align: str-cut($text-align, '-', after);\n }\n @if type-of($text-transform) == 'string' {\n $text-transform: str-cut($text-transform, '-', after);\n }\n\n\n // *** output *** //\n @if $font-size {\n font-size: $font-size;\n @if unit($font-size) == 'px' {\n font-size: rem($font-size);\n }\n }\n @if $line-height {\n line-height: $line-height;\n }\n @if $font-weight {\n font-weight: $font-weight;\n }\n @if $font-style {\n font-style: $font-style;\n }\n @if $text-align {\n text-align: $text-align;\n }\n @if $text-transform {\n text-transform: $text-transform;\n }\n @if $font-family {\n font-family: unquote($font-family);\n }\n}\n","// *** reset *** //\n\nbody{ // Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.\n width:100% !important;\n min-width: 100%;\n height: auto;\n -webkit-text-size-adjust:100%;\n -ms-text-size-adjust:100%;\n margin:0;\n padding:0;\n}\n// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. \n.ExternalClass {width:100%;} // Force Hotmail to display emails at full width\n.ExternalClass { // Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/\n &,\n & p, \n & span, \n & font, \n & td, \n & div {line-height: 100%;} \n} \n#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}\n\ndiv, p, a, li, td { -webkit-text-size-adjust: none; } // Override the minimum font size on the iPhone and iPad\np {margin: 1em 0;} // Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/\ntd { text-align: left; }\ntable, tr, td {\n padding: 0;\n vertical-align: top;\n}\ntable { // Remove spacing around Outlook 07, 10 tables\n border-spacing: 0;\n border-collapse: collapse;\n mso-table-lspace:0pt;\n mso-table-rspace:0pt;\n width: 100%;\n &.body {\n height: 100%;\n center { width: 100%; }\n }\n}\ntd {\n margin: 0;\n word-break: break-word;\n -webkit-hyphens: auto;\n -moz-hyphens: auto;\n hyphens: auto;\n border-collapse: collapse !important; // Outlook 07, 10 Padding issue: These \"newer\" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes.\n // More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/\n // http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/\n}\nimg {\n outline:none;\n text-decoration: none;\n -ms-interpolation-mode: bicubic; // \"-ms-interpolation-mode: bicubic\" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes)\n max-width: 100%;\n a & { border: none; } // \"border:none\" removes border when linking images.\n}\n.img-fix { display: block; } // Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the \"image_fix\" class to any image you need to fix.\nhr {\n // margin-left: ($gutter / 2);\n // margin-right: ($gutter / 2);\n margin: 0;\n height: 1px;\n color: map-get($color, border);\n background-color: map-get($color, border);\n border: none;\n}\nh1,h2,h3,h4,h5,h6{\n display:block;\n margin:0;\n padding:0;\n color: black !important; // Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support). Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.\n a { \n color: blue !important; \n &:active { color: red !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure.\n &:visited { color: purple !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. \n }\n}\n.full { width: 100%; }\n\n/* Typography */\n#outlook p { display: inline !important; }\n#outlook a { padding:0; } // Force Outlook to provide a \"view in browser\" menu link.\nbody, table.body {\n color: #222222;\n font-family: Helvetica, Arial, sans-serif;\n}\nsmall { font-size: 10px; }\na {\n color: map-get($color, link);\n text-decoration: none;\n &[href^=tel],\n &[href^=sms]{\n color:inherit;\n cursor:default;\n text-decoration:none;\n }\n}\np,a,li,td,blockquote { mso-line-height-rule:exactly; }\np,a,li,td,body,table,blockquote{\n -ms-text-size-adjust:100%;\n -webkit-text-size-adjust:100%;\n}\n\n/* Alignment */\n.center { \n &,\n table &, \n td &, \n h1 &, \n h2 &, \n h3 &, \n h4 &, \n h5 &, \n h6 &, \n p &, \n span & {\n text-align: center;\n }\n}\nspan.center {\n display: block;\n text-align: center;\n}\nimg.center {\n margin: 0 auto;\n float: none;\n}","// *** wrapper *** //\n\n// wrapper\ntable {\n // &.body center { min-width: $wrapper; } // Force gmail (App) show desktop version\n &.wrapper {\n max-width: $wrapper;\n // width: $wrapper; // Force gmail (App) show desktop version\n margin: 0 auto;\n text-align: inherit;\n }\n\n // For Apple Mail (it doesn't support max-width) \n // @include bp(max $wrapper) { \n // &[class=\"wrapper\"] { width: 92% !important; } \n // &[class=\"body\"] center { min-width: 0 !important; }\n // }\n @include bp(min ($wrapper + 1px)) { \n &[class=\"wrapper\"] { width: $wrapper !important; } \n }\n}","// *** row *** //\n\n// row\n.row { \n width: 100%;\n font-size: 0; // remove blank space between inline-block elements\n // Webkit: collapse white-space between units\n letter-spacing: -0.31em; \n // Webkit: fixes text-rendering: optimizeLegibility\n text-rendering: optimizespeed; \n // Sets the font stack to fonts known to work properly with the above letter\n // and word spacings. See: https://github.com/yahoo/pure/issues/41/\n // The following font stack makes gallery work on all known environments.\n // * FreeSans: Ships with many Linux distros, including Ubuntu\n // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and\n // Arial to get picked up by the browser, even though neither is available\n // in Chrome OS.\n // * Droid Sans: Ships with all versions of Android.\n // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.\n font-family: FreeSans, Arimo, \"Droid Sans\", Helvetica, Arial, sans-serif;\n\n // Opera as of 12 on Windows needs word-spacing.\n // The \".opera-only\" selector is used to prevent actual prefocus styling\n // and is not required in markup.\n .opera-only :-o-prefocus, & { word-spacing: -0.43em; }\n}\n","// *** col *** //\n\n@mixin col($key){\n // merge list items\n @each $item in $key {\n @if type-of($item) == 'list' {\n $key: join($item, reject($key, $item), 'space');\n }\n }\n \n $cols: ro-get-next($key, 'of', $cols);\n $gutter: $gutter;\n\n // set up column\n $col: 0;\n @if type-of($key) == 'number' {\n $col: $key;\n } @else if type-of($key) == 'list' {\n @if index($key, 'of') {\n $col: ro-get-prev($key, 'of');\n } @else {\n @each $item in $key {\n @if type-of($item) == 'number' and\n unitless($item) {\n $col: $item;\n }\n }\n }\n }\n\n // set up gutter\n @each $item in $key {\n @if type-of($item) == 'number' and \n not unitless($item) {\n $gutter: $item;\n }\n }\n // strip unit when gutter == 0\n @if strip-unit($gutter) == 0 {\n $gutter: 0;\n }\n \n $px_width: ($col * $content / $cols);\n $percent_width: percentage($col / $cols);\n\n // desktop, non-mediaquery\n @extend %col;\n min-width: $px_width;\n min-width: -webkit-calc(#{$percent_width});\n min-width: calc(#{$percent_width});\n width: $percent_width;\n width: -webkit-calc(#{$content * $faciend} - #{100% * $faciend});\n width: calc(#{$content * $faciend} - #{100% * $faciend});\n max-width: 100%;\n}\n\n%col {\n display: inline-block;\n font-size: 16px; // restore font-size\n letter-spacing: 0; // restore letter-spacing\n // padding: ($gutter / 2);\n\n // mediaquery\n @include bp(max $wrapper) {\n width: 100% !important;\n box-sizing: border-box;\n }\n}\n\n// generate css\n@if $generate-css {\n .col {\n padding: ($gutter / 2);\n @for $i from 1 through $cols {\n &-#{$i} {\n @include col($i of $cols);\n }\n }\n }\n}\n","// *** sub-col *** //\n\n// sub col\n@mixin sub-col($key){\n $cols: ro-get-next($key, 'of', $cols);\n\n // set up column\n $column: 0;\n @if type-of($key) == 'number' {\n $column: $key;\n } @else if type-of($key) == 'list' {\n @if index($key, 'of') {\n $column: ro-get-prev($key, 'of');\n } @else {\n @each $item in $key {\n @if type-of($item) == 'number' and\n unitless($item) {\n $column: $item;\n }\n }\n }\n }\n \n width: percentage($column / $cols);\n}","// *** gallery *** //\n\n@mixin gallery($key) {\n $count: 1;\n $row: $content;\n\n // set up per-row, gallery-row\n @if type-of($key) == 'number' {\n $count: $key;\n } @else if type-of($key) == 'list' {\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if unitless($item) {\n $count: $item;\n } @else {\n $row: $item;\n }\n }\n }\n }\n\n $px_width: ($row / $count);\n $percent_width: percentage(1 / $count);\n\n @extend %layout-base;\n > tbody > tr > td {\n @extend %layout-item-base;\n min-width: $px_width;\n width: $percent_width;\n min-width: -webkit-calc(#{$percent_width});\n min-width: calc(#{$percent_width});\n width: -webkit-calc(#{$row * $faciend} - #{100% * $faciend});\n width: calc(#{$row * $faciend} - #{100% * $faciend});\n max-width: 100%;\n }\n\n // constrict the images to container width\n img { max-width: $px_width; }\n}\n\n\n@if $generate-css {\n .gallery {\n @for $i from 2 through $gallery-cols {\n &-#{$i} {\n @include gallery($i center);\n }\n }\n }\n}\n\n@mixin gallery2($key) {\n $count-mobile: false;\n $count-desktop: false;\n $bp: false;\n\n @if index($key, 'to') {\n $count-mobile: args-get-prev($key, 'to');\n $count-desktop: args-get-next($key, 'to');\n }\n @each $item in $key {\n @if not $bp and type-of($item) == 'number' and not unitless($item) {\n $bp: $item;\n }\n }\n \n // set default values\n @if not $bp { $bp: $content; }\n @if not $count-mobile { $count-mobile: 1; }\n @if not $count-desktop { $count-desktop: 2; }\n\n // get width\n $width-mobile: percentage(1 / $count-mobile);\n $width-desktop: percentage(1 / $count-desktop);\n\n @extend %layout-base;\n > tbody > tr > td {\n @extend %layout-item-base;\n\n // 1. For Lotus Notes, Outlook for Windows, Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). They don't support calc.\n // 2. For older versions of Android (5.0-) and iOS (iOS7-)\n\n min-width: ($bp / $count-desktop); // 1\n width: $width-desktop; // 1\n\n max-width: $width-mobile; // for mobile\n min-width: -webkit-calc(#{$width-desktop}); // 2\n min-width: calc(#{$width-desktop}); // for desktop\n width: -webkit-calc(#{$bp * $faciend} - #{$width-mobile * $faciend}); // 2\n width: calc(#{$bp * $faciend} - #{$width-mobile * $faciend}); // breakpoint magic\n }\n}","// *** buttons *** //\n\n@mixin button ($key){\n $background-color: ro-get-type($key, 'color', false, '#3ab7e4');\n $padding: ro-get-type($key, 'string', $fe-button-radius-styles, '15px 20px');\n $radius: ro-get($key, $fe-button-radius-styles, false);\n\n display: inline-block;\n border-style: solid;\n text-align: center;\n box-sizing: border-box;\n\n // background-color\n @if $background-color {\n background-color: $background-color;\n border-color: $background-color;\n border-type: solid;\n color: contrast($background-color);\n }\n\n // padding\n @if $padding { border-width: unquote($padding); }\n\n // border-radius\n @if $radius == 'radius' { \n border-radius: $fe-button-radius; \n } @else if $radius == 'round' {\n border-radius: $fe-button-round;\n }\n\n}\n"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /demo/index-temp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fluid-email 7 | 8 | 630 | 631 | 632 | 636 | 637 | 638 | 642 | 643 | 649 | 650 | 651 | 652 | 653 | 654 | 665 | 666 | 667 | 995 | 996 | 997 | 1028 | 1029 | 1030 |
655 |
656 | 657 | 658 | 659 | 660 | 661 |
View this email in your browser
662 | 663 |
664 |
668 |
669 | 670 | 671 | 672 | 673 | 989 | 990 | 991 |
674 | 675 | 676 | 677 | 686 | 706 | 707 | 708 |
678 | 679 | 680 | 681 | 682 | 683 | 684 |
685 | 		687 | 688 | 689 | 690 | 702 | 703 | 704 |
691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 |
Greeks take Europe to the brink as showdown looms over bailout
Prime Minister Alexis Tsipras won a confidence vote in Parliament over his plans. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate suscipit, laudantium perspiciatis ipsum quaerat doloribus.
701 |
705 |
709 | 710 | 711 | 712 | 713 | 714 | 715 |
716 | 717 | 718 | 719 | 757 | 777 | 778 | 779 |
720 | 721 | 722 | 723 | 753 | 754 | 755 |
724 | 725 | 726 | 727 | 730 | 733 | 734 | 735 | 738 | 741 | 742 | 743 | 746 | 749 | 750 | 751 |
728 | 729 | 731 | Faith leaders join call for Britain to take in more Syrian refugees 732 |
736 | 737 | 739 | India bishop stresses need for Church to spread religious tolerance 740 |
744 | 745 | 747 | John I. William Jr. is first African American to head an ELCA college 748 |
752 |
756 | 		758 | 759 | 760 | 761 | 773 | 774 | 775 |
762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 |
An example of button
772 |
776 |
780 | 781 | 782 | 783 | 786 | 787 | 788 |
784 |
785 |
789 | 790 | 791 | 792 | 812 | 832 | 852 | 853 | 854 |
793 | 794 | 795 | 796 | 808 | 809 | 810 |
797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 |
Christian Bakery Closed for Refusing Lesbian Wedding Cake Breaks Record
807 |
811 | 		813 | 814 | 815 | 816 | 828 | 829 | 830 |
817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 |
Luis Palau, Years After China Gaffe, Maintains That Evangelists
827 |
831 | 		833 | 834 | 835 | 836 | 848 | 849 | 850 |
837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 |
Imprisoned Pastor Saeed Abedini Has Dream He Will Be Free by Daughter
847 |
851 |
855 | 856 | 857 | 858 | 861 | 862 | 863 |
859 |
860 |
864 | 865 | 866 | 867 | 887 | 907 | 927 | 947 | 967 | 985 | 986 | 987 |
868 | 869 | 870 | 871 | 883 | 884 | 885 |
872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 |
Christian Bakery
882 |
886 | 		888 | 889 | 890 | 891 | 903 | 904 | 905 |
892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 |
Luis Palau
902 |
906 | 		908 | 909 | 910 | 911 | 923 | 924 | 925 |
912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 |
Imprisoned Pastor
922 |
926 | 		928 | 929 | 930 | 931 | 943 | 944 | 945 |
932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 |
Christian Bakery
942 |
946 | 		948 | 949 | 950 | 951 | 963 | 964 | 965 |
952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 |
Luis Palau
962 |
966 | 		968 | 969 | 970 | 971 | 981 | 982 | 983 |
972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 |
Imprisoned Pastor
980 |
984 |
988 |
992 | 993 |
994 |
998 |
999 | 1000 | 1001 | 1002 | 1003 | 1022 | 1023 | 1024 |
1004 | 1005 | 1006 | 1007 | 1013 | 1014 | 1015 | 1018 | 1019 | 1020 |
1008 |   1009 |   1010 |   1011 | 1012 |
This email was sent to test@gmail.com
1016 | Unsubscribe | Privacy Policy | User Agreement | Contact Us
1017 | Brand · 711 5th Avenue, New York City, NY · New York, Ny 10007
1021 |
1025 | 1026 |
1027 |
1031 | 1032 | -------------------------------------------------------------------------------- /demo/css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.css","sources":["main.scss","../../scss/_fluid-email.scss","../../scss/base/_variables.scss","../../scss/base/_functions.scss","../../scss/base/_placeholder.scss","../../scss/addons/_breakpoint.scss","../../scss/addons/_visible.scss","../../scss/addons/_hidden.scss","../../scss/addons/_type.scss","../../scss/reset/_reset.scss","../../scss/layout/_wrapper.scss","../../scss/layout/_row.scss","../../scss/layout/_col.scss","../../scss/layout/_sub-col.scss","../../scss/layout/_gallery.scss","../../scss/components/_button.scss"],"sourcesContent":["$content: 584px;\n@import '../../scss/fluid-email';\n\ntd.gutter { padding: ($gutter / 2); }\n#backgroundTable { background-color: #eee; }\n.wrapper.main { background-color: #fff; }\n.topbar {\n padding: 10px;\n background-color: #444;\n color: #fff;\n a {\n color: #fff;\n text-decoration: underline;\n }\n}\n.view { \n width: 100%;\n font-size: 11px;\n text-align: left;\n}\n.h4 {\n @include type(23px 1.2 bold $georgia);\n}\n.h5 {\n @include type(13px 1.3 bold $georgia);\n padding-bottom: 10px;\n}\n.h6 {\n @include type(13px 1.3);\n padding-top: 6px;\n}\n.p {\n @include type(13px $georgia);\n padding: 13px 0;\n}\n.gap {\n padding-top: 20px;\n}\n.logo {\n font-size: 36px !important;\n}\n.date {\n padding-top: 30px;\n text-align: right;\n font-size: 12px;\n color: #999;\n a { \n color: #999; \n text-decoration: underline;\n }\n}\n.button { \n @include button(#3ab7e4 radius); \n margin-top: 10px;\n color: #fff !important;\n &-2 {\n @include button(#D80017 round);\n color: #fff !important;\n margin-top: 10px;\n }\n}\n.topnews-img {\n a { display: block;}\n}\n.related {\n td { padding-bottom: 16px; }\n}\n.img-related {\n width: 107px;\n padding-right: 16px;\n img { vertical-align: top; }\n}\n.img-box { \n padding-right: 10px; \n padding-bottom: 10px;\n}\n.sub-col {\n &-4 { @include sub-col(4 of 12); }\n &-8 { @include sub-col(8 of 12); }\n}\n.copyright {\n padding-bottom: 30px;\n line-height: 1.6;\n font-size: 12px;\n color: #999;\n a { color: #999; }\n .primary { color: #333; }\n}\n\n.gallery2 {\n @include gallery2(1 to 2 480px);\n} \n.gallery3 {\n @include gallery2(1 to 3 300px);\n} \n.gallery6 {\n @include gallery2(3 to 6 180px);\n} \n[class*='gallery'] img { width: 100%; }","// *** fluid email *** //\n\n// base\n@import \"base/variables\";\n@import \"base/functions\";\n@import \"base/placeholder\";\n\n// addons\n@import \"addons/breakpoint\";\n@import \"addons/visible\";\n@import \"addons/hidden\";\n@import \"addons/type\";\n\n// reset\n@import \"reset/reset\";\n\n// layout\n@import \"layout/wrapper\";\n@import \"layout/row\";\n@import \"layout/col\";\n@import \"layout/sub-col\";\n@import \"layout/gallery\";\n\n// components\n@import \"components/button\";\n","// variables\n//-----------------------------\n\n// generate css\n$generate-css: true !default;\n$breakpoint-fix: true !default;\n\n// layout\n$wrapper: 600px !default;\n$content: 560px !default;\n$cols: 12 !default;\n$gutter: 16px !default;\n\n$gallery-cols: 6 !default;\n$gallery-align: left !default;\n\n$faciend: 1000;\n\n// font\n$helvetica: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";\n$arial: \"Arial, Helvetica, sans-serif\";\n$opensans: \"'Open Sans', Arial, sans-serif\";\n$lato: \"'Lato', Arial, sans-serif\";\n$oswald: \"'Oswald', Arial, sans-serif\";\n$georgia: \"Georgia, 'Times New Roman', Times, Baskerville, serif\";\n\n// color\n$color: (\n 'border': #e6e6e6,\n 'brand': #41bae9,\n 'bg': #f1f1f1,\n 'link': #333,\n);\n\n// base\n$fe-em-base: 16px !default;\n$fe-rem-base: 16px !default;\n\n// breakpoint\n$ro-media-type: all, aural, braille, handheld, print, projection, screen, tty, tv, embossed !default;\n$ro-media-features: 'width', 'height' !default;\n\n// type\n$fe-font-weights: thin, hairline, extra light, ultra light, lighter, light, normal, medium, semi bold, demi bold, bold, bolder, extra bold, black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit !default;\n$fe-font-styles: italic, oblique, style-normal, style-inherit !default;\n$fe-text-aligns: left, right, center, justify, align-inherit !default;\n$fe-text-transforms: capitalize, uppercase, lowercase, none, full-width, transform-inherit !default;\n\n// media list\n$fe-media-type: 'media', 'media-body';\n$fe-media-direction: left, right;\n\n// button\n$fe-button-radius-styles: 'radius', 'round' !default;\n$fe-button-radius: 0.45em !default;\n$fe-button-round: 1000px !default;\n$fe-button-hover-lightness: 10% !default;\n\n// visibility\n$fe-even: 2 4 6 8 10 12 14 16 18 20;\n$fe-odd: 1 3 5 7 9 11 13 15 17 19;\n","// *** function *** //\n\n// em\n@function em($pxval, $base: $fe-em-base) {\n @if unit($pxval) == 'em' or unit($pxval) == 'rem' { @return $pxval; }\n @else {\n @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); }\n @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); }\n @return ($pxval / $base) * 1em;\n } \n}\n\n// rem\n@function rem($pxval, $base: $fe-rem-base) {\n @if unit($pxval) == 'rem' or unit($pxval) == 'em' { @return $pxval; }\n @else {\n @if unit($pxval) == 'px' or unitless($pxval) { $pxval: strip-unit($pxval); }\n @if unit($base) == 'px' or unitless($base) { $base: strip-unit($base); }\n @return ($pxval / $base) * 1rem;\n } \n}\n\n// strip-unit\n@function strip-unit($val) {\n @return ($val / ($val * 0 + 1));\n}\n\n// opposite\n@function opposite($direction){\n @if $direction == left { \n @return right; \n } @else if $direction == right { \n @return left; \n } @else if $direction == top { \n @return bottom; \n } @else if $direction == bottom { \n @return top; \n } @else { \n @return false; \n }\n}\n\n// reject\n@function reject($list, $val){\n $_return: ();\n\n @if type-of($list) == 'list' {\n @for $i from 1 through length($list) {\n @if nth($list, $i) != $val {\n $_return: append($_return, nth($list, $i));\n }\n }\n } @else {\n $_return: $list;\n }\n\n @return $_return;\n}\n\n// ro-get\n@function ro-get($key, $arg, $def:false){\n $_return: $def;\n\n @if type-of($arg) == 'string' {\n @if index($key, $arg) {\n $_return: true;\n } \n } @else if type-of($arg) == 'list' {\n @each $item in $arg {\n @if index($key, $item) {\n $_return: $item;\n } \n }\n }\n\n @return $_return;\n}\n\n// ro-get-type\n@function ro-get-type($key, $arg, $check:false, $def:false) {\n $_return: $def;\n\n @each $item in $key {\n @if type-of($item) == $arg {\n @if $check {\n @if not index($check, $item) {\n $_return: $item;\n }\n } @else {\n $_return: $item;\n }\n }\n }\n\n @return $_return;\n}\n\n// ro-get-prev\n@function ro-get-prev($list, $val, $def:false) {\n $this-index: index($list, $val);\n @if $this-index {\n @return nth($list, ($this-index - 1));\n } @else {\n @return $def;\n }\n}\n\n// ro-get-next\n@function ro-get-next($list, $val, $def:false) {\n $this-index: index($list, $val);\n @if $this-index {\n @return nth($list, ($this-index + 1));\n } @else {\n @return $def;\n }\n}\n\n// selector functions\n@function selector-str(){\n $sel: &;\n $sel-str: (nth($sel, 1) + '');\n\n @return $sel-str;\n}\n@function selector-str-sliced($len){\n @return str-slice(selector-str(), $len, str-length(selector-str())) + ', ';\n}\n@function str-remove-comma($key){\n @return str-slice($key, 1, (str-length($key) - 2));\n}\n\n\n// plus-one\n@function plus-one ($key) {\n @if type-of($key) == 'number' {\n @if unitless($key) {\n $key: $key + 1;\n } @else if unit($key) == 'px' {\n $key: $key + 1px;\n } @else if unit($key) == 'em' {\n $key: $key + em(1);\n } @else if unit($key) == 'rem' {\n $key: $key + rem(1);\n }\n }\n\n @return $key;\n}\n\n// minus-one\n@function minus-one ($key) {\n @if type-of($key) == 'number' {\n @if unitless($key) {\n $key: $key - 1;\n } @else if unit($key) == 'px' {\n $key: $key - 1px;\n } @else if unit($key) == 'em' {\n $key: $key - em(1);\n } @else if unit($key) == 'rem' {\n $key: $key - rem(1);\n }\n }\n\n @return $key;\n}\n\n// str-cut\n@function str-cut($string, $separator, $position) {\n $i: 1;\n $final-string: '';\n $length: str-length($string);\n\n @if str-index($string, $separator) {\n $i: str-index($string, $separator);\n @if $position == after {\n $i: $i + 1;\n $final-string: str-slice($string, $i, $length);\n } @else if $position == before {\n $i: $i - 1;\n $final-string: str-slice($string, 1, $i);\n }\n } @else {\n $final-string: $string;\n }\n\n @return $final-string;\n}\n\n// span-calc\n@function span-calc ($col, $cols, $gutter){\n $_return: '';\n\n $col-percentage: percentage($col / $cols);\n $col-gutter: ($gutter * $col / $cols);\n $_return: '#{$col-percentage}' + ' + ' + '#{$col-gutter}';\n @return $_return;\n}\n\n@function args-get($key, $arg, $def:false){\n $result: $def;\n\n // string: return true/false when exists\n @if type-of($arg) == 'string' {\n @if index($key, $arg) {\n $result: true;\n } \n } @else if type-of($arg) == 'list' {\n\n // list: return item itself when the item exists\n @each $item in $arg {\n @if index($key, $item) {\n $result: $item;\n } \n }\n }\n\n @return $result;\n}\n\n@function args-get-prev($list, $val, $default:false) {\n @if type-of($list) == 'list' {\n $index: index($list, $val);\n\n @if $index {\n @if $index >= 2 {\n @return nth($list, ($index - 1));\n } @else {\n \n @return $default;\n }\n } @else {\n\n @return $default;\n }\n } @else {\n\n @return $default;\n }\n}\n\n@function args-get-next($list, $val, $default:false) {\n @if type-of($list) == 'list' {\n $index: index($list, $val);\n\n @if $index {\n @if length($list) >= ($index + 1) {\n @return nth($list, ($index + 1));\n } @else {\n \n @return $default;\n }\n } @else {\n\n @return $default;\n }\n } @else {\n\n @return $default;\n }\n}\n\n","// *** placeholder *** //\n%layout-base {\n // &, > tbody, > tbody > tr {text-align: $gallery-align; }\n font-size: 0; // remove blank space between inline-block elements\n // Webkit: collapse white-space between units\n // letter-spacing: -0.31em; \n // Webkit: fixes text-rendering: optimizeLegibility\n text-rendering: optimizespeed; \n // Sets the font stack to fonts known to work properly with the above letter\n // and word spacings. See: https://github.com/yahoo/pure/issues/41/\n // The following font stack makes gallery work on all known environments.\n // * FreeSans: Ships with many Linux distros, including Ubuntu\n // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and\n // Arial to get picked up by the browser, even though neither is available\n // in Chrome OS.\n // * Droid Sans: Ships with all versions of Android.\n // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.\n font-family: FreeSans, Arimo, \"Droid Sans\", Helvetica, Arial, sans-serif;\n\n // Opera as of 12 on Windows needs word-spacing.\n // The \".opera-only\" selector is used to prevent actual prefocus styling\n // and is not required in markup.\n .opera-only :-o-prefocus, & { word-spacing: -0.43em; }\n}\n%layout-item-base {\n display: inline-block;\n font-size: 16px; // restore font-size\n // letter-spacing: 0; // restore letter-spacing\n}\n","// *** breakpoint *** //\n@mixin ro-breakpoint($key){\n $condition: args-get($key, ('min' 'max'), 'min');\n $media-type: args-get($key, $ro-media-type);\n $media-feature: args-get($key, $ro-media-features, 'width');\n\n $media-string: if($media-type, '#{$media-type} and ', '');\n $selector: '';\n $bps-em: ();\n\n // get breakpoints\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if strip-unit($item) == 0 {\n $item: 0em;\n } @else {\n $item: em($item);\n }\n\n $bps-em: append($bps-em, $item);\n }\n }\n $length: length($bps-em);\n\n @if $length == 1 {\n $bp: if($breakpoint-fix and $condition == 'max', (nth($bps-em, 1) - em(1)), nth($bps-em, 1));\n $selector: $media-string + '(#{$condition}-#{$media-feature}: #{$bp})';\n } @else if $length >= 2 {\n @for $i from 1 through $length {\n @if number-odd-even($i) == 'odd' {\n $selector: $selector + ', ' + $media-string + ' (min-#{$media-feature}: #{nth($bps-em, $i)})';\n } @else if number-odd-even($i) == 'even' {\n $bp-max: if($breakpoint-fix, (nth($bps-em, $i) - em(1)), nth($bps-em, $i));\n $selector: $selector + 'and (max-#{$media-feature}: #{$bp-max})';\n }\n }\n // remove the first ', '\n @if str-index($selector, ', ') == 1 { $selector: str-slice($selector, 3); }\n }\n\n // *** output *** //\n @media #{unquote($selector)} { @content; }\n}\n\n@mixin bp($key) {\n @include ro-breakpoint($key) {\n @content;\n };\n}","@import \"breakpoint\";\n\n// *** visible *** //\n@mixin visible($key){\n $new-key: ();\n\n @if type-of($key) == 'number' {\n @include bp('max' $key) { display: none !important; }\n } @else if type-of($key) == list {\n @if nth($key, 1) == 0 {\n $key: list-remove($key, 0);\n } @else {\n $new-key: append($new-key, 0);\n }\n\n // append $key to $new-key \n @each $item in $key {\n $new-key: append($new-key, $item);\n }\n\n @include bp($new-key) { display: none !important; }\n }\n}\n","@import \"breakpoint\";\n\n// *** hidden *** //\n@mixin hidden($key){\n @if type-of($key) == 'number' {\n @include bp('min' $key) { display: none !important; }\n } @else if type-of($key) == list {\n @include bp($key) { display: none !important; }\n }\n}\n","// *** type *** //\n@mixin type($key){\n $check: join(join(join($fe-font-weights, $fe-font-styles), $fe-text-aligns), $fe-text-transforms);\n\n // set up font-size, font-weight, line-height\n $font-size: null;\n $font-weight: null;\n $line-height: null;\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if unitless($item) {\n @if $item >= 100 {\n $font-weight: $item;\n } @else {\n $line-height: $item;\n }\n } @else {\n $font-size: $item;\n }\n }\n }\n\n // set up font-family, font-weight, font-style, text-align, text-transform\n $font-family: ro-get-type($key, 'string', $check);\n $font-weight: ro-get($key, $fe-font-weights); \n $font-style: ro-get($key, $fe-font-styles);\n $text-align: ro-get($key, $fe-text-aligns);\n $text-transform: ro-get($key, $fe-text-transforms);\n\n // remove prefix\n @if type-of($font-weight) == 'string' {\n $font-weight: str-cut($font-weight, '-', after);\n }\n @if type-of($font-style) == 'string' {\n $font-style: str-cut($font-style, '-', after);\n }\n @if type-of($text-align) == 'string' {\n $text-align: str-cut($text-align, '-', after);\n }\n @if type-of($text-transform) == 'string' {\n $text-transform: str-cut($text-transform, '-', after);\n }\n\n\n // *** output *** //\n @if $font-size {\n font-size: $font-size;\n @if unit($font-size) == 'px' {\n font-size: rem($font-size);\n }\n }\n @if $line-height {\n line-height: $line-height;\n }\n @if $font-weight {\n font-weight: $font-weight;\n }\n @if $font-style {\n font-style: $font-style;\n }\n @if $text-align {\n text-align: $text-align;\n }\n @if $text-transform {\n text-transform: $text-transform;\n }\n @if $font-family {\n font-family: unquote($font-family);\n }\n}\n","// *** reset *** //\n\nbody{ // Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.\n width:100% !important;\n min-width: 100%;\n height: auto;\n -webkit-text-size-adjust:100%;\n -ms-text-size-adjust:100%;\n margin:0;\n padding:0;\n}\n// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. \n.ExternalClass {width:100%;} // Force Hotmail to display emails at full width\n.ExternalClass { // Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/\n &,\n & p, \n & span, \n & font, \n & td, \n & div {line-height: 100%;} \n} \n#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}\n\ndiv, p, a, li, td { -webkit-text-size-adjust: none; } // Override the minimum font size on the iPhone and iPad\np {margin: 1em 0;} // Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/\ntd { text-align: left; }\ntable, tr, td {\n padding: 0;\n vertical-align: top;\n}\ntable { // Remove spacing around Outlook 07, 10 tables\n border-spacing: 0;\n border-collapse: collapse;\n mso-table-lspace:0pt;\n mso-table-rspace:0pt;\n width: 100%;\n &.body {\n height: 100%;\n center { width: 100%; }\n }\n}\ntd {\n margin: 0;\n word-break: break-word;\n -webkit-hyphens: auto;\n -moz-hyphens: auto;\n hyphens: auto;\n border-collapse: collapse !important; // Outlook 07, 10 Padding issue: These \"newer\" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes.\n // More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/\n // http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/\n}\nimg {\n outline:none;\n text-decoration: none;\n -ms-interpolation-mode: bicubic; // \"-ms-interpolation-mode: bicubic\" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes)\n max-width: 100%;\n a & { border: none; } // \"border:none\" removes border when linking images.\n}\n.img-fix { display: block; } // Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the \"image_fix\" class to any image you need to fix.\nhr {\n // margin-left: ($gutter / 2);\n // margin-right: ($gutter / 2);\n margin: 0;\n height: 1px;\n color: map-get($color, border);\n background-color: map-get($color, border);\n border: none;\n}\nh1,h2,h3,h4,h5,h6{\n display:block;\n margin:0;\n padding:0;\n color: black !important; // Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support). Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.\n a { \n color: blue !important; \n &:active { color: red !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure.\n &:visited { color: purple !important; } // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. \n }\n}\n.full { width: 100%; }\n\n/* Typography */\n#outlook p { display: inline !important; }\n#outlook a { padding:0; } // Force Outlook to provide a \"view in browser\" menu link.\nbody, table.body {\n color: #222222;\n font-family: Helvetica, Arial, sans-serif;\n}\nsmall { font-size: 10px; }\na {\n color: map-get($color, link);\n text-decoration: none;\n &[href^=tel],\n &[href^=sms]{\n color:inherit;\n cursor:default;\n text-decoration:none;\n }\n}\np,a,li,td,blockquote { mso-line-height-rule:exactly; }\np,a,li,td,body,table,blockquote{\n -ms-text-size-adjust:100%;\n -webkit-text-size-adjust:100%;\n}\n\n/* Alignment */\n.center { \n &,\n table &, \n td &, \n h1 &, \n h2 &, \n h3 &, \n h4 &, \n h5 &, \n h6 &, \n p &, \n span & {\n text-align: center;\n }\n}\nspan.center {\n display: block;\n text-align: center;\n}\nimg.center {\n margin: 0 auto;\n float: none;\n}","// *** wrapper *** //\n\n// wrapper\ntable {\n // &.body center { min-width: $wrapper; } // Force gmail (App) show desktop version\n &.wrapper {\n max-width: $wrapper;\n // width: $wrapper; // Force gmail (App) show desktop version\n margin: 0 auto;\n text-align: inherit;\n }\n\n // For Apple Mail (it doesn't support max-width) \n // @include bp(max $wrapper) { \n // &[class=\"wrapper\"] { width: 92% !important; } \n // &[class=\"body\"] center { min-width: 0 !important; }\n // }\n @include bp(min ($wrapper + 1px)) { \n &[class=\"wrapper\"] { width: $wrapper !important; } \n }\n}","// *** row *** //\n\n// row\n.row { \n width: 100%;\n font-size: 0; // remove blank space between inline-block elements\n // Webkit: collapse white-space between units\n letter-spacing: -0.31em; \n // Webkit: fixes text-rendering: optimizeLegibility\n text-rendering: optimizespeed; \n // Sets the font stack to fonts known to work properly with the above letter\n // and word spacings. See: https://github.com/yahoo/pure/issues/41/\n // The following font stack makes gallery work on all known environments.\n // * FreeSans: Ships with many Linux distros, including Ubuntu\n // * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and\n // Arial to get picked up by the browser, even though neither is available\n // in Chrome OS.\n // * Droid Sans: Ships with all versions of Android.\n // * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.\n font-family: FreeSans, Arimo, \"Droid Sans\", Helvetica, Arial, sans-serif;\n\n // Opera as of 12 on Windows needs word-spacing.\n // The \".opera-only\" selector is used to prevent actual prefocus styling\n // and is not required in markup.\n .opera-only :-o-prefocus, & { word-spacing: -0.43em; }\n}\n","// *** col *** //\n\n@mixin col($key){\n // merge list items\n @each $item in $key {\n @if type-of($item) == 'list' {\n $key: join($item, reject($key, $item), 'space');\n }\n }\n \n $cols: ro-get-next($key, 'of', $cols);\n $gutter: $gutter;\n\n // set up column\n $col: 0;\n @if type-of($key) == 'number' {\n $col: $key;\n } @else if type-of($key) == 'list' {\n @if index($key, 'of') {\n $col: ro-get-prev($key, 'of');\n } @else {\n @each $item in $key {\n @if type-of($item) == 'number' and\n unitless($item) {\n $col: $item;\n }\n }\n }\n }\n\n // set up gutter\n @each $item in $key {\n @if type-of($item) == 'number' and \n not unitless($item) {\n $gutter: $item;\n }\n }\n // strip unit when gutter == 0\n @if strip-unit($gutter) == 0 {\n $gutter: 0;\n }\n \n $px_width: ($col * $content / $cols);\n $percent_width: percentage($col / $cols);\n\n // desktop, non-mediaquery\n @extend %col;\n min-width: $px_width;\n min-width: -webkit-calc(#{$percent_width});\n min-width: calc(#{$percent_width});\n width: $percent_width;\n width: -webkit-calc(#{$content * $faciend} - #{100% * $faciend});\n width: calc(#{$content * $faciend} - #{100% * $faciend});\n max-width: 100%;\n}\n\n%col {\n display: inline-block;\n font-size: 16px; // restore font-size\n letter-spacing: 0; // restore letter-spacing\n // padding: ($gutter / 2);\n\n // mediaquery\n @include bp(max $wrapper) {\n width: 100% !important;\n box-sizing: border-box;\n }\n}\n\n// generate css\n@if $generate-css {\n .col {\n padding: ($gutter / 2);\n @for $i from 1 through $cols {\n &-#{$i} {\n @include col($i of $cols);\n }\n }\n }\n}\n","// *** sub-col *** //\n\n// sub col\n@mixin sub-col($key){\n $cols: ro-get-next($key, 'of', $cols);\n\n // set up column\n $column: 0;\n @if type-of($key) == 'number' {\n $column: $key;\n } @else if type-of($key) == 'list' {\n @if index($key, 'of') {\n $column: ro-get-prev($key, 'of');\n } @else {\n @each $item in $key {\n @if type-of($item) == 'number' and\n unitless($item) {\n $column: $item;\n }\n }\n }\n }\n \n width: percentage($column / $cols);\n}","// *** gallery *** //\n\n@mixin gallery($key) {\n $columns: 1;\n $item-width-max: $content;\n\n // set up per-row, gallery-row\n @if type-of($key) == 'number' {\n $columns: $key;\n } @else if type-of($key) == 'list' {\n @each $item in $key {\n @if type-of($item) == 'number' {\n @if unitless($item) {\n $columns: $item;\n } @else {\n $item-width-max: $item;\n }\n }\n }\n }\n\n $px_width: ($item-width-max / $columns);\n $percent_width: percentage(1 / $columns);\n\n @extend %layout-base;\n\n > tbody > tr > td {\n @extend %layout-item-base;\n \n min-width: $px_width;\n width: $percent_width;\n min-width: -webkit-calc(#{$percent_width});\n min-width: calc(#{$percent_width});\n width: -webkit-calc(#{$item-width-max * $faciend} - #{100% * $faciend});\n width: calc(#{$item-width-max * $faciend} - #{100% * $faciend});\n max-width: 100%;\n }\n\n // constrict the images to container width\n img { max-width: $px_width; }\n}\n\n\n@if $generate-css {\n .gallery {\n @for $i from 2 through $gallery-cols {\n &-#{$i} {\n @include gallery($i center);\n }\n }\n }\n}\n\n@mixin gallery2($key) {\n $column-mobile: false;\n $column-desktop: false;\n $item-width-max: false;\n\n @if index($key, 'to') {\n $column-mobile: args-get-prev($key, 'to');\n $column-desktop: args-get-next($key, 'to');\n }\n @each $item in $key {\n @if not $item-width-max and type-of($item) == 'number' and not unitless($item) {\n $item-width-max: $item;\n }\n }\n \n // set default values\n @if not $item-width-max { $item-width-max: $content; }\n @if not $column-mobile { $column-mobile: 1; }\n @if not $column-desktop { $column-desktop: 2; }\n\n // get width\n $width-mobile: percentage(1 / $column-mobile);\n $width-desktop: percentage(1 / $column-desktop);\n\n @extend %layout-base;\n > tbody > tr > td {\n @extend %layout-item-base;\n\n // 1. For Lotus Notes, Outlook for Windows, Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). They don't support calc.\n // 2. For older versions of Android (5.0-) and iOS (iOS7-)\n\n min-width: ($item-width-max / $column-desktop); // 1\n width: $width-desktop; // 1\n\n max-width: $width-mobile; // for mobile\n min-width: -webkit-calc(#{$width-desktop}); // 2\n min-width: calc(#{$width-desktop}); // for desktop\n width: -webkit-calc(#{$item-width-max * $faciend} - #{$width-mobile * $faciend}); // 2\n width: calc(#{$item-width-max * $faciend} - #{$width-mobile * $faciend}); // breakpoint magic\n }\n}","// *** buttons *** //\n\n@mixin button ($key){\n $background-color: ro-get-type($key, 'color', false, '#3ab7e4');\n $padding: ro-get-type($key, 'string', $fe-button-radius-styles, '15px 20px');\n $radius: ro-get($key, $fe-button-radius-styles, false);\n\n display: inline-block;\n border-style: solid;\n text-align: center;\n box-sizing: border-box;\n\n // background-color\n @if $background-color {\n background-color: $background-color;\n border-color: $background-color;\n border-type: solid;\n color: contrast($background-color);\n }\n\n // padding\n @if $padding { border-width: unquote($padding); }\n\n // border-radius\n @if $radius == 'radius' { \n border-radius: $fe-button-radius; \n } @else if $radius == 'round' {\n border-radius: $fe-button-round;\n }\n\n}\n"],"names":[],"mappings":"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"} --------------------------------------------------------------------------------