Skip to content

Instantly share code, notes, and snippets.


Miriam Suzanne mirisuzanne

View GitHub Profile
mirisuzanne / cq.css
Last active Oct 6, 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

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 /
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:

View fonts.scss
// existing syntax for hosted font-files
$hosted-font: (
'name': 'FranklinGothic',
'stack': ('Helvetica', 'Arial', 'sans-serif'),
'regular': 'franklingothic-regular-filename',
'bold': 'franklingothic-bold-filename',
'bold' 'italic': 'franklingothic-bolditalic-filename',
// safely document any additional font data you want…
'source': ''
mirisuzanne / grids.scss
Created Sep 20, 2016
Changing configurations in Susy 3
View grids.scss
// different maps for different configurations...
$susy: (
columns: 4,
$medium: (
columns: 8,
$large: (
mirisuzanne / SassMeister-input-HTML.html
Last active Jan 1, 2016
Generated by
View SassMeister-input-HTML.html
<div class="newApp">
<div class="rounded">
{{#each tasksToDo}}
<div class="rounded2">
mirisuzanne / SassMeister-input.scss
Created Nov 20, 2015
Generated by
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
.test {
@each $item in 'one' {
item: $item;
mirisuzanne / SassMeister-input.scss
Last active Nov 19, 2015
Generated by
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$function: 'hsl';
$hue: 360;
$value: (30%, 40%);
.test {
// This doesn't work in libsass