Skip to content

Instantly share code, notes, and snippets.

View joshuacerbito's full-sized avatar
🔥
🎸🎛🎛🎚🔊

Joshua Cerbito joshuacerbito

🔥
🎸🎛🎛🎚🔊
View GitHub Profile
@joshuacerbito
joshuacerbito / sass_font-size_handling.scss
Created August 4, 2015 07:10
Handles font-size caculations
$base-font-size: 16px;
// Calculate rem value
@function calculateRem($size) {
$remSize: $size / $base-font-size;
@return $remSize * 1rem;
}
// Calculate Viewport-Width dependent value
@function calculateVW($size) {
@joshuacerbito
joshuacerbito / aspectRatio.js
Last active July 15, 2016 04:13
Get new width or height while preserving the aspect ratio
// Description: Get new width or height while preserving the aspect ratio
// TODO: Add AspectRatio related methods
var AspectRatio = {
getScaled: function ( currentW, currentH, newSize, property ) {
return ( property === 'width' )? ((currentH / currentW) * newSize) : (currentW / currentH) * newSize)
}
};
function assert (condition, message) {
if (!condition) {
message = message || "Assertion failed";
if (typeof Error !== "undefined") {
throw new Error(message);
}
throw message; // Fallback
}
}
@joshuacerbito
joshuacerbito / objectSize.js
Last active May 19, 2016 02:14
Get the size of an object
Object.size = function ( obj ) {
var size = 0, key;
for (key in obj) {
if ( obj.hasOwnProperty(key) ) { size++; }
}
return size;
};
@joshuacerbito
joshuacerbito / respond.scss
Last active May 4, 2023 17:02
Respond Mixin
/*---------------------------------------------------------------*\
RESPONSIVE PROPERTY HANDLER
handles the per-breakpoint property for mobile-first approach
note: requires a key-less 'breakpoints' scss map
e.g. $breakpoints: ( 320px, 760px, 1080px, 1280px );
usage:
@include respond((
display: flex,
@joshuacerbito
joshuacerbito / selector.js
Created May 23, 2016 03:38
Native JS Object Selector
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
@joshuacerbito
joshuacerbito / pixel_to_rem.scss
Last active December 1, 2016 04:04
Converts pixel values to rem
//------------------------------------------------------------------*\
// PIXEL TO REM
// converts px to rem
// note: uses @strip-units and $em-base
// usage: (https://jsfiddle.net/joshuacerbito/10q09tww/)
// width: rem(760);
// padding: rem(30 0 10);
//------------------------------------------------------------------*\
$base-font-size: 16px;
@joshuacerbito
joshuacerbito / unless.js
Last active May 31, 2016 03:17
Performs a function unless the given expression is false
function unless(exp, func) {
if ( typeof func === 'function' && !exp ) {
func.apply(this, arguments);
}
return !exp;
}
@joshuacerbito
joshuacerbito / aspect-ratio.scss
Last active February 3, 2017 12:21
Aspect Ratio Handler Mixin
/*---------------------------------------------------------------*\
ASPECT RATIO HANDLER
preserves the aspect ratio of an element
usage:
@include aspect-ratio(16, 9);
note:
you can use this link to find your desired aspect ratio
http://andrew.hedges.name/experiments/aspect_ratio/
@joshuacerbito
joshuacerbito / limitToNumber.js
Created August 6, 2016 02:38
Limit text input to numeric values
textInput.addEventListener('keydown', function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
(e.keyCode == 65 && e.ctrlKey === true) || // Allow: Ctrl+A
(e.keyCode == 67 && e.ctrlKey === true) || // Allow: Ctrl+C
(e.keyCode == 88 && e.ctrlKey === true) || // Allow: Ctrl+X
(e.keyCode >= 35 && e.keyCode <= 39)) // Allow: home, end, left, right
{ return; }
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {