Skip to content

Instantly share code, notes, and snippets.

@vinayraghu
vinayraghu / Foundation Block Grids Extended
Last active February 12, 2016 17:20
Foundation Block Grids Extended
Foundation Block Grids Extended
--------------------
Describe your own breakpoints and names
Use them to create Block Grids from Foundation
The crazier your grid, the crazier the CSS
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
@if type-of($value) == list {
$result: ();
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created March 14, 2014 06:26
Ratio based grids by Singularity
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="container">
<section class="primary-sidebar"></section>
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created March 27, 2014 08:46
Source ordering, adding columns
<div class="container">
<div class="sidebar-primary"></div>
<div class="sidebar-secondary"></div>
<div class="content-area"></div>
<div class="sidebar-tertiary"></div>
</div>
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created March 27, 2014 11:08
Singularity sample 2
<div class="container">
<div class="sidebar-primary"></div>
<div class="sidebar-secondary"></div>
<div class="content-area"></div>
<div class="sidebar-tertiary"></div>
</div>
<div class="container">
<div class="sidebar-primary">Primary</div>
<div class="sidebar-secondary">Secondary</div>
<div class="content-area">Content</div>
<div class="sidebar-tertiary">Tertiary</div>
</div>
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created May 1, 2014 13:37
Generated by SassMeister.com.
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created May 2, 2014 17:18
Generated by SassMeister.com.
<div class="one"></div>
<div class="two">
<div class="sub-one"></div>
<div class="sub-two"></div>
<div class="sub-three"></div>
<div class="sub-four"></div>
</div>
<div class="three"></div>
<div class="four"></div>
@vinayraghu
vinayraghu / SassMeister-input-HTML.html
Created May 3, 2014 05:32
Generated by SassMeister.com.
<div class="sidebar-primary">
Sidebar Primary
</div>
<div class="content-area">
Content
</div>
<div class="sidebar-secondary">
Secondary
</div>
<div class="sidebar-primary"></div>
<div class="sidebar-secondary"></div>
<div class="content-area"></div>