Skip to content

Instantly share code, notes, and snippets.

View anthonyshort's full-sized avatar

Anthony Short anthonyshort

539 followers · 93 following
View GitHub Profile
@anthonyshort
anthonyshort / index.html
Created February 2, 2013 11:35
Separating text and size styles to allow for super flexible typography. I usually define a bunch of title styles and add modifiers to them to adjust the color and whatnot. For this design, I first wrote down all the properties for every title and started to pull out common properties. By pulling all the sizes out into their own classes I can def…
// TEXT STYLES
// --------------------------------------------
.text-1
color: $dark-text
text-transform: uppercase
.text-2
color: $blue
text-transform: uppercase
@anthonyshort
anthonyshort / high-dpi-media.scss
Created November 22, 2012 12:29 — forked from kimroen/high-dpi-media.scss
A Sass media query mixin that captures almost all high DPI aware devices.
/* ----------------------------------------------------------------------- */
/* */
/* Improved upon a mixin from 37signals and combined */
/* with these numbers from marc. */
/* */
/* 37signals-version: */
/* http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss */
/* */
/* @kimroen */
/* */
@anthonyshort
anthonyshort / _paths.scss
Created November 7, 2012 04:07
Path Functions
@function icon-url($path) {
@return url("../../assets/icons/#{$path}");
}
@function bg-url($path) {
@return url("../../assets/bg/#{$path}");
}
@function asset-url($path) {
@return url("../../assets/#{$path}");
@anthonyshort
anthonyshort / gist:3990607
Created October 31, 2012 23:25
Grunt Sass
sass: {
options: {
loadPath: ['./components/stitch-grid']
}
}
@anthonyshort
anthonyshort / _grid-background.scss
Created October 31, 2012 00:09
Grid Background with Gradients
@mixin grid-background($column-color: rgba(255,0,0,0.2), $baseline-color: rgba(0,0,0,0.3)) {
background:
// Baseline
-webkit-linear-gradient(top, $baseline-color 1px, transparent 1px),
// Grid
-webkit-linear-gradient(left, $column-color 0, $column-color $grid-column-width, transparent $grid-column-width)
;
background-size: $grid-baseline $grid-baseline, ($grid-column-width + $grid-gutter-width) $grid-baseline;
background-position: 0 ($grid-baseline - 1);
}
@anthonyshort
anthonyshort / _image-rendering.sass
Created October 28, 2012 05:15
Image rendering mixins
// Sharpen an image if it has become blurry due to upscaling or downscaling
// https://developer.mozilla.org/en/CSS/image-rendering
@mixin sharpen-image
image-rendering:-moz-crisp-edges
// When photos are upscaled or downscaled, they often get blurry. Don't use
// this on flat color images, they will still appear blurry.
// https://developer.mozilla.org/en/CSS/image-rendering
@mixin high-quality-image
image-rendering:optimizeQuality
@anthonyshort
anthonyshort / jshint.js
Created October 12, 2012 05:03
JSHint Options
jshint: {
// See http://www.jshint.com/docs/
options: {
// Enforce camelcase variables
camelcase: true,
// Always put curly braces around blocks in loops and conditionals
curly: true,
@anthonyshort
anthonyshort / grid.scss
Created October 10, 2012 02:54
Idea for Sass modules
@module grid {
$columns: 12;
$gutter: 30px;
$baseline: 20px;
$width: 60px;
@function columns($n, $size) {
}
@anthonyshort
anthonyshort / derp.less
Created October 4, 2012 23:49
DERP DERP LESS DERP
.btn-large {
line-height: 44px;
.caret {
margin-top:14px;
}
[class^="icon-"] {
margin-top: 2px;
}
.btn-group > & {
font-size: 16px;
@anthonyshort
anthonyshort / forms.less
Created October 3, 2012 06:21
no idea
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);