"gulp-sourcemaps": "^1.6.0",
"gulp-wrap": "^0.11.0",
"gulp-zip": "^3.2.0",
- "inky": "zurb/inky",
+ "inky": "zurb/inky#brandonbarringer-attributes",
"lazypipe": "^1.0.1",
"motion-ui": "^1.1.1",
"multiline": "^1.0.2",
Margin: 0 auto;
padding-left: $global-gutter;
padding-bottom: $column-padding-bottom;
+
+ // Prevents Nested columns from double the padding
+ .column,
+ .columns {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+
+ center {
+ min-width: none !important;
+ }
+ }
}
td.columns.last,
<img class="float-center" src="http://placehold.it/200?text=center" alt="">
<img class="float-right" src="http://placehold.it/200?text=right" alt="">
<img class="float-left" src="http://placehold.it/200?text=left" alt="">
+
+ </columns>
+ </row>
+</container>
+
+<container>
+ <row>
+ <columns small="12" large="12">
+ <row>
+ <columns small="12" large="12">
+ <p>Center on all (nested columns)</p>
+ <center>
+ <img src="http://placehold.it/200?text=center" alt="">
+ </center>
+ </columns>
+ </row>
+ </columns>
+ </row>
+</container>
+
+<container>
+ <row>
+ <columns small="12" large="12">
+ <row>
+ <columns small="6" large="6">
+ <p>Center on all (nested columns)</p>
+ <center>
+ <img src="http://placehold.it/200?text=center" alt="">
+ </center>
+ </columns>
+ <columns small="6" large="6">
+ <p>Center on all (nested columns)</p>
+ <center>
+ <img src="http://placehold.it/200?text=center" alt="">
+ </center>
+ </columns>
+ </row>
</columns>
</row>
</container>
--- /dev/null
+<container>
+
+ <spacer size="32"></spacer>
+
+ <row dir="rtl">
+ <columns large="4" valign="middle">
+ <img class="small-float-center" src="http://placehold.it/300x200/345" alt="">
+ </columns>
+ <columns large="8">
+ <h4>HEADLINE</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
+ </columns>
+ </row>
+
+ <row>
+ <columns large="8">
+ <h4>HEADLINE</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
+ </columns>
+ <columns large="4" valign="middle">
+ <img class="small-float-center" src="http://placehold.it/300x200/621" alt="">
+ </columns>
+ </row>
+</container>
<table class="row">
<tr>
<th class="small-6 large-6 columns first" style="background:blue;">
- <p>1</p>
+ <p class="text-right">1</p>
</th>
<th class="small-6 large-6 columns first" style="background:purple;">
--- /dev/null
+<container>
+
+
+<!-- 2 columns CTA / non collapsable / no gutter -->
+<row class="collapse">
+ <columns>
+ <wrapper class="product-listing" >
+ <row class="no-padding-b">
+ <columns small="6" large="6">
+ <a href="http://google.com" title="" target="_blank">
+ <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
+ </a>
+ <p class="text-center"><span class="name text-center">Name of Product</span></p>
+
+ <p class="pre-price text-center" style="text-decoration:line-through;">$9.99</p>
+ <p class="price text-center">
+ $25.99
+ </p>
+
+ <center>
+ <button href="http://tacticalgear.com" class="small">button</button>
+ </center>
+ </columns>
+ <columns small="6" large="6">
+ <a href="http://google.com" title="" target="_blank">
+ <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
+ </a>
+ <p class="text-center">
+ <span class="name text-center">
+ Name of Product
+ </span>
+ </p>
+
+ <p class="pre-price text-center" style="text-decoration:line-through;">
+ $9.99
+ </p>
+ <p class="price text-center">
+ $25.99
+ </p>
+
+ <center>
+ <button href="http://google.com" class="small">button</button>
+ </center>
+
+ </columns>
+</row>
+</wrapper>
+</columns>
+</row>
+
+
+</container>
\ No newline at end of file