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 / 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 / 45-75.html
Created July 9, 2017 03:56
Snippet to make the text between 45 and 75 characters turn red. Created by Chris Coyier: https://codepen.io/chriscoyier/pen/atebf
<a class="btn-character-count" href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',function(){
var redOutline={outline:'2px solid red'},text;var textyElements='p, li, dt, dd, h1, h2, h3, h4, h5, h6';$(textyElements).on('mouseover.red',function(){$(this).css(redOutline)}).on('mouseleave.red',function(){$(this).removeAttr('style')}).on('click.red',function(){text=$(this).text();var e=text.substring(0,45);var t=text.substring(45,75);var n=text.substring(75,text.length);var r=e+'<span style=\'color: red;\'>'+t+'</span>'+n;$(this).html(r);$(textyElements).off('mouseover.red mouseleave.red click.red');$(this).removeAttr('style');})
})})
@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 / hide-email-address-from-spambots.html
Last active February 20, 2018 17:43
Display email address link with CSS to avoid email harvesting.
<a data-name="info" data-domain="test" data-tld="com" href="#" class="cryptedmail" onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld"></a>
<style>
.cryptedmail:after {
content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}
</style>
<!--
Taken from this answer in SO: http://stackoverflow.com/a/41566570/321555
@ricardozea
ricardozea / credits-template.scss
Created February 25, 2017 03:56
Credits template for CSS and JS. Place the credits at the top of your file(s).
//JavaScript
/*
* Custom Scripts file for Project Name
* Date: 3/4/2016
* Created by: Ricardo Zea - http://ricardozea.design
*/
//CSS
@charset "UTF-8";
@ricardozea
ricardozea / remove-gray-highlight-on-safari.css
Created February 4, 2017 15:32
Remove Gray Highlight When Tapping Links in Mobile Safari.
.selector { -webkit-tap-highlight-color: rgba(0,0,0,0); }
/*https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/*/
@ricardozea
ricardozea / toggle-attribute-jquery.js
Created February 3, 2017 23:12
toggleAttr() jQuery plugin by Mathias Bynens.
/*!
* toggleAttr() jQuery plugin
* @link http://github.com/mathiasbynens/toggleAttr-jQuery-Plugin
* @description Used to toggle selected="selected", disabled="disabled", checked="checked" etc…
* @author Mathias Bynens <http://mathiasbynens.be/>
*/
jQuery.fn.toggleAttr = function(attr) {
return this.each(function() {
var $this = $(this);
$this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
@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 / breakpoints.js
Created November 15, 2016 13:10
Add/Remove a class in the <body> tag at specific breakpoints.
/*
* Add/Remove a class in the <body> tag at specific breakpoints
* Thanks to:
* Jon Daiello - https://twitter.com/jondaiello
* Nate Denlinger - https://twitter.com/natedenlinger
*/
var breakpoints = [
{ class: "accordion", width: 640 }, //edit
//{class: "another-class", width: 756}
@ricardozea
ricardozea / line-height.txt
Created November 12, 2016 05:44
How to set the line height depending on the chosen font size
http://disq.us/p/1db8oz0
16px + 150% = 24px ---» 24px ÷ 16px = 1.5
18px + 150% = 27px ---» 27px ÷ 18px = 1.5
21px + 150% = 31.5px ---» 31.5px ÷ 21px = 1.5
In proper typography, line height should be about 120%-150% of the font-size. And on desktop, a readable font size for body text is usually between 14px and 18px. So you start by choosing a body text font size, then get the line height, which will be your vertical rhythm.