Skip to content

Instantly share code, notes, and snippets.

View italodr's full-sized avatar

Italo Devoto Ramella italodr

21 followers · 36 following
View GitHub Profile
@italodr
italodr / image-converter.sh
Last active January 14, 2019 14:05
Converts images to webp and different sizes for responsive purpose
#!/usr/bin/env bash
shopt -s extglob
function resizeImage {
for img in *.@(jpg|png|gif)
do
basepath=${img%/*}
base=${img##*/}
extension=${base##*.}
basename=${base%.*}
@italodr
italodr / _mq-generator.scss
Created June 14, 2017 12:21
Sass media queries generator
@function breakpoint-generator($type, $size1, $size2: '', $orientation: '') {
@if $orientation != '' {
$orientation: " and (orientation: #{$orientation})";
}
$mq: '';
@if $type == 'min' {
$mq: "and (min-width: #{nth($size1, 1)})";
@italodr
italodr / History|-100ef559|entries.json
Last active October 14, 2022 07:18
Visual Studio Code Sync Settings Gist
{"version":1,"resource":"file:///Users/italo/Sites/dockerized/kade-tech/.storybook/main.js","entries":[{"id":"hrVV.js","timestamp":1654636869640},{"id":"RgbU.js","timestamp":1654636961812},{"id":"BOeP.js","timestamp":1654673564885}]}
@italodr
italodr / scroll-events.js
Created March 13, 2017 15:59
Scroll events
function ScrollEvents() {
let opts = {
element: document.documentElement,
last_scroll_top: 0,
delta_up: 0,
delta_down: 0,
scroll_up_class: 'scroll-up',
scroll_down_class: 'scroll-down'
};
@italodr
italodr / window.resize.js
Created March 3, 2017 12:20
Window width resize observer
/**
* jQuery on resize by @italo_dr (twitter) @italodr (github)
* Fix issue with iphone/ipad "resize" on height. When appears domain
* field and bottom menu.
* Add timer to launch function on resize end
*/
var timer;
var windowWidth = $(window).width();
$(window).on('resize', function(){
if ($(window).width() != windowWidth) {
@italodr
italodr / flex-grid.scss
Last active February 13, 2017 15:53
Flexbox grid helper
.u-flex { display: flex; }
.u-flex--inline { display: inline-flex; }
.u-flex--alignCenter { align-items: center; }
.u-flex--alignStart { align-items: flex-start; }
.u-flex--alignEnd { align-items: flex-end; }
.u-flex--justifyCenter { justify-content: center; }
.u-flex--justifyStart { justify-content: flex-start; }
.u-flex--justifyEnd { justify-content: flex-end; }
.u-flex--justifyBetween { justify-content: space-between; }
.u-flex--justifyAround { justify-content: space-around; }
@italodr
italodr / init.coffee
Last active February 27, 2017 08:27
Atom settings
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->
@italodr
italodr / mixin-fluid-typography.scss
Created December 21, 2016 23:12
A mixin for Mike Riethmuller fluid typography
@mixin fluid-type($min-font-size, $max-font-size, $min-vw: 480px, $max-vw: 1200px) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
font-size: $min-font-size;
@if $min-vw != $max-vw {
@italodr
italodr / sample.html
Created November 5, 2015 22:25
UTM generator
<html>
<head>
( ... )
</head>
<body data-utmcampaing="my-campaing" data-utmdate="20151105">
<a href="http://some-address-to-go.com" data-utmterm="the_term">Some link</a>
<a href="http://some-address-to-go.com?with=query" data-utmterm="the_term">Some link with querystring</a>
<a href="http://some-address-to-go.com" no-utm>Some link not trackable</a>
@italodr
italodr / slugify.php
Created November 5, 2015 22:18
Slugify for php
function slugify($string)
{
$string = strip_tags($string);
$string = remove_accents($string);
$string = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', '---$1---', $string);
$string = str_replace('%', '', $string);