guyroutledge
guyroutledge
/ index.html
Created
June 25, 2012 10:54
Adding 'stacked' modifier to CSS modules via @CodePen.io
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen · A Pen by guyroutledge</title> | |
| <style> | |
| /* reset */ |
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
| // Generate @font-face declarations for a list of fonts | |
| // relative path to fonts | |
| $font-path: '../fonts/'; | |
| // the name that will be used in font-family property | |
| $font-families: 'font1', 'font2', 'font3'; | |
| // the filename of your font without the file extension | |
| $font-filenames: 'font1_filename', 'font2_filename', 'font3_filename'; | |
| $i: 1; |
guyroutledge
/ inline-validation.js
Created
September 9, 2013 15:45
Inline form validation with Gravity 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
| // if an invalid form field has been made valid, | |
| // remove the shouty error highlighting - if a valid | |
| // required field has been made invalid, start shouting | |
| $('input, textarea, select').on('change', function(){ | |
| var $input = $(this); | |
| var isRequired = $input.parents('.gfield').is('.gfield_contains_required'); | |
| var isValid = $input.is(':valid'); | |
| if ( isRequired && isValid ) { |
guyroutledge
/ mixin-selection.scss
Created
October 18, 2013 13:44
Mixin for styling highlighted text
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 selection($background, $foreground:#fff) { | |
| ::-moz-selection { background: $background; color: $foreground; text-shadow: none; } | |
| ::selection { background: $background; color: $foreground; text-shadow: none; } | |
| } |
guyroutledge
/ mixin-background-image-dimensions.scss
Created
October 18, 2013 13:45
A mixin for setting an elements width and height to the correct size for a background image
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 background-image-dimensions($image) { | |
| width:image-width($image); | |
| height:image-height($image); | |
| background-image:url($image); | |
| } |
guyroutledge
/ image-replacement.scss
Created
October 18, 2013 13:48
A mixin for doing text-indent image replacement
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
| %screen-reader-text { | |
| text-align:left; | |
| text-indent:-9999px; | |
| } | |
| @mixin background-image-dimensions($image) { | |
| width:image-width($image); | |
| height:image-height($image); | |
| background-image:url($image); | |
| } | |
| @mixin image-replacement($image) { |
guyroutledge
/ mixin-respond-to.scss
Created
October 18, 2013 13:50
A mixin for speeding up writing simple media queries
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 respond-to($breakpoint, $property:max-width) { | |
| @media screen and ($property:$breakpoint) { | |
| @content; | |
| } | |
| } |
guyroutledge
/ mixin-placeholder.scss
Created
October 18, 2013 13:51
A mixin for styling placeholder text
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 placeholder() { | |
| ::-webkit-input-placeholder { | |
| @content; | |
| } | |
| ::-moz-placeholder { | |
| @content; | |
| } | |
| :-moz-placeholder { | |
| @content; | |
| } |
guyroutledge
/ function-calc-em.scss
Created
October 18, 2013 13:54
A Sass function for turning pixels into ems
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
| @function calc-em($target-px, $context) { | |
| @return ($target-px / $context) * 1em; | |
| } |
guyroutledge
/ podcast.xml
Created
April 28, 2014 11:17
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
| --- | |
| layout: nil | |
| --- | |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> | |
| <channel> |
OlderNewer