Matt Smith AllThingsSmitty

Build a better web.

AllThingsSmitty / font-events.js

Last active October 22, 2021 20:37

Progressively loading fonts with font events

	// Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly
	// Using font events with Font Face Observer
	var roboto = new FontFaceObserver('Roboto', {
	weight: 400
	});
	observer.check().then(function () {
	document.getElement.className += 'fonts-loaded';
	});

	// Load multiple fonts using a Promise

AllThingsSmitty / columns.css

Last active October 1, 2017 01:24

Columns with equal height using Flexbox

	@import url(http://fonts.googleapis.com/css?family=Open+Sans);
	html {
	background: #444;
	box-sizing: border-box;
	font-family: "Open Sans", sans-serif;
	line-height: 1.4;
	}
	, :before, *:after {
	box-sizing: inherit;
	}

AllThingsSmitty / unique-id.scss

Last active August 29, 2015 14:18

Simplify animation keyframes with unique-id()

	// Using the unique-id() function with a simple mixin you only have to provide keyframe values, not names
	@mixin animation-keyframes {
	$animation-name: unique-id();
	animation-name: $animation-name;
	@keyframes #{$animation-name} {
	@content;
	}
	}
	.some-element {
	animation: 10s linear infinite;

AllThingsSmitty / width.css

Created April 6, 2015 13:35

Calculating grid column widths

	/*
	First: determine the number of columns, ex.: 12
	Second: determine the width of a single (1/12) column using the following formula:
	scw = (100 – (m * (mc – 1))) / mc
	Where:
	scw = single column width
	m = margin (1.6%)
	mc = maximum columns (12)
	Ex.: scw = 6.86666666667%
	Lastly: use the scw to calculate the rest of the column widths using the following formula:

AllThingsSmitty / index.htm

Created April 10, 2015 20:06

Simple responsive table in CSS (no JS)

AllThingsSmitty / prime.js

Created April 12, 2015 16:14

Determine if a number is prime

	// Return zero if the number isn't prime
	function isPrime(value) {
	for (var i = 2; i < value; i++) {
	if (value % i === 0) {
	return false;
	}
	}
	return true;
	}

AllThingsSmitty / append-child.js

Last active August 29, 2015 14:19

Quick tip about using appendChild() and insertBefore()

	// When using appendChild() or insertBefore() on an element that's already been added to the document, the element will be removed from its place and put into the new place
	var b1 = document.querySelector('.box1'),
	b2 = document.querySelector('.box2'),
	el = document.createElement('div'),
	t;

	b1.appendChild(el);
	t = window.setTimeout(function () {
	b2.appendChild(el);
	clearTimeout(t);

AllThingsSmitty / parallax.scss

Created April 16, 2015 15:51

Landscape parallax using only CSS

	// edit these
	$farColor: #ffe4c7;
	$nearColor: #2f4645;
	$layer: 7; // make sure it is +1 the number of layered divs in the HTML
	$perspective: 1;

	.bg {
	background-color: $farColor;
	height: 100%;
	position: absolute;

AllThingsSmitty / tooltip.scss

Last active September 25, 2015 04:15

Super simple CSS tooltips

AllThingsSmitty / script-loaded.js

Created May 5, 2015 13:25

Check if any given script has loaded

	var myScript = document.createElement('script');
	myScript.src = 'http://code.jquery.com/jquery-2.1.4.min.js';
	myScript.onload = function() {
	console.log('jQuery loaded.');
	};

	document.body.appendChild(myScript);

	@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,600,700);

	$pink: #e91e63;
	$paper: #efefef;
	$clouds: #ecf0f1;
	$cubic: cubic-bezier(.64,.09,.08,1);

	html, body {
	background: $clouds;
	height: 100%;