Skip to content

Instantly share code, notes, and snippets.

View iamryanyu's full-sized avatar

Ryan Yu iamryanyu

25 followers · 18 following
View GitHub Profile
@iamryanyu
iamryanyu / placeholders-screen-hide-show.scss
Last active February 1, 2021 07:30
Placeholders for %screen-hide and %screen-show
%screen-hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@iamryanyu
iamryanyu / gist:75f6eb4166a565a0d3aa50318104b0b5
Created July 15, 2019 11:32
class Animal extends Component {
render() {
return <div>Animal: {this.props.name}</div>;
}
}
@iamryanyu
iamryanyu / improved-itcss.scss
Created March 26, 2018 06:06
Improved ITCSS for BIO
@charset "UTF-8";
/* ============================================================================
MAIN STYLES
========================================================================= */
/**
* Main styles.
*
* The structure is based on ITCSS and modified:
@iamryanyu
iamryanyu / gist:7ea5c8c390832bcca50ce84bcc6a0401
Created February 8, 2018 01:32
/**
* https://github.com/gre/bezier-easing
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 – MIT License
*/
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
@iamryanyu
iamryanyu / calc-in-translateY.txt
Created September 20, 2017 05:24
An alternative for calc in translateY
.selector {
//transform: translateY(calc(100% - 170px));
transform: translateY(100%) translateY(-170px);
}
@iamryanyu
iamryanyu / gist:db9856ddaa6d32798b7b7eb5d3e3f732
Last active October 27, 2016 10:54
<nav>Nav goes here</nav>
<div class="hero>
<img src="images/hero-10x10.jpg" class="hero__img" alt="" data-src="original-hero.jpg" data-webp="original-hero.webp">
<section class="hero__section">
<div class="hero__content">
<h1>Title goes here</h1>
<p>Description goes here</p>
<a href="#">CTA button</a>
</div>
@iamryanyu
iamryanyu / gist:070be1f76e0ba87720d947fc4e330a82
Created September 26, 2016 11:17
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
@iamryanyu
iamryanyu / gist:fc93fa23dfc9e3178ea9a80b6550db90
Created April 24, 2016 10:39
var $graphLink = $('.graph__link'),
$graphBarRed = $('.graph__bar--red'),
$graphBarGreen = $('.graph__bar--green'),
$graphBarYellow = $('.graph__bar--yellow'),
$graphStarYellow = $('.graph__star--yellow'),
$graphStarRed = $('.graph__star--red'),
$graphStarGreen = $('.graph__star--green');
var graphTFOrigin = '50% bottom',
graphDuration = 1.2;
@iamryanyu
iamryanyu / gist:74ec53a337099cb68fb8b0f2135edc6b
Created April 24, 2016 10:30
var $graphLink = $('.graph__link'),
$graphBarRed = $('.graph__bar--red'),
$graphBarGreen = $('.graph__bar--green'),
$graphBarYellow = $('.graph__bar--yellow'),
$graphStarRed = $('.graph__star--red'),
$graphStarGreen = $('.graph__star--green'),
$graphStarYellow = $('.graph__star--yellow');
$graphLink.hover(function() {
TweenMax.to($graphBarRed, 1.2, {
@iamryanyu
iamryanyu / gist:7f5cec334ddbb77f0e294dc8edf166fc
Created April 24, 2016 10:28
var $graphStarRed = $('.graph__star--red'),
$graphStarGreen = $('.graph__star--green'),
$graphStarYellow = $('.graph__star--yellow');
// hover over
TweenMax.to($graphStarRed, 1.2, {
y: -25,
ease: Elastic.easeOut.config(1, 0.2)
});