Simple Feature Detection Library to check JS, SVG and Touch support. Replaces no-js class on html element with js, adds no-svg if no support for SVG and touch or no-touch depending on the used device.
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
// Listen for orientation changes | |
window.addEventListener("orientationchange", function() { | |
// Announce the new orientation number | |
alert(window.orientation); | |
}, false); | |
// Listen for resize changes | |
window.addEventListener("resize", function() { | |
// Get screen size (inner/outerWidth, inner/outerHeight) | |
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
// | |
// LESS Utility Mixins | |
// ------------------- | |
// Fill the parent element | |
.fill(@spacing: 0) { | |
position: absolute; | |
top: @spacing; bottom: @spacing; | |
left: @spacing; right: @spacing; | |
} |
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 Breakpoint Mixin | |
/// | |
/// Takes list of arguments to define media queries | |
/// | |
/// @author Niklas Postulart | |
/// @group layout | |
/// @param {Lists} $lists - Lists of queries | |
/// @example | |
/// .example { | |
/// @include breakpoint(min 100px, max 30rem) { |
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($, window, undefined) { | |
var InfiniteScroll = function() { | |
this.initialize = function() { | |
this.setupEvents(); | |
}; | |
this.setupEvents = function() { | |
$(window).on( | |
'scroll', | |
this.handleScroll.bind(this) |
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
// ---- | |
// Sass (v3.3.14) | |
// ---- | |
@function parseInt($n) { | |
@return $n / ($n * 0 + 1); | |
} | |
@mixin rem($property, $values) { | |
$px : (); |
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
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
$baseSize: 16px; | |
$convertBase: $baseSize; | |
html { | |
font-size: percentage($baseSize / 16px); |
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
/** | |
* Detects if two elements are colliding | |
* | |
* Credit goes to BC on Stack Overflow, cleaned up a little bit | |
* | |
* @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery | |
* @param $div1 | |
* @param $div2 | |
* @returns {boolean} | |
*/ |
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
/* | |
See: https://www.smashingmagazine.com/2016/05/fluid-typography/ | |
1. without support for anything, the font size will be the minimum font-size (14px) so nothing will break. | |
2. with support for mediaqueries and not vw or calc or both then the font will jump up a pixel size at every appropriate breakpoint (I'm using http://include-media.com for syntactic-sugar, but you could rewrite without this) | |
3. with support for mediaqueries and calc and vw it will work as the article describes, with the fixes for older Safari and IE too | |
Ain't it pretty!? Haha - works well tho :) | |
*/ |
Minimalist skin for Video.js. Can be modified to make custom skins.
The great thing about Video.js skins is they work in both HTML5 video AND Flash!
A Pen by Juan D. Jara on CodePen.
OlderNewer