06. Foundation for Apps
It's true: there's now a flavour of the popular responsive front-end framework Foundation that helps you make apps. Foundation for Apps eases the pain of making responsive, mobile-optimised web apps by providing a solid code base for your project.
The people at Zurb have built a new grid based on Flexbox specially for apps that gives you the power to create complicated grids without having to deal with the complexity of Flexbox yourself. They've also developed a set of classes and mixins called Motion UI that makes it easy for you to add animation to your apps. Check it out here.
07. interact.js
Interact.js is a JavaScript module for drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+). It does work that might otherwise be handled with jQuery UI, but unlike jQuery UI it works well with SVG.
Created by Taye Adeyemi, interact.js is also lightweight and handles multi-touch input. Its aim is to help you out by presenting input data consistently across different browsers and devices.
You can read more about it and play around with some demos on this Mozilla Hacks post.
08. deSVG
Ben Howdle has created this handy tool for removing inline SVG bloat from your HTML document. On his deSVG page Howdle writes: "deSVG takes the <img /> tags you supply. It then grabs, using AJAX, the raw SVG you've set in the 'src' attribute and replaces that <img /> with the <svg /> it downloads". You can style SVGs with CSS, and SVGs are still accessible without JavaScript.
09. Materialize
A group of students from Carnegie Mellon University are working on this responsive front-end framework to make it easy to get started with Material Design. Materialize is available as CSS and JavaScript files, or alternatively SASS files, and can also be installed via Bower.
It includes starter templates to help get you going, and lots of components to make it quick to implement the Material style. This project is still in its alpha stage and at this point there are a range of visual components as well as dialogs, dropdown menus and some nav elements for mobile.
10. What colour is it?
What colour is time? We've all asked ourselves this question at some point, and now this website has the answer. The time (on Earth) can be represented by six digits corresponding to the hours, the minutes and the seconds. Six digits, just like a hex value. This clock converts the current time into a CSS colour and displays it as the background to the page. Simple, wonderful.
Words: Tanya Combrinck
Tanya Combrinck has been writing about the web for over four years, and the internet is actually her preferred method of interacting with humanity. You can find her on Twitter at @tanyacombrinck.
Like this? Read these:
