Skip to content

Instantly share code, notes, and snippets.

View keithwyland's full-sized avatar

Keith Wyland keithwyland

5 followers · 3 following
View GitHub Profile
@keithwyland
keithwyland / Spritz-Speed-Reading-V2.markdown
Created March 10, 2014 15:26
A Pen by Charlotte Dann.

Spritz Speed Reading V2

Use Spritz right now! Options for speed, localStorage saving, jog forward/backward, text size and dark/light theme, also with keyboard controls and progress bar. You'll never need to read conventionally again.

localStorage implementation by Keith Wyland, thanks Keith!

A Pen by Charlotte Dann on CodePen.

License.

@keithwyland
keithwyland / gridmashup.html
Last active December 17, 2015 10:09
Grid Mashup A CodePen by Keith Wyland. Grids Mashup - Taking pieces from both CSS-Tricks "Don't Over-think It Grids" and CSSWizardry Grids, to make my own mashup of a grid. Mainly, I didn't want to always deal with the inline-block spacing problems. So I'm going with floats (you'll notice that breaks down in some cases, but I'm OK with that in t…
<div class="page-wrap">
<h1><span class="csstricks">CSS-Tricks</span> and <span class="csswizardry">CSSWizardry</span> Grids Mashup</h1>
<p>Using floats and box-sizng: border-box (from <a href="http://css-tricks.com/dont-overthink-it-grids/">CSS-Tricks</a>) and .grid__item, ".one-half"-style size names, and margin/padding cancelling (from <a href="http://csswizardry.com/csswizardry-grids/">CSSWizardry</a>).</p>
<p><em>(This is a work in progress)</em></p>
<h2>Simple Sections</h2>
<div class="grid">
<div class="grid__item one-half">
@keithwyland
keithwyland / Ruby Notepad Bookmarklet
Created January 30, 2013 04:42 — forked from jakeonrails/Ruby Notepad Bookmarklet
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
@keithwyland
keithwyland / Ruby Notepad Bookmarklet
Created January 30, 2013 04:42 — forked from jakeonrails/Ruby Notepad Bookmarklet
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
@keithwyland
keithwyland / index.html
Created June 26, 2012 15:41
A web page created at CodePen.io
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ribbon Heading &middot; CodePen</title>
<style>
@keithwyland
keithwyland / index.html
Created June 26, 2012 14:45
Simple CSS Buttons
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple CSS Buttons &middot; CodePen</title>
<style>
.btn {
@keithwyland
keithwyland / dabblet.css
Created March 20, 2012 18:46
CSS3 Hover Image
/** CSS3 Hover Image
* The first commented line is your dabblet’s title
*/
*{transition: all 0.5s ease;}
.container {
float: left;
border: 1px solid black;
width: 200px;
}
@keithwyland
keithwyland / dabblet.css
Created December 19, 2011 16:19
Messing Around with Dabblet
/**
* Messing Around with Dabblet
*/
html {
background: #efefef;
background: linear-gradient(45deg, #efefef, #990000);
min-height: 100%;
}
p {
transition: all ease 0.5s;