Skip to content

Instantly share code, notes, and snippets.

View ry5n's full-sized avatar

Ryan Frederick ry5n

  • Shopify
  • Vancouver, BC, Canada
View GitHub Profile
<!--
# Ratchet in Stencil
A set of HTML snippets implementing select [Ratchet][] components using
[Stencil][].
The demo is intended to highlight the differences, especially:
1. Stencil requires fewer component definitions to achieve the same set of
Dear Commissioners,
Although I’m not a US citizen, I’ve lived in your country and have convinced at least one of your number to get broadband.
In many ways the FCC’s responsibilities – if not legal, then cultural, actual – are international in scope. Therefore I’m dismayed by news that your organization, led especially by Mr. Wheeler, seems poised to abandon the idea that internet traffic should be free of interference and discrimination by its carriers. In other words, you – an organization ostensibly with the public interest at heart – seem keen on throwing away the idea of net neutrality.
Don’t do it. We all – the entire world – deserver better.
Especially since the technology that is embodied in the open internet is so valuable. Some people are just now getting it, and plenty have yet to have access to it at all. Don’t set this precedent. Change your minds, and help us all have equal access to information. Business will get along fine. The rest of us will thank you.
@ry5n
ry5n / SassMeister-input.scss
Created November 18, 2013 07:05
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// Define media as a variable
$media-small: '(max-width: 20em)';
$media-output: true;
$line-height: 1.4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ry5n
ry5n / sass-input-placeholders
Created March 13, 2012 07:06
CSS3 Input Placeholders using Sass 3.2
// Handle browser inconsistencies with placeholder pseudo-elements.
@mixin placeholders {
&::-webkit-input-placeholder { @content; }
&:-moz-placeholder { @content; }
&::placeholder { @content; }
}
// Set the colour for input placeholder text.
@mixin placeholder($color: #bfbfbf) {
@include placeholders {
@ry5n
ry5n / -ry5n-vertical-rhythm
Created March 13, 2012 04:06
An alternative to Compass's built-in vertical-rhythm module. Only supports output values in rem, with pixel fallbacks
// Configurable variables
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻
// Absolute height of body text, in pixels
$base-font-size: 16px !default;
// Absolute height of one line of type, in pixels
$base-line-height: 24px !default;
// The font unit to use when returning values in rhythm functions
@ry5n
ry5n / dry-with-sass-lists
Created December 12, 2011 01:49
Using Sass lists for DRY-er code
// Shared colors for buttons and alerts
//
// Use Sass lists to avoid writing out repeating patterns of Sass code.
//
// For example, the following avoids having to write out a selector and
// set of style rules for each alert type, when only class and
// variable names are different.
//
// Follows (and many thanks to) Nathan Weizenbaum (@nex3)’s comment at:
// http://groups.google.com/group/sass-lang/msg/987926ad9fe5ad43?