How do you design a design doc? – Dropbox Design – Medium
When you think about design, the word “documentation” probably isn’t the first thing that comes to mind. But documentation is a key part of the design process for many teams.
design  design--patterns  wd  wd-styleguide 
7 days ago
Questions To Ask Before Building a Component Library | Chromatic
At this point it feels safe to say that component-based design and development is here to stay. Gone are the days of designing and building pages in isolation. Instead, we're building collections of components that all follow a shared design system and can be used anywhere on any page. This is increasing the consistency and predictability of our user experiences. It's also speeding up our development.
wd  wd-styleguide 
7 days ago
Accessible Landmarks |
Landmarks can be useful to screen reader users as they can be used to help orient a user to, and easily navigate, an appropriately structured web page or application screen.
wd  wd-accessibility  wd-accessibility--aria 
7 days ago
Adactio: Journal—Minimal viable service worker
I really, really like service workers. They’re one of those technologies that have such clear benefits to users that it seems like a no-brainer to add a service worker to just about any website. The thing is, every website is different. So the service worker strategy for every website needs to be different too. Still, I was wondering if it would be possible to create a service worker script that would work for most websites. Here’s the script I came up with.
wd  wd-js  wd-js--service-workers  wd-src--adactio 
7 days ago
Short note on what CSS display properties do to table semantics | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have direct access to the HTML DOM, they are provided access to a subset of information in the HTML DOM via Accessibility APIs. Sometimes what an element represents in the HTML DOM is not how it is represented in the accessibility tree.
wd  wd-accessibility  wd-css  wd-html  wd-html--semantics  wd-tables  wd-tables--responsive  wd-src--paciello-group 
13 days ago
Consolidating Design Systems – EightShapes – Medium
An enterprise usually has many concurrent design systems. Separate groups chart paths loosely aware or even willfully ignorant of what others do. Many systems isn’t necessarily bad. Different programs may support different experiences and teams with different tools, and that’s ok.
design  ux  ux--patterns 
15 days ago
The key difference between a website and a web app is… highly contested. On the whole, I'd say the more links there are, the more site-like, and the more buttons, the more app-like. If it includes a page with a form, it's probably a kind of site. If it essentially is a form, you might call it an app. In any case, your web 'product' is really just interactive content, consumed and transmitted by an app we call a 'browser'.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive  wd-interface--toast 
15 days ago
Comparison Table of WCAG 2.0 to Existing 508 Standards - United States Access Board
The WCAG 2.0 Success Criteria are more explicit than the existing 508 Standards. Careful attention has been given to ensure that the Success Criteria are written as objectively testable requirements. In addition, unlike the existing 508 Standards, WCAG 2.0 is written in a way that is technology neutral and is therefore directly applicable to a wide range of content types and formats.
wd  wd-accessibility 
26 days ago
Everything you need to know about CSS Variables – freeCodeCamp
Most programming languages have support for variables. But sadly, CSS has lacked support for native variables from the very beginning. You write CSS? Then no variables for you. Well, except if you were using a preprocessor like Sass. Preprocessors like Sass sell the use of variables as a big add-on. A reason to try them. And you know what? It’s a pretty darn good reason. Well the web is moving fast. And I’m glad to report that CSS now finally supports variables.
wd  wd-css  wd-css--variables  wd-src--medium 
26 days ago
Parallax scrolling with CSS variables | basicScroll
basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.
wd  wd-css  wd-css--variables  wd-interface  wd-interface--scrolling  wd-uses--github  wd-uses--bower  wd-uses--npm 
26 days ago
Why the vanilla JS matches() method won't work with event listeners and nested links | Go Make Things
I often use event delegation with click event listeners in my scripts, with the matches() method to check which element was clicked.
wd  wd-js  wd-js--vanilla 
26 days ago
Writing a Good Research Question - Center for Innovation in Research and Teaching
The following unit will discuss the basics of how to develop a good research questions and will provide examples of well-designed questions.
29 days ago
Writing Research Questions | Research Rundowns
This review is a collection of views and advice on composing research questions from problem statements. It mostly reads as a list of tips and suggestions.
29 days ago
Default function arguments with vanilla JavaScript | Go Make Things
Yesterday, we looked at two different approaches for passing arguments into a function. Today, let’s look at how to set default values for your arguments.
wd  wd-js  wd-js--vanilla 
29 days ago
Toast! Is it accessible? - Maxability
A toast is a non modal that appears on the screen for few seconds and auto expires. The toast shares an alert containing a message to the user. For example: In an email client, once you hit the send button the toast can display a message that says “Sending message” and disappears once it is sent. This message pops only for few seconds and does not require user interaction.
wd  wd-accessibility  wd-accessibility--interactive  wd-interface  wd-interface--toast 
4 weeks ago
(More) Tips for Building Your Sketch UI Library – The Customer Service Blog By Help Scout – Medium
I recently read this excellent article by Hudl on their tips for building usable Sketch Libraries — and was relieved to find that I’d been following a similar path in creating our UI Libraries over at Help Scout. So for those of you deep in the trenches, I wanted to share a couple of additional things that have made my life immeasurably easier when creating and maintaining our shared components.
design  design--sketch 
5 weeks ago
wix/rawss: Generic CSS polyfill framework, with a CSS variables implementation
A generic framework for polyfilling CSS Aiming for a fully functional polyfill for CSS variable
wd  wd-css  wd-css--variables  wd-js  wd-polyfill  wd-uses--github 
5 weeks ago
How to not break your site with Service Workers · - James Milner's personal blog
Over the past few months I’ve been dabbling with Progressive Web Apps (PWA), but earlier this month I was lucky enough to be invited onto a PWA training course at Google. The course was fantastic and it was good to get a more granular understanding of the underpinning technologies. Coincidently, you may have seen (very) recent announcements about support for Service Workers in Edge and also support in preview for Safari. This feels like a great time to use my recent experience at work turning our web app into a PWA and my learnings from the course to explain how to avoid getting into some very tricky situations.
wd  wd-performance  wd-performance--offline  wd-js  wd-js--service-workers 
6 weeks ago
Easing Gradients
Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.
wd  wd-css  wd-css--gradient 
6 weeks ago
A beginner’s guide to Service Workers – Samsung Internet Developers – Medium
This guide is aimed at people who have some experience with HTML, CSS, and JavaScript. It covers the basics of service workers and how to use them without going into too much detail, with the aim of letting you build a prototype as quickly as possible.
wd  wd-performance  wd-performance--offline  wd-js  wd-js--service-workers  wd-src--medium 
6 weeks ago
aria-label is a xenophobe | HeydonWorks
Internationalization is a major component of inclusive design. But with automatic translation features provided by Google and Microsoft, it’s mercifully simple to support — at least at the most basic level. Just include a default language for the page, like lang="en", on the <html> element to give translation services a helping hand.
wd  wd-accessibility  wd-accessibility--aria  wd-html  wd-html--semantics  wd-localisation 
6 weeks ago
Let’s make multi-colored icons with SVG symbols and CSS variables
Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.
wd  wd-images  wd-images--svg  wd-images--icon  wd-css  wd-css--variables  wd-src--medium 
6 weeks ago
Enter The Dragon (Drop): Accessible List Reordering — Smashing Magazine
Over the years of being a web developer with a focus on accessibility, I have mostly dealt with widely-adopted, standardized UI components, well supported by assistive technologies (AT). For these types of widgets, there are concise ARIA authoring practices as well as great tools like axe-core that can be used to test web components for accessibility issues. Creating less common widgets, especially those that have no widely-adopted conventions for user interaction can be very tricky.
wd  wd-accessibility  wd-accessibility--interactive  wd-input  wd-input--drag-and-drop  wd-src--smashing 
6 weeks ago
Keeping aspect-ratio with HTML and no padding tricks
For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick. Like here:
wd  wd-css  wd-css--grid  wd-src--medium 
7 weeks ago
Plasma design system · GitBook
WeWork creates inspiring shared workspaces, with an emphasis on community. Our operations are complicated, so we design and build our own internal digital tools to meet our business needs, and to manage our global network of buildings and members. The Plasma design system is created for these internal business tools.
wd  wd-styleguide 
7 weeks ago
selectWoo – An accessible replacement for select2 – Develop WooCommerce
The select2 library makes it simple for anyone to add full-featured, good-looking dropdown menus to their site. According to Wappalyzer, at least 850,000 websites are currently using select2. WooCommerce uses it in many places to enhance the look and usability of stores.
wd  wd-accessibility  wd-forms  wd-forms--input  wd-forms--select  wd-forms--search 
7 weeks ago
The Vanilla JS Toolkit
A growing collection of code snippets, helper functions, polyfills, plugins, and learning resources, by Chris Ferdinandi.
wd  wd-js  wd-js--vanilla 
7 weeks ago
propublica/column-setter: Custom responsive grids in Sass that work in older browsers.
Column Setter is a Sass tool that lets you easily set up a custom responsive grid for your website and build a float- or flexbox-based layout that aligns to it. It uses one simple function and a small handful of optional mixins to generate CSS percentage widths based on your settings. And for the most part, it leaves the structure of your HTML and CSS entirely up to you.
wd  wd-css  wd-sass  wd-sass--mixin  wd-grid  wd-uses--github 
7 weeks ago
CSS Scroll Snap: What Is It? Do We Need It?
It can be difficult for web developers to guarantee a well-controlled scrolling experience, but luckily a CSS module entitled “Scroll Snap” promises to help. It will enforce where a scroll position ends after a scrolling operation has completed. Amongst other things, this module contains features to control facets such as panning, combined with “snap positions”, and produces a particular alignment of content within a scrolling container.
wd  wd-css  wd-interface  wd-interface--scrolling 
7 weeks ago
aria-expanded does not require a fallback
When building a control that toggles content in a web app, we can use aria-expanded to let the control know whether the content is shown or hidden. Expanded or not expanded. In assistive technologies (AT) that support this attribute, AT users can figure out whether the element was expanded.
wd  wd-accessibility  wd-accessibility--aria  wd-interface  wd-interface--accordion 
7 weeks ago
Make Your Site Faster with Preconnect Hints | Viget
Requesting an external resource on a website or application incurs several round-trips before the browser can actually start to download the resource. These round-trips include the DNS lookup, TCP handshake, and TLS negotiation (if SSL is being used). Depending on the page and the network conditions, these round-trips can add hundreds of milliseconds of latency, or more. If you are requesting resources from several different hosts, this can add up fast, and you could be looking at a page that feels more sluggish than it needs to be, especially on slower cellular connections, flaky wifi, or congested networks.
wd  wd-performance  wd-performance--prefetch 
8 weeks ago
Micron.js - Webkul
Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.
wd  wd-animation  wd-js  wd-css  wd-uses--github  wd-uses--bower  wd-uses--npm 
8 weeks ago
Responsive Images with Client Hints
It doesn't take being a performance fanatic to know that images can really slow down a page's load time. We've come a long way when it comes to images, from lazy loading them to using better image formats like WebP, but they all involve loading the same static image URL which may be good for desktops but not for mobile devices, and visa versa. We do have srcset with img tags now, but that can be difficult to maintain for dynamic, user-driven websites.
wd  wd-performance  wd-performance--conditional  wd-images  wd-images--optimization 
8 weeks ago
Herman Style Guides | OddBird
Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool to create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps keep our development flow simple, and our UX consistent, as we iterate on patterns and scale over time.
wd  wd-sass  wd-styleguide 
8 weeks ago
Accessible Links Re:visited | Filament Group, Inc., Boston, MA
We and our clients often tend toward simple and understated style, but sometimes that simplicity doesn't serve all audiences as well as we would like. Recently we helped develop a site for a client who wanted a clean aesthetic that was not too busy. When the site went live, they conducted an accessibility audit, and we noticed an unfortunate trend in the results: links in running text were undetectable; focus states were sometimes obscure or unclear; and some links’ purpose was confusing when spoken aloud by certain screen readers. It was a good reminder that integrating accessibility best practices and validating code will get us closer, but won't guarantee a quality experience navigating a site with keystrokes and auditory cues.
wd  wd-accessibility  wd-accessibility--audio  wd-css 
8 weeks ago
Adele - Design Systems and Pattern Libraries Repository
The repository of publicly available design systems and pattern libraries
wd  wd-framework 
8 weeks ago
Typography for Glanceable Reading: Bigger Is Better
Fonts to support glancing at individual words should be larger, in noncondensed widths, and uppercase over lowercase.
ux  ux--content  wd  wd-typography  design  design--typography 
8 weeks ago
"display: contents" is coming - Rego's Everyday Life
This new value for the display property allows you to somehow remove an element from the box tree but still keep its contents.
wd  wd-css 
8 weeks ago
Accessibility: Usability for all | Interaction Design Foundation
A design is only useful if it’s accessible to the user: any user, anywhere, anytime. We often mistake the concept of accessibility as involving people with disabilities. However, we’re all disabled in many contexts and circumstances. Accessibility is all about people. If you’ve ever broken a leg, you’ll know how difficult formerly simple tasks become. How about a power outage? One moment, you’re going about your business; the next, you’re plunged into darkness. Moving a couple of steps becomes risky! Whatever task we’d taken for granted suddenly has us negotiating barriers.
ux  wd  wd-accessibility 
8 weeks ago
Just because your site isn't for emerging markets, doesn't excuse you from web performance optimisation
When it comes to justifying the value of web performance, you may have come across the phrase "The Next Billion Users". These are people living in emerging markets who are not currently online but will be over the coming years. As they join the web, many will have their experience hampered by the limited processing power of budget mobile devices and poor network connectivity – so this (I hope!) makes it an obvious business reason to invest in optimising performance and unlock the immense potential value in these markets.
wd  wd-performance 
8 weeks ago
Better Typography with Font Variants - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web.
wd  wd-css  wd-typography  wd-typography--opentype 
8 weeks ago
Home | Laws of UX
Laws of UX is a collection of the key maxims that designers must consider when building user interfaces.
8 weeks ago
Meet the New Dialog Element
HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.
wd  wd-html  wd-html--semantics  wd-interface  wd-interface--modal 
9 weeks ago
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior.
wd  wd-css  wd-css--grid  wd-src--css-tricks 
9 weeks ago
Understanding WCAG 2.1 - Reviewing Cognitive Success Criteria
Hello, everyone! We are back on our accessibility adventure through WCAG 2.1, the seventh public working draft! This draft was published on December seventh by the W3C. Our focus today is going to be on the success criteria that are coming up as proposals in WCAG 2.1 that are focused on the needs of people with cognitive disabilities.
wd  wd-accessibility 
9 weeks ago
Your Baby is Ugly :: UXmatters
UX researchers must frequently deliver bad news to the creators of products and user interfaces. After we’ve conducted expert reviews, competitive analyses, usability testing, or user research, the end result is often telling our clients, stakeholders, designers, and other project team members about all the problems we’ve found in their product. Even though this is what they asked us to do—and what they expect—listening to a long list of their baby’s faults can be demoralizing.
9 weeks ago
What’s New in HTML 5.2?
Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC). When a specification reaches the REC stage, this means that it has received the official endorsement of W3C Members and the Director, and that the W3C officially recommends it’s deployment by user agents, and it’s implementation by web page authors.
wd  wd-html  wd-html--semantics  wd-src--bitsofcode 
10 weeks ago
Modern Asynchronous CSS Loading | Filament Group, Inc., Boston, MA
The simplest way to load a CSS file in an HTML document is to use a link element with rel="stylesheet". Referencing CSS this way works great, but it comes with a downside: it's synchronous. In other words, with a typical stylesheet link like this, the browser stops rendering subsequent portions of the page while it requests, downloads, and parses the file. Sometimes that blocking can be desirable because we don't want the browser to render the page before it has the CSS it needs. But not all of our CSS files are critical enough to delay access to the content, which is why we highly recommend prioritizing and streamlining assets for fast, resilient delivery.
wd  wd-performance  wd-performance--conditional  wd-css 
10 weeks ago
Accessible Footnotes with CSS — SitePoint
I was playing with CSS counters the other day and thought about using them to deal with footnotes. According to Plagiarism which has a surprisingly long entry on the matter, footnotes are:
wd  wd-accessibility  wd-accessibility--aria  wd-html  wd-css  wd-src--sitepoint 
10 weeks ago
Network based image loading using the Network Information API in Service Worker | justmarkup
Recently, Chromium improved their implementation of navigator.connection by adding three new attributes: effectiveType, downlink and rtt. Before that, the available attributes were downLinkMax and type. With these two attributes you couldn’t really tell if the connection was fast or slow. The navigator.connection.type may tell us a user is using WiFi, but this doesn’t say anything about the real connection speed, as they may be using a hot spot and the connection is in fact 2G.
wd  wd-performance  wd-images  wd-images--optimization  wd-js 
10 weeks ago
Lozad.js | lozad.js
Highly performant, light ~0.7kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
wd  wd-performance  wd-performance--lazyload  wd-js  wd-uses--github  wd-uses--npm  wd-uses--yarn  wd-uses--bower 
11 weeks ago
remotestorage/remotestorage.js: ⬡ JavaScript client library for integrating remoteStorage in apps
remoteStorage.js is a JavaScript library for storing user data locally in the browser, as well as connecting to remoteStorage servers and syncing data across devices and applications. It is also capable of connecting and syncing data with a person's Dropbox or Google Drive account (optional).
wd  wd-js  wd-performance  wd-performance--localstore  wd-uses--github 
11 weeks ago
Performance Calendar » 3 Tips for Faster Font Loading
I guess web fonts are a big thing these days. Most of us know how know to write @font-face declarations by now. You know all about WOFF and WOFF2, possibly a bit about subsetting, or maybe even font-display for more accessible rendering of text. Hell, maybe you just grab a <link> tag from Google Fonts and go. Whatever the case may be, here’s three tips for faster fonts you may not have encountered yet.
wd  wd-performance  wd-performance--prefetch  wd-performance--conditional  wd-typography 
11 weeks ago
Designing Tables for Reusability – – UX Design Collective
It is so tempting to jump straight onto paper or Sketch or Axure and start building. In environments where shipping fast is a constant demand, it’s easy to leap headfirst. And while research and strategy sound like barriers to shipping fast, what if they actually helped move production faster?
design  design--patterns  ux  ux--patterns  wd  wd-tables  wd-src--medium 
11 weeks ago
Performance Calendar » Clearing cache in the browser
Caching assets in the browser is the most common and most obvious way to improve front end performance. But at some point every developer accidentally makes a bad release of an asset with a long cache lifetime. There is a way back! Here’s how to throw the kill-switch.
wd  wd-performance  wd-browser  wd-browser--support 
11 weeks ago
Designing Better Design Documentation – Muzli -Design Inspiration
Overview of the ways to make documents clearer, better structured, and more appealing. Various documents — reports, briefs, maps, guidelines — usually are the way designers communicate the results of their work to teammates or clients. One doesn’t simply collect all the design data in one place and call it a day. In good documentation, the how is as important as the what.
ux  ux--content  wd  wd-src--medium 
11 weeks ago
Testing for CSS support with vanilla JavaScript | Go Make Things
In CSS, you can check if a feature is supported using the @supports() rule. For example, to check for FlexBox support, you’d do this:
wd  wd-css  wd-js  wd-browser  wd-browser--support 
11 weeks ago
A Sliding Nightmare: Understanding the Range Input | CSS-Tricks
You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it's not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are necessary to do so.
wd  wd-css  wd-forms  wd-forms--input  wd-src--css-tricks 
11 weeks ago
Headhesive demo - Mark Goodyear
Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic.
wd  wd-js  wd-interface  wd-interface--sticky  wd-uses--github  wd-uses--npm  wd-uses--bower 
12 weeks ago
Popmotion - A functional JavaScript motion library
A functional, reactive motion library. Popmotion is a 11.5kb (max) Swiss Army knife for animators and interaction developers:
wd  wd-animation  wd-js  wd-uses--github  wd-uses--npm 
december 2017
The Future of Web Typography: CSS Fonts Level 4
Web fonts helped to breathe life into designs, helping us avoid the system defaults so widely used during the early days of web design. With so many options available today, we as have plenty of tricks up our sleeves in order to serve and style custom fonts. Level 4 of the CSS Fonts Module outlines more intriguing options you will love, including some exciting properties such as font-min/max-size. This article won’t uncover every last crumb of level 4, but will highlight the interesting parts still in their infancy. The adventure starts now!
wd  wd-css  wd-typography 
december 2017
ABEM. A more useful adaptation of BEM. | CSS-Tricks
I'm personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of high specificity spread all throughout your stylesheet. However, there are a few problems I have with the syntax that can cause issues in production as well as cause confusion for developers. I prefer to use a slightly tweaked version of the syntax instead. I call it ABEM (Atomic Block Element Modifier):
wd  wd-css  wd-approach  wd-src--css-tricks 
december 2017
11 Things I Learned Reading the CSS Grid Specification
June 11, 2017, I decided to read the CSS Grid spec. The Spec was a little bit technical, but it was by far the most enjoyed specification I had ever read. If you’re a more advanced developer, bookmark it for future references.
wd  wd-css  wd-css--grid  wd-src--medium 
december 2017
Getting Hardboiled with CSS Custom Properties ◆ 24 ways
Custom Properties are a fabulous new feature of CSS and have widespread support in contemporary browsers. But how do we handle browsers without support for CSS Custom Properties? Do we wait until those browsers are lying dead in a ditch before we use them? Do we tool up and prop up our CSS using a post-processor? Or do we get tough? Do we get hardboiled?
wd  wd-css  wd-css--variables 
december 2017
Tweaking Text Level Styles | Adrian Roselli
This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog. In that post, Steve answers a very specific question about the <mark> and making it more accessible for screen readers.
wd  wd-accessibility  wd-css 
december 2017
Accessible Language Navigation
On a lot of websites users may choose to read contents in their mother tongue. In order to enable them to do so, they are often provided with some sort of navigation containing links to the translated pages. Look at a random Wikipedia article for example: on the left (desktop design) you'll almost always find a navigation linking to translations of the current article.
wd  wd-accessibility  wd-localisation 
december 2017
The 8pt Grid: Consistent Spacing in UI Design with Sketch
Spacing is everything in UI design. Forget colour, forget typography. Nail the spacing and you’re half way there. Why?
design  design--sketch  wd-src--medium 
december 2017
Animating Border | CSS-Tricks
Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised.
wd  wd-css  wd-css--borders  wd-animation  wd-src--css-tricks 
december 2017
Muuri - Responsive, sortable, filterable and draggable grid layouts
Muuri is a magical JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable.
wd  wd-grid  wd-js  wd-input  wd-input--drag-and-drop  wd-uses--github  wd-uses--bower 
december 2017
dudeonthehorse/ Email-ready CSS Reset
CSS resets for HTML emails. It's just a little css library for best default email compatibility. You can use it with your favourite email framework and self-coded templates.
wd  wd-css  wd-email  wd-uses--github 
december 2017
Server.js - server.js
Powerful server for Node.js that just works so you can focus on your awesome project.
wd  wd-server  wd-js  wd-uses--github  wd-uses--npm 
december 2017
jgranstrom/sass-extract: Extract structured variables from sass files
Extract structured variables from your sass files with no effort. Have all your style variables defined in style files, while being able to use them in javascript for things that cannot be styled with css such as complex visualisations or other dynamic content.
wd  wd-sass  wd-sass--variables  wd-uses--github  wd-uses--npm 
december 2017
Accessibility for iOS Apps: Accessibility Inspector
Developers are constantly striving to make their apps more advanced, but are they actually usable by everybody? For most apps, the answer is no. In order to reach the largest audience, let's learn about ways to make our apps more accessible.
mac  mac--apps  wd  wd-accessibility 
december 2017
CSS Grid Starter Layouts | CSS-Tricks
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.
wd  wd-css  wd-css--grid  wd-src--css-tricks 
december 2017
Keyboard-Only Focus
One of the things I couldn't man­age to find a so­lu­tion for a long time was a prob­lem of fo­cus styles on in­ter­ac­tive el­e­ments. The prob­lem was: when you have an el­e­ment with some :fo­cus styles, they're ap­plied not only to the fo­cused state it­self but also af­ter you just click on this el­e­ment (and it be­haves dif­fer­ently for dif­fer­ent el­e­ments in dif­fer­ent browsers, of course).
wd  wd-accessibility  wd-accessibility--focus  wd-css 
november 2017
« earlier      
color data design design--logos-and-branding design--objects design--patterns design--sketch design--terminology design--typography geography geography--china geography--japan git humor internet language law mac mac--apple-tv mac--apps mac--ios maps math psychology sociology technology technology--computer-hardware unicode-and-emoji ux ux--content ux--conversational ux--dark-patterns ux--device ux--haptic ux--ia ux--patterns ux--personas ux--states ux--testing ux--tools wc-css wd wd-accessibility wd-accessibility--aria wd-accessibility--audio wd-accessibility--contrast wd-accessibility--focus wd-accessibility--hiding-content wd-accessibility--images wd-accessibility--interactive wd-accessibility--tabindex wd-accessibility--tools wd-accessibility--video wd-accessibility--wcag wd-animation wd-approach wd-browser wd-browser--battery wd-browser--cookie wd-browser--notification wd-browser--support wd-browser--url wd-buildtools--grunt wd-buildtools--gulp wd-buildtools--npm wd-buildtools--webpack wd-cms wd-cms--kirby wd-cms--koken wd-cms--metalsmith wd-cms--netlify wd-cms--orchard wd-cms--wordpress wd-cms--yellow wd-color wd-css wd-css--background wd-css--borders wd-css--centering wd-css--element-query wd-css--filters wd-css--flexbox wd-css--functional wd-css--gradient wd-css--grid wd-css--layout wd-css--pseudo wd-css--selectors wd-css--variables wd-email wd-formatting wd-forms wd-forms--button wd-forms--input wd-forms--label wd-forms--password wd-forms--progress wd-forms--search wd-forms--select wd-forms--slider wd-forms--switches wd-forms--validation wd-framework wd-framework--css wd-framework--frontend wd-graphs wd-grid wd-hosting wd-html wd-html--amp wd-html--iframe wd-html--microdata wd-html--rel wd-html--semantics wd-html--web-components wd-images wd-images--background wd-images--favicon wd-images--icon wd-images--optimization wd-images--ratios wd-images--responsive wd-images--sprites wd-images--svg wd-input wd-input--drag-and-drop wd-input--keyboard wd-input--pointer wd-input--touch wd-interface wd-interface--accordion wd-interface--breadcrumb wd-interface--carousel wd-interface--coachmark wd-interface--cursor wd-interface--datepicker wd-interface--editor wd-interface--filtering wd-interface--gallery wd-interface--lightbox wd-interface--menu wd-interface--modal wd-interface--pagination wd-interface--progress wd-interface--scrolling wd-interface--slideshow wd-interface--sticky wd-interface--tabs wd-interface--tags wd-interface--thumbnail wd-interface--toast wd-interface--toc wd-interface--tooltip wd-js wd-js--angular wd-js--d3 wd-js--ember wd-js--jquery wd-js--knockout wd-js--meteor wd-js--moment wd-js--promises wd-js--raphael wd-js--react wd-js--service-workers wd-js--this wd-js--vanilla wd-js--vue wd-js--zepto wd-less wd-linting wd-localisation wd-media wd-media--audio wd-media--bigscreen wd-media--embeds wd-media--print wd-media--vertical wd-media--video wd-performance wd-performance--conditional wd-performance--lazyload wd-performance--localstore wd-performance--offline wd-performance--perceived wd-performance--prefetch wd-polyfill wd-postcss wd-pwa wd-responsive wd-responsive--js wd-sass wd-sass--extend wd-sass--maps wd-sass--media-queries wd-sass--mixin wd-sass--variables wd-server wd-src--a-list-apart wd-src--adactio wd-src--bitsofcode wd-src--cloud-four wd-src--codyhouse wd-src--creative-bloq wd-src--css-tricks wd-src--google-developers wd-src--lullabot wd-src--medium wd-src--nn-group wd-src--paciello-group wd-src--quirksmode wd-src--sitepoint wd-src--sixrevisions wd-src--smashing wd-src--thenewcode wd-src--tympanus wd-src--ux-magazine wd-src--uxbooth wd-src--uxmatters wd-src--webaim wd-styleguide wd-tables wd-tables--responsive wd-tables--sorting wd-testing wd-typography wd-typography--icon-font wd-typography--modular-scale wd-typography--opentype wd-typography--rendering wd-typography--type-locks wd-units wd-uses--bower wd-uses--cdnjs wd-uses--coffeescript wd-uses--component wd-uses--github wd-uses--homebrew wd-uses--npm wd-uses--packagist wd-uses--ruby wd-uses--yarn

Copy this bookmark: