matt copeland matthewcopeland
matthewcopeland
/ known-size-rotate
Created
June 26, 2012 16:27
rotate the text of a known-sized element.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ center rotate unknown
Created
June 26, 2012 16:59
rotate an unknown element and center
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ALL z-indexes go in this file. | |
| $checkbox-mask-z: 1; | |
| $overlay-z: 2; | |
| $modal-z: 3; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // sample brand color palette. | |
| $off-white: #FEFEFE; | |
| $blackblue: #162934; | |
| $lightblue: #29AAE2; | |
| $darkblue: #006FAB; | |
| $lightpink: #C9006B; | |
| $maroon: #7C0040; |
matthewcopeland
/ _gradients.scss
Created
July 4, 2012 07:39
simple sample _gradients.scss partial, driven by _colors.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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
/ _border-box.scss
Created
July 4, 2012 07:53
save your sanity with box-sizing: border-box
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // save your sanity with box-sizing border-box | |
| * { @include box-sizing( border-box ); } |
matthewcopeland
/ _base_elements.scss
Created
July 4, 2012 08:10
a simple sample of a _base_elements.scss file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ _buttons.scss
Created
July 4, 2012 08:25
sample _button.scss partial. driven by other partials.
OlderNewer