Skip to content

Instantly share code, notes, and snippets.

View mirisuzanne's full-sized avatar

Miriam Suzanne mirisuzanne

1.3k followers · 19 following
View GitHub Profile
@mirisuzanne
mirisuzanne / Flexbox mixins.scss
Created January 5, 2013 17:55 — forked from cimmanon/flexbox.scss
@import "compass/css3/shared";
// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
// Chrome 21 (prefixed)
// Opera 12.1 (unprefixed)
// Firefox 20 (unprefixed)
$flex-moz: false !default;
$flex-webkit: true !default;
$flex-o: false !default;
$flex-ms: false !default;
@mirisuzanne
mirisuzanne / pop-stripe.md
Created July 19, 2012 05:42
Rainbow stripe mixin with SCSS + Compass

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

  1. [check] Use variables for colors so they can be swapped out for different colors.
  2. [check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
  3. [check] The colors are defined twice for the color starts and stops. Can this be done better?
  4. [see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?
@mirisuzanne
mirisuzanne / _grid.sass
Created July 10, 2012 03:15 — forked from hdc/_grid.sass
susy grid mixin
//-----------------------------------------------------------------------------
// Imports
@import compass
@import susy
//-----------------------------------------------------------------------------
// Grid Settings
@mirisuzanne
mirisuzanne / 768.css
Created April 26, 2011 23:02 — forked from edwardoriordan/gist:943374
Two ways for making sharing styles with IE
// just a sample...
div[role="main"] {
@include un-column;
@include full;
@include pie-clearfix;
@include adjust-font-size-to(21px);
// we can handle the differences inline...
.ie7 &, .ie8 & {
@include trailer(1, 21px);
@mirisuzanne
mirisuzanne / generategrid.css
Created April 5, 2011 01:05 — forked from chriseppstein/generategrid.css
body {
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
-moz-background-size: 100% 1.5em;
-webkit-background-size: 100% 1.5em;
-o-background-size: 100% 1.5em;
background-size: 100% 1.5em;
background-position: left top;
@mirisuzanne
mirisuzanne / generategrid.scss
Created January 17, 2011 19:40 — forked from nimbupani/generategrid.scss
@import compass
@import base
=susygrid
$gutter-color: rgba(0,0,0,0)
$column-color: rgba(0,0,0,.25)
$start: side-gutter()
$grid: compact()
$grid: append($grid, $gutter-color $start, comma)
@mirisuzanne
mirisuzanne / example.html
Created January 19, 2010 07:42 — forked from chriseppstein/example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>
<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
</HEAD><BODY>
<H1>Aboard Minerva off the Coast of New England</H1>
@mirisuzanne
mirisuzanne / screen.css
Created July 18, 2009 16:29 — forked from chriseppstein/screen.css
body { text-align: center; font-size: 75%; line-height: 150%; }
body #page { overflow: hidden; display: inline-block; text-align: left; margin-left: auto; margin-right: auto; width: 81em; max-width: 100%; background-color: blue; }
body #page { display: block; }
body #page #left-nav { width: 17.284%; display: inline; float: left; margin-right: 1.235%; margin-left: 1.235%; background-color: yellow; }
body #page #main-content { padding-left: 12.346%; width: 23.457%; display: inline; float: left; margin-right: 1.235%; margin-right: 1.235%; background-color: orange; }
body #page #main-content .header { width: 21.053%; display: inline; float: left; margin-right: 5.263%; margin-left: 0; background-color: green; }
body #page #main-content .article { width: 73.684%; display: inline; float: left; margin-right: 5.263%; margin-right: 0; background-color: red; }