Skip to content

Instantly share code, notes, and snippets.

View jlong's full-sized avatar
🚀

John W. Long jlong

🚀
272 followers · 12 following
View GitHub Profile
@jlong
jlong / three-column.scss
Created June 24, 2011 22:51
3-column grid trick with nth-child clearing for variable height elements
section.three-column-grid {
clear: both;
width: 960px;
@include clearfix;
> section {
float: left;
padding: 0 10px;
width: 300px;
@jlong
jlong / config.ru
Created June 23, 2011 19:56
Directory Index w/ Rack
# The project root directory
$root = ::File.dirname(__FILE__)
# Common Rack Middleware
use Rack::ShowStatus # Nice looking 404s and other messages
use Rack::ShowExceptions # Nice looking errors
#
# From Rack::DirectoryIndex:
# https://github.com/craigmarksmith/rack-directory-index/
@jlong
jlong / config.ru
Created June 23, 2011 19:42
Simple Rack App
class HelloWorld
def call(env)
[200, {"Content-Type" => "text/plain"}, ["Hello world!"]]
end
end
run HelloWorld.new
@jlong
jlong / rainbow.html
Created May 27, 2011 22:10
Double Rainbow with Sass and Compass (requires a modern browser like Safari or Chrome). See also: http://www.flickr.com/photos/johnwlong2000/5766405202
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="/stylesheets/rainbow.css" />
</head>
<body>
<div class="rainbow"></div>
<div class="rainbow"></div>
@jlong
jlong / config.ru
Created March 29, 2011 04:41 — forked from jcamenisch/config.ru
#\ -p 4000
gem 'activesupport'
gem 'serve'
require 'serve'
require 'serve/rack'
# The project root directory
root = ::File.dirname(__FILE__)
@jlong
jlong / columns.sass
Created December 17, 2010 06:28
Two, three, and four column layout mixins for Sass (requires Compass).
=two-column($width, $gutter)
$colwidth: ($width - $gutter) / 2
+clearfix
margin-left: -($gutter / 2)
margin-right: -($gutter / 2)
.column_1, .column_2
float: left
padding-left: $gutter / 2
padding-right: $gutter / 2
width: $colwidth
@jlong
jlong / links.sass
Created November 8, 2010 22:40
links.sass
@jlong
jlong / _multi-line-button.scss
Created October 20, 2010 15:45
Sass files converted to SCSS from the article: [Multi-line Buttons with Compass, Sass, and CSS3](http://wiseheartdesign.com/articles/2010/10/19/multi-line-buttons-with-compass-sass-and-css3/)
@mixin multi-line-button($base-color) {
@include background-clip("padding-box");
border-width: 1px;
@include border-radius(6px);
border-style: solid;
color: white;
display: block;
margin: 0.2em auto;
padding: 12px 15px;
text-align: center;
@jlong
jlong / config.ru
Created October 11, 2010 21:13
#\ -p 4000
PublicDir = File.join(Dir.pwd, 'public')
module Rack
# Route directory URI's to index file.
class DirectoryIndex
def initialize(app, index='index.html')
@app = app
@index = [index].flatten
@jlong
jlong / example.html
Created September 23, 2010 23:34
A nice multi-line button mixin for Sass and Compass
<p>
<a href="/signup/" class="multiline_button blue" style="width: 245px">
<big>Start Free Trial</big>
<small>30-days free! Signup in 60 seconds</small>
</a>
</p>
<p>
<a href="/signup/" class="multiline_button brown" style="width: 245px">
<big>Start Free Trial</big>