Skip to content

Instantly share code, notes, and snippets.

@freshyill

freshyill/SassMeister-input-HTML.html

Created May 9, 2015 02:42
Show Gist options
  • Save freshyill/029c6e69511e68c29c69 to your computer and use it in GitHub Desktop.
Save freshyill/029c6e69511e68c29c69 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="grid-container">
<ul class="media-grid media-grid--2">
<li><img src="//placehold.it/400x300"><h3>Headline this might get a bit long just to show off flexbox handling</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--3">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--4">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>This should be handled correctly even when flexbox isn't available</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--5">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--6">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.1.0)
// ----
// This is a mixin to scratch a very specific itch I had on a project.
// It's not intended as a full-page grid system, although I suppose
// it probably could be used for that. I'll probably adapt this for
// floats, or make flexbox an option.
// Some breakpoints to get started
$small-1: 480px;
$small-2: 568px;
$small-3: 600px;
$med-1: 768px;
$med-2: 900px;
$med-3: 1025px;
$large-1: 1100px;
$large-2: 1280px;
$max-width: $large-2;
// Defaults
$pad-half: 8px;
$pad: 15px;
// Our breakpoints map
// The keys in the parent map don't need to be numbers.
// The child keys do need to be numbers.
// The values in the lists are `breakpoint, colums`
$media-grid: (
2: (
1: ($med-2, 2)
),
3: (
1: ($med-2, 2),
2: ($max-width, 3)
),
4: (
1: ($med-2, 2),
2: ($med-3, 3),
3: ($max-width, 4 )
),
5: (
1: ($med-2, 2),
2: ($med-3, 3),
3: ($large-1, 4),
4: ($max-width, 5)
),
6: (
1: ($med-2, 2),
2: ($med-3, 3),
3: ($large-1, 5),
4: ($max-width, 6)
)
);
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function strip-units($value) {
@return $value / ($value * 0 + 1);
}
/// Align lists (or any group of items) into arbitrary grids at arbitrary breakpoints
/// @name media-grid
/// @author Chris Coleman
/// @param {string} $base-class [media-grid] - Base class to generate
/// @group layout
/// @example
/// @include media-grid(media-grid, $media-grid, no-flexbox);
@mixin media-grid($base-class, $grids, $fallback-class: no-flexbox) {
.#{$base-class} {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
list-style: none;
li {
flex: 0 0 100%;
margin: 0;
}
}
@each $cols, $bp in $grids {
.#{$base-class}--#{$cols} li {
@for $i from 1 through length($bp) {
$columns: nth(map-deep-get($grids, $cols, nth($i, 1)), 2);
$currentBreak: nth(map-deep-get($grids, $cols, nth($i, 1)), 1);
$nextBreak: nth(map-deep-get($grids, $cols, nth($i + 1, 1)), 1);
@if $nextBreak {
$mediaFeature: "(min-width: #{$currentBreak}) and (max-width: #{$nextBreak})";
} @else {
$mediaFeature: "(min-width: #{$currentBreak})";
}
@media #{$mediaFeature} {
flex: 0 0 100/$columns + %;
float: left;
background: #bdc3c7;
.#{$fallback-class} &:nth-child(#{$columns}n + #{$columns + 1}) {
width: 100/$columns + %;
max-width: #{100/$columns + %};
clear: left;
}
}
}
}
}
}
// Create the classes.
@include media-grid(media-grid, $media-grid);
// Some styles for demonstration
* {
box-sizing: border-box;
}
body {
background: #ecf0f1;
margin: 0;
font-family: Avenir Next;
}
.grid-container {
max-width: 900px;
margin: 1rem auto;
overflow: hidden;
}
.media-grid {
margin: 1rem auto;
&:after {
display: table;
content: " ";
clear: both;
}
li {
text-align: center;
color: #2c3e50;
padding: pad-half;
@media(min-width: $med-3) {
padding: $pad;
}
}
h3 {
margin: 0 0 .5rem 0;
text-align: left;
}
img {
width: 100%;
}
}
Raw
SassMeister-output.css
.media-grid {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
list-style: none; }
.media-grid li {
flex: 0 0 100%;
margin: 0; }
@media (min-width: 900px) {
.media-grid--2 li {
flex: 0 0 50%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--2 li:nth-child(2n+3) {
width: 50%;
max-width: 50%;
clear: left; } }
@media (min-width: 900px) and (max-width: 1280px) {
.media-grid--3 li {
flex: 0 0 50%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--3 li:nth-child(2n+3) {
width: 50%;
max-width: 50%;
clear: left; } }
@media (min-width: 1280px) {
.media-grid--3 li {
flex: 0 0 33.33333%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--3 li:nth-child(3n+4) {
width: 33.33333%;
max-width: 33.33333%;
clear: left; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--4 li {
flex: 0 0 50%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--4 li:nth-child(2n+3) {
width: 50%;
max-width: 50%;
clear: left; } }
@media (min-width: 1025px) and (max-width: 1280px) {
.media-grid--4 li {
flex: 0 0 33.33333%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--4 li:nth-child(3n+4) {
width: 33.33333%;
max-width: 33.33333%;
clear: left; } }
@media (min-width: 1280px) {
.media-grid--4 li {
flex: 0 0 25%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--4 li:nth-child(4n+5) {
width: 25%;
max-width: 25%;
clear: left; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--5 li {
flex: 0 0 50%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--5 li:nth-child(2n+3) {
width: 50%;
max-width: 50%;
clear: left; } }
@media (min-width: 1025px) and (max-width: 1100px) {
.media-grid--5 li {
flex: 0 0 33.33333%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--5 li:nth-child(3n+4) {
width: 33.33333%;
max-width: 33.33333%;
clear: left; } }
@media (min-width: 1100px) and (max-width: 1280px) {
.media-grid--5 li {
flex: 0 0 25%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--5 li:nth-child(4n+5) {
width: 25%;
max-width: 25%;
clear: left; } }
@media (min-width: 1280px) {
.media-grid--5 li {
flex: 0 0 20%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--5 li:nth-child(5n+6) {
width: 20%;
max-width: 20%;
clear: left; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--6 li {
flex: 0 0 50%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--6 li:nth-child(2n+3) {
width: 50%;
max-width: 50%;
clear: left; } }
@media (min-width: 1025px) and (max-width: 1100px) {
.media-grid--6 li {
flex: 0 0 33.33333%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--6 li:nth-child(3n+4) {
width: 33.33333%;
max-width: 33.33333%;
clear: left; } }
@media (min-width: 1100px) and (max-width: 1280px) {
.media-grid--6 li {
flex: 0 0 20%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--6 li:nth-child(5n+6) {
width: 20%;
max-width: 20%;
clear: left; } }
@media (min-width: 1280px) {
.media-grid--6 li {
flex: 0 0 16.66667%;
float: left;
background: #bdc3c7; }
.no-flexbox .media-grid--6 li:nth-child(6n+7) {
width: 16.66667%;
max-width: 16.66667%;
clear: left; } }
* {
box-sizing: border-box; }
body {
background: #ecf0f1;
margin: 0;
font-family: Avenir Next; }
.grid-container {
max-width: 900px;
margin: 1rem auto;
overflow: hidden; }
.media-grid {
margin: 1rem auto; }
.media-grid:after {
display: table;
content: " ";
clear: both; }
.media-grid li {
text-align: center;
color: #2c3e50;
padding: pad-half; }
@media (min-width: 1025px) {
.media-grid li {
padding: 15px; } }
.media-grid h3 {
margin: 0 0 .5rem 0;
text-align: left; }
.media-grid img {
width: 100%; }
Raw
SassMeister-rendered.html
<div class="grid-container">
<ul class="media-grid media-grid--2">
<li><img src="//placehold.it/400x300"><h3>Headline this might get a bit long just to show off flexbox handling</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--3">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--4">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>This should be handled correctly even when flexbox isn't available</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--5">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
<ul class="media-grid media-grid--6">
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
<li><img src="//placehold.it/400x300"><h3>Headline</h3></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment