What Is Atomic Web Design and Do I Need It?

Web designers may use a number of techniques, approaches and philosophies while creating compelling and engaging digital interfaces. Each designer has their own preferences – some prefer to work from the top down, beginning with the most basic elements and building their product down to the last detail. This approach is the most common and often yields a well-thought out, quality product.

50 Visually Appealing CSS Tutorials & Techniques

If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing, but are also really useful. You know what we mean… fantastic text effects, innovative button styles, space-saving navigation systems, subtly animated form elements… that kind of thing.

Getting Started With CSS Flexbox Using Practical Examples

Flexible boxes or flexbox, is the latest method for controlling layouts in CSS. Using grids that are ‘flexible’ is so easy to predict how each element behaves on different screen sizes. Its greatest feature is its ability to manipulate an item’s width/height to occupy all the space within its container (also known as a “flex container”) – otherwise, it shrinks to prevent overflow.

How to Replicate the Bootstrap 3 Grid Using CSS Grid

The past few years have seen a wide variety of methods for creating web page layouts. CSS Grid is one of the newest and probably the most game-changing layout technique at our disposal. If you haven’t begun tinkering with it yet, now’s the time. It is a wildly different way of thinking about positioning content, and it currently has nearly full support across all popular web browsers.

How to Animate a CSS-Only Hamburger Menu and Icons

Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller screens.

The Big CSS Media Query Mistake

Do you ever feel weird when everyone around you is doing something you would ordinarily think is wrong [or not quite ideal at the very least], but somehow no one seems to want to say anything for one reason or another? It’s a very strange feeling to see everyone doing their best impression of a hapless observer. It kind of reminds of me of that old fable, “The Emperor’s New Clothes.”

Creating Native HTML5 Dialog Windows

The dialog window is one of the most commonly used elements in a website’s user interface design. It is used for multiple purposes, including displaying notifications, carrying a subscription form, alerting of errors/warnings, and drawing a visitor’s attention to vital pieces of information. When dialog windows are designed effectively and used right, they can ease the user’s task.

Write More With Less (well actually with Sass)

A few months ago, we at Tailor Brands decided to make a concerted effort to improve the consistency of our site. Our codebase had grown to over 50 files and littered among them were bunches of font sizes, dozens of different colors, and a mess of other inconsistencies. The inconsistencies meant that our design and tech teams had to spend extra time figuring out sizes and colors and so on.