Skip to content

Instantly share code, notes, and snippets.

View terkel's full-sized avatar

Takeru Suzuki terkel

View GitHub Profile
@terkel
terkel / _easing.scss
Last active February 17, 2024 23:12
Timing functions for CSS animations and transitions
// _easing.scss, CSS easing functions - gist.github.com/terkel/4377409
// Based on Caesar - matthewlein.com/ceaser
$linear: cubic-bezier( 0.250, 0.250, 0.750, 0.750 );
$ease: cubic-bezier( 0.250, 0.100, 0.250, 1.000 );
$ease-in: cubic-bezier( 0.420, 0.000, 1.000, 1.000 );
$ease-out: cubic-bezier( 0.000, 0.000, 0.580, 1.000 );
$ease-in-out: cubic-bezier( 0.420, 0.000, 0.580, 1.000 );
$ease-in-quad: cubic-bezier( 0.550, 0.085, 0.680, 0.530 );
@terkel
terkel / _decimal.scss
Last active November 23, 2023 18:36
Rounding decimals in Sass
// _decimal.scss | MIT License | gist.github.com/terkel/4373420
// Round a number to specified digits.
//
// @param {Number} $number A number to round
// @param {Number} [$digits:0] Digits to output
// @param {String} [$mode:round] (round|ceil|floor) How to round a number
// @return {Number} A rounded number
// @example
// decimal-round(0.333) => 0
/*
ヒラギノ角ゴ ProN W3
UPM: 1000
hhea/ascent: 880
hhea/descent: -120
hhea/lineGap: 500
sTypoAscender: 880
sTypoDescender: -120
sTypoLineGap: 500
usWinAscent: 1000
@terkel
terkel / jquery.placeholder.js
Created September 23, 2011 00:56
HTML5 Placeholder Polyfill using jQuery
(function ($) {
$(function () {
if (!supportsInputAttribute('placeholder')) {
$('[placeholder]').each(function () {
var $this = $(this),
$form = $this.closest('form'),
placeholderText = $this.attr('placeholder'),
placeholderColor = 'GrayText',
defaultColor = $this.css('color');
@terkel
terkel / clearfix.css
Last active October 24, 2022 07:46
Clearfix
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
@terkel
terkel / jquery.shuffle.js
Created January 11, 2012 05:31
jQuery Shuffle plugin
// jQuery Shuffle plugin, https://gist.github.com/1593214
// see http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html
(function ($) {
$.fn.shuffle = function () {
var i = this.length,
j,
t;
while (i){
j = Math.floor(Math.random()*i);
@terkel
terkel / reset.css
Created November 12, 2011 10:56
CSS Reset
/*!
* CSS Reset 2011-12-25
* https://gist.github.com/gists/1360380
*
* Author: Takeru Suzuki, http://terkel.jp/
* License: Public domain
*
* Inspired by Normalize.css: http://necolas.github.com/normalize.css/
*/
*,
*::before,
*::after {
font-feature-settings:
"ital" var(--font-feature-ital, 0),
"locl" var(--font-feature-locl, 1),
"palt" var(--font-feature-palt, 0);
}
h1 {
*,
*::before,
*::after {
font-feature-settings:
"locl" var(--font-feature-locl, 1),
"palt" var(--font-feature-palt, 0);
}
:not(:lang(ja)) {
font-kerning: auto;
@terkel
terkel / _lang.scss
Last active January 25, 2020 01:51
// lang-is()
// Creates selector matches any of language tags
//
// @param {list} $langs - List of labguage tags to match
//
// @example
// @include lang-is(ja, ko, zh) {
// font-kerning: none;
// }
// p {