Stylestats for popular Front-End Frameworks
Checkout stylestats here: https://github.com/t32k/stylestats
bjankord
/ stylestats.md
Last active
August 29, 2015 13:57
bjankord
/ a11y-datepicker.md
Created
April 30, 2014 21:57
Anyone know of a javascript date picker that is:
- WCAG 2.0 compliant
- Has Keyboard support
https://github.com/yargalot/grunt-accessibility - a little buggy compared to CodeSniffer
https://github.com/globant-ui/arialinter
http://www.karlgroves.com/2014/03/13/everything-you-know-about-accessibility-testing-is-wrong-part-4/ - grunt tenon a11y plugin
http://squizlabs.github.io/HTML_CodeSniffer/ - used to power grunt-accessibility
achecker api
test blockqoute
bjankord
/ githubcontributors.js
Created
November 18, 2014 15:24
I found this plugin for displaying github contributors in a list using githubs API but couldn't find its original repo. Wanted to post this up cause I'm sure I'll be using this on some projects
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
| /* | |
| * Project: BrazilJS Projects - Github Contributors | |
| * Description: List all contributors of some Github Repository | |
| * Author: Zeno Rocha | |
| * License: WTFPL | |
| */ | |
| ;(function ( $, window, undefined ) { | |
bjankord
/ viewportwidth-shape.css
Last active
August 29, 2015 14:16
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
| .shape { | |
| background: #832333; | |
| background: rgba(131,35,51,0.6); | |
| } | |
| @media screen and (min-width: 480px) { | |
| .shape { | |
| background: #81409f; | |
| background: rgba(129,64,159,0.6); | |
| } |
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
| function debug(text) { | |
| ((window.console && console.log) || (window.opera && opera.postError) || window.alert).call(this, text); | |
| } | |
| var test = "This is a test"; | |
| debug(test); |
bjankord
/ gist:2509534
Created
April 27, 2012 14:02
Picture element markup for high-resolution devices with polyfill markup for older browsers
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
| <picture alt="Alt tag describing the image represented"> | |
| <!--<source src="photo-s.jpg"/>--> | |
| <source src="photo-s.jpg"/> | |
| <source src="photo-s@2x.jpg" media="-webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> | |
| <!--<source src="photo-m.jpg" media="min-width:321px"/>--> | |
| <source src="photo-m.jpg" media="min-width:321px"/> | |
| <source src="photo-m@2x.jpg" media="min-width:321px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> | |
| <!--<source src="photo-l.jpg" media="min-width:641px"/>--> | |
| <source src="photo-l.jpg" media="min-width:641px"/> | |
| <source src="photo-l@2x.jpg" media="min-width:641px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> |
bjankord
/ gist:2509672
Created
April 27, 2012 14:23
Picture element with HTML media query variables
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
| <head> | |
| <mqs> | |
| <var name=”s@2x” media=”-webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” /> | |
| <var name=”m” media=”min-width:321px” /> | |
| <var name=”m@2x” media=”min-width:321px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” /> | |
| <var name=”l” media=”min-width:641px” /> | |
| <var name=”l@2x” media=”min-width:641px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” /> | |
| <var name=”xl” media=”min-width:1281px” /> | |
| <var name=”xl@2x” media=”min-width:1281px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” /> | |
| </mqs> |
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
| <picture alt="Alt tag describing the image represented"> | |
| <source src="photo.webp" type="image/webp"/> | |
| <source src="photo.mng" type="image/mng"/> | |
| <source src="photo.svg" type="image/svg+xml"/> | |
| <img src="photo-s.jpg" /> | |
| </picture> | |
| // Notes | |
| //---------------------------------------------------------------- | |
| If browser supported the webp image format it would use that image, |
OlderNewer