Skip to content

Instantly share code, notes, and snippets.

View ricardozea's full-sized avatar

Ricardo Zea ricardozea

4 followers · 0 following
View GitHub Profile
@ricardozea
ricardozea / show-pass.html
Created March 8, 2019 15:38
<label class="show-password"><input type="checkbox" onclick="showPass()">Show password</label>
@ricardozea
ricardozea / display-viewport-script.js
Last active February 24, 2019 07:03
This script creates a small red box at the bottom left with the viewport dimensions.
/*
Script to display the viewport size when working on responsive stuff.
Adpted to vanilla JS by: Taylor Hunt - https://codepen.io/tigt/
*/
var el = document.createElement("output");
document.body.append(el);
Object.assign(el.style, {
position: "fixed",
bottom: 0,
left: 0,
@ricardozea
ricardozea / viewport-size.js
Last active February 24, 2019 07:02
Script to display the viewport size when working on responsive stuff
/*
Script to display the viewport size when working on responsive stuff.
Taken from here: http://stackoverflow.com/questions/14184447/firefox-extension-to-show-current-window-dimensions
*/
$(function(){
var MEASUREMENTS_ID = "measurements"; // abstracted-out for convenience in renaming
$("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
$("#"+MEASUREMENTS_ID).css({
"position": "fixed",
@ricardozea
ricardozea / rwd-magic-formula-mixin.scss
Last active July 16, 2018 03:04
Easily turn pixel values into % for RWD.
//RWD Magic Formula
@mixin magicFormula($width){
width: ($width/980) * 100%;
}
/*
Demo: http://codepen.io/ricardozea/collab/ce3d833ea1d98b2bb7cdf165dda02438/?editors=1100
Author: Adebayo Oluwadamilola - http://codepen.io/andela-oadebayo/
*/
@ricardozea
ricardozea / dynamic-line-height.scss
Last active July 16, 2018 03:04
Dynamic Font Size and Line Height using calc(). Demo: https://codepen.io/ricardozea/pen/dbba1a4efcf515f05e36b5d4223aa6ab
p {
font-size: calc(2vw + .3em); //edit
line-height: calc(1vw + 1.2em); //edit
@media (min-width: 1000px) {
line-height: 1.5; //edit
}
}
/*
Demo: https://codepen.io/ricardozea/pen/dbba1a4efcf515f05e36b5d4223aa6ab
@ricardozea
ricardozea / partial-selectors.css
Last active July 16, 2018 03:04
Partial CSS selectors. Taken from this nice article: https://medium.com/the-web-crunch-publication/advanced-css-selectors-you-never-knew-about-972d8275d079
/* Begins with (^=) */
div[class^="myPanel_"] {}
/* Ends With ($=) */
div[id$="_myDiv"] {}
/* Contains (*=) */
div[class*="logoutPanel"] {}
@ricardozea
ricardozea / animated-gradient.scss
Last active July 16, 2018 03:03
This could be used to animate gradient backgrounds on large buttons/CTAs
//Animated gradient background
//https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
//Usage:
//Example 1: include gradientAnimation(red, blue, .6s);
//Example 2: include gradientAnimation(lighten($orange, 10), $orange, .6s);
@mixin gradientAnimation( $start, $end, $transTime ){
background-size: 100%;
background-image: linear-gradient($start, $end);
@ricardozea
ricardozea / hide-email-address-from-spambots.html
Last active July 16, 2018 03:03
Hide email address from spambots
<div id="email-address">Activate JavaScript, please.</div>
<script>
(function(d,id,lhs,rhs){
d.getElementById(id).innerHTML = "<a rel=\"nofollow\" href=\"mailto"+":"+lhs+"&commat;"+rhs+"\">"+"headofhomecare" +"&commat;"+"healthprofessionals.co.uk"+"<\/a>";
})(window.document, "email-address", "name", "domain.com");
</script>
<!-- Based on this answer in SO: http://stackoverflow.com/a/37175227/321555 -->
@ricardozea
ricardozea / page-transition-script.js
Last active July 16, 2018 02:42
Fade pages in and out when clicking on any internal links. External and `mailto:` links are treated as normal. Author: Adam Marsden Article: https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
//**MINIMAL PAGE TRANSITIONS WITH JQUERY & CSS
//https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
$(function() {
$("a").each(function() { /* [1] */
if ( location.hostname === this.hostname || !this.hostname.length ) { /* [1] */
var link = $(this).attr("href"); /* [2] */
if ( link.match("^#") ) { /* [3] */
$(this).click(function() {
var target = $(link); /* [4] */
@ricardozea
ricardozea / proper-font-load.html
Created July 16, 2018 02:37
"CSS is treated as a render blocking resource, which means that the browser won’t render any content until it’s finished loading. So this works great if you’re using fonts from something like Google Fonts or Adobe’s TypeKit, you don’t need to be wait
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i" rel="stylesheet">
</noscript>
<script>
// Load CSS
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)