Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryan Yu iamryanyu

View GitHub Profile
@iamryanyu
iamryanyu / placeholders-screen-hide-show.scss
Last active Feb 1, 2021
Placeholders for %screen-hide and %screen-show
View placeholders-screen-hide-show.scss
%screen-hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
View gist:75f6eb4166a565a0d3aa50318104b0b5
class Animal extends Component {
render() {
return <div>Animal: {this.props.name}</div>;
}
}
@iamryanyu
iamryanyu / improved-itcss.scss
Created Mar 26, 2018
Improved ITCSS for BIO
View improved-itcss.scss
@charset "UTF-8";
/* ============================================================================
MAIN STYLES
========================================================================= */
/**
* Main styles.
*
* The structure is based on ITCSS and modified:
View gist:7ea5c8c390832bcca50ce84bcc6a0401
/**
* 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 Sep 20, 2017
An alternative for calc in translateY
View calc-in-translateY.txt
.selector {
//transform: translateY(calc(100% - 170px));
transform: translateY(100%) translateY(-170px);
}
View gist:db9856ddaa6d32798b7b7eb5d3e3f732
<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>
View gist:070be1f76e0ba87720d947fc4e330a82
<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>
View gist:fc93fa23dfc9e3178ea9a80b6550db90
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;
View gist:74ec53a337099cb68fb8b0f2135edc6b
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, {
View gist:7f5cec334ddbb77f0e294dc8edf166fc
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)
});