Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
I like Kotlin

Nicola Zanon zanonnicola

💭
I like Kotlin
View GitHub Profile
View LICENSE.txt
DO WHAT YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Eli Perelman <http://eliperelman.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT YOU WANT TO PUBLIC LICENSE
@zanonnicola
zanonnicola / modernizr-sass.scss
Last active August 29, 2015 13:57
Modernizr and js/no-js mixins for Sass
View modernizr-sass.scss
// Taken from: http://codepen.io/sturobson/pen/xcdha
// Modernizr mixin to create html.modernizr selector
@mixin modernizr($test, $no: true) {
// if false then give the html.no-modernizr selector
@if $no == true {
html.no-#{$test} & {
@content;
}
}
@zanonnicola
zanonnicola / cookie.js
Created April 10, 2014 13:25
Set, read and erase Cokkies
View cookie.js
View index.html
<script type="text/javascript">
(function (css_href) {
"use strict";
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
} else if (el.attachEvent) {
el.attachEvent("on" + ev, callback);
@zanonnicola
zanonnicola / img.css
Created August 7, 2014 14:04
Responsive imgs cross-beowser
View img.css
img {
max-width: 100% /* To make all images fluid */
}
.lt-ie8 img{
-ms-interpolation-mode: bicubic /* IE < 8 does not scale images well */
}
.lt-ie7 img{
width: 100% /* IE < 7 does not support max-width. Use a container. */
}
@zanonnicola
zanonnicola / input.html
Created August 29, 2014 09:21
Change Font-Size within Input Field Based on Length W<input type="text" id="location" placeholder="Placeholder Text" />hat should happen when text within input fields are excessively long. The desired result we both agreed on was to change the font size on the fly. Thankfully this is extremely easy with a little bit of jQuery that listens to eve…
View input.html
<style>
#location {
font-size: 100%;
outline: none;
width: 200px;
height: 30px;
display: table-cell;
vertical-align: middle;
border: 1px solid #ccc;
}
@zanonnicola
zanonnicola / vertical-align.css
Created October 1, 2014 15:15
Vertical align anything with just 3 lines of CSS.
View vertical-align.css
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
@zanonnicola
zanonnicola / heading.scss
Created October 17, 2014 09:28
Contextual heading sizes with Sass Sass maps make it possible to create congruous, contextual CSS. As an an example, let's look at heading sizes.
View heading.scss
/* Create a step size.*/
/* This is the percentage each heading will be reduced by. */
$step-size-heading: 0.33333;
/* The mixin */
@mixin heading-size($size) {
font-size: $size * $step-size-heading + em;
}
h1 {
@include heading-size(6);
}
@zanonnicola
zanonnicola / rsimage.html
Created November 3, 2014 21:19
Simple responsive image solution. The idea is to add the information about different image sizes to the HTML as data attributes in a noscript tag. The content of the noscript tag would be an img tag and would be shown to browsers that have JavaScript turned off.
View rsimage.html
<style>
.img-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.img-container img {
position: absolute;
@zanonnicola
zanonnicola / loader.js
Last active August 29, 2015 14:13
Avoid including duplicate Scripts
View loader.js
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Another option: