Skip to content

Instantly share code, notes, and snippets.

@maddesigns
maddesigns / SassMeister-input.scss
Created January 30, 2014 21:42
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Toolkit (v2.0.0.alpha.7)
// ----
@import "toolkit";
.wrapperclass {
@include intrinsic-ratio(4/3, 50%, 'img, figure')
}
@maddesigns
maddesigns / Scalable-Text-with-SVG.markdown
Created February 5, 2014 10:17
A Pen by Jason Weaver.
@maddesigns
maddesigns / SassMeister-input-HTML.haml
Created February 15, 2014 17:58
Generated by SassMeister.com.
.one
.two
.three
.four
@maddesigns
maddesigns / SassMeister-input.scss
Created February 26, 2014 20:26
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
// Copied and Pasted from Harry Roberts Beutons -
// http://github.com/csswizardry/beautons/blob/master/beautons.css
// Base
@maddesigns
maddesigns / SassMeister-input-HTML.html
Created March 2, 2014 21:23
Generated by SassMeister.com.
<div class="wrapperclass">
<span> 16:9 </span>
</div>
@maddesigns
maddesigns / SassMeister-input.scss
Created March 3, 2014 21:39
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
// @mixin fixed-ratiobox();
// stealed from https://github.com/Team-Sass/toolkit/blob/master/compass/stylesheets/toolkit/_intrinsic-ratio.scss
//
// usage:
// @include fixed-ratiobox(4/3, 50%, 'img, figure');
@maddesigns
maddesigns / SassMeister-input.scss
Created March 4, 2014 08:24
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
// @mixin x-rem()
//
// mixin for easy use of rem with px as fallback
// usage: @include x-rem(14px);
// usage: @include x-rem(14px, font-size);
@maddesigns
maddesigns / SassMeister-input.scss
Created March 10, 2014 12:40
Generated by SassMeister.com.
// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----
%icon {
font-family: 'zenicons';
speak: none;
font-style: normal;
@maddesigns
maddesigns / SassMeister-input.scss
Created March 14, 2014 21:20
Generated by SassMeister.com.
// ----
// Sass (v3.3.2)
// Compass (v1.0.0.alpha.18)
// ----
// =============================================================================
// Modernizr mixin
//
// Table of contents:
// 1. Modernizr mixin
@maddesigns
maddesigns / SassMeister-input-HTML.markdown
Created March 16, 2014 09:53
Generated by SassMeister.com.

This text is set in JAF Bernina Sans, backed up by a Verdana stack. It uses a Sass map to scope font-size and line-height measurements to those specific typefaces, as Robin Rendle described. (Em units and max-widths, too.) See the variables and mixins in this other Pen.

Look at this Pen's own CSS and you'll see what I really wanted to explore. The paragraph element uses Verdana (and its associated measurements) by default, and only uses Bernina (and its associated measurements) if Bernina has loaded properly. The wf-active class is via Typekit font events. Progressive enhancement FTW.

When the composition widens and reaches a breakpoint, its size gets bumped up — again, considering Verdana by default and Bernina only if Bernina is present.


Tim B