Skip to content

Instantly share code, notes, and snippets.

View paulozoom's full-sized avatar

Paulo Pereira paulozoom

View GitHub Profile
@paulozoom
paulozoom / index.html
Last active February 18, 2021 23:33
Async non-render-blocking loading of cloud.Typography’s typefaces
<!-- loadCSS with async -->
<script async="async" src="/assets/loadcss.js" type="text/javascript"></script>
<!-- preload the fonts -->
<link as="style" href="https://cloud.typography.com/[…].css" onload="this.rel='stylesheet'" rel="preload" />
<!-- non-JS fallback -->
<noscript>
<link href="https://cloud.typography.com/[…].css" media="screen" rel="stylesheet" type="text/css" />
</noscript>
@paulozoom
paulozoom / _weights.scss
Created May 30, 2016 14:38
CSS font weight with names
/// Named Font Weights
///
/// @param {string} $name
/// the name of the weight, as such:
/// * thin
/// * extralight
/// * light
/// * book / regular
/// * medium
/// * semibold
@paulozoom
paulozoom / _mixins.scss
Last active August 29, 2015 14:19
Custom SCSS Mixins for Responsive CSS Modules
// Breakpoints
$bps: (
s: 400px,
m: 568px,
l: 780px,
xl: 1025px
);
// Mobile-first media query
@mixin media-from($start) {
@paulozoom
paulozoom / _gradient-color-at.scss
Created April 9, 2015 15:43
Sass function to calculate the color of a linear gradient at a specific point
///
/// Calculates the color of a linear gradient at a specific point.
///
/// @param {Color} $start - gradient’s start color
/// @param {Color} $end - gradient’s end color
/// @param {Number} $point - point of the gradient (between 0 and 1, or 0% and 100%) at which we want the color
/// @return {Color}
///
/// @example scss
/// background-color: gradient-color-at(#BBE087, #DCDE85, 0.4);
@paulozoom
paulozoom / _ratio.css.scss
Created February 26, 2015 11:42
Ratio module
.ratio {
display: block;
position: relative;
height: 0;
padding: 0;
}
// Nesting for variable scoping
.ratio-- {
// Named ratios

Keybase proof

I hereby claim:

  • I am paulozoom on github.
  • I am paulozoom (https://keybase.io/paulozoom) on keybase.
  • I have a public key whose fingerprint is 1354 7315 3425 8DF1 AA51 E69D 3740 DB22 3707 EF60

To claim this, I am signing this object:

@paulozoom
paulozoom / animateCss.jquery.js
Created February 24, 2014 15:25
Animate.css jQuery plugin
(function($) {
$.fn.animateCss = function(animation, onEndCallback) {
return this.each(function() {
$(this)
.addClass("animated "+animation)
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass(animation);
if (typeof onEndCallback === 'function') { onEndCallback(); }
});
});