Google material design icon set

Google revealed, at I/O 2014, his new review of flat design named “Material Design“.

I’m not a designer so I won’t review this style per se: I’ll link down here some interesting articles and resources!

How to install and build a custom Zepto library

If you’re searching for a light-weight JavaScript library similar to jQuery to use in your development for mobile hybrid app (i.e. with PhoneGap) then Zepto is your choice! This library it’s really compact, open source (MIT license), weights just 9.2kB and if you already know jQuery (who doesn’t?) Zepto APIs match jQuery ones…

Zepto’s default package contains these modules: zepto, event, ajax, form and ie (check Zepto site for explanations and full list of modules!).

A very cool thing about Zepto is that you can create your own package with only needed modules! To build a custom Zepto library you should have Node.js installed on your system and follow these steps (for linux and OSX):

  • download Zepto source code from Github (i.e. in zip archive)
  • unzip it and open a terminal in that directory (i.e. you should be inside something like ‘/tmp/zepto-master/’)
  • execute following command:
    • npm install
    • npm run-script dist
    • MODULES=”zepto event data” npm run-script dist

…where “zepto event data” is a space-separated list of wanted modules! After this you should find your Zepto custom library (uncompressed, minified and gzipped) inside ‘dist’ directory (i.e. ‘/tmp/zepto-master/dist/’)…

Please note that inside your custom library you can find in the first line a comment with your choosen modules.

Sass logo

SASS or how to DRY your CSS

I’ve read an interesting article introducing SASS.

In short: SASS (Syntactically Awesome StyleSheets) is an extension of CSS that allow you to code and organize your stylesheet using variables, nested rules, mixins and inline imports!

As outlined in the linked post it may appear as an hindrance but it isn’t: actually if your start using it you’re applying the “don’t repeat yourself” (DRY) principle… no more redundant repetition but a more clean and neat set of stylesheets!

…and it’s an open source project!!!

Steps to get started? A few:

  1. install a Sass application or the command line utility to process .scss files
  2. take a look at sass reference
  3. write a .scss file
  4. put it through one of those compiler and you get your css files!

Javascript (jQuery) gallery made easy

When I need to put a fancy gallery in a site my pick i Galleria.io. It’s a well documented MIT-licensed jQuery-based gallery that you can download here. You can eventually purchase even more fancy themes!

css transformation easing

With CSS3 you can apply transformation to DOM objects.. you can do a lot of thing but basically you can translate, rotate, scale and skew. One interesting thing I discovered today is how to add a custom “easing” to that transformation: cubic-bezier!

What you have to put in your css is:

-webkit-transition: -webkit-transform .5s cubic-bezier(.82,.2,.89,.3);
   -moz-transition: -moz-transform    .5s cubic-bezier(.82,.2,.89,.3);
    -ms-transition: -ms-transform     .5s cubic-bezier(.82,.2,.89,.3);
     -o-transition: -o-transform      .5s cubic-bezier(.82,.2,.89,.3);

Instead of “cubic-bezier(a,b,c,d)” you can also use a few preset (linear, ease, ease-in, ease-out, ease-in-out).

To figure out which values put in that function you can use this useful site: cubic-bezier.com. There you can also compare curves!!!

ZoomooZ: another cool jQuery plugin

Zoomooz is a cool js jQuery plugin you can create very impressive zoom effects on your whole page.

You can scale, rotate or skew (!) your page to achieve wonderful effects… there are 3 samples: I like “flickr image stack” and the “svg tree demo“.

And it’s amazing to see what people did from this… a few examples (sites using it and crazy people creating even more crazy libs based on this)…

UPDATE: browsing around I found this awesome site too..