matthewcopeland’s gists

matthewcopeland / beveled_list.haml

Created August 2, 2012 23:56

beveled list w haml and sass

	ul.beveled
	- 4.times do
	li List item

matthewcopeland / beveled_list.css

Created August 2, 2012 23:38

Beveled list

	ul.beveled {
	background-color: #efefef; /* any color darker than white */
	list-style-type: none;
	margin: 0;
	}
	ul.beveled li:not(:first-of-type) {
	border-top: 1px solid rgba(255,255,255, 0.2;
	}

	ul.beveled li:not(:last-of-type) {

matthewcopeland / schab-blue-bird.html

Created July 10, 2012 04:30

just for you, schab. This will center your image on a single page.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body, div { margin: 0; padding: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; }
	div { display: table; text-align: center; }
	img { display: table-cell; vertical-align: middle; position: relative; }
	</style>
	</head>
	<body>

matthewcopeland / github.js

Created July 9, 2012 16:19

corrected github.js for v3 api

	var github = (function(){
	function render(target, repos){
	var i = 0, fragment = '', t = $(target)[0];

	for(i = 0; i < repos.length; i++) {
	fragment += '<li><a href="'+repos[i].html_url+'">'+repos[i].name+'</a><p>'+repos[i].description+'</p></li>';
	}
	t.innerHTML = fragment;
	}
	return {

matthewcopeland / _modal_partial.scss

Created July 4, 2012 08:43

simple sample _partial.scss file. this partial only needs to apply positional styles because all visual styles are driven by @Mixins from a controlled source.

	// simple sample _partial.scss file.
	// this partial only needs to apply positional style
	// because all visual styles are driven by @mixins from a controlled source.
	.modal.form {

	form {
	p {
	display: inline-block;
	width: 50%;
	margin: 10px 0;

matthewcopeland / _buttons.scss

Created July 4, 2012 08:25

sample _button.scss partial. driven by other partials.

	// sample use of @mixin button styles on buttons.
	$button-border-radius: 3px; // make this a variable so you can use the same radius on multi-buttons and connected radio-buttons.

	@mixin button {
	padding: 5px 10px;
	@include border-radius( $button-border-radius );
	@include box-shadow( inset 0 1px 3px 0 rgba($blackblue, .4) );
	}
	@mixin blue-button {
	@include button;

matthewcopeland / _base_elements.scss

Created July 4, 2012 08:10

a simple sample of a _base_elements.scss file

	// simple sample of base elements
	// as this file grows, break out form-elements, buttons, etc.
	body {
	@include font-sans-serif;
	padding: 10px 20px;
	font-size: $base-font-size;
	}

	a {
	color: $blackblue;

matthewcopeland / _border-box.scss

Created July 4, 2012 07:53

save your sanity with box-sizing: border-box

	// save your sanity with box-sizing border-box
	* { @include box-sizing( border-box ); }

matthewcopeland / _mixins.scss

Created July 4, 2012 07:46

a simple mixin file sample

	@mixin box-shadow( $shadow ) {
	-webkit-box-shadow: $shadow;
	-moz-box-shadow: $shadow;
	box-shadow: $shadow;
	}
	@mixin linear-gradient( $start, $stop1, $stop2 ) {
	background-image: -webkit-linear-gradient( $start, $stop1, $stop2 );
	background-image: -moz-linear-gradient( $start, $stop1, $stop2 );
	background-image: -ms-linear-gradient( $start, $stop1, $stop2 );
	background-image: -o-linear-gradient( $start, $stop1, $stop2 );

matthewcopeland / _gradients.scss

Created July 4, 2012 07:39

simple sample _gradients.scss partial, driven by _colors.scss

	// let's chain our @mixin linear-gradient from _mixins.scss
	// and drive the colors from _colors.scss
	@mixin blue-gradient {
	@include linear-gradient( top, $lightblue, $darkblue );
	&:hover { @include linear-gradient( top, lighten($lightblue, 10%), $darkblue );
	&:active { background: $darkblue; }
	}

matt copeland matthewcopeland