Skip to content

Instantly share code, notes, and snippets.

@vinayraghu

vinayraghu/SassMeister-input-HTML.html

Created May 28, 2014 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vinayraghu/7218b2b6ff465e01a890 to your computer and use it in GitHub Desktop.
Save vinayraghu/7218b2b6ff465e01a890 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="marketing-view">
<div class="marketing-view-image">
<img src="http://img.modaoperandi.com/media/img/category_banners/ts_evafehren-stacking_hpmodule_560x560.gif">
</div>
<div class="marketing-products">
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/47/29/products/425/166/B03_640x960_1_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="https://5825abcc865e52b361d7-6c645f7f037343c7e349cc379f4554d8.ssl.cf1.rackcdn.com/designer/47/_MG_8523_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1648/20/Camicia_Maison-3_copia_320x320_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1645/21/gonna_verde__1280x852__320x213_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1646/54/DSC_0017_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/28/16/products/1221/329/_product-photography-shoes-20131217-0064_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Singularity.gs (v1.2.1)
// ----
@import "singularitygs";
@include add-grid(1 1.618);
.marketing-product {
width: 150px;
padding: 10px;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1), 0px -2px 10px 0px rgba(0,0,0,0.1), ;
margin: 1em;
float: left;
&:nth-child(3n+1) {
clear: both;
}
}
.marketing-view-image {
@include grid-span(1,1);
}
.marketing-product-image img {
width: 100%;
max-width: 100%;
height: auto;
}
.marketing-products {
@include grid-span(1,2);
}
Raw
SassMeister-output.css
.marketing-product {
width: 150px;
padding: 10px;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1), 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
margin: 1em;
float: left;
}
.marketing-product:nth-child(3n+1) {
clear: both;
}
.marketing-view-image {
width: 34.8675%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.marketing-product-image img {
width: 100%;
max-width: 100%;
height: auto;
}
.marketing-products {
width: 56.41562%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
Raw
SassMeister-rendered.html
<div class="marketing-view">
<div class="marketing-view-image">
<img src="http://img.modaoperandi.com/media/img/category_banners/ts_evafehren-stacking_hpmodule_560x560.gif">
</div>
<div class="marketing-products">
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/47/29/products/425/166/B03_640x960_1_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="https://5825abcc865e52b361d7-6c645f7f037343c7e349cc379f4554d8.ssl.cf1.rackcdn.com/designer/47/_MG_8523_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1648/20/Camicia_Maison-3_copia_320x320_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1645/21/gonna_verde__1280x852__320x213_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/34/66/products/1646/54/DSC_0017_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="marketing-product">
<div class="marketing-product-image">
<a href="#">
<img src="http://63c73dc6f45a832bff3c-6c645f7f037343c7e349cc379f4554d8.r16.cf1.rackcdn.com/designer/28/16/products/1221/329/_product-photography-shoes-20131217-0064_320x480_1.jpg" alt="">
</a>
</div>
<div class="marketing-product-description">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment