Skip to content

Instantly share code, notes, and snippets.


Miriam Suzanne mirisuzanne

View GitHub Profile
View keyframes-sass-output.css
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
mirisuzanne / one-mixin.scss
Created Sep 13, 2012
View one-mixin.scss
// Apply any css property/value pair.
@mixin css(
$azimuth: null,
$background: null,
$background-attachment: null,
$background-color: null,
$background-image: null,
$background-position: null,
$background-repeat: null,
$border: null,
View _base.sass
// Susy: Elastic-Fluid grids without all the math
// by Eric Meyer and OddBird Collective
@import compass/reset.sass
mirisuzanne / tutorial.mkdn
Created Aug 22, 2011
A new Susy tutorial
View tutorial.mkdn

Susy 0.9 Tutorial

See the official Susy site for 1.0 documentation.

For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.

There is also reference documentation in the works.

Building a Susy Grid

mirisuzanne / 1_index.html
Created Apr 4, 2012
Suggested syntax for responsive Susy layouts
View 1_index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/screen.css">
<div class="container c1"></div>
<div class="container c2"></div>
mirisuzanne / SassMeister-input-HTML.html
Last active Jul 13, 2018
Generated by
View SassMeister-input-HTML.html
<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
mirisuzanne /
Last active Jun 12, 2018
ideas for a new slide-building system…

Vue Slides

I want to quickly write & edit slides using markdown & yaml…


  • card grid
  • full-screen slides (no forced aspect ratio)
  • scrolling list-page

Other Features:

  • homepage list of decks
mirisuzanne / herman-docs.vue
Last active Apr 6, 2018
working on a syntax for Herman/Vue component documentation…
View herman-docs.vue
export default {
name: 'sample-component',
group: 'buttons',
access: 'public',
description: 'A generic, scrollable modal for forms and longer-form content',
deprecated: 'This is being replaced by …'

Keybase proof

I hereby claim:

  • I am mirisuzanne on github.
  • I am mirisuzanne ( on keybase.
  • I have a public key ASDy1Aq3brRg-SQESIfxYVSZukrpm74DBAzJEG94KrT54wo

To claim this, I am signing this object:

mirisuzanne / type.scss
Created Sep 2, 2012
Using modular scale with vertical rhythms
View type.scss
// Using the Modular Scale plugin along with Compass Vertical Rhythms module.
// The goal is to use MS to give us the values,
// and use VR to apply those values to our typography.
// ---------------------------------------------------------------------------
// Defaults
$base-size: 24px;
$ratio: major-third() fifth();
You can’t perform that action at this time.