Skip to content

Instantly share code, notes, and snippets.

View gavinmcfarland's full-sized avatar

Gavin McFarland gavinmcfarland

115 followers · 66 following
View GitHub Profile
@gavinmcfarland
gavinmcfarland / icon-sprite-mixin
Created January 18, 2013 13:50
A mixin for SASS that uses background sizing to help you create icons from a sprite.
@mixin icon($index, $size) {
line-height: 1;
vertical-align: middle;
&:before {
// Manually define the icon set */
$columns: 5; // Number of icons going across
background-image: url(icons/large/sprite.png);
background-size: $columns * 100%;
@gavinmcfarland
gavinmcfarland / grid-mixin.scss
Created July 19, 2013 16:55
A mixin that works out all the percentages for your grid. Just specify how many columns it's has and how big you want the gutter (in percentages) to be.
@mixin grid($columns, $gutter) {
@if $columns > 1 {
$fWidth: (1/$columns * 100%) - ($gutter * ($columns - 1) / $columns);
@include clearfix;
> li {
width: #{$fWidth};
box-sizing: border-box;
float: left;
@gavinmcfarland
gavinmcfarland / sum-function.scss
Last active December 20, 2015 20:49
This is SASS function which adds up all the values in a list.
@function sum($list) {
$total: 0;
// Check it's the first item in the list and set it as the total
@each $item in $list {
@if $item == nth($list, 1) {
$total: $item;
}
// For each item in the list, add it to the total
$total: $total + $item;
}
@gavinmcfarland
gavinmcfarland / colour-compliance.scss
Created August 9, 2013 15:09
@function contrast-compliance($background-color, $foreground-color) {
// Colours
$bc: $background-color;
$fc: $foreground-color;
// Thresholds
$brightness-threshold: 125;
$color-threshold: 500;
$fr: red($fc);
@gavinmcfarland
gavinmcfarland / example.md
Last active December 20, 2015 23:29

For example

.example
    color = rgb(247,247,247)

    background-color: color
    overflow: hidden 150px
@gavinmcfarland
gavinmcfarland / .profile
Last active May 20, 2024 03:01
My Local Development Setup
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
@gavinmcfarland
gavinmcfarland / contrast-functions.scss
Last active December 21, 2015 08:59
A selection of functions that help create contrasting colours.
//////////////////////////////////////////////////////////////
// Dark //
//////////////////////////////////////////////////////////////
// Checks to see if a colour is dark. The threshold defaults
// to 20% if not set.
// Usage: dark($color, [$threshold])
@function dark($color, $threshold: 20%) {
@gavinmcfarland
gavinmcfarland / gist:35e3e31066a1db4a0005
Last active August 29, 2015 14:03
Framer Examples

Creating a layer

layer = new Layer
  width: 100
  height: 100

Animating a layer

@gavinmcfarland
gavinmcfarland / gist:8ecd26973f8e1ae78a10
Created July 1, 2014 13:07
Example of a pivoting panel
# Draw background
myBackground = new Layer
width: 320
height: 580
backgroundColor: utils.randomColor(0.5)
# Turn off CSS transforms
myBackground.style = {"-webkit-transform":"none"}
# Create toggling layer
@gavinmcfarland
gavinmcfarland / gist:f2b2c8c5928fc66dcf39
Last active August 29, 2015 14:03
Example of changing state layer based on the current state of another layer
# Create layer 1
layer1 = new Layer
x: 200
y: 200
width: 100
height: 100
# Add your required states
layer1.states.add
second: {y:100, scale:0.6, rotationZ:100}