Skip to content

Instantly share code, notes, and snippets.


Miriam Suzanne mirisuzanne

View GitHub Profile

Cascade Layers, a Proposal

A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.


  • Elika Etemad
  • Florian Rivoal
  • Miriam Suzanne
  • Tab Atkins Jr.
mirisuzanne / cq.css
Last active Jan 11, 2021
Thoughts on Container Queries
View cq.css
This is not meant to be a final CSSWG proposal,
but reflects my immediate thoughts after reading
[David Baron's]( promising draft.
This gist was created to demonstrate my idea for removing selectors from his query syntax.
More of my thoughts & notes are online at
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 …'