My favorite CSS “trick” would have to be these 3 lines of CSS:

• { background-color: rgba(0,255,0,0.1); }

I’ve been using this snippet for years! It makes debugging layouts a breeze and is quite insightful when dealing with the box model.

The ingredients of a successful data table UI

Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.
Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.

Brandon replacement

A couple of examples of modules which do the escaping correctly are
Mojo::Util
and
HTML::Entities

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.

The internet has shape preferences, and they’re more meaningful than you think

On Thursday, Twitter threw us a curveball (sorry) and smoothed out the once-square avatar photos into orbs floating around the timeline. The change is notable, but the circle vs. square debate is far from new. There are arguments in favor of both when applied to internet design; circles indicate a person rather than content, which typically comes in a grid-like shape. So what is the current state of shapes on the social web?

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.

Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.

You’ve been working up a storm in Sketch, and for that you deserve all of the high-fives. But now it’s time to kick things up a notch and improve your workflow—so stop what you’re doing and grab these 30 free Sketch plugins.

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

We often think about accessibility in the design and build process, but content is always king. These are some ongoing considerations to keep your text and media accessible.

SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.

This guide is meant to help designers lay out UI quickly and consistently. It’s particularly helpful for designing mobile app UI where there are fixed constraints, though I find it useful for responsive web design as well.

As with many design guidelines, the examples may be more helpful while designing than read independently.

When people arrive on your homepage you have mere seconds to impress them, explain what you’re about and convince them to stick around. This is an important moment yet most sites miss the opportunity to impress and connect with their visitors.

Free Web & Mobile
Toolkits for UI Designing
Huge pack of UI Kits helps you boost your design workflow. All toolkits carefully crafted and made with love. Increase your design experience with our products. Get it all for free.