laptops — Collaboration by Marvin Meyer ( @marvelous ) via Unsplash

July 15, 2019 03:35:15

Awesome Web Tools of the Week - July 2019

Chandan Chaurasia

These are some of the list of must-try web resources that will make your site a better place. Every week I compile a list of some of the best web tools that I discover through Web and Tech magazines and a few through online blogs. Enjoy your awesome productive week!

1. CSS Grid Generator

CSS Grid Generator allows you to set the numbers, and units of your columns and rows, and it automatically generates a CSS grid for you! You can Drag within the boxes to create divs placed within the grid. It is a really quick way to create a CSS grid just by entering the number of columns, rows (and any gaps), elements you want and snap, you get the code you want as a popup like shown below.

Site URL: https://cssgrid-generator.netlify.com

2. Color Kitty

Color Kitty is a neat little online tool helps create a 5-colour palette from any uploaded image. You can also adjust the palette by moving the selected colour points on the image.

Site URL: https://colorkitty.com

3. CSS Transform

This is my favorite in the list. Developed by Jorge Moreno, this web tool helps users work with CSS transforms. It uses three elements to help demonstrate what is happening. Its 2D & 3D CSS Transform functions visualiser comprises of Rotate, and Perspective with sliders. You can play and experiment until you get what you have desired, and then copy & use the CSS code that is generated.

The source code is also available on GitHub.

Site URL: https://css-transform.moro.es

4. Popmotion

As mentioned on the site, it is a collection of "Simple libraries for delightful interfaces".

Popmotion consists of

POSE - A simple, CSS-like animation library for React, React Native and Vue
PopmotionPURE - Advanced functional animation library for any JavaScript environment
popcorn - Utility functions to help animation and UI developers manipulate values over time and space.
STYLEFiRE - CSS and SVG styler optimised for animation
framesync - Unity inspired render loop for browsers. It is a tiny frame scheduler for performantly batching reads, updates and renders.

Site URL: https://popmotion.io

5. Coolors

Need beautiful color palettes for your design, graphics or website? Coolors is a fast and easy tool that lets you do just that. Everytime you refresh the page, you get a random 5-color palette. Just press the spacebar to get a new 5-colors palette. Click on the lock icon to keep the colors you like and repeat the process until you have the perfect colors combination that you are looking for.