Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.haml

Created December 31, 2014 18:45
Show Gist options
  • Save starryeyez024/710eded4e6a323fdfdb6 to your computer and use it in GitHub Desktop.
Save starryeyez024/710eded4e6a323fdfdb6 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/400/300")
%p I love responsive design
.views-row.views-row-2
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%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/400/300")
%p Kittens <3 RWD.
.views-row.views-row-5
.inner
.image-wrap
%img(src="http://placekitten.com/800/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/600")
%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!
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";
////////////////////////////////////////////////////
// FLUID GRID COLUMNS http://sassmeister.com/gist/7951177
///////////////////////////////////////////////////
$fluid-grid-cols: 1;
$fluid-grid-grid-rows: 10;
$fluid-grid-padding: 20px;
$fluid-grid-class-name: views-row;
@mixin fluid-grid(
$cols: $fluid-grid-cols,
$grid-rows: $fluid-grid-grid-rows,
$padding: $fluid-grid-padding,
$class-name: $fluid-grid-class-name
){
.#{$class-name} {
width: calc((100% / #{$cols}) + (#{$padding} / #{$cols}));
padding: 0 0 $padding $padding;
}
@for $x from 1 through $grid-rows {
.#{$class-name}-#{$x * $cols - ($cols - 1)} {
margin-left: -$padding;
clear: both;
}
}
}
@mixin grid-mobile(
$class-name: $fluid-grid-class-name
){
.#{$class-name} {
float: left;
clear: both;
width: 100%;
@include box-sizing("border-box");
}
}
@mixin grid-desktop(
$class-name: $fluid-grid-class-name
){
.#{$class-name} {
float: left;
clear: none;
@include box-sizing("border-box");
}
}
// When using the fluid grid mixin, plug in the following variables:
// the number of columns
// the number of rows (if you are unsure guess and add 1 or 2)
// the padding for the left & right edge of each row
// and the name of the class for the rows themselves.
// Use the grid-mobile mixin for mobile, and then add a breakpoint
// and use the grid-desktop mixin for columns 2 and up.
// =================================================================
// EXAMPLE 1
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
overflow: hidden;
@include has-layout;
.views-row {
.inner {
background: white;
}
.image-wrap {
@include intrinsic-ratio(4 / 3, $elements: img);
}
}
@include breakpoint(max-width 400px) {
@include grid-mobile;
}
@include breakpoint(400px 550px) {
@include grid-desktop;
@include fluid-grid(2);
}
@include breakpoint(550px 960px) {
@include grid-desktop;
@include fluid-grid(3);
}
@include breakpoint(960px 1200px) {
@include grid-desktop;
@include fluid-grid(4, $padding: 1%);
}
@include breakpoint(1200px) {
@include grid-desktop;
@include fluid-grid(5, $padding: 0.5%);
}
}
// EXAMPLE 2
// the default class name is "views-row" but you may replace
// that with the last variable.
.container-x {
@include grid-desktop;
@include fluid-grid(4, 2, $class-name: panel-pane);
}
// Styles for niceness
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
p {
margin: 3px 0;
}
}
Raw
SassMeister-output.css
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
overflow: hidden;
*zoom: 1;
}
.view-foobar .views-row .inner {
background: white;
}
.view-foobar .views-row .image-wrap {
position: relative;
height: 0;
padding-top: 75%;
width: 100%;
}
.view-foobar .views-row .image-wrap img {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
@media (max-width: 400px) {
.view-foobar .views-row {
float: left;
clear: both;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@media (min-width: 400px) and (max-width: 550px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: calc((100% / 2) + (20px / 2));
padding: 0 0 20px 20px;
}
.view-foobar .views-row-1 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-3 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-11 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-15 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-17 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-19 {
margin-left: -20px;
clear: both;
}
}
@media (min-width: 550px) and (max-width: 960px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: calc((100% / 3) + (20px / 3));
padding: 0 0 20px 20px;
}
.view-foobar .views-row-1 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-4 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-10 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-16 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-19 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-22 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-25 {
margin-left: -20px;
clear: both;
}
.view-foobar .views-row-28 {
margin-left: -20px;
clear: both;
}
}
@media (min-width: 960px) and (max-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: calc((100% / 4) + (1% / 4));
padding: 0 0 1% 1%;
}
.view-foobar .views-row-1 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-17 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-21 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-25 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-29 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-33 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-37 {
margin-left: -1%;
clear: both;
}
}
@media (min-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: calc((100% / 5) + (0.5% / 5));
padding: 0 0 0.5% 0.5%;
}
.view-foobar .views-row-1 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-6 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-11 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-16 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-21 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-26 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-31 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-36 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-41 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-46 {
margin-left: -0.5%;
clear: both;
}
}
.container-x .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container-x .panel-pane {
width: calc((100% / 4) + (20px / 4));
padding: 0 0 20px 20px;
}
.container-x .panel-pane-1 {
margin-left: -20px;
clear: both;
}
.container-x .panel-pane-5 {
margin-left: -20px;
clear: both;
}
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
}
body p {
margin: 3px 0;
}
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/400/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/800/600'>
</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/400/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/800/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/600'>
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment