We use Ant Design, but I've been regretting the decision because many of the components haven't been built with keyboard navigation (and from the looks of things, other accessibility features) in mind. It's a shame because the default appearance is very attractive.
We already improve accessibility and keyboard support of some components in 4.0: Select/TreeSelect/DatePicker/TimePicker, and we will improve it consistently.
Does anyone have keyboard shortcut fatigue? I am overwhelmed by these things.
Knowing and remembering shortcuts for every webapp you visit is impossible for anyone one person. Photoshop has its own shortcuts, so does Sublime Text. Open VSCode...oh yeah, you can map Sublime Text keymap but it has its own as well! Then you're SSH into a machine and you have to use vim.
Keyboard shortcuts across apps needs to be standardized in some kind of an ISO standard. It is only creating noise. I don't want to remember Pintrest shortcuts or Twitter keyboard map. Ok, its good to have them I guess if someone needs to learn it and its not necessary to use the app - so that's good. I just think that some of these shortcuts are all over the place.
I am pretty sure the complaint above was about keyboard navigation, i.e. the possibility to navigate a page and its components with the tab, enter, space and arrow keys.
I work on Elastic's UI[1][2], which is Apache 2 licensed. We look a little different than Ant, and are more tailored to data projects and content creation since we use it for Kibana. That means we have lots of tables, autocompleters, sliders, data grids, and specialized form controls.
All of our components are built for keyboard / screenreader support and accessibility was one of our primary goals since the beginning. We take it serious and it's baked into our review process. It's fairly mature and is now two and a half years old with a solid team working on it full time. At the very least you might find some ideas for your projects. It's also TypeScript-backed and themable through a Sass layer with native dark mode support.
We welcome contributions and if there's any students out there thinking about hacking on a component library for summer of code you can find some projects over here[3].
Other projects out there similar to ours that are pretty mature are Microsoft's Fabric[4] and Atalassian's Atlas Kit[5]. Both of which are open source as well. Generally we tend to have more features, and they might be a little easier to theme or modularize. Chakra UI[6] is a new comer that is smaller, but people seem to like as well. There are a lot of options these days and most of them are tailored towards a certain use case, since it's hard to target everything.
I research this stuff a lot so if anyone has any questions about component libs give a yell.
Most of the "good" component libraries are what i'd consider to be open source for PR purposes, e.g. Atlassian's Atlaskit. You wouldn't use them unless you really want your UI to look like another company's.
I'm intrigued by Tailwind UI though, it looks like it might be the right balance between feature set and brand agnosticism.
I actually am in the process of removing antd (previous version) from my website and am not planning to upgrade to 4.0. The reason being is because you still run into the same issues as using any framework -- customizing it ends up overriding a lot of the base styles and implementations (line heights, grid, etc). Thankfully I saw this coming so a lot of the components in my app (React) are labeled as `Wrapped<ant component name>`, which I quite literally just wrap the component and add any additional props/styling that I'd like.
I'm loving Uber's Base Web for React. It has accessibility built-in. It is themeable and highly customizable due to its "overrides" feature. The project is highly active with frequent releases.
I had to make a choice on UI framework several months back and Semantic UI looked nice, but wasn't as comprehensive as Ant. Do you use some sort of add-on to fill in the rest or do you just roll your own components in that case? E.g., I was looking for a tree component and couldn't find with Semantic UI.
Having used Material UI and Ant Design for React projects recently, I found the documentation in Ant to be less clear and also didn't love the use of Less for customization of the stylesheets (vs MUI's makeStyles / css-in-js approach).
When it comes down to a UI framework docs & styling options are my main criteria, I still haven't had a play around with Semantic UI or Tailwind yet, and haven't found the 'framework to rule them all'.
Perhaps a noob-ish question, but will this make Ant work with pure html sites? I.e no react/vue/angular. Right now it seems it just works with the frameworks.
I've tried Semantic, MUI, and Ant now for 3 separate projects.
The one I gravitate towards now is MUI - it's got the easiest drop in to an existing project, and the most predictability.
Semantic seems to be stuck in a weird place where the main project is barely maintained and a fork (Formantic) is superior, but there's no React version for the fork so you have to make your own React components if you want their new features.
I liked Ant but the integration into existing apps took far more effort than I would've liked. In the end with Ant I gave up and made a fresh project and shifted my existing codebase across.
The only thing I wish MUI had that Semantic was superior in was forms - Semantic has a far better built-in form component, including error/warning/success & loading states out of the box.
I am more into Material UI too (I am even maintaining bindings for a language that transpiles to javascript), but Ant Design's dark theme almost got me, it's really nice
The biggest improvement in my opinion is the high performance form framework, although high performance is a stretch as the last one was just so poorly designed/integrated. No more unecessary updates and no more Form.create wrappers.
Agreed. Forms have been a pain in ant up until now. I'm looking forward to upgrading as the new API seems more sensible. I haven't had many experiences with the table rendering though, as I've been using ag-grid for my data tables which has been an awesome experience.
The more I look at modern UI frameworks, I more I cringe at stuff like this. No explanation about logic behind something... relentless chasing of minimalism, almost religious hate for borders, unconditional love for excessive whitespace and obsession with animations(often with defaults that are 300ms!!!!)
First the tables were gone (somewhat a good thing because they were used for layout), then the Web 2.0 (2005) came along and created the modern UI for web browsers. That's when everything went downhill.
Unnecessary borders create visual complexity that increases the load on perception, which reduces cognition. It's not a fad thing. It's usually covered by visual communications curriculums with regard to Gestalt principles, and is well researched by cognitive sciences.
Can you provide sources? I’m curious. Borders are everywhere from lane marks on the roads to art frames. I tried searching for sources on Google with no luck.
> Unnecessary borders create visual complexity that increases the load on perception, which reduces cognition
That's difficult to believe in if you remove the word "unnecessary". Logical grouping of similar components in a UI using a border can only help group them. The framework for grid-based design was laid out by Josef Muller-Brockmann and heavily influenced the swiss/intl design language.
You now need to define what constitutes "unnecessary" :) otherwise its talking past each other.
I'm not saying that borders are always wrong, but you are using a horrible example as an argument in favor of borders.
There are no borders in any of the examples in Josef Müller-Brockmann's Grid Systems except for in the pictographic signs used by the the Swiss Federal Railwaws, but they are not part of a grid.
Well, there are also borders, or rather literal guidelines, in all the sketches visualizing the grid, but they are of course only there as a tool. In all the grid layout examples the grid is implicit. All of them.
HN is brutalist, meaning raw, unvarnished. There's no excessive whitespace and no animations. It's minimal in the correct sense: as simple as possible, but no more.
The problem with many sites is that they're actually quite complex behind a façade of simplicity. Which means lots of wasted space, unnecessary clicks, and not finding what you're looking for.
I think HN is just "undesigned" to be honest. I mean, look at the stylesheet - aside from some declarations to use Verdana, a few minimal concessions towards a mobile layout, and a bit of fiddling about with the voting arrows, there's hardly anything there.
I'm sure at this point the minimalism of HN probably is a conscious choice (as in, they have consciously chosen not to do anything to the design for however many years, despite, I'm sure, countless offers from aspiring designers), but how it originally came out was surely as a result of the people involved not wanting to put any energy into designing it or writing CSS.
Interesting observations regarding the "raw" aspects of HN. I definitely see that too and I would refer to it as "Brutalist" in the true sense of the word, but these days Brutalism in digital design refers to various experimental projects [1]; I would consider these works to be leaning towards fine arts than calling them "unadorned".
I disagree, HN is everything opposite of what was originally described. I can go look at youtube & come back to this site and see similarities with the design choice.
An interesting framework that I saw here on HN a couple of days ago is Tailwind UI (https://tailwindui.com/). It's not out just yet but looks very promising.
Other than that I would recommend Bulma (https://bulma.io/). It's like bootstrap but with a different philosophy on how CSS should be implemented.
Also, it doesn't include any javascript. I think that was a good decision on their part as you won't have to fight the default behaviors on their components if you want to do something slightly different.
This is incorrect advice. Tailwind is a utility CSS framework, and Tailwind UI is literally a collection of prewritten HTML for you to use and edit, that uses Tailwind classes.
> Tailwind UI is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects.
I don't know how fast they will sync with 4.0 though.
I tried to use it in svelte, only loading the css/less from the react project, but with a svelte component. It works quite easily. The problem is that I would have to reimplement all components.
Saying that, I'm wondering why there is not a separated project for style and other for implementation.
I have used and like Ant Design for its completeness. I also have done some small projects with Prime React ( https://www.primefaces.org/primereact/ ) and liked it. Prime also has bindings for other frameworks, so it might be good for people who don't (just) use React.
After using Ant Design, Vuetify (Material UI) and some bootstrap templates - Ant Design is definitely one of the favorites and would use it in other projects. Even though sometimes there are some weird bugs, it's good to mix frameworks a bit and not use the same one for all your projects to keep life interesting!
As much as I love Ant design for the aesthetics, I find the performance to be seriously lacking. In my last job, our front-end team used Ant Vue, and some form elements were horrifyingly slow. For example, we loaded 200+ school names into a multi-select box, and the whole page became unresponsive if that box was ever opened. Hope they fix these issues in the future.
I really enjoy having everything in one library, and being able to customize the look in less. The new interval mode for the date picker looks great. It would be great if ant design came in web components flavour, so users of vue and other frameworks can use this too.
There are some wrappers around bootstrap for React, but I don't think people use them much any more. There's a lot of better choices. Bootstrap is kind of in the same vein as jQuery. Great stuff for it's time, but times have moved on.
