Show HN: Smooth UI, a React UI Library for Humans
github.com
github.com
It’s not really clear what this is.
Lack of a giant obvious demo link really annoys me with this sort of thing - “hey look at the code and all these words about our new visual offering”.
Great work!
An example of extend: https://codesandbox.io/s/7k8o4x7lj6
[1] https://react.semantic-ui.com/introduction [2] https://material-ui.com
[1] https://github.com/ant-design/ant-design [2] https://github.com/grommet/grommet
Edit: I think a big point that most non-frontend developers miss about these type of libraries is that they're designed to be extended, not necessarily used out of the box. Even if it looks identical to Bootstrap, the idea is to be able to have a nice base set of UI components that we can extend with SC -- the same way we'd extend our own internal components with SC.
Okay now that I browsed through a little bit of the API it's all right, you don't have to invent everything by yourself if you use this. But I'm still adamant that you'd be better off to maybe rather copy the components to your source than use it as a dependency. Also there's no TypeScript support? After a lot of reluctance I've recently come to appreciate how nice TS makes your life when you avoid most of the silly bugs. Yes, sounds funny for most of people who haven't used dynamic languages but well... live and learn I guess.
About TypeScript, I am sorry, I am not a TypeScript user. TypeScript support would be awesome but I need some help on this!
where's that complexity?
It's like a few lines of CSS and folks in our coding bootcamp can do it after watching a YT video.
That's not an easy thing to do.
This. Unless you make a very generic project (and if you use React for that, probably you are doing something wrong), you bump into limitations of any CSS-framework sooner or later (later is especially painful, since it is impossible to fix without ugly workarounds).
Holy shit there’s a lot of code there. What is it all doing - can anyone summarize?
As far as I can tell it’s main selling point is letting you use pure native CSS in reactjs.
You can do that anyway in ordinary reactjs by writing:
<style>’put your css here’</style>
Put that straight into your react code and you can use any native CSS in ReactJS.
I'm not a huge fan of Styled Components, but it's a way to write properly encapsulated styles for just that moment - You write 'regular CSS' that's scoped to exactly that component, so it can't leak out and affect other parts of your site.
Well actually, I think CSS Modules solved it in the most "perfect" way, but I'm willing to believe that others have problems I haven't experienced before :)
What’s the purpose/benefit of generating classes from CSS versus just using CSS?
Couldn’t I just inject a CSS string into a component and put that string into a style tag?
The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs.
Here’s what the article you linked to says:
“Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!”
All addressed by backticked strings in style tags.
This is especially helpful as your site and team scales - you don't need to worry as much about stepping on other people's toes, nor do you need to be as aware of the entire (styling) scope of your website. When you do share/cascade/compose/extend styles, it makes it a lot more explicit in the way you do it.
It's basically taking a concept like BEM and baking it into the language, reducing the mental overhead.
Are you sure you are correct or are you just guessing?