Why not using a UI framework

[ranaharoni]

Why don't we adopt a good framework like Semantic UI?

This change would address #28, #49 and #73, which I wasn't able to reproduce but it's a CSS thing so, yeah… 💯

It has pretty much all we need in terms of components:

• https://react.semantic-ui.com/addons/responsive/
• https://react.semantic-ui.com/addons/portal/
• https://react.semantic-ui.com/elements/button/
• https://react.semantic-ui.com/elements/input/
• https://react.semantic-ui.com/modules/sidebar/
• https://react.semantic-ui.com/elements/loader/
• https://react.semantic-ui.com/modules/transition/
• https://react.semantic-ui.com/elements/segment/
• and more.

Another option is to go with something like bootstrap, but either way, using an entire framework is a good idea in terms of UI consistency.

Both CSS frameworks can be made smaller by not including CSS rules of unused components.

	Semantic UI	Bootstrap 4
Framework size	91.8 KB	22.5 KB
Properly documented	✅	✅
Preprocessor	Less	Sass
Theming	✅	✅
React implementation	✅	⚠️ unofficial package
Includes Icons	✅	❌

[pietrop]

Thanks for this breakdown @ranaharoni, very useful, haven't used semantic-ui myself before, but have used bootstrap. Will take a bit of time to properly checkout semantic-ui.

[pietrop]

Another option is also to use bootstrap via react-bootstrap - which is mentioned in create-react-app docs

[ranaharoni]

@pietrop, react-bootstrap seems to be a very good option.

[pietrop]

Thanks @ranaharoni, I just started playing around with it for another project, and seems pretty good, so far, much better then reactstrap, which I had used before.

Pros of react-bootstrap noticed so far:

• no JQuery, interaction has been re-written in Js
• I think once you added the CSS, you can import the react component in isolation, as and when you need them, limiting the footprint eg import Button from 'react-bootstrap/Button';
• flexible to use any other Bootstrap CSS eg from bootswatch or one could make their own by overriding main bootstrap/bootswatch classes.
• easy to make fixed footer and header components

[pietrop]

Thanks @ranaharoni I think at the moment we are not looking to introduce a UI framework as we got this far without. And mostly looking to reorganise and consolidate the component (eg #122). So will close it for now, but keeping it mind for future projects, and could be revisited at a later stage.