community-group
csswg-drafts
community-group | csswg-drafts | |
---|---|---|
8 | 70 | |
1,454 | 4,269 | |
1.2% | 0.6% | |
4.3 | 9.9 | |
20 days ago | 8 days ago | |
HTML | Bikeshed | |
GNU General Public License v3.0 or later | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
community-group
-
Design Systems: From Atomic Design to a Global Solution
The initiative is open for contributions from individuals and is not owned by a specific company or organization. It is sponsored by various entities and supported by the community, including organizations like Open UI, W3C, and the Design Tokens Community Group.
-
Six new variables features launching today
Looking ahead, we aim to support native design token interoperability, aligning with the W3C community group’s ongoing standardization efforts. One of the major pieces we’re still working on is how modes and themes work within their spec. While we could launch our version now, we prefer to wait for a unified industry consensus to avoid fragmenting the space with conflicting standards.
-
The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()
I've done a LOT of dark mode work, to the point where I'd consider myself an expert here[1].
I'm not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It's a really a naive approach that hasn't taken into account design at scale, nor the future of where design is heading.
Typically when doing theming, you have two axes - a visual mode axis (i.e. light/dark/high contrast/colorblind modes/etc) and a theme axis (i.e. docs/sheets/slides, each with a different brand color). While this does solve an aspect of the visual mode axis, as soon as you add either a new theme or a visual accessibility mode, you'll be forced to refactor. I see that as codesmell.
I also don't think this helps support a better future of theming support. If we think about the future of theming, what we see today is a convergence of design patterns. Nearly everyone is doing theming at scale in at least roughly the same way (a semantic token layer that points to different primitive colors depending on the theme), and the differences between implementations continues to diminish over time. The convergence of patterns is a good thing - it means more code can be shared.
If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light/dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming/branding.
[1] Most recently leading Figma's dark mode stream, and currently leading their variables feature work to enable others to easily do light/dark/etc. I've consulted with 50+ enterprise tier companies on their theming. Also contributed to the W3C design token proposal for theme/mode support: https://github.com/design-tokens/community-group/issues/210. Previously worked on Jira's dark mode + a few other projects.
-
My variables wishlist
I had to do some reading on the actual W3 spec here, and I think I see what you're saying about compatibility with the rest of the ecosystem. Assigning a component or instance as a variable would probably be something like using an entire function as a token, which isn't one of the supported types. (Neither is Boolean though, which Figma does support, but maybe behind the scenes that's just a numeric 0 or 1?)
-
Does anyone else find variables overwhelming?
One item to call out though is the W3C draft support. Unfortunately we need to wait until they add a way to handle theming for tokens before we can implement it. We're working with them closely on this, and as soon as it's in the spec, we'll support it.
-
Figma Variables!! So excited to finally launch this. AMA about our future of token support.
Discussion on github for it is here: https://github.com/design-tokens/community-group/issues/210
-
Figma to create design tokens to be utilized by the FE
Hello! I don't have experience creating the tokens in Figma specifically, but there are some general best practices (erhm, let's call them suggestions, a design token standard is on its way!) you'll want to keep in mind.
-
How do you keep your styling consistent?
This looks really good /u/MediocreAdeptness38! I think you have discovered design tokens here. There's a ton of exploration being done in this space, and many people are arriving at conclusions similar to yours. There isn't a standard (yet!), but there are a ton of best practices that go into architecting your design tokens.
csswg-drafts
-
Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout – WebKit
For more background, and some detailed discussion of the opposite argument ("display: masonry" over "display:grid"+"grid-template-rows: masonry") see https://github.com/w3c/csswg-drafts/issues/9041
-
Chrome Dev: High Definition CSS Color Guide
The tracking issue: https://github.com/w3c/csswg-drafts/issues/8659
As noted there, okHSL/HSV keeps the perceptual uniformity by removing some peaks beyond the geometric limit of HSL/HSV, and it is unclear whether it is what users do expect or not.
-
Announcing Winduum 1.0 - Framework agnostic component library for TailwindCSS
The idea is that you should be able to set accent color via accent-color CSS property. It is discussed that there should be access to the color value of this property, e.g. via AccentColor or AccentColorText.
-
Learn CSS Layout the Pedantic Way
What do you mean by "official documentation"? The specification [1]? MDN [2]?
[1] https://drafts.csswg.org/
[2] https://developer.mozilla.org/en-US/docs/Web/CSS
The former is not meant as a learning resource for new web devs and the latter usually has information about the "baseline" support ond browser compatibility tables.
-
CSS WG resolved to officially work on native custom functions and mixins
The link corresponding to the actual submission title (“CSS WG resolved to officially work on native custom functions and mixins”):
https://github.com/w3c/csswg-drafts/issues/9350#issuecomment...
> RESOLVED: Start ED of css-mixins for CSS Custom Functions and Mixins
-
Weird things engineers believe about Web development
Recently I was reading the Learn CSS the pedantic way book and the definition for inline boxes did not match the way that anonymous block boxes were generated when an inline-level element had a block-level element as its child. So I went looking elsewhere for a more appropriate definition for that case and found this issue on standards: https://github.com/w3c/csswg-drafts/issues/1477 It was really interesting to know that I was not the only one confused. My question was: Does the inline-box generated by the inline-level element contains the box generated by the block-level child or there wasn't an inline-box that was a parent of them all but there were 2 siblings inline-level boxes of the block-level box that were wrapped in another anonymous block boxes? Reading that issue I got to know the concept of fragments, which I did not know browsers had. But the issue seems to suggest that the box tree for this case should have the inline-box as being a parent of the block-box. Which led me to another question, in that case, if I apply a border to the parent inline-level element, shouldn't it apply to the overall box that is generated (it does not)? The answer is that borders between block-boxes and inline-level boxes should not intersect but that is really difficult to derive from reading the standards alone. Anyway it was headache-inducing trying to learn the box-model pedantically :)
-
CSS Is Fun Again
With all the recent CSS improvements I still miss the possibility to have working transition to "height:auto". The issue [1] on csswg-drafts is the most upvoted one. At least we can now use css grid and track sizes transitions, but it's far from intuitive, transition for "height:auto" should just work.
[1]: https://github.com/w3c/csswg-drafts/issues/626
- Proposed "au" unit for CSS provides for styling on an astronomical scale
-
The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()
Masonry isn’t ready to be shipped as there are still quite a few open spec issues [^1] that need to be resolved first.
[^1]: https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+is%3...
-
CSS Solves Auto-Expanding Textareas
the irc log is here: https://github.com/w3c/csswg-drafts/issues/7542#issuecomment...
i had the same reaction, it seems like a very weird syntax. but after reading the discussion i get it: you're telling a form field to behave like a normal html element, instead of behaving like a form field.
What are some alternatives?
style-dictionary - A build system for creating cross-platform styles.
Modernizr - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Awesome-Design-Tokens - A list of resources on all things to do with Design Tokens
open-props - CSS custom properties to help accelerate adaptive and consistent design.
fluentui-blazor - Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
WHATWG HTML Standard - HTML Standard
bootstrap-ui-components - Bootstrap UI Components - Free Core Version of Ayro UI, A Bootstrap HTML UI Library, with Beautiful & Essential UI Components and Minimal Design System.
Rotativa - Rotativa, /rota'tiva/. Make Pdf from Asp.Net MVC. Available on Nuget https://www.nuget.org/packages/Rotativa
uikit - 🛠 Component code and tests for the Australian Government design system
rellax - Lightweight, vanilla javascript parallax library
coolcss - The last CSS framework I'll (hopefully) ever have to make
container-query-polyfill - A polyfill for CSS Container Queries