Skip to content

Instantly share code, notes, and snippets.

View matthewcopeland's full-sized avatar

matt copeland matthewcopeland

41 followers · 57 following
View GitHub Profile
@matthewcopeland
matthewcopeland / gulpfile.js
Created September 23, 2015 01:42
Gulpfile example
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var del = require('del');
var es = require('event-stream');
var bowerFiles = require('main-bower-files');
var print = require('gulp-print');
var Q = require('q');
// == PATH STRINGS ========
@matthewcopeland
matthewcopeland / localstore_nav_controller.js
Created September 23, 2015 20:23
Using local storage to maintain navigation collapse state.
angular.module("app.controllers")
.controller("NavCtrl", [
"$scope",
"$window",
function($scope, $window) {
$scope.toggleCollapse = function() {
$scope.collapsed = !$scope.collapsed;
setCollapsed($scope.collapsed);
};
@matthewcopeland
matthewcopeland / center rotate unknown
Created June 26, 2012 16:59
rotate an unknown element and center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Renaud rotates</title>
<!-- always start with a css reset because browsers are evil -->
<link rel="stylesheet" type="text/css" href="https://raw.github.com/matthewcopeland/css/master/reset.css" />
<style>
html, body {
@matthewcopeland
matthewcopeland / known-size-rotate
Created June 26, 2012 16:27
rotate the text of a known-sized element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Renaud rotates</title>
<!-- always start with a css reset because browsers are evil -->
<link rel="stylesheet" type="text/css" href="https://raw.github.com/matthewcopeland/css/master/reset.css" />
<style>
.container {
position: absolute;
@matthewcopeland
matthewcopeland / _z-indexes.scss
Created July 4, 2012 06:51
sampel of a simple z-index.scss file.
// ALL z-indexes go in this file.
$checkbox-mask-z: 1;
$overlay-z: 2;
$modal-z: 3;
@matthewcopeland
matthewcopeland / _colors.scss
Created July 4, 2012 07:24
sample brand color palette partial
// sample brand color palette.
$off-white: #FEFEFE;
$blackblue: #162934;
$lightblue: #29AAE2;
$darkblue: #006FAB;
$lightpink: #C9006B;
$maroon: #7C0040;
@matthewcopeland
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
matthewcopeland / _typefaces.scss
Created July 4, 2012 07:12
sample with pictos
// import a sans and serif from google apis
@import url('http://fonts.googleapis.com/css?family=Crimson+Text:400italic,600,700,700italic,600italic');
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
// icon font - i prefer pictos - well worth the license.
@font-face { font-family: 'Pictos'; src: url('pictos-web.eot'); src: local('☺'), url('/fonts/pictos-web.woff') format('woff'), url('/fonts/pictos-web.ttf') format('truetype'), url('/fonts/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal; }
// declare your mixins for typeface-styles
@mixin font-sans-serif { font-family: "PT Sans", "Myriad Pro", Arial, Helvetica, Sans-Serif; }
@mixin font-serif { font-family: "Crimson Text", "Fjord One", Georgia, "Times New Roman", serif; }
@mixin font-icon { font-family: Pictos; }
@mixin light-text {
@matthewcopeland
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; }
}
@matthewcopeland
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 );