Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.3k followers · 6 following
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / responsive-mq.scss
Last active February 29, 2016 19:39
Mixin for responsive breakpoints
@mixin breakpoint($class) {
@if $class == xs {
@media (max-width: 767px) { @content; }
}
@else if $class == sm {
@media (min-width: 768px) { @content; }
}
@else if $class == md {
@AllThingsSmitty
AllThingsSmitty / inside-border.scss
Last active August 29, 2015 14:02
A way to add an border/outline to an element without affecting its final dimensions
// default values:
$ibThickness: 2px !default;
$ibColor: black !default;
$ibAlpha: .1 !default;
// use a "variable argument" to accept any number of values.
@mixin ib($values...) {
$borderThickness: $ibThickness;
$borderColor: $ibColor;
$borderAlpha: $ibAlpha;
@AllThingsSmitty
AllThingsSmitty / hover.scss
Created June 18, 2014 14:24
Very simple and pragmatic mixin for applying hover and active states in one go
// When we give an element some 'attention'
@mixin attention() {
&:hover,
&:active,
&:focus {
@content;
}
}
@AllThingsSmitty
AllThingsSmitty / function-performance-test.js
Last active November 8, 2019 08:02
A quick JavaScript function performance test on the browser console
var i = performance.now();
yourFunction();
performance.now() - i;
//Or make a helper function, like this:
function performanceTest(testFunction, iterations) {
'use strict';
var sum = 0;
var start = performance.now();
for (var i = 0; i < iterations; i++) {
@AllThingsSmitty
AllThingsSmitty / index.css
Last active August 29, 2015 14:07
Building a pull-quote custom element with Polymer
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400italic);
body {
font: 20px/20px 'Gentium Basic', Tahoma, Verdana, sans-serif;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 2em;
color: #eee;
background: #c1c2c3
}
@AllThingsSmitty
AllThingsSmitty / index.htm
Last active August 29, 2015 14:10
CSS-only weather app concept
<main>
<div class="device">
<header></header>
<section>
<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
@AllThingsSmitty
AllThingsSmitty / hamburger.css
Last active November 22, 2017 09:41
Hamburger menu "open/close" icon
body {
height: 100%;
background: #262626;
}
.hamburger {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
width: 60px;
@AllThingsSmitty
AllThingsSmitty / capitalization.js
Last active August 29, 2015 14:13
Correct title capitalization
// based on titlecapitalization.com
!function () {
function e(e) {
return e;
}
function t(e) {
var t = 0;
if (document.selection) {
e.focus();
@AllThingsSmitty
AllThingsSmitty / flexslider.htm
Created February 1, 2015 03:45
Lazy loading images for FlexSlider
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
</ul>
</div>
@AllThingsSmitty
AllThingsSmitty / hsl.js
Created February 1, 2015 16:05
Get HSL color value based on time value
setInterval(function () {
'use strict';
var d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds();
document.body.textContent = [h, m, s].map(function (a) { return a < 10 ? '0' + a : a}).join(':');
document.body.style.background = 'hsl(' + ~~(s * 6) + ', ' + ~~(m * 10/6) + '%, ' + ~~(h * 25/6) + '%)';