Google releases Material Design icons on Google Fonts

Google creates icons that use ligatures instead of CSS classes

 

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

Instead of the syntax popularized by Bootstrap:
<i class=”icon icon-thing”></i>

Google Material Design icons use ligatures:
<i class=”material-icons”>thing</i>

It’s a boon to screen readers.

Read more at google.github.io

Introducing Noun Project for Mac

The line-drawing vector icons trend continues: the Noun Project makes finding and using icons a breeze

 

Search, drag, and drop the visual language from your desktop.

Search over 100,000 icons. The Mac App constantly updates, giving you fresh content every day.

Use with your favorite apps including Adobe Creative Cloud Apps, Sketch, PowerPoint.

Read more from the source: The Noun Project

Polymer is production ready: 1.0 has been released

The new Polymer web site includes a long list of pre-made elements, many of which help you implement Material Design

 

Polymer is a library that uses the latest web technologies to let you create custom HTML elements. Build anything from a button to a complete application as an encapsulated, reusable element that works across desktop and mobile.

Polymer 1.0 has been rebuilt from the ground up for speed and efficiency. The new, leaner core library makes it easier than ever to make fast, beautiful, and interoperable web components. If you haven’t used Polymer before, it’s time to try it out. If you haven’t tried it recently, time to take another look.

Read more from the source: polymer-project.org

UX is UI — Medium

User experience begins with strategy and requires layers of feature scope, site structure, site skeleton, and “surface” or the graphic interface

 

In a post adapted from a short talk Mike Atherton gave at the SODA Social meetup in London on May 14th, 2015 he writes:

In UX there’s no ‘one-size-fits-all’ design pattern for a given situation. Despite what clients ask, there’s no more a ‘best practice from a UX perspective’ than there is a ‘best recipe from a cookery perspective’.

“Give me six hours to chop down a tree and I’ll spend the first four sharpening the axe.” – Abraham Lincoln

It’s about research, understanding, and evaluation. Figuring out the right problem to solve, before dipping into our toolbag of methods and patterns to solve it.

Read the post at Medium

Logic gates tutorial with functional demo

Schabse Laks created working logic gates with a clever use of checkbox inputs, labels, and CSS sibling selectors

 

Schabse writes:

Logic gates are the basis of all of computing. They take two binary inputs (0/1 or true/false), and result in a binary output whose value depends on the inputs. These gates form the building blocks upon which all computers are built.

Here are the three basic logic gates: AND (true only when both inputs are true), OR (true when either input is true), and XOR (eXclusive or, true only when exactly one input is true, but not both). Click the inputs (square boxes) to see the outputs reflect the values.

Check it out at silon.slaks.net

Sass Pixel Art

Get crazy with CSS box-shadow; here’s a walkthrough on making pixel art from a single div with a little help from Sass

 

Una Kravets begins her article:

Each pixel is it’s own, individually placed box shadow. These are strung together via a comma-separated list. You can have as many box-shadows as you want on a div. Pretty cool.

Read Una’s post at una.im