After clicking on the Set tag/status on left, I want to open a card like this on the right.
What is the good solution for it in React? Regular CSS or material ui or react-bootstrap will be fine.
it is a nice question but depends on how much time you have and how much determinate you are.
Showing some solutions related about you asked.
Regular CSS
You will need to use Javascript to support you on the hide/show logic using CSS and JS tricks and proprieties.
It is more complicated because there is no pattern until you create yours or use someone's but on the other hand you can practice more Vanilla JS and improve your CSS skills.
Material UI
It is a good option if you want to use robust components to support you with customization and style patterns.
It has a learning scale to make the usage easier but after that it has a good flow to use its components and customize them.
Some tips if you choose Material UI, use its theme override to put your own theme into all Material UI stuff using the lib styled-components and try not to customize all components using only CSS, use props following the docs, it will be scalable.
react-bootstrap
If you are used to use bootstrap with HTML, CSS and JS I do recomend to use it because it will be faster to you to build it, but if not I recommend you to go with Material UI.
But why Material UI and not react-bootstrap, because if you have never worked with anyone so learning about Material UI using React you be more advantageous considering that its components are good to use and on almost every case them solve the problem.
Final
These are what I think about those options you gave.
I really like Material UI and what they build, the components are so easy to understand and customize using those props or classes. The lib has some integrations and tools to help on style guide creation using override patterns.
If you have never tried it, I recommend you to do that and use that.
Related
I am currently using Stencil to create a library of web-components. Since it is standard nowadays to support a dark theme I want my web-components to have this build in.
After doing some research I found that :host-context would be a great way to make all components change theme by simply adding a class to the body, but it looks like this feature will never be fully supported.
All of the other ways I found to achieve this, using features such as ::part(), require a significant amount of work from the library's user which I want to avoid.
If anyone has an idea of how to achieve simple theme toggling for web-components please let me know!
Helo, I am new to reactJS. I am currently doing a full stack job on a forum-like website.
I was naively wondering if there is no way to just ignore the CSS step...
For example, I want to declare a standard component, let's say a button or a form. I just want to simply set the className so the it matches with the CSS stuff.
I did some search, and found nothing very convenient.
And of course, this "library" has to be open-source.
Don't know if I am clear.
Thank you.
Hi from the looks of it and the comments, it looks like you want a pre-built UI library. Basically, for React these are called UI Libraries, we have React-Bootstrap, Material UI and Kendo UI as UI libraries. They have pre-made React components with all the styling already implemented and any customization can be done separately.
You can have a look at React-Bootstrap for an easy solution to your problem.
I'm building a web application using ReactJS.
I would like to know if it's a good idea to combine React and Bootstrap or if it's completely useless? Are there things I can do with one and I can't do with the others?
I know that Bootstrap is a Framework and React is a library but I'd like to know what's the difference between the two, since I read some articles explaining the difference between a library and a framework and couldn't really understand!
I would recommend going through this tutorial:
https://ourcodeworld.com/articles/read/561/how-to-use-components-of-bootstrap-4-in-reactjs
Basically, they aren't meant for the same purpose: you can write the business logic (~how your app will work) in ReactJS and then you can show it to the end user with some custom CSS class magic written in Bootstrap 4.
Hope that helps!
The difference between a library and a framework is explained really well in the following Stackoverflow post: What is the difference between a framework and a library?
If you want to use Bootstrap 4 in ReactJS you can use the following super easy and nice to use library: Reactstrap.
I hope this helps you.
Bootstrap is a CSS framework, It is used to make responsive and beautiful websites.
React js is a view library and makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
You can use them together if you want to build interactive and beautiful
websites.
To include bootstrap in React,
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that you get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. However if you are only interested in css, then it's perfect.
Using this you can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If you want simple setup, then you can use reactstrap link
Other frameworks include react-bootstrap link
This does not mean, that you have to use bootstrap only. You can use any other css framework like Bulma, Foundation etc.
Is it worth it using jQuery with React ?
My opinion is not to use jQuery with React, as jQuery or jQuery plugins changes DOM structure, This in turn causes problems with reactjs virtual DOM.
This does not mean you cannot use jQuery, you can, but its little different than normal use.
Reactjs has provided a way to use jQuery and other plugin here Integrating with Other Libraries
Is there a sort of css framework which i can add to a gwt project, and this will completely set a new UI to my gwt application. Sort of changing the look and feel.
I love GWT, but others like Vaadin are so good styled, if there were a complete set of css librarys that would make my app a lot nicer would we great.
I think we can be great developers but not so good designers.
Thanks!
I would recommend starting with http://gwtbootstrap.github.io/
As well as: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss
I would then dive deeper into the GWT docs to get a good handle on creating your custom themes. At some point any styling theme/framework will fail your needs and you will need to have some fundamentals for styling yourself.
Personally, I highly recommend using UiBinder and ClientBundle:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
http://granitode.wordpress.com/2012/04/19/gwt-uibinder-using-a-clientbundle-with-cssresources/
#fguespe, I'm not aware of something such for example twitter bootstrap that you 'just' plug.
Eventually the 'web designer' needs to know about specific gwt CSS classes that impact the look and feel. If importing the GWT 'non plain' themes, you'll need to write customizations.
Yes indeed Vaadin and GXT provide a default nicer look and feel... Let's just fire all Google devs for a lack of focus :-)
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)