Skip to content

Instantly share code, notes, and snippets.

Avatar

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
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 …'
View keybase.md

Keybase proof

I hereby claim:

  • I am mirisuzanne on github.
  • I am mirisuzanne (https://keybase.io/mirisuzanne) on keybase.
  • I have a public key ASDy1Aq3brRg-SQESIfxYVSZukrpm74DBAzJEG94KrT54wo

To claim this, I am signing this object:

@mirisuzanne
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.