Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Last active August 29, 2015 14:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save starryeyez024/2eee94dc05ed7830f883 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save starryeyez024/2eee94dc05ed7830f883 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="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>
<h2>6 6 flex with more content:</h2>
<div data-rh-layout="6 6 flex">
<p class="component">Jelly-o </p>
<p class="component">Cake </p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">apple pie</p>
</div>
<h2>Flex only, with more content:</h2>
<div data-rh-layout="flex">
<p class="component">Jelly-o </p>
<p class="component">Cake </p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">apple pie</p>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
* {
box-sizing: border-box;
}
p {
background: #eee;
border: #ccc 1px solid;
padding: 10px;
}
//////////////////
.flexbox .rh-standard-band-container {
flex-direction: column;
}
.flexbox [data-rh-layout="6 6 flex"],
.flexbox [data-rh-layout="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;
clear: left;
}
[data-rh-layout="6 6"] > :nth-child(2n+2),
[data-rh-layout="6 6 flex"] > :nth-child(2n+2) {
width: 48.7149%;
background: pink;
float: right;
margin-right: 0px;
}
.flexbox div p.component {
//width: 40%;
//display: block;
//float: left;
}
h2 {
clear: left;
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
p {
background: #eee;
border: #ccc 1px solid;
padding: 10px;
}
.flexbox .rh-standard-band-container {
flex-direction: column;
}
.flexbox [data-rh-layout="6 6 flex"],
.flexbox [data-rh-layout="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;
clear: left;
}
[data-rh-layout="6 6"] > :nth-child(2n+2),
[data-rh-layout="6 6 flex"] > :nth-child(2n+2) {
width: 48.7149%;
background: pink;
float: right;
margin-right: 0px;
}
h2 {
clear: left;
}
Raw
SassMeister-rendered.html
<div class="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>
<h2>6 6 flex with more content:</h2>
<div data-rh-layout="6 6 flex">
<p class="component">Jelly-o </p>
<p class="component">Cake </p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">apple pie</p>
</div>
<h2>Flex only, with more content:</h2>
<div data-rh-layout="flex">
<p class="component">Jelly-o </p>
<p class="component">Cake </p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">Jelly-o carrot cake carrot cake gummi bears pudding fruitcake sweet roll tootsie roll donut. Wafer powder brownie. Muffin candy canes marzipan dragée croissant pie. Candy canes gummies sweet roll tart jujubes candy. Cake apple pie</p>
<p class="component">apple pie</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment