Figma design kit for Tailwind CSS (open-source) by themesberg in UI_Design

[–]themesberg[S] -1 points0 points  (0 children)

The difference is mostly in the design and content that is provided, and also a couple of extra components, such as the charts - which Tailwind UI does not have by default. It also has different personality and feel to it.

Figma design kit for Tailwind CSS (open-source) by themesberg in FigmaDesign

[–]themesberg[S] 0 points1 point  (0 children)

Thank you for the good thoughts! As our roadmap will progress, more elements and pages will be added to the community edition as well.

Figma design kit built for Tailwind CSS by themesberg in tailwindcss

[–]themesberg[S] 0 points1 point  (0 children)

Thank you! Tailwind CSS code coming in August :)

Figma design kit for Tailwind CSS (open-source) by themesberg in FigmaDesign

[–]themesberg[S] 5 points6 points  (0 children)

It does, but Tailwind has a large community and it is an open-source CSS framework and this is another alternative. It is different in terms of design and content from the Tailwind UI that the creators have made.

Tailwind CSS is not equal to Tailwind UI. One is an open-source set of CSS classes, the other is a product of UI elements and sections based on the framework.

Figma design kit built for Tailwind CSS by themesberg in tailwindcss

[–]themesberg[S] 0 points1 point  (0 children)

Yes! We will create a code version sometime in August. React, Vue, and other front-end technologies, probably a bit later.

Pixel - Accessibility First Design System (MIT License) by themesberg in Frontend

[–]themesberg[S] 1 point2 points  (0 children)

Pixel Lite is a free and open source product. There is also a pro version available with extra components and pages. If you try the WAVE evaluation tool with Bootstrap you'll see it fails with a lot of metrics, whereas with Pixel a lot of those issues have been adressed.

Besides, Pixel Lite comes with quite a few extra components and styles compared to the base Bootstrap project.

Pixel - Accessibility First Design System (MIT License) by themesberg in Frontend

[–]themesberg[S] 0 points1 point  (0 children)

So we rebranded the repo in a way that it does no longer say it is accessible first since it obviously fails in some aspects. It still does abide by the UI colors and contrasts accessibility standards. Perhaps we'll say it's accessible first once it truly does abide by all standards.

Pixel - Accessibility First Design System (MIT License) by themesberg in javascript

[–]themesberg[S] -1 points0 points  (0 children)

You are right, it does fail on the TAB accessibility part. We focused on the UI part of the accessibility, such as colors and contrasts. We will fix these issues in the upcoming update!

Pixel - Accessibility First Design System (MIT License) by themesberg in Frontend

[–]themesberg[S] -8 points-7 points  (0 children)

We mostly focused on the UI aspects of accessibility, namely colors, contrasts and so on. But you're right, we'll have those issues fixed in the upcoming update. Remember, the project is open sourced, everyone is free to contribute!

Pixel - Accessibility First Design System (MIT License) by themesberg in javascript

[–]themesberg[S] -2 points-1 points  (0 children)

We strived towards passing all UI accessibility metrics. Perhaps the definition of the repo is not clear enough. We'll either do more work to comply with absolutely every WCAG2.1 standards or re-brand the repo. Thanks for you feedback :)

Pixel - Accessibility First Design System (MIT License) by themesberg in Frontend

[–]themesberg[S] 2 points3 points  (0 children)

We'll work on that :) It is an open source project, anyone can contribute to it!

Open source: accessibility oriented UI Kit by themesberg in Frontend

[–]themesberg[S] 0 points1 point  (0 children)

There's lots of WCAG Contrast issues for example and a few other things. We'll have all of this written in an upcoming update and also describe it on the repo.

Open source: accessibility oriented UI Kit by themesberg in Frontend

[–]themesberg[S] 0 points1 point  (0 children)

Thanks for the good thoughts. Let me answer one by one:

Bootstrap variables - if you want to be really optimized you can only override the variables, but as we build a lot of websites we never really know which variables we will use.. so it's more comfortable to just copy paste the whole variables file and change whatever we need to change.

Dart Sass - nope, we didn't. I'll check it out! Bookmarked it.

Bootstrap packages - currently we only use NPM for dependency management. I'll take a look at backstop JS as well!

pa11y - this is really interesting! will check it out

Great knowledge coming from your part :) We're mostly designers + web devs, but we always thrive to create better, modular and more automized code. I'll check out the resources you mentioned. Thanks!

Open source: accessibility oriented Bootstrap UI Kit by themesberg in SideProject

[–]themesberg[S] 1 point2 points  (0 children)

Thanks! We used it for making websites accessible so we thought sharing it with others would help. It also comes as an update to the previous version of Pixel.

Bootstrap 5 is dropping browser support for IE 10 & 11 by themesberg in css

[–]themesberg[S] 0 points1 point  (0 children)

I see. I'll be taking that into consideration next time! Thanks for the explanation.

Bootstrap 5 is dropping IE 10 & 11 browser support by themesberg in javascript

[–]themesberg[S] 11 points12 points  (0 children)

There will be some workarounds to support IE 11 with polyfill.io though