Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Last active August 29, 2015 14:20
Show Gist options
  • Select an option

  • Save starryeyez024/41d2af7fca411314f70c to your computer and use it in GitHub Desktop.

Select an option

Save starryeyez024/41d2af7fca411314f70c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="body flexbox">
<h2>6 6 </h2>
<div data-rh-layout="6 6">
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
</div>
<h2>6 6 flex</h2>
<div data-rh-layout="6 6 flex">
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
</div>
</div>
// ----
// libsass (v3.2.0-beta.6)
// ----
* {
box-sizing: border-box;
}
p {
background: #eee;
border: #ccc 1px solid;
margin: 0px 0px 11px;
padding: 10px;
}
//////////////////
.flexbox .rh-standard-band-container {
flex-direction: column;
}
.flexbox [data-rh-layout="6 6 flex"] {
display: flex;
}
[data-rh-layout="6 6"] > :nth-child(2n+1),
[data-rh-layout="6 6 flex"] > :nth-child(2n+1) {
width: 48.7149%;
margin-right: 2.57023%;
display: block;
float: left;
}
* {
box-sizing: border-box;
}
p {
background: #eee;
border: #ccc 1px solid;
margin: 0px 0px 11px;
padding: 10px;
}
.flexbox .rh-standard-band-container {
flex-direction: column;
}
.flexbox [data-rh-layout="6 6 flex"] {
display: flex;
}
[data-rh-layout="6 6"] > :nth-child(2n+1),
[data-rh-layout="6 6 flex"] > :nth-child(2n+1) {
width: 48.7149%;
margin-right: 2.57023%;
display: block;
float: left;
}
<div class="body flexbox">
<h2>6 6 </h2>
<div data-rh-layout="6 6">
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
</div>
<h2>6 6 flex</h2>
<div data-rh-layout="6 6 flex">
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
<p class="component">Component</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment