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 / 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 / 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 / _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 / _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 / _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 / _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 );
@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 / _base_elements.scss
Created July 4, 2012 08:10
a simple sample of a _base_elements.scss file
// simple sample of base elements
// as this file grows, break out form-elements, buttons, etc.
body {
@include font-sans-serif;
padding: 10px 20px;
font-size: $base-font-size;
}
a {
color: $blackblue;
@matthewcopeland
matthewcopeland / _buttons.scss
Created July 4, 2012 08:25
sample _button.scss partial. driven by other partials.
// sample use of @mixin button styles on buttons.
$button-border-radius: 3px; // make this a variable so you can use the same radius on multi-buttons and connected radio-buttons.
@mixin button {
padding: 5px 10px;
@include border-radius( $button-border-radius );
@include box-shadow( inset 0 1px 3px 0 rgba($blackblue, .4) );
}
@mixin blue-button {
@include button;