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!
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.
In italian… a list of updates tools and tutorials: check it out!
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:
- install a Sass application or the command line utility to process .scss files
- take a look at sass reference
- write a .scss file
- put it through one of those compiler and you get your css files!
When developing you often need to find out which resolution a specific device has this page is what you need: spirelightmedia.com.
Another resource is here: The iOS Design Cheat Sheet on ivomynttinen.com.
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!
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!!!
Just looking around for some ideas and found these cute themes:
Here‘s another great lists of templates to use when you’re developing a web-app!!
Found this full-of-tutorial site about jQuery: jqueryfordesigners.com
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..