Fresh Resources for Web Designers and Developers (July 2016)

This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim the effects of a glaring screen, a plugin for building web layouts with drag and drop, a jQuery plugin for sprucing up your date-pickers, and plenty of JavaScript libraries to help out developers.

Also included are resources on HTTP2, typographic terminologies, building accessibility-ready sites, and a search engine for programming language syntax. Let’s check them out.

Landing Folio

Landing folio is a central place where you can find examples of landing page designs. There are hundreds of examples on the site, and you can finetune the list based on their category. This is definitely worth bookmarking for web designers.

Landing Folio Homepage

Element Queries

A JavaScript that allows you to perform Element Query. Element query is denoted by @element and unlike, @media, @element is aware of numerous conditions beyond “height” and “width”. You can, for example, apply styles based on the number of characters contained in the element.

Element Query logo and snippet in the homepage.


HTTP2 is the latest specification of HTTP with significant changes. It promises for better performance and efficient data transfer. In this resource, you can find these changes (in great detail), their impact on security, speed, and user experience.

HTTP2 Rocket Illustration


Elementor is a WordPress plugin that allows you to build web layouts with drag-n-drop. With Elementor, you can build a more compelling layout. It is responsive, fully customizable, and user-friendly.

Elementor user interface in WordPress admin.


This plugin is equipped with a few animations that make selecting dates on the web more engaging. In addition, options are available for changing the UI appearance. It is a jQuery plugin for fancier date-pickers.

Illustration of clock mechanic and gears.


A search engine to search for programming language syntax. It currently supports a number of languages, including Java, C, Ruby, JavaScript, and Python. This could be the ultimate search engine for developers as the database and language support grows.

Syntax DB search form and search suggestion.

Github Dark UI

Github Dark UI is a darker color theme for This could be a good alternative color scheme if you work in dimmed environments or have to stare at the screen for long periods of time.

Github repository page with dark color scheme.


Instead of highlighting the code with different colors, as you can see below, Microlight makes the code “glow”. A JavaScript library that highlights code – literally.

A code snippet highlighted with Microlight.


BarbaJS is a JavaScript library that enables smooth page transition through JavaScript History API / pushState. This plugin comes with Methods, Custom Events, and a handful of APIs to deliver a smoother experience for pages on your website. Here are some examples.

BarbaJS logo.


Ever wonder what the difference between “letter-spacing” and “kerning” is? TypeTerms is an interactive presentation where you can learn these confusing typographic terminologies.

Illustration and annotations of typographic terms.


ButterBean is a new and sophisticated plugin to build Meta Box in WordPress. It is developed following the modern WordPress Customizer API architecture. It makes building this particular WordPress admin UI more elegant.

ButterBean Github repository page

Child Theme Check

A WordPress plugin to check your Child Theme against the parent theme; it will check whether the files the Child Theme relies on are updated.

Child Theme Check UI in WordPress Admin.

CloudFlare UI

CloudFlare UI is a collection UI components built on top of React. Considering React’s popularity is on the rise, there might be a number of similar UI frameworks out there.

CloudFalre Documentation Page


Chillout is a JavaScript library to help reduce CPU usage. It provides a set of functions that can be used in place of JavaScript native functions. It can be deployed on a regular website or on a Node.js-based application.

Windows 10 CPU Usage chart

GEL Typography

GEL Typography is the typographic style guide of BBC. A great resource and inspiration on how you can standardize your typographic styles.

Heading sizes in GEL Typography

MIND Patterns

MIND Patterns is a practical guide to build an accessible e-Commerce website. It provides guides in terms of constructing HTML, using the ARIA label, and composing CSS styles that are user-friendly for users with disabilities.

Mind Patterns Documentation

CSS Specificity

A collection of illustrations that describe how CSS Specificity works.

Illustrations in CSS Specificity Homepage


A Chrome extension that helps you to optimize CSS. It will scrap your page and provide with the report, the list of used properties like colors.

CSS Dig table report Chrome

Template Stash

A collection of hand-picked templates where you can find a wide range type of templates including HTML5, WordPress, Ghost, Bootstrap and e-Commerce templates.

Template Statsh Homepage