Skip to content

Instantly share code, notes, and snippets.

@freshyill

freshyill/SassMeister-input-HTML.html

Last active August 29, 2015 14:19
Show Gist options
  • Save freshyill/15ca88f555fd156afd5c to your computer and use it in GitHub Desktop.
Save freshyill/15ca88f555fd156afd5c 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>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--3">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--4">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--5">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--6">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</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;
// 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;
}
/// 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);
@mixin media-grid($base-class, $grids) {
.#{$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 + %;
}
}
}
}
}
// 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: 1280px;
margin: 1rem auto;
overflow: hidden;
}
.media-grid {
margin: 1rem auto;
li {
text-align: center;
padding: .5rem;
background: #7f8c8d;
color: #ecf0f1;
margin-bottom: .5rem;
}
}
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%; } }
@media (min-width: 900px) and (max-width: 1280px) {
.media-grid--3 li {
flex: 0 0 50%; } }
@media (min-width: 1280px) {
.media-grid--3 li {
flex: 0 0 33.33333%; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--4 li {
flex: 0 0 50%; } }
@media (min-width: 1025px) and (max-width: 1280px) {
.media-grid--4 li {
flex: 0 0 33.33333%; } }
@media (min-width: 1280px) {
.media-grid--4 li {
flex: 0 0 25%; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--5 li {
flex: 0 0 50%; } }
@media (min-width: 1025px) and (max-width: 1100px) {
.media-grid--5 li {
flex: 0 0 33.33333%; } }
@media (min-width: 1100px) and (max-width: 1280px) {
.media-grid--5 li {
flex: 0 0 25%; } }
@media (min-width: 1280px) {
.media-grid--5 li {
flex: 0 0 20%; } }
@media (min-width: 900px) and (max-width: 1025px) {
.media-grid--6 li {
flex: 0 0 50%; } }
@media (min-width: 1025px) and (max-width: 1100px) {
.media-grid--6 li {
flex: 0 0 33.33333%; } }
@media (min-width: 1100px) and (max-width: 1280px) {
.media-grid--6 li {
flex: 0 0 20%; } }
@media (min-width: 1280px) {
.media-grid--6 li {
flex: 0 0 16.66667%; } }
* {
box-sizing: border-box; }
body {
background: #ecf0f1;
margin: 0;
font-family: Avenir Next; }
.grid-container {
max-width: 1280px;
margin: 1rem auto;
overflow: hidden; }
.media-grid {
margin: 1rem auto; }
.media-grid li {
text-align: center;
padding: .5rem;
background: #7f8c8d;
color: #ecf0f1;
margin-bottom: .5rem; }
Raw
SassMeister-rendered.html
<div class="grid-container">
<ul class="media-grid media-grid--2">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--3">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--4">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--5">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
<ul class="media-grid media-grid--6">
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
<li>Grid Item</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment