A list of design systems

Не ещё одна методология, не новая библиотека, не «серебряная пуля». Нужен ли нам БЭМ и какие есть альтернативы? Сколько нужно разработчиков, чтобы «наделать делов» и кто в этом виноват?

If you’re looking for UI component tools chances are you’ve stumbled across Storybook and Styleguidist. On the surface, both have similar features and are used by teams around the world. It can be tough to pick the right one for your project.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Get StartedWatch video

Chisel is a WordPress development framework for creating easy to maintain and fast websites

In 2014, Jackie Balzer wrote an excellent piece for Smashing Magazine on using Sass to automatically manage the z-index of elements using lists.

I’ve been using this technique since an ex-colleague introduced me to it in early 2015, but the disconnect between maintaining multiple lists was starting to bug me.

So, I’ve come up with a variation which uses Sass maps and lists, and allows me to clearly see the hierarchy of the different elements.

A standard Angular CLI application comes with a terrific set of of tooling to prepare you to get developing quickly. However, there’s a few additional steps you should take to really prepare your project for success. In this article I’ll break down all the additional features you can add to your project without ejecting (exporting the WebPack Config).

Analyze your CSS and keep track of changes in complexity and branding. Share your statistics with everyone in your team and get conversations going.

We’ve got the fabulous Lea Verou, the wonderful Jeremy Keith, and the amazing Ada Rose King. With a few more great speakers still to be announced.

certainlyakey starred ftlabs/ftellipsis

Scales up (or down) text so it fits perfectly to its parent container.

Minimalistic but perfect custom scrollbar plugin

• Completely standalone
• Handles multiple types of form controls
• Plays well with existing HTML/CSS
• No JS knowledge required
• Works in all modern browsers
• Restrict form controls by a selector
• Automatically accounts for newly added controls
• Tiny footprint

Sticking with a native form control will almost always give your users a more accessible experience than trying to recreate one from scratch. Though the issue with native form controls is that they have an infamous reputation for being problematic to style.

Outside of some of the HTML5 form controls, which have browser prefixed CSS selectors for styling hooks, this reputation still holds true. In some cases (e.g. option elements) styling support has actually decreased in some browsers. Fortunately, there have been many experiments with markup and CSS over the years to (mostly) get around the limitations of many native form controls, without having to disregard them completely.

CSS just got a sweet little upgrade. position:sticky just landed in Chrome 56. Sticky positioning in CSS lets us build some really neat interactions in very few lines of code. It’s useful for any time you want a UI element to stick around in view as the user is scrolling, but not become sticky until the element gets to a specific distance from the top/bottom/left/right egde of the scrolling viewport. It’s like a position:fixed element that’s a sleeper agent spy. It behaves just like a regular position:relative element - even fooling its own parents and siblings - until the secret distance is met, activatating the position:fixed behavior of the spy.

Here's a secret: You may not need scroll events in your next app. Using an IntersectionObserver, I show how you can fire a custom event when position:sticky elements become fixed or when they stop sticking. All without the use of scroll listeners.

CSS Grid vs. Table — In Hand To Hand Combat

Target elements if they are focused or contain a focused element with a PostCSS plugin and Javascript script