There is a lot happening in the Pattern Lab and Drupal 8 integration world.

Modern frameworks have brought on a paradigm shift for developers in which products are built by combining a series of smaller components into complex systems which can adapt to different contexts and devices. This makes the code easier to maintain, and the entire system more flexible.

For a variety of legitimate reasons, many designers have not caught on to this paradigm shift as quickly as developers. We are missing a mental model for creating the pieces that make up these interfaces independently from their environment/pages/screens/viewports etc.

One such approach is Atomic Design.

Our first piece of ongoing research into usability best practices tackles scrolling. Scrolling below the fold.

Designer and writer focused on design systems.

Welcome to Scooter: an SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.

Gravit Designer is a full featured free vector design app right at your fingertip. It is available for different platforms including Mac, Windows, Linux, Chrome and the Web.

Effortlessly reduce file size and make artwork easier to edit by removing excess points, using our three dedicated tools. Either let the Smart Removal Brush automatically remove points with a pressure sensitive brush action, or use the PathScribe panel to Smart Remove Selected Points or Remove Duplicate Points. Both intelligently remove points with one press of a button whilst working hard to maintain the path shape.

A Look Inside Your Favorite Products

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open. It doesn’t matter if the cursor hovers over “Appstore for Android” momentarily – the user is probably heading toward “Learn more about Cloud Drive.”

Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

Grid related demos.

he Equilateral Triangle of a Perfect Paragraph is a theory developed by Matej Latin in the Better Web Type course about web typography for web designers and web developers. Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony. The theory is explained in details in an article on CSS-Tricks.

(TLDR: use contentEditable=true) Selecting text in Mobile Safari is not as easy as it could/should be. This is one of those things that is strangely hard compared to what we’re used to with a mouse. What’s the solution? JavaScript, of course. Before getting into the specifics, here’s a simple demo to show where this post is going.

Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let’s take a look at how the feature works, and how you can use it to get the best support for your WordPress site.

You also can't simply apply the background and padding to a <span> or an inline element. The left and right padding will only apply to the very first and very last line. On each of the middle lines, the background will butt up immediately next to the text.

Flexbox will of course offer more than simple re-stacking of elements, but if that is all you need, you can look no further than CSS‘s display property.

Works for only vertically stacking elements.

It’s extremely useful to have a WCAG 2.0 checklist to hand when you’re working through the guidelines. A WCAG 2.0 checklist helps you to check your web accessibility progress, record how far you’ve come and set your targets out for the future.

Wuhcag is all about holistic web accessibility – that means taking everything about your website into account. That’s why I don’t rush you to make every web accessibility change at once – it’s too much for you to do and so it’s bad for your users. I love a structured approach to everything in life, and your website is no exception.

Get the current accessibility support status of HTML5 features across major browsers.

The toolkit is a comprehensive resource for any inclusive session you want to lead. Practice new skills, develop new concepts, or create a prototype – the toolkit is made to be retrofitted to your design team’s goals. Download everything here, and start exploring!