Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Last active February 17, 2017 21:58
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save starryeyez024/b4a8eae5547d1d0f148f48d8fa7a5b9f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="flex-container">
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.flex-item:nth-of-type(1) { flex-grow: 1; }
.flex-item:nth-of-type(2) { flex-grow: 1; }
.flex-item:nth-of-type(3) { flex-grow: 2; }
.flex-item:nth-of-type(4) { flex-grow: 1; }
.flex-item:nth-of-type(5) { flex-grow: 1; }
.flex-item {
background: tomato;
border: 3px solid rgba(0,0,0,.2);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
Raw
SassMeister-output.css
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.flex-item:nth-of-type(1) {
flex-grow: 1;
}
.flex-item:nth-of-type(2) {
flex-grow: 1;
}
.flex-item:nth-of-type(3) {
flex-grow: 2;
}
.flex-item:nth-of-type(4) {
flex-grow: 1;
}
.flex-item:nth-of-type(5) {
flex-grow: 1;
}
.flex-item {
background: tomato;
border: 3px solid rgba(0, 0, 0, 0.2);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
Raw
SassMeister-rendered.html
<ul class="flex-container">
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
<li class="flex-item"><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment