Skip to content

Instantly share code, notes, and snippets.

View jcroft's full-sized avatar

Jeff Croft jcroft

138 followers · 48 following
  • Seattle, WA
View GitHub Profile
@jcroft
jcroft / gist:2732742
Created May 19, 2012 23:19
Superconference predictions

Super conference predictions

Pac-12

Oregon Oregon State Washington Washington State Cal South Cal UCLA

@jcroft
jcroft / layout.sass
Created March 2, 2012 20:35
Example of how to use this media query mixin: https://github.com/jcroft/jeffcroft-css-framework-v2/blob/master/framework/css/core/_media_queries.sass
div#content-wrapper
+container
#left-sidebar
+column(100%)
+respond-to(tablet-large)
width: 25%
#main-content
+column(100%)
@jcroft
jcroft / layout.sass
Created March 2, 2012 20:33
Example of using Sass media query bubbling
div#content-wrapper
+container
#left-sidebar
+column(100%)
@media only screen and (min-width : 768px)
width: 25%
#main-content
+column(100%)
@jcroft
jcroft / layout.sass
Created March 2, 2012 20:15
Example layout using this grid system: https://github.com/jcroft/jeffcroft-css-framework-v2/blob/master/framework/css/contrib/_grid_relative.sass
div#content-wrapper
+container
#left-sidebar
+column(25%)
#main-content
+column(50%)
#right-sidebar
@jcroft
jcroft / layout.sass
Created March 1, 2012 04:51
How easy responsive design can be with Sass
#content-wrapper
+container
#about
// Default (smallest screens)
+column(100%)
background-color: #ccc
// Respond to other screen widths
@jcroft
jcroft / input.sass
Created February 6, 2012 21:51
What I really want in Sass: a syntax for doing media queries inside a selector or mixin...
// Typical grid column mixin..
=column($percent)
width: $percent
float: left
// Fancy new pseudo-selector syntax for media queries which would let my
// column from above switch to 100% when the window got narrower than 600px...
&@media only screen and (min-width: 600px)
width: 100%
@jcroft
jcroft / example_page.html
Created February 1, 2012 09:55
First stab at a simple responsive/fluid grid system with fixed gutters
<!doctype html>
<head>
<meta charset="utf-8">
<title>Grid test</title>
<link rel="stylesheet" href="css/example.css">
</head>
<body>
<div id="wrapper">
@jcroft
jcroft / django_settings.py
Created January 31, 2012 17:08
Preventing comment spam
COMMENTS_SECRET = 'any_old_string_you_like'
@jcroft
jcroft / PHP
Created October 4, 2011 23:32
<?php
Print "Hello, World!";
?>
@jcroft
jcroft / grid.sass
Created March 21, 2011 18:09
The grid component from my personal front-end framework. Brief demo here: http://jeffcroft.com/static/misc/grid_frameworks.mov
// REQUIRED VARS. Defaults to a 950px wide, 24-column grid that has 30px wide units and 10px wide
// gutters. If you do the fluid grid, then this 950/24/30/10px size will become the maximum size.
$grid_type: fixed !default
$grid_columns: 24 !default
$grid_column_width: 30 !default
$grid_gutter_width: 10 !default
// GENERATED VARS. You can ignore these.
$grid_full_width: $grid_columns * $grid_column_width + $grid_columns * $grid_gutter_width - $grid_gutter_width
$grid_column_width_percent: ($grid_column_width / $grid_full_width * 100) * 1%