lesjames’s gists

lesjames / gist:5785224

Last active December 18, 2015 12:49 — forked from andymerskin/gist:5785147

	<div class="wrapper">
	<h1>Hello world.</h1>
	<div class="grid">
	<div class="grid__cell grid__cell--nav">
	<h2>Hello world.</h2>
	</div>
	<div class="grid__cell grid__cell--nav">
	<h2>Hello world.</h2>
	</div>
	<div class="grid__cell grid__cell--nav">

lesjames / index.html

Created November 26, 2012 04:05

A CodePen by Les James. Breakpoint Demo

	<div class="wrapper">
	<div class="grid">

	<div class="grid-cell main">
	<h2>A Big Piece of Garbage</h2>
	<p>You mean while I'm sleeping in it? And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! Bender, you risked your life to save me!</p>
	<h3>Leela's Homeworld</h3>
	<p>No! The cat shelter's on to me. Good news, everyone! I've taught the toaster to feel love! Would you censor the Venus de Venus just because you can see her spewers? Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain.</p>
	</div>

lesjames / gist:3879857

Created October 12, 2012 15:41

lesjames / index.html

Created September 9, 2012 04:33

	<div class="spotlight"></div>
	<div class="shiv"></div>

lesjames / _grid-helpers.scss

Created May 9, 2012 20:13

Modified Griddle

	// function for converting px to em
	@function em($px, $base: 16px) { @return (($px / $base) * 1em); }

	// column width functions
	@function fixed($col) { @return (($col * (em($grid-column) + em($grid-gutter)) - em($grid-gutter))) }
	@function fluid($col, $avail) { @return (100% / $avail) * $col; }


	// =========================================================
	// breakpoint mixin

lesjames / configure.scss

Created April 11, 2012 14:15

Breakpoint Code Examples

	$column: 60px; // column-width of your grid in pixels
	$gutter: 20px; // gutter-width of your grid in pixels
	$columns: 16; // maximum number of columns needed for layout
	$fixed-grid: 8; // number of columns to trigger fixed grid
	$ie-support: false; // number of columns for vintage ie (must match a layout)
	$show-grid: false; // shows a visual grid overlay

lesjames / config.rb

Created April 5, 2012 18:42

Sass Workshop

	# Require any additional compass plugins here.

	# Set this to the root of your project when deployed:
	http_path = "/"
	css_dir = "elements/css/"
	sass_dir = "sass/"
	images_dir = "elements/img/"
	javascripts_dir = "elements/js/"

	# You can select your preferred output style here (can be overridden via the command line):

lesjames / grid.scss

Created March 18, 2012 02:55

Grid and Media Query Generator

	// typography config
	$font-size: 16px !default; // your base font-size in pixels
	$line-height: 1.5em !default; // 24px line height
	$em: $font-size / 1em !default; // shorthand for outputting ems

	// grid size config
	$column: 48px !default; // column-width of your grid in pixels
	$gutter: 24px !default; // gutter-width of your grid in pixels

	// column-widths in a function, in ems

lesjames / loop.scss

Created March 17, 2012 23:53

MQ Mixin Loop

	// this throws and error when trying to use a function to generate the min-width

	@function width($col:1, $base:1) { @return (($col * ($column + $gutter) - $gutter) / $base) / $em; }

	@mixin respond-to($size) {
	@for $i from 5 through 16 {
	@if ($size == $i) { @media (min-width: width($i)) { @content } }
	}
	}

lesjames / dabblet.css

Created January 18, 2012 01:59

CSS Gradient Text

	/*
	* CSS Gradient Text
	* currently webkit only
	* CMS must duplicate the text into the title attribute so the CSS can pull it into the pseudo-element
	*/

	body { background: #333; font-family: Helvetica, sans-serif; font-size: 2em; padding: 3em 0; color: white; text-shadow: 0 -1px 1px rgba(0,0,0,.3); }
	h1 { position: relative; width: 10em; margin: 0 auto; font-weight: normal; }

	/* Duplicate the content and layer it over the original with a gradient mask */

Les James lesjames