7 ms·

Elemental UI for React.js

148 points by jamesknelson 11y ago

hmottestad 11y ago
There is a bug in the modal code. It scrolls to top of page when you click the launch modal button. Annoying for the user to have to scroll down. Also visually annoying, personally I got very distracted when it scrolled to the top like that. Not sure if Elemental UI is a competitor to bootstrap. But if you are happy with bootstrap, then the react bootstrap library is fine. And the modal is very concise and fluid. https://react-bootstrap.github.io/components.html https://react-bootstrap.github.io/components.html
- andy_ppp 11y ago
  I am using react-bootstrap but I wish I hadn't - it's quite large (113kb minified, without including anything from bootstrap itself) and doesn't do very much above and beyond using standard bootstrap classes and standard HTML tags. It also means you'll probably end up having to include jquery for things which adds another very large amount of code... I'm pretty happy with bootstrap as a quick good looking (with a theme) win, but I think one day I'd like to get rid of it and write some simpler problem specific CSS and use React proper for any Javascript interactions.
  - funkiee 11y ago
    I haven't had to pull in jQuery for other things with usage of react-bootstrap, as react-bootstrap handles all of the interactions that bootstrap provides. Also, if file size is getting you down, and you don't need all of react-bootstrap, you can simply require the individual components you need. e.g: require('react-bootstrap/lib/Modal')
- jed_watson 11y ago
  Elemental UI is a competitor, sort of, I guess. But it's not a zero-sum game, and we've learned (and borrowed) a lot from Bootstrap. More specifically, we're not porting Bootstrap to React but building React-specific components from scratch to fill the same gaps. Something in particular we're focusing on is building a modular IU toolkit - so you could use all of Elemental, or just our select component / buttons / date picker / etc; all of which would be available as standalone packages on npm, but can leverage a consistent thumbing system and play nicely together. (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well)
  - Exuma 11y ago
    (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well) Can I ask what you mean by this? I'm just getting into react and that sentence is a pretty big red flag..... you mean you cant just do return false and it breaks react?
    - jed_watson 11y ago
      I phrased it badly - I meant the modal scroll handling that was implemented hasn't worked out well, no red flags for React here. position: fixed is a more robust way of positioning modals, the current version watches the scroll event and updates the modal's position which is pretty janky; and it does some not-great things manipulating overflow on the body too, which causes the bug mentioned. We'll be fixing that in the next release.
      - Exuma 11y ago
        gotcha, thanks!
  - pacnw 11y ago
    So if Elemental is a competitor to Bootstrap, would you be able to point out some reasons to use this rather than React Bootstrap? It appears the elements are almost identical to Bootstrap, but with far less number of them so far. Semantic UI is a competitor as well, but that library has a number of styling options and UI features that Bootstrap does not have. Semantic doesn't seem to have a complete port to React yet, particularly with some of the more advanced controls (sidebar, sticky elements, certain modals, etc.)
  - mst 11y ago
    Not intended as a loaded question: How come you're building a full form system yourself rather than leaning on formsy or similar?
vbsteven 11y ago
There's something wrong with the routing on that page. Whenever I open a link in a new tab it redirects to the home page. The same behavior when I type http://elemental-ui.com/css http://elemental-ui.com/css in my address bar and hit enter, it opens the homepage. Only clicking a link on the homepage gets me to the css page.
- jed_watson 11y ago
  Thanks for pointing that out - webre using react-router and it works locally, not sure why hosting on github pages breaks it. Will check it out.
  - mikewhy 11y ago
    If you're using the HistoryLocation in react-router then it expects a server with routes that renders the same index.html page, which github pages definitely doesn't do
danr4 11y ago
Cool. It says it uses Bootstrap grid, Does that mean that bootstrap is integrated? Hard to tell from the package metadata. Note that this is from the creators of KeystoneJS [1] and TouchstoneJS [2]. [1] https://github.com/keystonejs/keystone https://github.com/keystonejs/keystone [2] https://github.com/touchstonejs/touchstonejs https://github.com/touchstonejs/touchstonejs
- jed_watson 11y ago
  It means we've borrowed the css directly from Bootstrap for the grid (as well as some variables and mixins) so, aside from giving credit, if you are familiar with the bootstrap grid it should be easy to get up and running with Elemental. We're actually developing it first and foremost for use in Keystone's Admin UI - we needed a robust and flexible css + component library for that, which users could extend & build plugins on, so we started building one.
j42 11y ago
Looks like a wonderful React-based alternative to the likes of Semantic UI, and a great start! A couple quick questions: 1. I see a lot of "inspired by bootstrap" comments in the grid/scaffold... just wondering, are you porting their grid system in a reproducible way -- or are you finding these components don't change frequently enough that it's easier to just pull in pieces of the base code manually, as needed? As per the commenter below, there doesn't seem to be any indication of a dependency in your `package.json` 2. Bootstrap 4 is finally moving to SCSS... any plans to follow suit?
- liamzebedee 11y ago
  Hmmmmmm. Semantic UI is honestly an amazing and under-looked alternative to Bootstrap/Foundation and the likes -- definitely more focussed on building web apps than just pretty web sites. It's good to see something similar coming together for React -- the controls are well worth it.
  - brento 11y ago
    Are there examples for using Semantic UI for a basic CRUD workflow?
- jed_watson 11y ago
  Thanks! We're porting their grid system manually at the moment, the foundations don't really change much and we're quite selective about what's being ported. We're actually experimenting with deprecating access to classes (i.e exposing components rather than class names as the public API) - will be interesting to see how popular that approach is. 2. LESS has been our favourite pre-processor for a white but we're finding it doesn't play well with packaging modular components on npm. Some real limitations around the @import logic, and the core team refuse to make it to work with node-style require path resolution which is disappointing. From here I think it's more likely we go with the "styles in components" approach (via Radium or similar) and make variables / themeing available via context. Much easier to package & use "out of the box". Might keep a "base" css include though, or possibly use the Bootstrap 4 "Reboot". The distinction between, and best way to package, component styles and page styles is something we're putting a lot of thought into!
estefan 11y ago
This looks cool. I'm kicking my heels while I wait for react-bootstrap to be compatible with react 0.14-beta3. But I see this isn't compatible with 0.14-beta3 either... :-( What's the weight of elemental UI once it's minified?
philliphaydon 11y ago
Is this component based. Where I could pick the modal without all the forms. Or form elements without all the grid system. I'm dying for a pick what you need framework rather than all or nothing like everything else out there.
- amelius 11y ago
  Hint: you are looking for something that isn't called a "framework".
- jed_watson 11y ago
  Not sure if you saw my other comment below but this is a major goal for us with Elemental. We're not there today, because we're working through the best way to componentize the CSS for each module while retaining a common base for variables & customisation (i.e themes). The most likely outcome will be to go with the "css in components" approach (w/ Radium, I expect) and maybe a base / "foundational" optional stylesheet for typography / etc. Still working it out though - all today's viable approaches have lots of pros and cons.
  - scoot 11y ago
    You might like to look at how reapp [1] has achieved this. It has default styles baked into each component, allows granular overriding of styles at a component level, as well as global theme support. [1] http://reapp.io http://reapp.io / https://github.com/reapp/reapp-ui https://github.com/reapp/reapp-ui
  - philliphaydon 11y ago
    Sounds good. I don't mind having to have some base or foundation file as long as the components can be picked. I'm working on a project at the moment where I just want form elements :( but doing them myself because everything else is all of nothing.
conradfr 11y ago
Not to criticize this project specifically but having done some Angular & React apps I wish these libraries would allow some kind of bridge for JS and jQuery plugins. Do you need incomplete or lagging Bootstrap port for each new framework of the day ? Especially when you're not doing a SPA and integrates in an existing website, it leads to duplication. For example I've used Angular-UI and have encapsulate real Bootstrap components in directives and the advantage of the former was not that obvious because it leads to new and different bugs, incomplete features etc.
- mikewhy 11y ago
  Have you used React with jQuery plugins? Because you don't really need a bridge
- ryanSrich 11y ago
  Out of curiosity, what is Bootstrap helping you with? I'm trying to understand why you'd need bootstrap and jQuery when you're using Angular. I use Angular daily and have never felt the urge to use Bootstrap. In fact an older Angular project had been using bootstrap and I was able to completely eliminate it from the project.
  - virmundi 11y ago
    Did angularjs provide a device targeting feature for you? That's all I've used bootstrap for.
  - 91bananas 11y ago
    Are you saying Angular and Bootstrap provide you the same things? I do not see in what world those two are synonymous, one is basically a glorified ui kit with some limited js backed widgets, the other is a framework for building applications.
    - ryanSrich 11y ago
      No. Not at all. Let me explain. I see two groups of bootstrap users: 1. Those that use the framework for JavaScript tooling. Things like dropdowns, hamburger menus, tooltips, etc. They typically don't use any of the prepackaged bootstrap styling. This was me for a long time. 2. Those that use the framework for both aesthetic specific CSS and JavaScript. Angular helps Group 1 rid themselves of bootstrap. Group 2 is largely helpless.
everdimension 11y ago
Does everyone think that wrapping almost each and every html element into a react component is a good thing? Why do I need a <Button /> element if I already have a <button></button> element? You're not really saving bytes here as much as creating confusion and new stuff to learn. Take, for example, the <FormField label="Input name" htmlFor="input-name" /> component. It takes two props which have totally different meaning. htmlFor is react's substitute for the native html "for" attribute, but the label is being created as an html element. So I have to learn this new mixed up syntax. Why? Existing html syntax is nice already and what everyone's used to. On the other side, such elements as <Spinner /> are nice to have. We don't have any native html spinner elements, so it's a good unifying wrapper for arbitrary spinner html+css magic, which can be easily changed once someone on the project wishes to change how the spinners look.
- the_gipsy 11y ago
  You will most likely attach an event listener to the button. You could just use `element.addEventListener`, but that's not consistent if you use React for other form elements. Next, you might want to dynamically change the button's text, color, visibility etc. At that point, if you are using pure DOM API, the code will start to look like spaghetti, unless what you're doing is a really simple one-off form page.
  - everdimension 11y ago
    I'm not sure I understand your answer. The event listener is added via react's 'onClick' attribute which is consistent across all elements. Things like button's text, color, visibility is nicely controlled via adding/removing classes. And this <Button /> element can create enough spaghetti of its own, too, with attributes like "size", "type", etc, if overused. And with some attributes it can be hard to distinguish native html attributes from component-specific attributes.
    - chillacy 11y ago
      > Things like button's text, color, visibility is nicely controlled via adding/removing classes Isn't the whole point of using React that I don't have to manually manage state like this? When text, color, visibility are all changed independently in different places for more than a handful of states, suddenly it isn't so nicely controlled.
luisrudge 11y ago
There's another UI kit for React called Belle, I posted here: https://news.ycombinator.com/item?id=10110956 https://news.ycombinator.com/item?id=10110956

148 points by jamesknelson 11y ago

There is a bug in the modal code. It scrolls to top of page when you click the launch modal button. Annoying for the user to have to scroll down. Also visually annoying, personally I got very distracted when it scrolled to the top like that. Not sure if Elemental UI is a competitor to bootstrap. But if you are happy with bootstrap, then the react bootstrap library is fine. And the modal is very concise and fluid. https://react-bootstrap.github.io/components.html https://react-bootstrap.github.io/components.html

andy_ppp 11y ago
I am using react-bootstrap but I wish I hadn't - it's quite large (113kb minified, without including anything from bootstrap itself) and doesn't do very much above and beyond using standard bootstrap classes and standard HTML tags. It also means you'll probably end up having to include jquery for things which adds another very large amount of code... I'm pretty happy with bootstrap as a quick good looking (with a theme) win, but I think one day I'd like to get rid of it and write some simpler problem specific CSS and use React proper for any Javascript interactions.
- funkiee 11y ago
  I haven't had to pull in jQuery for other things with usage of react-bootstrap, as react-bootstrap handles all of the interactions that bootstrap provides. Also, if file size is getting you down, and you don't need all of react-bootstrap, you can simply require the individual components you need. e.g: require('react-bootstrap/lib/Modal')
jed_watson 11y ago
Elemental UI is a competitor, sort of, I guess. But it's not a zero-sum game, and we've learned (and borrowed) a lot from Bootstrap. More specifically, we're not porting Bootstrap to React but building React-specific components from scratch to fill the same gaps. Something in particular we're focusing on is building a modular IU toolkit - so you could use all of Elemental, or just our select component / buttons / date picker / etc; all of which would be available as standalone packages on npm, but can leverage a consistent thumbing system and play nicely together. (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well)
- Exuma 11y ago
  (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well) Can I ask what you mean by this? I'm just getting into react and that sentence is a pretty big red flag..... you mean you cant just do return false and it breaks react?
  - jed_watson 11y ago
    I phrased it badly - I meant the modal scroll handling that was implemented hasn't worked out well, no red flags for React here. position: fixed is a more robust way of positioning modals, the current version watches the scroll event and updates the modal's position which is pretty janky; and it does some not-great things manipulating overflow on the body too, which causes the bug mentioned. We'll be fixing that in the next release.
    - Exuma 11y ago
      gotcha, thanks!
- pacnw 11y ago
  So if Elemental is a competitor to Bootstrap, would you be able to point out some reasons to use this rather than React Bootstrap? It appears the elements are almost identical to Bootstrap, but with far less number of them so far. Semantic UI is a competitor as well, but that library has a number of styling options and UI features that Bootstrap does not have. Semantic doesn't seem to have a complete port to React yet, particularly with some of the more advanced controls (sidebar, sticky elements, certain modals, etc.)
- mst 11y ago
  Not intended as a loaded question: How come you're building a full form system yourself rather than leaning on formsy or similar?

vbsteven 11y ago

There's something wrong with the routing on that page. Whenever I open a link in a new tab it redirects to the home page. The same behavior when I type http://elemental-ui.com/css http://elemental-ui.com/css in my address bar and hit enter, it opens the homepage. Only clicking a link on the homepage gets me to the css page.

jed_watson 11y ago
Thanks for pointing that out - webre using react-router and it works locally, not sure why hosting on github pages breaks it. Will check it out.
- mikewhy 11y ago
  If you're using the HistoryLocation in react-router then it expects a server with routes that renders the same index.html page, which github pages definitely doesn't do

danr4 11y ago

Cool. It says it uses Bootstrap grid, Does that mean that bootstrap is integrated? Hard to tell from the package metadata. Note that this is from the creators of KeystoneJS [1] and TouchstoneJS [2]. [1] https://github.com/keystonejs/keystone https://github.com/keystonejs/keystone [2] https://github.com/touchstonejs/touchstonejs https://github.com/touchstonejs/touchstonejs

jed_watson 11y ago
It means we've borrowed the css directly from Bootstrap for the grid (as well as some variables and mixins) so, aside from giving credit, if you are familiar with the bootstrap grid it should be easy to get up and running with Elemental. We're actually developing it first and foremost for use in Keystone's Admin UI - we needed a robust and flexible css + component library for that, which users could extend & build plugins on, so we started building one.

j42 11y ago

Looks like a wonderful React-based alternative to the likes of Semantic UI, and a great start! A couple quick questions: 1. I see a lot of "inspired by bootstrap" comments in the grid/scaffold... just wondering, are you porting their grid system in a reproducible way -- or are you finding these components don't change frequently enough that it's easier to just pull in pieces of the base code manually, as needed? As per the commenter below, there doesn't seem to be any indication of a dependency in your `package.json` 2. Bootstrap 4 is finally moving to SCSS... any plans to follow suit?

liamzebedee 11y ago
Hmmmmmm. Semantic UI is honestly an amazing and under-looked alternative to Bootstrap/Foundation and the likes -- definitely more focussed on building web apps than just pretty web sites. It's good to see something similar coming together for React -- the controls are well worth it.
- brento 11y ago
  Are there examples for using Semantic UI for a basic CRUD workflow?
jed_watson 11y ago
Thanks! We're porting their grid system manually at the moment, the foundations don't really change much and we're quite selective about what's being ported. We're actually experimenting with deprecating access to classes (i.e exposing components rather than class names as the public API) - will be interesting to see how popular that approach is. 2. LESS has been our favourite pre-processor for a white but we're finding it doesn't play well with packaging modular components on npm. Some real limitations around the @import logic, and the core team refuse to make it to work with node-style require path resolution which is disappointing. From here I think it's more likely we go with the "styles in components" approach (via Radium or similar) and make variables / themeing available via context. Much easier to package & use "out of the box". Might keep a "base" css include though, or possibly use the Bootstrap 4 "Reboot". The distinction between, and best way to package, component styles and page styles is something we're putting a lot of thought into!

estefan 11y ago

This looks cool. I'm kicking my heels while I wait for react-bootstrap to be compatible with react 0.14-beta3. But I see this isn't compatible with 0.14-beta3 either... :-( What's the weight of elemental UI once it's minified?

philliphaydon 11y ago

Is this component based. Where I could pick the modal without all the forms. Or form elements without all the grid system. I'm dying for a pick what you need framework rather than all or nothing like everything else out there.

amelius 11y ago
Hint: you are looking for something that isn't called a "framework".
jed_watson 11y ago
Not sure if you saw my other comment below but this is a major goal for us with Elemental. We're not there today, because we're working through the best way to componentize the CSS for each module while retaining a common base for variables & customisation (i.e themes). The most likely outcome will be to go with the "css in components" approach (w/ Radium, I expect) and maybe a base / "foundational" optional stylesheet for typography / etc. Still working it out though - all today's viable approaches have lots of pros and cons.
- scoot 11y ago
  You might like to look at how reapp [1] has achieved this. It has default styles baked into each component, allows granular overriding of styles at a component level, as well as global theme support. [1] http://reapp.io http://reapp.io / https://github.com/reapp/reapp-ui https://github.com/reapp/reapp-ui
- philliphaydon 11y ago
  Sounds good. I don't mind having to have some base or foundation file as long as the components can be picked. I'm working on a project at the moment where I just want form elements :( but doing them myself because everything else is all of nothing.

conradfr 11y ago

Not to criticize this project specifically but having done some Angular & React apps I wish these libraries would allow some kind of bridge for JS and jQuery plugins. Do you need incomplete or lagging Bootstrap port for each new framework of the day ? Especially when you're not doing a SPA and integrates in an existing website, it leads to duplication. For example I've used Angular-UI and have encapsulate real Bootstrap components in directives and the advantage of the former was not that obvious because it leads to new and different bugs, incomplete features etc.

mikewhy 11y ago
Have you used React with jQuery plugins? Because you don't really need a bridge
ryanSrich 11y ago
Out of curiosity, what is Bootstrap helping you with? I'm trying to understand why you'd need bootstrap and jQuery when you're using Angular. I use Angular daily and have never felt the urge to use Bootstrap. In fact an older Angular project had been using bootstrap and I was able to completely eliminate it from the project.
- virmundi 11y ago
  Did angularjs provide a device targeting feature for you? That's all I've used bootstrap for.
- 91bananas 11y ago
  Are you saying Angular and Bootstrap provide you the same things? I do not see in what world those two are synonymous, one is basically a glorified ui kit with some limited js backed widgets, the other is a framework for building applications.
  - ryanSrich 11y ago
    No. Not at all. Let me explain. I see two groups of bootstrap users: 1. Those that use the framework for JavaScript tooling. Things like dropdowns, hamburger menus, tooltips, etc. They typically don't use any of the prepackaged bootstrap styling. This was me for a long time. 2. Those that use the framework for both aesthetic specific CSS and JavaScript. Angular helps Group 1 rid themselves of bootstrap. Group 2 is largely helpless.

everdimension 11y ago

Does everyone think that wrapping almost each and every html element into a react component is a good thing? Why do I need a <Button /> element if I already have a <button></button> element? You're not really saving bytes here as much as creating confusion and new stuff to learn. Take, for example, the <FormField label="Input name" htmlFor="input-name" /> component. It takes two props which have totally different meaning. htmlFor is react's substitute for the native html "for" attribute, but the label is being created as an html element. So I have to learn this new mixed up syntax. Why? Existing html syntax is nice already and what everyone's used to. On the other side, such elements as <Spinner /> are nice to have. We don't have any native html spinner elements, so it's a good unifying wrapper for arbitrary spinner html+css magic, which can be easily changed once someone on the project wishes to change how the spinners look.

the_gipsy 11y ago
You will most likely attach an event listener to the button. You could just use `element.addEventListener`, but that's not consistent if you use React for other form elements. Next, you might want to dynamically change the button's text, color, visibility etc. At that point, if you are using pure DOM API, the code will start to look like spaghetti, unless what you're doing is a really simple one-off form page.
- everdimension 11y ago
  I'm not sure I understand your answer. The event listener is added via react's 'onClick' attribute which is consistent across all elements. Things like button's text, color, visibility is nicely controlled via adding/removing classes. And this <Button /> element can create enough spaghetti of its own, too, with attributes like "size", "type", etc, if overused. And with some attributes it can be hard to distinguish native html attributes from component-specific attributes.
  - chillacy 11y ago
    > Things like button's text, color, visibility is nicely controlled via adding/removing classes Isn't the whole point of using React that I don't have to manually manage state like this? When text, color, visibility are all changed independently in different places for more than a handful of states, suddenly it isn't so nicely controlled.

luisrudge 11y ago

There's another UI kit for React called Belle, I posted here: https://news.ycombinator.com/item?id=10110956 https://news.ycombinator.com/item?id=10110956