Fresh Resources for Web Designers and Developers (October 2016)

PHP7 was released with an exciting new feature: speed. And we have seen a growing number of new or improved PHP libraries released in the web developers community. Hence, in this round of our Fresh Resources, we have included quite a number of PHP libraries, along with JavaScript and CSS libraries.

Some of these resources include a collection of popular pure-CSS interfaces, a JS library to display CSS gradient dynamically and a PHP library that lets you generate short urls with your own domain name,


This is a PHP library contaning the details and attributes of over 200 countries such as the demonym, the capital city, the dialling codes, the currency, the flag and a lot more. This PHP library is a gold mine to developers.

PHP Country code snippet example


A collection of a dozen nice looking colors (e.g. gray, red, blue, pink, orange, etc) as well as their color shades. OpenColor can be installed via NPM which present the Sass, LESS, and Stylus formats. OpenColor swatch preset is available for Photoshop, Illustrator, and Sketch swatch preset.

Open Color grayscale pallete

CSS Icon

CSS Icon is a collection of icons created purely with CSS using only a single element. There are currently a hundred icons displayed on the list. Clicking any of these icons will show you the details of how the icon is made. It’s a great resource to supercharge your CSS skill.

List of icons created with CSS in black color

You Don’t Need JavaScript

With CSS becoming more powerful, we no longer need JavaScript, in some cases. This resource is a collection of popular interative interfaces on the web such as Accordion, Carousel, Parallax, Tabs, Off-canvas, purely built with CSS.

Three accordion web interface

Agolio WordPress

Agolia is a cloud base service to deliver real-time, relevant search result that work in a number different platform out-of-the-box. This is the official plugin from Agolia to integrate their cloud-platform services into your WordPress site with ease.

WordPress and Agolio logo


Here is a CSS library to apply consistent styling to bare HTML elements such as p, h1, and table. It is similar to Normalize.css and Reset.css but it’s better. Simply add the wysiwyg class on the element that wraps your content and you are all set.

Jekyll Now

Jekyll Now is a tool that allows you to create Jekyll-based blog without dealing with Terminal and Command Lines. This addition has made Jekyll a great blogging platform for those who want a simple life.

Jekyll GUI interface in

React MDL

React is gaining popularity among web developers thanks to its robust architecture that makes it crazily fast and an easily extendable JavaScript framework. React MDL is a collection of Material Design Lite component ported to the React component.

ReactJS logo and code snippet


Taggd is a JavaScript library to add a tooltip on an image, similar to photo tagging in Facebook. This library provides a friendly API to add the tags. It is responsive and fast, and does not need to depend on an external library.

A group of people on the rock hill


QuillJS is an open-source library to display text editor GUI. Unlike TinyMCS, QuillJS is much cleaner, lighter, and comes with a more intutive API to work with.

Minimalist WYISWYG interface


GranimJS is a JavaScript library to display CSS Gradient dynamically. This JavaScript library comes with load of options where you can change the Gradient colors, the opacity, and transition speed for each gradient, just to name a few.

Github repository of GranimJS

Awesome Design

Here is a (nearly) complete collection of great resources for UI designers. Therein you can find Tools, Fonts, Inspirations, Photos, and News or Blogs related to design. It’s another gold mine for designers.

Github repository of Awesome Design

Browser Based Games

Looking for some games to get a load off your mind? Go to this page. There you can find a number of games you can play right in your browser. Additionally, for web developers, this can be a great reference for building web-based games.

3D chess game


OptimizeJS is a JavaScript library that speeds up all your JavaScript execution by up to 50%, on average. See the Docs and the bencmark where it list numerous test cases against popular JavaScript library in more detail.

Github repository of OptimizeJS

React Animation

This library ports Animate.css animations so that you can add in these animation into your ReactJS components. If your project relies on ReactJS, this library definitely should be in your toolbox.

ReactJS animation component


A handy JavaScript library that converts machine time format (e.g. 2016-06-10 12:12:12) into a a more readable format (e.g. just now, 3 seconds ago, or 5 minutes ago). You can also translate the output into your own language.

TimeAGoJS logo and the code snippet


Polr is a PHP library that allows you to generate short urls with your own domain name. This is a great alternative to popular shortening URLs such as or if you prefer for having control over the URLs data.

Polr homepage


Math PHP is an advanced PHP library to perform mathematical calculations such as Differentiaion and Interpolation. This a powerful yet handy library if your web application requires operations beyond basic Mathematical operations.

Math php code snippet


A collection of recorded conferences from CSS Day, this Vimeo channel is a great learning resources for those who cannot attend such conferences and to keep us all updated with the latest trend in web design.

CSS Day video list


FrontPress is a WordPress theme built with AngularJS, with a built-in utility to connect you to the API (not to be confused with WP-API). So, basically this theme makes it possible for you to write your posts in, and use this theme to retrieve the posts and display the posts somewhere with a custom domain name.