Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Antd – A set of high-quality React components

ant.design

Post reply on HN
Print view View original

81–90 of 107 posts

Re: Show HN: Antd – A set of high-quality React components

#81

Post by mlsarecmg »

mxstbr wrote: post #37
secoif wrote: post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

Theming is on of the big reasons we saw the need to make styled-components[0] (new lib to style React apps and component libraries) I'm one of the maintainers of ElementalUI, and Glen Maddern, the styled-components co-creator, one of the creators of CSS Modules. One of the biggest downsides of CSS Modules (and, by extension, every other styles in JavaScript library right now) is that theming is simply impossible. Bui…

It is not a headache to retheme them. It is pretty easy, the easiest i've seen in a UI kit. You have style and classname overrides in place, scoped css classnames and LESS.

If you use a CSS react-lib like React-CSJS, styling this is easy as pie.

Re: Show HN: Antd – A set of high-quality React components

#82

Post by secoif »

sidi wrote: post #53
secoif wrote: post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

I fail to understand this criticism. React Components expose a class hierarchy which can be namespaced well by their designers (if Antd isn't already doing this). Extending / theming with your specific CSS pre-processor is then pretty straightforward.

Doing it this way requires overriding every single built-in rule that uses the property you're trying to override… including states like :hover, :before, :disabled, :disabled and :hover, etc which can be easy to miss.

I've had some success with simple find & replace preprocessor but this gets complicated if the CSS uses colour manipulation functions e.g. color: color(var(--color-base) tint(50%)), then you're basically going to be re-implementing their whole stylesheet again.

Also, good luck making sure everything still works if and when the components are updated.

Ideally, you alter theme variables in one place, rather than finding and overriding them everywhere they're applied.

Re: Show HN: Antd – A set of high-quality React components

#83

Post by victormustar »

kimshibal wrote: post #78
gustix wrote: post #69

Earlier quoted context omitted.

Alibaba is also working on a ReactNative competitor for Vue, called Weex: https://alibaba.github.io/weex/

we are using Weex for our app on production. Weex is pretty solid platform

Hey, can you tell us more? I'm very interested in Weex :) What make it solid ? what are the pros/cons ? Last time I checked I thought I need to know chinese as 95% of issues are in chinese for example. Is it still a prob ?

Re: Show HN: Antd – A set of high-quality React components

#85

Post by WA »

victormustar wrote: post #83
kimshibal wrote: post #78

Earlier quoted context omitted.

we are using Weex for our app on production. Weex is pretty solid platform

Hey, can you tell us more? I'm very interested in Weex :) What make it solid ? what are the pros/cons ? Last time I checked I thought I need to know chinese as 95% of issues are in chinese for example. Is it still a prob ?

Hit the demos for Weex and compare them to Ionic 2. It's still day and night imho, whereas Ionic 2 looks very polished.

Re: Show HN: Antd – A set of high-quality React components

#87

Post by nathan_f77 »

victormustar wrote: post #83
kimshibal wrote: post #78

Earlier quoted context omitted.

we are using Weex for our app on production. Weex is pretty solid platform

Hey, can you tell us more? I'm very interested in Weex :) What make it solid ? what are the pros/cons ? Last time I checked I thought I need to know chinese as 95% of issues are in chinese for example. Is it still a prob ?

> Last time I checked I thought I need to know chinese

Fascinating. This is probably the first time I've seen a huge open source project where a majority of the contributions are in a language that's not English. I've seen plenty of projects from non-native English speakers, but everything was still done in English.

I'm sure there are tons of other big projects in Chinese and other languages, but programming has always been very English-centric. I had heard of programming languages that use other languages or alphabets, but they were all very esoteric.

I've also seen people using foreign languages for class and method names, while all of the framework APIs and programming language keywords were English.

So I guess it's only fair that I should learn some Chinese. Weex does look very good.

I just looked at this issue, for example: https://github.com/alibaba/weex/issues/1746

It's funny how all of the Java variables and keywords, HTML tags, and the CSS is all English (or at least, programming languages based on English words), while the issue details are written in Chinese. It's a really interesting mix.

I wonder if there are transpilers that let people write code in their native language, and then convert everything into English source code. It should be very easy, it's just a search/replace for keywords like "public", "protected", "length", "super", "return", etc. etc.

Re: Show HN: Antd – A set of high-quality React components

#88

Post by philjohn »

benjy_c wrote: post #72
chrismorgan wrote: post #70

This stuff is horrible to use from the keyboard visually, because outlines have been removed without an adequate replacement. Please fix the styles for :focus et al. Make it all obvious, like Microsoft have done in Windows 10 (they have what is pretty much just a 2px solid black outline).

a11y optimization is in progress, but it is not a high priority job.

a11y should be the top priority ... especially if you want to see use in countries where there are penalties for sites not complying with disability discrimination legislation.

Another issue is your DropDown breaks the power user convention of being able to type the first letter (or more) of an item and the dropdown selecting it.

Re: Show HN: Antd – A set of high-quality React components

#89

Post by js8 »

dEnigma wrote: post #76

The site looks pretty bad in a small browser window: http://i.imgur.com/0xVlHbI.png

I concur. I run browser only in half of the wide-screen monitor (makes sense, doesn't it?), and it's surprising how many websites are broken in this configuration.

Re: Show HN: Antd – A set of high-quality React components

#90

Post by fiatjaf »

js8 wrote: post #89
dEnigma wrote: post #76

The site looks pretty bad in a small browser window: http://i.imgur.com/0xVlHbI.png

I concur. I run browser only in half of the wide-screen monitor (makes sense, doesn't it?), and it's surprising how many websites are broken in this configuration.

Not to mention the horrible things that happen when you switch from full-screen to half-screen and vice-versa.
Post reply on HN