Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

7 resources to build and design better sites

Lightweight frameworks, truncate text, SVG patterns and more


A lightweight CSS framework that provides a minimal setup of styles for a fast and clean starting point. It is specially designed for better performance with fewer properties to reset, resulting in cleaner code. The framework has a host of download options. It can be installed with Bower, npm and is also available via a CDN.


If you need to truncate text to fit into an HTML element, this neat little JavaScript plug-in is ideal for the job. Plus, it hides and keeps the original text intact.

Sprite Spirit

An easy and quick way to add animation to a sprite. Drag in the sprite(s) and generate the code. Users can change the direction, width, height and duration.


Yarn is a new kid on the block. Billed as ‘a package manager for your code’, it allows you to use and share code with other developers from around the world. It claims to do this quickly, securely and reliably so you don’t ever have to worry. Use other developers’ solutions to different problems, making it easier for you to develop your software.

Hero patterns

Not code patterns but a collection of repeatable SVG background patterns for use in your projects. Ideal as they do not lose clarity.

This neat little online utility Converts any major image format into a highly optimized JPEG. Offers support for png, svg, eps, tiff and psd.

Web Bloat Score Calculator

Everyone likes a fast-loading page, especially users. Removing bloat is one way to slim down page size. Use this tool to find out where the bloat is.