From: Tim Hartwick Date: Mon, 18 Jan 2016 23:20:45 +0000 (-0800) Subject: Big thing happenin. Adding td's, changin up the padding, all sorts of stuff. Small... X-Git-Tag: v2.0.0-rc.1~43 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=28cd0f86c16c29b468cb1e169548711468dc253d;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Big thing happenin. Adding td's, changin up the padding, all sorts of stuff. Small and large grid tested and cleared on litmus --- diff --git a/scss/ink.scss b/scss/ink.scss index 8598e31a..9b42bd39 100755 --- a/scss/ink.scss +++ b/scss/ink.scss @@ -115,3 +115,7 @@ table.columns .right-text-pad { padding-right: 10px !important; } } + +.my-class { + background: red; +} diff --git a/scss/ink/_functions.scss b/scss/ink/_functions.scss index 8ab663a8..6a96fdb8 100755 --- a/scss/ink/_functions.scss +++ b/scss/ink/_functions.scss @@ -40,6 +40,6 @@ $modules: () !default; @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000; } -@function grid-calc-px($colNumber, $totalColumns, $conWidth, $colGutter) { - @return (($conWidth - ($totalColumns - 1) * $colGutter) / $totalColumns * $colNumber + ($colNumber - 1) * $colGutter); +@function grid-calc-px($columnNumber, $totalColumns, $containerWidth) { + @return ($containerWidth / $totalColumns * $columnNumber - $grid-column-gutter); } \ No newline at end of file diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss index 532fe09a..22ff7e46 100755 --- a/scss/ink/components/_global.scss +++ b/scss/ink/components/_global.scss @@ -52,10 +52,6 @@ $white: #fefefe !default; /// @type Color $pre-color: #ff6908 !default; -/// Global column gutter spacing. -/// @type Number -$column-gutter: 20px !default; - /// Global width of the container. /// @type Number $container-width: 580px !default; @@ -71,3 +67,7 @@ $global-radius: 3px !default; /// Global rounded radius of rounded-corners. /// @type Number $global-rounded: 500px !default; + +/// Default gutter for the grid system +/// @type Number +$grid-column-gutter: 16px; \ No newline at end of file diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss index c11a6380..3216b149 100755 --- a/scss/ink/components/_grid.scss +++ b/scss/ink/components/_grid.scss @@ -47,80 +47,95 @@ table.container table.row { display: block; } -table.wrapper { - padding: $wrapper-padding-top $column-gutter 0 0; - position: relative; -} - +//Begin new gutter! td.columns, -td.column { +td.column, +th.columns, +th.column { margin: 0 auto; + padding-left: $grid-column-gutter; } -table.columns td, -table.column td { - padding: 0 0 $column-padding-bottom; -} - -table.row td.last, -table.container td.last { - padding-right: 0; +td.columns.last, +td.column.last, +th.columns.last, +th.column.last { + padding-right: $grid-column-gutter; } @for $i from 1 through $grid-column-count { - td.large-#{$i} { - width: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter); + td.large-#{$i}, + th.large-#{$i} { + width: grid-calc-px($i, $grid-column-count, $container-width); + padding-left: $grid-column-gutter / 2; + padding-right: $grid-column-gutter / 2; + } + + td.large-#{$i}.first, + th.large-#{$i}.first { + padding-left: $grid-column-gutter; + } + + td.large-#{$i}.last, + th.large-#{$i}.last { + padding-right: $grid-column-gutter; + } + + td.large-#{$i}.collapse, + th.large-#{$i}.collapse { + padding-right: 0; + padding-left: 0; + width: grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter; } } @for $i from 1 through $grid-column-count { td.large-#{$i} center { - min-width: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter); + min-width: grid-calc-px($i, $grid-column-count, $container-width); } } @for $i from 1 through $grid-column-count { .body .columns td.large-#{$i}, - .body .column td.large-#{$i} { + .body .column td.large-#{$i}, + .body .columns th.large-#{$i}, + .body .column th.large-#{$i} { width: grid-calc-pct($i, $grid-column-count); } } @for $i from 1 through ($grid-column-count - 1) { - td.offset-by-#{$i} { - padding-left: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter) + $column-gutter; + td.offset-by-#{$i}, + th.offset-by-#{$i} { + padding-left: grid-calc-px($i, $grid-column-count, $container-width); } } -td.expander { +td.expander, +th.expander { visibility: hidden; width: 0; padding: 0 !important; } -table.columns .text-pad, -table.column .text-pad { - padding-left: $text-padding; - padding-right: $text-padding; -} - -table.columns .left-text-pad, -table.columns .text-pad-left, -table.column .left-text-pad, -table.column .text-pad-left { - padding-left: $text-padding; -} - -table.columns .right-text-pad, -table.columns .text-pad-right, -table.column .right-text-pad, -table.column .text-pad-right { - padding-right: $text-padding; -} +// table.columns .text-pad, +// table.column .text-pad { +// padding-left: $text-padding; +// padding-right: $text-padding; +// } +// table.columns .left-text-pad, +// table.columns .text-pad-left, +// table.column .left-text-pad, +// table.column .text-pad-left { +// padding-left: $text-padding; +// } +// table.columns .right-text-pad, +// table.columns .text-pad-right, +// table.column .right-text-pad, +// table.column .text-pad-right { +// padding-right: $text-padding; +// } -table.gutter { - margin: 10px; -} diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss index ffd2da96..750055e7 100755 --- a/scss/ink/components/_media-query.scss +++ b/scss/ink/components/_media-query.scss @@ -31,69 +31,64 @@ $small-range: $container-width !default; width: $small-container-width !important; } - table[class="body"] .row { - // width: 100% !important; - // display: block !important; - } - -// Brandon no likey - // table[class="body"] .wrapper { - // display: block !important; - // padding-right: 0 !important; - // } table[class="body"] .columns, table[class="body"] .column { - display: block !important; - float: left !important; height: auto !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - // table[class="body"] .wrapper.first .columns, - // table[class="body"] .wrapper.first .column { - // display: table !important; - // } - - // table[class="body"] table.columns td, - // table[class="body"] table.column td { - // width: 100% !important; - // } - @for $i from 1 through $grid-column-count { - td.small-#{$i} { - width: grid-calc-pct($i, $grid-column-count) !important; } - } + td.small-#{$i}, + th.small-#{$i} { + display: inline-block !important; - td.small-12 { - display: block !important; + width: grid-calc-pct($i, $grid-column-count) !important; + } } - - @for $i from 1 through $grid-column-count { + @for $i from 1 through ($grid-column-count - 1) { .body .columns td.small-#{$i}, .body .column td.small-#{$i}, - td.small-#{$i} center { + td.small-#{$i} center, + + .body .columns th.small-#{$i}, + .body .column th.small-#{$i}, + th.small-#{$i} center { + display: inline-block !important; width: grid-calc-pct($i, $grid-column-count) !important; } } - @for $i from 1 through $grid-column-count { + + @for $i from 1 through ($grid-column-count - 1) { table[class="body"] .columns td.small-#{$i}, - table[class="body"] .column td.small-#{$i} { + table[class="body"] .column td.small-#{$i}, + table[class="body"] .columns th.small-#{$i}, + table[class="body"] .column th.small-#{$i} { + display: inline-block !important; width: grid-calc-pct($i, $grid-column-count) !important; } } + table[class="body"] .columns td.small-#{$grid-column-count}, + table[class="body"] .column td.small-#{$grid-column-count}, + table[class="body"] .columns th.small-#{$grid-column-count}, + table[class="body"] .column th.small-#{$grid-column-count} { + display: block !important; + width: 100% !important; + } + @for $i from 1 through ($grid-column-count - 1) { - table[class="body"] td.offset-by-#{$i} { + table[class="body"] td.offset-by-#{$i}, + table[class="body"] th.offset-by-#{$i} { padding-left: 0 !important; } } - table[class="body"] table.columns td.expander { - // width: 1px !important; + table[class="body"] table.columns td.expander, + table[class="body"] table.columns th.expander { display: none !important; } @@ -119,13 +114,15 @@ $small-range: $container-width !default; } table[class="body"] table.inline-list { - td { + td, + th { width: auto !important; display: inline-block !important; } &.vertical { - td { + td, + th { display: block !important; } } diff --git a/scss/ink/components/_type.scss b/scss/ink/components/_type.scss index 5112a72c..b4bc92af 100755 --- a/scss/ink/components/_type.scss +++ b/scss/ink/components/_type.scss @@ -109,7 +109,8 @@ h4, h5, h6, p, -td { +td, +th { color: $global-font-color; font-family: $global-font-family; font-weight: $global-font-weight; @@ -156,7 +157,8 @@ h6 { body, table.body, p, -td { +td, +th { font-size: $body-font-size; line-height: $body-line-height; } diff --git a/testing/package.json b/testing/package.json index e5ce7efa..61e37e48 100644 --- a/testing/package.json +++ b/testing/package.json @@ -23,7 +23,7 @@ "gulp-sass": "^2.1.0", "gulp-sourcemaps": "^1.6.0", "gulp-webserver": "^0.9.1", - "inky": "^0.1.0", + "inky": "git://github.com/zurb/inky#develop", "lazypipe": "^1.0.1", "media-query-extractor": "^0.1.1", "panini": "^1.1.1", diff --git a/testing/src/pages/tim-test.html b/testing/src/pages/tim-test.html index f29c25a4..49687788 100644 --- a/testing/src/pages/tim-test.html +++ b/testing/src/pages/tim-test.html @@ -1,34 +1,137 @@ - - - - - - -
- - - - -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laborum delectus rerum eveniet veritatis, praesentium, pariatur. Libero saepe mollitia numquam voluptatum sapiente, explicabo sint, vitae placeat facere, quos voluptate, consequuntur! -
- 		- - - - -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laborum delectus rerum eveniet veritatis, praesentium, pariatur. Libero saepe mollitia numquam voluptatum sapiente, explicabo sint, vitae placeat facere, quos voluptate, consequuntur! -
-
- - - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illo maiores nulla accusantium dolor unde sed blanditiis dolorem, optio id harum vel voluptates, quae atque vero ducimus, voluptatum repellat rem! - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illo maiores nulla accusantium dolor unde sed blanditiis dolorem, optio id harum vel voluptates, quae atque vero ducimus, voluptatum repellat rem! - - - \ No newline at end of file + + + + +
+ + + + + + +
+ + + + + +
+

+ One word +

+
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+
+ + + + + + + + + +
+ + + + + +
+

+ One word +

+
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+
+ + + + + + + +
+ + + + + +
+

+ One word +

+
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+
+ + + + + + + +
+ + + + + +
+ One word +
+ 		+ + + + + +
+ ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti. +
+
+ + +
\ No newline at end of file