Skip to content

Instantly share code, notes, and snippets.

View zanonnicola's full-sized avatar
💭
I like Kotlin

Nicola Zanon zanonnicola

💭
I like Kotlin
39 followers · 56 following
View GitHub Profile
@zanonnicola
zanonnicola / mixin.scss
Created January 9, 2015 10:53
Helpful mixins: - REM
@function countRem($value) {
$remValue: $value / 16px;
@return $remValue * 1rem;
}
@mixin font-size($value) {
font-size: $value;
font-size: calculateRem($value);
}
@zanonnicola
zanonnicola / mq_ga.js
Created February 6, 2015 10:19
Measuring Your Site's Responsive Breakpoint Usage with GA
var timeout;
var breakpoints = {
xs: '(max-width: 419px)',
sm: '(min-width: 420px) and (max-width: 569px)',
md: '(min-width: 570px) and (max-width: 799px)',
lg: '(min-width: 800px) and (max-width: 999px)',
xl: '(min-width: 1000px)'
};
Object.keys(breakpoints).forEach(function(breakpoint) {
@zanonnicola
zanonnicola / fixed.scss
Created July 30, 2015 14:14
# Fixing fixed As it turns out, Paul’s solution for JSConf’s site was exactly what we needed on our own homepage: the background image just needed its own element so it could move independently of the others. Look at the two versions of the code. It happens to be SCSS but there is nothing too special going on. You could make the same changes in …
.what-we-do-cards {
@include clearfix;
border-top: 10px solid rgba(255, 255, 255, .46);
color: $white;
padding-bottom: 4em;
overflow: hidden; // added for pseudo-element
position: relative; // added for pseudo-element
// Fixed-position background image
&::before {
@zanonnicola
zanonnicola / center.css
Last active December 27, 2015 06:29 — forked from YohannParis/center.css
CSS: centering
/*
* To horizontally and vertically center an element in css:
* http://css-tricks.com/centering-percentage-widthheight-elements/
*/
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@zanonnicola
zanonnicola / gist:7282497
Last active December 27, 2015 06:38 — forked from padolsey/gist:527683
JavaScript: detect IE
// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
@zanonnicola
zanonnicola / lineargradienttest.js
Created November 7, 2013 19:15 — forked from petersendidit/lineargradienttest.js
Checking old webkit syntax
/*
Modernizr already has a test for cssgradients but it checks the old webkit syntax
In order to do px points we need linear-gradient()
Webkit did not have suport for linear-gradient() until Jan 2011
http://webkit.org/blog/1424/css3-gradients/
So here is a test to check for it.
*/
Modernizr.addTest('lineargradient', function () {
var test = document.createElement('div'),
@zanonnicola
zanonnicola / Simple-Sticky-Menu.markdown
Last active December 28, 2015 00:49 — forked from anonymous/Simple-Sticky-Menu-.markdown

Simple Sticky Menu

A simple sticky menu with auto updating classes based on elements position.

A Pen by Nicola Zanon on CodePen.

License.

#ToDo:

@zanonnicola
zanonnicola / asyncLoading
Created November 18, 2013 09:30
Downloading JavaScript Files in Parallel. Script by: Rakesh Pai http://blog.rakeshpai.me/2009/03/downloading-javascript-files-in.html
<script type="text/javascript">
(function() {
var s = [
"/javascripts/script1.js",
"/javascripts/script2.js",
"/javascripts/script3.js",
"/javascripts/script4.js",
"/javascripts/script5.js"
];
@zanonnicola
zanonnicola / gist:7988654
Created December 16, 2013 15:16 — forked from liamcurry/gist:2597326

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@zanonnicola
zanonnicola / template.html
Created January 19, 2014 17:08 — forked from tinabeans/template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Single-Column Responsive Email Template</title>
<style>
@media only screen and (min-device-width: 541px) {
.content {