Skip to content

Instantly share code, notes, and snippets.

View rileyjshaw's full-sized avatar
💭
Riley is typing…

Riley Shaw rileyjshaw

💭
Riley is typing…
View GitHub Profile
@rileyjshaw
rileyjshaw / Sass-list-operation.markdown
Created September 1, 2013 08:27
A Pen by Riley Shaw.

Sass list operation

A quick demo showing a mathematical operation being applied to each item in a space-separated list. Not elegant, but it works - please offer suggestions if I've missed a more obvious way to do this.

UPDATED 15/11/13 Output a properly indexed list, rather than a length(2) list consisting of a long string and the final value. Sass lists are yucky.

A Pen by Riley Shaw on CodePen.

License.

@rileyjshaw
rileyjshaw / Perspective-Buttons.markdown
Created October 16, 2013 08:46
A Pen by Riley Shaw.

Perspective Buttons

Playing around with rotateX and a bit of trig.

The perspective effect can be added to anything; a site where each content block was extruded could look interesting.

A Pen by Riley Shaw on CodePen.

License.

@rileyjshaw
rileyjshaw / Nested-Radio-Menu.markdown
Created October 16, 2013 08:48
A Pen by Riley Shaw.

Nested Radio Menu

Trying to make a semantic vertical menu using nested radio buttons and CSS.

A Pen by Riley Shaw on CodePen.

License.

@rileyjshaw
rileyjshaw / Color-jump!.markdown
Created October 16, 2013 08:48
A Pen by Riley Shaw.

Color jump!

Jump from x to y in z steps. I created this to automate color picking during a MasterCard hackathon. Cleaned it up later, I hope it's useful!

Usage: include function "bound" and mixin "color-steps"

+color-steps($steps, $color1, $color2)

A Pen by Riley Shaw on CodePen.

@rileyjshaw
rileyjshaw / Terminal-Display.markdown
Created October 16, 2013 08:48
A Pen by Riley Shaw.

Terminal Display

Use JavaScript to hide paragraphs in a "terminal" div, then return them using fake "echo" commands.

Features:

  • Typing speed is semi-random to appear more human
  • A "skip" variable exists, but isn't used in this demo. Setting skip to 1 outputs the rest of the text almost immediately.

I used this to promote "hack nights" at my University (qhack.ca). Feel free to use it wherever!

@rileyjshaw
rileyjshaw / Stripey-text.markdown
Created October 16, 2013 08:49
A Pen by Riley Shaw.

Stripey text

A very hack way of putting stripes on your text. Make sure to update the stripe # in both the markup (1..8) and the styles ($steps).

A Pen by Riley Shaw on CodePen.

License.

Worst Practices (thoroughly commented)

Some Javascript that I threw together for a friend to 1) solve his problem, 2) explain some hacky JS tricks, and 3) attempt to show him that they aren't always great to use since they obfuscate your code.

There's actually some cool stuff going on in here, so I've commented it thoroughly. Please let me know if anything requires clarification, if you have suggestions on how my code can be improved (or made even grosser), or if you just want to chat!

A Pen by Riley Shaw on CodePen.

License.

@rileyjshaw
rileyjshaw / CSS-Beach.markdown
Created October 16, 2013 08:50
A Pen by Riley Shaw.

CSS Beach

Terrible semantics, terrible resource utilization, probably broken in most browsers. But it was fun! Built this with @uniphil way back when.

Here's a cool picture.

A Pen by Riley Shaw on CodePen.

License.

@rileyjshaw
rileyjshaw / Simple-Flash-Reader.markdown
Created October 16, 2013 08:51
A Pen by Riley Shaw.