Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.1k followers · 6 following
View GitHub Profile
@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 / 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 / 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 / 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) + '%)';
@AllThingsSmitty
AllThingsSmitty / index.htm
Last active August 29, 2015 14:14
CSS-only coffee app concept with data-driven Sass
<main>
<div class="device">
<header>
<h1><strong>CSS</strong>Presso</h1>
</header>
<section>
<form>
<input type="radio" name="coffeeType" id="espresso">
<input type="radio" name="coffeeType" id="doppio">
<input type="radio" name="coffeeType" id="macchiatto">
@AllThingsSmitty
AllThingsSmitty / resources.md
Created February 2, 2015 20:28
SassConf 2014 resource round-up
@AllThingsSmitty
AllThingsSmitty / fibonacci.js
Created February 3, 2015 14:58
Fibonacci sequence printed
// Example sequence: 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610...
// Get Fibonacci sequence with a loop
var looping = function (n) {
'use strict';
var a = 0, b = 1, f = 1;
for (var i = 2; i <= n; i++) {
f = a + b;
a = b;
b = f;
@AllThingsSmitty
AllThingsSmitty / fave.css
Created February 5, 2015 14:15
Twitter's "fave" animation using CSS steps()
.fave {
width: 70px;
height: 50px;
background: url(http://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 2s steps(55);
}
@AllThingsSmitty
AllThingsSmitty / brackets-setup.md
Last active August 29, 2015 14:15
A new user's guide to Brackets. Estimated reading time: <2 min. Estimated walkthrough time: 8 min.

Ready out of the Box

Brackets has a terrific built-in extension manager for super-easy add-ins. There's no setup work required, no Package Manager to install like in Sublime Text. Simply download and install Brackets and you're ready to go.

Make It Look Good

  • Install Atom Dark Theme. I like Atom's default theme.
  • Monokai Dark Soda is pretty lovely, too.
  • I prefer to increase the theme font size to 13px: View → Themes... → Theme Settings. Go with what feels best.