Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.haml

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

  • Select an option

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

Select an option

Learn more about clone URLs
Save starryeyez024/9226e7dc2a5f2dc0cef9 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
.view-foobar
.views-row.views-row-1
.inner
.image-wrap
%img(src="http://placekitten.com/2100/300")
%p I love responsive design
.views-row.views-row-2
.inner
.image-wrap
%img(src="http://placekitten.com/450/350")
%p Try scaling the window...
.views-row.views-row-3
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Sassmeister is responsive too!
.views-row.views-row-4
.inner
.image-wrap
%img(src="http://placekitten.com/450/300")
%p Kittens <3 RWD.
.views-row.views-row-5
.inner
.image-wrap
%img(src="http://placekitten.com/850/600")
%p Wow this is sweet!
.views-row.views-row-6
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-7
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-8
.inner
.image-wrap
%img(src="http://placekitten.com/800/650")
%p Wow this is sweet!
.views-row.views-row-9
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-10
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-11
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Wow this is sweet!
.views-row.views-row-12
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-13
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-14
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-12
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Toolkit (v2.6.0)
// ----
@import "compass";
@import "toolkit";
@import "breakpoint";
// Styles for niceness
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
p {
margin: 3px 0;
}
img {
max-width: 100%;
}
}
*, *:before, *:after {
box-sizing: border-box;
}
$sg-cols: 3;
$sg-spacing: 20px;
$sg-offset: null;
$sg-margin-direction: right;
$sg-rows: 4;
%clear-left {
clear: left;
}
@mixin symmetric-grid(
$cols: $sg-cols,
$space: $sg-spacing,
$offset: $sg-offset,
$margin-direction: $sg-margin-direction,
$rows: $sg-rows
){
margin-#{$margin-direction}: $space;
clear: none;
max-width: 100%;
$minus-margins: ceil($space * ($cols - 1) / $cols) + 1px;
@if $margin-direction == "right" {
float: left;
}
@if $margin-direction == "left" {
float: right;
}
@if $offset {
&:nth-child(#{$offset}) {
width: 100%;
}
&:nth-child(n+#{$offset + 1}) {
width: calc((100% / #{$cols}) - #{$minus-margins});
}
@for $i from 1 through $rows {
&:nth-child(#{$cols * $i + $offset}) {
margin-#{$margin-direction}: 0;
}
&:nth-child(#{$cols * $i + 1 + $offset}) {
clear: left;
}
&:nth-child(n + #{$i + $offset}) {
margin-top: $sg-spacing;
}
}
}
@else {
width: calc((100% / #{$cols}) - #{$minus-margins});
@for $i from 1 through $rows {
&:nth-child(#{$cols * $i}) {
margin-#{$margin-direction}: 0;
}
&:nth-child(#{$cols * $i + 1}) {
clear: left;
}
&:nth-child(n + #{$i * $rows + 1}) {
margin-top: $sg-spacing;
}
}
}
}
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
}
.view-foobar .views-row {
@include breakpoint(500px 700px){
@include symmetric-grid(2, 10px);
}
@include breakpoint(700px 1100px){
@include symmetric-grid(3, 10px);
}
@include breakpoint(1100px){
@include symmetric-grid(4, 30px, 1);
}
}
Raw
SassMeister-output.css
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
}
body p {
margin: 3px 0;
}
body img {
max-width: 100%;
}
*, *:before, *:after {
box-sizing: border-box;
}
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
}
@media (min-width: 500px) and (max-width: 700px) {
.view-foobar .views-row {
margin-right: 10px;
clear: none;
max-width: 100%;
float: left;
width: calc((100% / 2) - 6px);
}
.view-foobar .views-row:nth-child(2) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(3) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 5) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(4) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(5) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 9) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(6) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(7) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 13) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(8) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(9) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 17) {
margin-top: 20px;
}
}
@media (min-width: 700px) and (max-width: 1100px) {
.view-foobar .views-row {
margin-right: 10px;
clear: none;
max-width: 100%;
float: left;
width: calc((100% / 3) - 8px);
}
.view-foobar .views-row:nth-child(3) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(4) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 5) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(6) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(7) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 9) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(9) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(10) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 13) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(12) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(13) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 17) {
margin-top: 20px;
}
}
@media (min-width: 1100px) {
.view-foobar .views-row {
margin-right: 30px;
clear: none;
max-width: 100%;
float: left;
}
.view-foobar .views-row:nth-child(1) {
width: 100%;
}
.view-foobar .views-row:nth-child(n+2) {
width: calc((100% / 4) - 24px);
}
.view-foobar .views-row:nth-child(5) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(6) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 2) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(9) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(10) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 3) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(13) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(14) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 4) {
margin-top: 20px;
}
.view-foobar .views-row:nth-child(17) {
margin-right: 0;
}
.view-foobar .views-row:nth-child(18) {
clear: left;
}
.view-foobar .views-row:nth-child(n + 5) {
margin-top: 20px;
}
}
Raw
SassMeister-rendered.html
<div class='view-foobar'>
<div class='views-row views-row-1'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2100/300'>
</div>
<p>I love responsive design</p>
</div>
</div>
<div class='views-row views-row-2'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/450/350'>
</div>
<p>Try scaling the window...</p>
</div>
</div>
<div class='views-row views-row-3'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Sassmeister is responsive too!</p>
</div>
</div>
<div class='views-row views-row-4'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/450/300'>
</div>
<p>Kittens <3 RWD.</p>
</div>
</div>
<div class='views-row views-row-5'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/850/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-6'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-7'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-8'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/650'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-9'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-10'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-11'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-13'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-14'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment