Skip to content

Instantly share code, notes, and snippets.

View jlong's full-sized avatar
🚀

John W. Long jlong

🚀
View GitHub Profile
#\ -p 4000
gem 'activesupport', '2.3.5'
gem 'serve', '0.11.2'
require 'serve'
require 'serve/rack'
root = File.dirname(__FILE__)
http_path = "/"
http_stylesheets_path = "/stylesheets"
http_images_path = "/images"
http_javascripts_path = "/javascripts"
sass_dir = "sass"
css_dir = "public/stylesheets"
images_dir = "public/images"
javascripts_dir = "public/javascripts"
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="styles.sass" type="text/css" media="screen" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
@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>
#\ -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 / _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 / links.sass
Created November 8, 2010 22:40
links.sass
@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
#\ -p 4000
gem 'activesupport'
gem 'serve'
require 'serve'
require 'serve/rack'
# The project root directory
root = ::File.dirname(__FILE__)
@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>