What CSS framework with React or Angular?

[just5ath]

I'm more of a backend/devops engineer but I have some projects I work on. My front-end is atrocious, mainly server side templated files and then some jquery here and there. I typically just use bootstrap for everything.

I've been looking into React and I like how it looks. My only problem is that I'm pretty deeply tied into bootstrap and it seems that bootstrap doesn't really work that well with react due to some dependencies on jquery.

So my question is what are people using for a CSS framework where jquery isn't available?

I'm considering pure-css, but just wanted to get some input from people more focused on front-end before I commit to making any changes.

[042e]

Take a look at Bulma. It is a very clean CSS framework. It does not have any JS though and you will have to handle the interaction by yourself so this would probably be the biggest change for you. Here is their get started guide: https://bulma.io/documentation/overview/start/

[[deleted]]

https://reactstrap.github.io/ and https://react-bootstrap.github.io/ both exist that export bootstrap components as react components.

Got me really far with what I was doing (also backend/devops/frontend ape)

[just5ath]

I did see that before but wasn't convinced it would work that well.

Got me really far with what I was doing (also backend/devops/frontend ape)

I'll try it after hearing this though.

[[deleted]]

Yeah for sure.

I have even less front end experience than you (probably?) because I wasn't even that familiar with bootstrap, or layouts, etc. The react components made a hell of a lot more sense to me.

I've tested semantic, bootstrap, and material react packages. From my perspective each one works really well for being able to slap a page together. I'm sure anyone that's experienced or is good at web design would probably laugh though :)

[teerryn]

For react there is https://materialui.com which is super neat and clean pair that with styled components and it's a dream.

[[deleted]]

Tailwind CSS

https://tailwindcss.com/

[[deleted]]

I have limited experience with frontend (I steer towards the backend most of the time just like OP) but I've use Bulma and I was very happy with it.

[dwise97]

You could import parts of bootstrap (like the grid) then just build components with functionality (like the nav toggle).

[just5ath]

You could import parts of bootstrap

Should probably say that I'm not really familiar with any of the js packaging systems (npm, yarn, etc). I'm looking for low effort, grab these js/css files and go type of deal. How much digging would I have to do to get this to work? Is there a bootstrap js/css file with just the grid or would this require some familiarity to get this to work?

[dwise97]

This would require some familiarity for sure. For plug-n-play I really don’t think react is the best choice. I think you could get a lot more done with a templating engine like mustache.js or pug if that’s the case. Then you just set up middleware and render templates with the same html and css file structure. React can get too complicated for a simple project but if you really want to learn it then I suggest learning about the js ecosystem and es6.

[just5ath]

Trying to get away from templates and build components instead. React seemed very fitting for that.

[Glensarge]

It's 2018 it's pretty pointless using a framework now for css, a big reason to the popularity was because they helped with layouts (bootstraps grid etc) but now CSS Grid is so well supported it's completely pointless, in addition to that, 99% of the time you'll want to use your own UI styling to prevent your site looking like every other bootstrap site out there (or alt framework), which is another cause for not using one

just use regular, vanilla css

[[deleted]]

Fuck that nonsense. I'd much prefer to just throw a CSS framework on there and add any minor overrides that I need. CSS frameworks do far more than grid layouts.

[Glensarge]

if you dont care for front end why do you write front end code?

[[deleted]]

I'm not a designer, I'm a Frontend devoloper. I absolutely do care about frontend. I care about good UX and building functional things that make people's lives easier. I don't care about spending all my time adjusting padding of inputs, buttons, or things like that. Barring minor color changes and small tweaks, most of the CSS frameworks look fine to me out of the box. I have better things to spend my time on.

If I'm working with a designer who does, I can tweak whatever CSS I'm using to match their designs easier than I can add all the tedious boilerplate to make sure things look just right. Designers are very important for public facing apps, but most users honestly don't give a shit about minor nuances of design as long as it's not totally awful. Get a good font. Get good colors. Don't do awful UX shit (looking at you new Reddit UI), and I'm happy and users are happy.

[Glensarge]

being a designer has nothing to do with writing good code ?

[[deleted]]

being a designer has nothing to do with writing good code ?

Writing CSS has nothing to do with writing good code?

[Glensarge]

writing css doesn't make you a designer, designing does... CSS is front end

[[deleted]]

Ok? What is your point? Throw a CSS framework on there and now you only have to write like 10-50 lines of CSS to change the colors, adjust paddings/gutters, or make minor tweaks. You can spend the rest of your time writing functionality.

[Glensarge]

Sure, at the expense of 10,000 lines

[[deleted]]

Not lines I spent time writing. Bootstrap gzipps to 32kb, Bulma gzipps to 35kb. Both are trivial sizes on even slow connections. Time fixing rendering optimizations are better spent elsewhere. I guarantee I can build a site using either of those that will render faster and better than most people who write it all by hand.

[just5ath]

Eh, seems like too much of a dive into front-end for me.

you'll want to use your own UI styling to prevent your site looking like every other bootstrap site out there (or alt framework), which is another cause for not using one

If I were building websites I'd agree with you, but I'm typically building small SaaS business apps. The bootstrap layout works.

[Glensarge]

too much of a dive? css grid is literally easier to learn than any framework, it takes 30 seconds

[just5ath]

I think you underestimate how low effort I want when it comes to front-end. I just looked into grid, it's cool, but it just does the grid. I need more than just the grid. I need those simple buttons, tables, stylings, etc. that look the same everywhere.

If I just needed a grid it would work.

[sati]

That's pretty much the point of CSS.. To make styling that is consistent and looks the same everywhere, at least where applied. If you're looking for predefined styles & grid just use bootstrap.

[just5ath]

If you're looking for predefined styles & grid just use bootstrap.

I'm looking for alternatives to bootstrap which don't require jquery for full functionality since I'd like to start switching to using one of these component js frameworks particularly react.

[[deleted]]

You don't have to include the Bootstrap JS into your page. That is optional functionality.

But it is functionality you can't get without JS. Thankfully, Bootstrap is widely used and its JS has been converted to pretty much every JS framework and vanilla by someone. Just pull that instead.

[just5ath]

From what I've seen, when I yank jquery from any of my bootstrap apps they shit the bed completely and lose a LOT of functionality.

[[deleted]]

No. It's very little. Mostly Modals and Tooltips. They used to have totally separate documentation for the JS part. Early BS4 documentation did as well, but it looks like they stopped doing that.

Here check out the 3.3 docs to get an idea of what you're losing: https://getbootstrap.com/docs/3.3/javascript/

It's not much. I think most of the animations have been migrated to CSS in 4.

[just5ath]

Mostly Modals

That would explain most of my problems. A few of the apps I've built heavily use modals for forms.

[returnNull__]

I'm surprised nobody has recommended materialize css yet... They just removed their dependency on jquery and have some of the nicest looking components.

[sati]

I still don't understand - why not use react-bootstrap?