Created
May 14, 2015 20:00
-
-
Save mirisuzanne/ad54c2baede9a9c2283a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="grid-test"> | |
<h2>Test of indenting</h2> | |
<div class="person-wrapper-3"> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
</div> | |
<div class="person-wrapper-4"> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.13) | |
// Compass (v1.0.3) | |
// Scut (v1.1.3) | |
// Susy (v2.2.3) | |
// ---- | |
@import "susy"; | |
@import "scut"; | |
$susy: ( | |
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |
// Uncomment the line below to see it work as it should | |
//math: static, | |
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |
global-box-sizing: border-box, | |
use-custom: ( | |
rem: true | |
), | |
columns: 13, | |
column-width: 80px, | |
gutters: 0, | |
container: 1040px, | |
output: float, | |
debug: ( | |
image: show, | |
toggle: bottom right, | |
), | |
); | |
.grid-test { | |
@include container; | |
// @include scut-clearfix; | |
} | |
.person-wrapper-4 { | |
@include squish(1); | |
@include scut-clearfix; | |
.block-person { | |
// 13 (total) - 2 (squish) = 11 (context) | |
@include span(2 of 11); | |
margin-right: span(1 of 11); | |
&:last-child { | |
margin-right: 0; | |
} | |
} | |
} | |
.person-wrapper-3 { | |
@include squish(2.5 of 13); | |
@include scut-clearfix; | |
.block-person { | |
// 13 (total) - 5 (squish) = 8 (context) | |
@include span(2 of 8); | |
margin-right: span(1 of 8); | |
&:last-child { | |
margin-right: 0; | |
} | |
} | |
} | |
// Other styles | |
body { | |
text-align: center; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Scut, a collection of Sass utilities | |
* to ease and improve our implementations of common style-code patterns. | |
* v1.1.3 | |
* Docs at http://davidtheclark.github.io/scut | |
*/ | |
.grid-test { | |
max-width: 1040px; | |
margin-left: auto; | |
margin-right: auto; | |
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 100%, transparent 100%); | |
background-size: 7.69231%; | |
background-origin: content-box; | |
background-clip: content-box; | |
background-position: left top; | |
} | |
.grid-test:after { | |
content: " "; | |
display: block; | |
clear: both; | |
} | |
.person-wrapper-4 { | |
margin-left: 7.69231%; | |
margin-right: 7.69231%; | |
} | |
.person-wrapper-4:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.person-wrapper-4 .block-person { | |
width: 18.18182%; | |
float: left; | |
margin-right: 9.09091%; | |
} | |
.person-wrapper-4 .block-person:last-child { | |
margin-right: 0; | |
} | |
.person-wrapper-3 { | |
margin-left: 19.23077%; | |
margin-right: 19.23077%; | |
} | |
.person-wrapper-3:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.person-wrapper-3 .block-person { | |
width: 25%; | |
float: left; | |
margin-right: 12.5%; | |
} | |
.person-wrapper-3 .block-person:last-child { | |
margin-right: 0; | |
} | |
body { | |
text-align: center; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="grid-test"> | |
<h2>Test of indenting</h2> | |
<div class="person-wrapper-3"> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
</div> | |
<div class="person-wrapper-4"> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
<div class="block block-person"> | |
<img src="http://placehold.it/150x150" class="img-rounded"> | |
<h4>Person Name</h4> | |
<p>This is sample text</p> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment