Charlie Cathcart pixelchar
pixelchar
/ word-break.css
Created
January 21, 2014 19:18
Styles for setting up word-breaking and hyphenation.
This file contains hidden or 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
| .break { | |
| -ms-word-break: break-all; | |
| word-break: break-all; | |
| word-break: break-word; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| hyphens: auto; | |
| } |
This file contains hidden or 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
| /* Empty Elements */ | |
| .debug div:empty, .debug span:empty,.debug li:empty,.debug p:empty,.debug td:empty,.debug th:empty { | |
| padding: 20px; | |
| border: 5px dotted yellow !important; | |
| } | |
| /* Empty Attributes */ | |
| .debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] { | |
| border: 5px solid yellow !important; | |
| } |
pixelchar
/ selective-charcters-google-web-fonts.html
Last active
December 30, 2015 10:08
Only request specific characters from a font on Google Web Fonts, and limit the download size using the '&text=' parameter. n also do Unicode characters by url-encoding the UTF-8 representation of the string.http://googlewebfonts.blogspot.com/2011/04/streamline-your-web-font-requests.html
This file contains hidden or 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
| <link href='http://fonts.googleapis.com/css?family=Special+Elite&text=MyText' rel='stylesheet' type='text/css'> |
pixelchar
/ sass-loop.scss
Created
December 4, 2013 15:59
Loop syntax for SCSS
http://blog.codepen.io/2013/12/04/loops-preprocessor-syntaxes/
This file contains hidden or 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
| @for $i from 1 through 15 { | |
| div { | |
| &:nth-child(#{$i}) { | |
| &:after { | |
| content: "#{$i}"; | |
| } | |
| } | |
| } | |
| } |
pixelchar
/ retina-mixin.scss
Created
December 4, 2013 14:35
Retina/high-dpi media query mixin
http://robots.thoughtbot.com/towards-a-retina-web-follow-up/
This file contains hidden or 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 retina($ratio: 1.3) { | |
| @media only screen and (-webkit-min-device-pixel-ratio: $ratio), | |
| only screen and (min--moz-device-pixel-ratio: $ratio), | |
| only screen and (-o-min-device-pixel-ratio: ($ratio*10)/10), | |
| only screen and (min-resolution: #{round($ratio*96)}dpi), | |
| only screen and (min-resolution: #{$ratio}dppx) { | |
| @content; | |
| } | |
| } |
pixelchar
/ rgba-fallback.scss
Created
December 2, 2013 20:48
Sass mixin for generating any property with an rgba() color
http://jsfiddle.net/csswizardry/h3eG8/
This file contains hidden or 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 rgba($property, $red, $green, $blue, $alpha) { | |
| #{$property}: rgb(#{$red}, #{$green}, #{$blue}); | |
| #{$property}: rgba(#{$red}, #{$green}, #{$blue}, #{$alpha}); | |
| } |
pixelchar
/ multi-font-face-syntax.css
Last active
December 27, 2015 09:59
Multi-weight, multi-style @font-face syntax.This example sets up Source Sans Pro in regular, italic, extra light, and semi-bold under 1 font name.
This file contains hidden or 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
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('assets/fonts/SourceSansPro-Regular.eot'); | |
| src: url('assets/fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), | |
| url('assets/fonts/SourceSansPro-Regular.woff') format('woff'), | |
| url('assets/fonts/SourceSansPro-Regular.ttf') format('truetype'), | |
| url('assets/fonts/SourceSansPro-Regular.svg#source_sans_proregular') format('svg'); | |
| font-weight: 400; | |
| font-style: normal; | |
| } |
pixelchar
/ stylish-file-upload.css
Created
November 1, 2013 13:20
Stylish file upload using <label> to active an off-canvas file input field Source: http://jsfiddle.net/rudiedirkx/8hzjP/10/
This file contains hidden or 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
| #picture { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| label { | |
| cursor: pointer; | |
| } |
pixelchar
/ apple-mobile-web-app-title.html
Created
October 24, 2013 18:11
Meta tag to use to customize the title text for a web shortcut icon on an iOS home screen
This file contains hidden or 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
| <meta name="apple-mobile-web-app-title" content="Short name for icon title on home screen"> |
pixelchar
/ disable-enter-key-submit.js
Created
October 15, 2013 14:26
Disable the “Enter” key in forms
This file contains hidden or 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
| $("#form").keypress(function(e) { | |
| if (e.which == 13) { | |
| return false; | |
| } | |
| }); |