#Development #Approaches
Out of order · How to deal with visual reordering issues in CSS? https://ilo.im/163d1y
_____
#Layout #CSS #CssGrid #CssFlexbox #DesignSystem #WebDesign #WebDev #Frontend #DOM #JavaScript
ilo.im · Out of order
Recent searches
Search options
#designsystem
2 posts1 participant0 posts today
#Design #Approaches
Bias in design systems · Towards a more sustainable design system program https://ilo.im/163j7l
_____
#Mindset #Longevity #DesignSystem #Documentation #ProductDesign #UiDesign #WebDesign #Development #WebDev #Frontend
Whew! After almost 2 days of battling with #Angular I finally got our ##DesignSystem's Radio Group & Radio (button) components to play nice with reactive forms.
My mood yesterday was: 
"Angular can dependency iniect itself into the bin"
Today my mood is: "Signals are nice"
Exciting news 
I've just released 2 new dates for my Writing #DesignSystem documentation training:
- 1:30-5pm UK time, 23 May: https://bit.ly/4lpG9Z2
- 9am-12:30pm UK time, 29 May: http://bit.ly/4j2rW2D
A half-day course that will teach you how to plan, write and test docs that users will actually read.
1/2
EventbriteWriting design systems documentationWriting design systems documentation is a hands-on, half-day course on how to write documentation that people can find, understand and use.
#Design #Examples
From real to digital · How UI components are inspired by real-world objects https://ilo.im/162y07
_____
#UI #Components #Interactivity #DesignSystem #ProductDesign #UxDesign #UiDesign #WebDesign #Inspiration
Been building a Card component for our #DesignSystem. Trickier than you might think.
To make the card surface clickable, it uses an approach from @heydon 's excellent https://inclusive-components.design/cards/ post, albeit wrapped up as a #WebComponent that progressively enhances a link/button in the card's content.
Also taking cues from @nathanacurtis sub components post https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a and giving our consumers a suite of building blocks to assemble whatever specialsed card variations they need.
Inclusive Components · CardsSome of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification. It's at your discretion how closely you follow these requirements. Research may show
Updated the select menu to operate closer to the way figma's does (swapped out the CSS variables to match figma's UI3 for the demo).
Eventually custom select menus will be possible without JS, but I think it's still getting agreement. 
Replied in thread
@stuffbreaker Is this a "Hot Take"? I thought this was _just the facts_. 
If there is a developer between you and an end user your user is the developer. Make their job easier, bring #a11y to the surface, bring #performance to the surface, bring #usability to the surface by making it such that what is easy is what is right and what is right will serve their use (maybe the end user) in was that they would likely not have done without your #designSystem.
Inspired by a design, I created the 3D bookmark with #CSS in a
@CodePen
https://codepen.io/konstantindenerz/full/GgRxXdg
#Design #Guidelines
Design systems need a color space · Ignoring color spaces is no longer an option https://ilo.im/162qtm
_____
#Color #ColorSpace #DesignToken #DesignSystem #ProductDesign #UiDesign #VisualDesign #WebDesign
BjangoDesign systems need a colour spaceImagine walking into a shoe store and asking for size 10 sneakers. You may end up with shoes that fit, but “size 10” isn’t descriptive enough to be sure — the US, UK, EU, Australia, and Japan all have different shoe sizing systems. To ensure you get shoes that fit, it’d be wise to be more specific and ask for “size 10 US” or “size 10 EU”.
Migrated a couple more old Medium posts to my personal website: #DesignSystem Architecture https://cirrus.twiddles.com/blog/2017/04/28/design-system-architecture/ and its TL;DR version.
Hard to believe its almost 8 years old! (Have I really been obsessing over design systems for that long?!)
This was one of my most read posts: 11.3k views.
4 more blog posts to go before all my Medium stuff has been migrated.
cirrus.twiddles.comDesign System Architecture (full-fat version)Identifying common categories of tools and integrations between them in design systems
To view the Chrome WebUI Gallery, open your Chrome browser and navigate to chrome://webui-gallery/
Kelp — IDE-плагин для кастомных дизайн-систем на Jetpack Compos...
https://habr.com/ru/companies/ozontech/articles/847376/?utm_source=habrahabr&utm_medium=rss&utm_campaign=847376
#android #studio #ide #jetpack #compose #дизайн #система #дизайн-система #design-system #intellij #idea
Event Attributes
https://habr.com/ru/companies/ozontech/articles/847376/?utm_source=habrahabr&utm_medium=rss&utm_campaign=847376
#android #studio #ide #jetpack #compose #дизайн #система #дизайн-система #design-system #intellij #idea
Event Attributes
Kelp — IDE-плагин для кастомных дизайн-систем на Jetpack Compose
Kelp — мощный плагин для Android Studio, разработанный для улучшения поддержки кастомных дизайн-систем на Jetpack Compose в Android Studio. Основные фичи: 
Настраиваемые иконки для компонентных функций 
Иконки дизайн-системы 
Предпросмотр цветов 
Интеграция демоприложения (автоматическое скачивание и установка APK-файла и deeplinking на страницу компонента) 
Рендеринг изображений в KDoc 
Шаблоны кода (Live Templates) И 
Gradle Plugin, скачивающий демоприложение и проверяющий наличие IDE-плагина.
ХабрKelp — IDE-плагин для кастомных дизайн-систем на Jetpack ComposeПривет! Меня зовут Антон, я ведущий разработчик мобильных приложений в Ozon Tech. Наверное, почти у каждого происходит стечение обстоятельств, которые подталкивают нас что-то сделать своё. Иногда это...
[GrUSP Academy] -
The science of a button: Introduzione ai design system
Docente: Filippo Gianessi,Senior Growth Product Designer @ YAZIO
Faenza | 
27 Marzo 2025
Biglietti su 
https://bit.ly/42s8Uxi
#cssday #cssday25 #css #frontend #WebDesign #WebDev #frontenddevelopment #ui #ux #design #designsystem
---
GrUSPAcademy Corsi sulle evoluzioni dello sviluppo web per developer che vogliono formarsi.
Un progetto realizzato in collaborazione con Apropos.srl
#Design #Launches
Design Tokens · A glossary of concepts around design tokens https://ilo.im/162nq3
_____
#Glossary #Terminology #DesignTokens #DesignSystem #UiDesign #WebDesign #Development #WebDev #Frontend
Pleased to be sneaking some #ProgressiveEnhancement into the #DesignSystem we're building at Investec.
Currently making an Accordion component using #HTML <details> & < summary>, which requires zero client-side #JS. Until #interop2025 brings ::details-content support to Firefox & Safari, the opening / closing won't be animated in those browsers. But, we're cool with that. It's still perfectly usable without animations.
