Skip to content

Instantly share code, notes, and snippets.

Avatar

Miriam Suzanne mirisuzanne

View GitHub Profile
View cascade-layers.md

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.

Collaborators:

  • Elika Etemad
  • Florian Rivoal
  • Miriam Suzanne
  • Tab Atkins Jr.
@mirisuzanne
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](https://github.com/dbaron/container-queries-implementability) 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 css.oddbird.net/rwd/
*/
main,
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
mirisuzanne / one-mixin.scss
Created Sep 13, 2012
THE MOST POWERFUL SASS MIXIN EVAR.
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
// http://www.oddbird.net
//**
/* RESET STYLES
@import compass/reset.sass
@mirisuzanne
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
mirisuzanne / 1_index.html
Created Apr 4, 2012
Suggested syntax for responsive Susy layouts
View 1_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<div class="container c1"></div>
<div class="container c2"></div>
@mirisuzanne
mirisuzanne / SassMeister-input-HTML.html
Last active Jul 13, 2018
Generated by SassMeister.com.
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>
</div>
@mirisuzanne
mirisuzanne / goals.md
Last active Jun 12, 2018
ideas for a new slide-building system…
View goals.md

Vue Slides

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

Views:

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

Other Features:

  • homepage list of decks
@mirisuzanne
mirisuzanne / herman-docs.vue
Last active Apr 6, 2018
working on a syntax for Herman/Vue component documentation…
View herman-docs.vue
<template>…</template>
<style>…</style>
<script>
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 …'