Top CSS Frameworks to check out in 2021

[@SeventeenXBL]

As a beginner I've only been exposed to Bootstrap, but after watching this video I think I'll give Bulma a go! Looks really nice and simple :)

[@MattVibes]

IKR! It looks amazing

[@vraj2003]

Hey how was your experience? I'm thinking about going for material UI. Is bulma better?

[@leonardovioliorrantia8286]

nooooup, foundation bro ♫

[@parthagrawal9292]

How was it? Can you share your experience

[@francescociulla]

The quality of these videos impresses me every single time!

[@sairaj5660]

I never went to any other CSS framework after learning TailwindCSS Tailwind Rocks 💥

[@tameramer1465]

Has it components like bootstrap or we should make them?

[@sairaj5660]

@@tameramer1465 we should make them but only with classes it's really awesome if tou want to build something serious and don't want it to look like like any css framework

[@iqbal5942]

With react tailwind or material ui ? Which one is best choice

[@sairaj5660]

@@iqbal5942 depends upon your requirement and patience, tailwind does not have inbuilt components like models , snackbars, like in material UI, but tailwind makes it easy to build responsive sites with full customization, I worked with both of them, but tailwind is a my favourite

[@Omar_Al_Seddik]

@@iqbal5942 Material-UI is the most popular React tailored framework that exists. Check npm trends. It's more popular than both React-Bootstrap and TailwindCSS combined. And that's for good reasons. It's React-based, very lightweight, and super customizable. I'm convinced that the people that don't like it haven't actually mastered it. If you're using React, Material-UI kinda has no competition at this point.

[@OneBrighDay]

I really like material ui specifically because how well it works with styled components.I don’t like any of these frameworks in regards to how they handle layouts I would just rather use grid or flexbox so because MU allows SC to extend existing components its great. Plus you get the sass functionality built in. Just a win win.

[@AdrianTwarog]

Good points!

[@4veragejoe94]

@@AdrianTwarog have you take a look at trongate css? Its on prelaunch atm kzbin.info/www/bejne/d4DOgHdrrJt_a68

[@didziszvaigzne7679]

Tailwindcss is my absolute favorite one!

[@wrongname3636]

tailwind sucksssss

[@AdrianTwarog]

:D awesome!

[@Quabbe2]

This is the way

[@daremondlars]

In my opnion, just Tailwind, Bootstrap and Bulma bring some innovations in terms of conception. Tailwind = semantic, Bootstrap = functionality and Bulma = simplicity. Material vame to unify design in Android and Google Products, so deserve some merith

[@dontaskiwasbored2008]

Tailwind is basically the literal opposite of semantic.

[@ahmedalkhier5811]

Which one is better to learn. For someone want to get job junior position!! I'm really confuse 😕

[@Lebacbemti]

Bootstrap 100%

[@xamantiwari]

Tailwind

[@_benjimouse_]

Learn them all, once you've messed with one for a while the others are easy to pickup. Then pick the one that's appropriate for the project.

[@dezinhtang]

Tailwind is in my no.1 list because you are keep recalling CSS declaration in your mind at the same time>>

[@_CazaBobos]

Hell, you can even use tailwind only for the responsive mobile-first design and use standard css inside. My top 1 too.

[@_MdAbirAlFoysal]

That was really helpful

[@nirvanzentinal]

Also mantine is one of the best components rich modern UI library ♥

[@AdrianTwarog]

I’ll need to check that out

[@vg6306]

What do you think about bulma vs tailwind which one is good to learn?

[@leticiaespino7251]

Thanks for the quick review

[@theobellash6440]

Sir, which software do you use to make these video?

[@El_nino_337]

Semantic UI looks the best among all.

[@jo.c81]

rEALLY good summary of css frameworks. It was funny how abruptly the video ended, no goodbies, no Adios , nothing, just CUT !!! :)) Pure CSS sucks for those pure- prefixes and Foundation rocks for email templates

[@Weibenfalk]

Good one as always man!

[@AdrianTwarog]

Thanks!

[@daedrikaskhan]

HOW you protect your website from copying using Tailwind ?

[@samirsamir7779]

Bootstrap ... thank you Adrian ^--^

[@AdrianTwarog]

😇

[@xamantiwari]

Bruh try it out tailwind you wiill love it

[@tigrankhachaturian8983]

Careful about the MUI, it is gonna make your vscode intellisense take 5 seconds to just display an error or around 3 seconds to display a suggestion, no matter how powerful your computer is. I love it's styles, but damn, it is slow af, just a very bad experience

[@MK_con]

and it's only for react projects

[@tigrankhachaturian8983]

@@MK_con I actually abandoned my project (that was supposed to be my portfolio project) completely, just because of MUI. 'Cause it was such a pain to work with

[@MK_con]

Use grid. Create your own components with grid and sass.

[@tigrankhachaturian8983]

@@MK_con I know this stuff already, I used tailwind for my next project (though now I'm learning advanced math to try out graphics programming, since ui creation is not my cup of tea)

[@Kristoph-69-69]

I just cdn and use a couple different libraries. Each have their strengths and weaknesses. I use the best of each.

[@JayCeeIsOutrageous]

Great video, learned a lot in such little time :)

[@chellam578]

I tried some framework but once u get comfortable with pure css u don't need any framework plain css works just awesome

[@AdrianTwarog]

It's why people should try each, never know what will work for you!

[@tanzimibthesam5861]

Pure css is not worthy if you have to do both design and development alone

[@chellam578]

@@tanzimibthesam5861 u think so plz get some knowledge pure css is so powerful

[@maman1414]

Well framework also important if you work with team because I have experience my friends don't understand my css and then we decided to use bootstrap 😅

[@tanzimibthesam5861]

@@chellam578 i know at the end of the day everything is pure css Tailwind just saves so much time i can style as i like and get fast responsiveness in all breakpoints without media queries.

[@srinathmuthusamy9661]

Tailwind Css 💫

[@scottisitt]

Very helpful! Thanks for sharing! EDIT: Numbers 3 and 4 in the description are a little confusing. Is it Materialize or Material UI?

[@buanghosen7988]

Great review Adrian, but may I know what tool do you use for drawing on the screen?

[@sethupathy143]

Tailwind is easy to make beautiful design. But the problem with it, It doesn't provide JS support. Tailwind's headless UI package helps with that. But using headless UI feels like building something from scratch.

[@xamantiwari]

You can provide twin.macro + tailwind

[@saravanan.r5079]

@@xamantiwari I am new to react and tried to use twin macro cuz of tailwind but couldn't apply dynamic styles

[@tanzimibthesam5861]

What js support are you talking about??

[@sethupathy143]

In many CSS framework like bootstrap / Material UI you can build accordions and menus easily since it comes with Javascript functionalities where as tailwind you can't.

[@tanzimibthesam5861]

@@sethupathy143 Well thats javascript functionality but if You know React and Vue have tons of components toggle modal these things are just matter of minutes. But owl carousel of Bootstrap is awesome cant deny that. You can look onto Alpine.js if you are not making an SPA

[@dawoodmarral7538]

is there any free sources from where i can learn about tailwind or bootstrap anyone please suggest me.

[@lukas.webdev]

I'll post a crash course / tutorial on Tailwind CSS this Saturday on my channel, if you are interested...😉

[@bineetnaidu5146]

Chakra UI??

[@lutfiikbalmajid3128]

is it come from naruto?

[@_ap__]

it comes under React frameworks

[@bineetnaidu5146]

@@_ap__ that's true tho ☺️

[@nicetomeetugaming7024]

Good video sir!

[@victormendoza3295]

I'll be honest, this video hasn't helped me only because the frontend is confusing at this moment. I'm thinking material ui overall (with future dart/flutter use) but I do like bulma's naming scheme.

[@ArifAldoseri]

Oxygen Builder + Bulma does the job for me

[@mandomandohm]

Try combination between ant.design with tailwindCss

[@ericakoten1362]

Hello Adrian, When would you recommend one to begin learning CSS frameworks before learning JS or after learning JS?

[@cloudpuncher4615]

CSS and JS frameworks are for devs who either work on huge projects and want consistency (all code looks the same) or for those who don't understand CSS/ JS. If you know how it works, you are a better dev. If you don't understand CSS, you can't use it in your JS (selectors, transitions, animations ect). Start with HTML CSS...

[@ericakoten1362]

@@cloudpuncher4615 Thanks alot

[@cloudpuncher4615]

@@ericakoten1362 Once you know the basics, for CSS Every layout and Cube CSS (methodology not framework) are the real deal. For JS ,finite state machines (XState) and RxJS (you can build your own) are where its at.

[@tigrankhachaturian8983]

@@cloudpuncher4615 strongly disagree, vue is really easy to pick up and it's much easier to create programms with it compared to vanilla&rxjs, and vue 3 has reactive variables which are pretty much the same as rxjs.

[@cloudpuncher4615]

@@tigrankhachaturian8983 I can't comment on how easy or hard Vue or React are. I've never bothered to learn them, they are shockingly slow and a waste of code. BUT on the flip side I know JS inside out... I can write custom SSG's SW's use readable/ writeable streams, indexedDB and pretty much anything JS can do (I probably wouldn't write asm.js). AND all of it is performant... If you want to make truly performant code try some of these tips... kzbin.info/www/bejne/pajGp5pojr9qj5o . Frameworks are for companies that can't code to a "standard"... First they create a standard way to code.... but then they're devs bitch and moan and can't follow instructions... so then they make it more restrictive and it gets harder to code anything useful.... and then they create a framework to allow everybody to code to the "standard". Then they realize that the framework isn't performant and go back to SSR or use SSG's. There's been an explosion of SSG's lately BECAUSE frameworks don't perform.... BUT why bother configuring webpack or any other bundler just to output some basic HTML CSS. When did all of this get so over OVER engineered and UNDER performant? Maybe everybody's trying to make it easy but are giving themselves JS fatigue....

[@ahmadsadiq1243]

sir is it good for developer to learn all these framework? is css is not enough in developing websites? Response me please

[@lukas.webdev]

There is definitely no need to learn all these frameworks... but once you understand pure CSS it makes sense to try out a few css frameworks, understand what their benefits are and use them wherever they can bring you an advantage... 😉

[@ead5590]

Gave Bootstrap and Tailwind a shot.. Didn't like em.. Trying to remember em classes and what not got me straight up irritated. I just whip out that SASS and I'm ready to go. Great video as always! ✌🏻

[@Fixerhub]

Well explained!

[@joako_gm]

9th says skeleton again in description. Good video btw, pretty intresting.

[@AdrianTwarog]

Hahah, fixed :D

[@asheaven1st]

Yess.. Tailwind CSS is outstanding..

[@siya4536]

This was interesting. What about the transition?

[@prashlovessamosa]

Thanks for sharing

[@OniHuntress]

your body language is so awesome bro

[@OfficiallAiHistory]

I think I'll go with Bootstrap

[@imnemo2327]

Semantic or Material ui ?? Confused please tell

[@OnixHoque]

Why doesn't people talk about Semantic UI that much???? It has such a wide variety of components and they are so beautiful!!! Not to forget the flexibility of customization that comes out of the box. 😔🤔🤔🤔

[@OffTheBeatenPath_]

Doesn't it require NodeJS?

[@ideagame3633]

of course Bootstrap, but Tailwindcss is very cool arm of poker))

[@developerpranav]

I searched for this video because there's at least 10000000 CSS Frameworks

[@gesangwibawono7570]

Bootstrap ❤

[@EasyWebCode]

Very Useful

[@zalman_6175]

How can I install tailwind css in laravel?

[@fahimadnan9492]

why would you want to use tailwind with laravel,.? lol

[@aashiq_hasnat]

@@fahimadnan9492 to design his site..

[@meghrajshete304]

I have doubt css or tailwind css which I learn

[@WISE_]

Tailwind utilization is the best!

[@balajiravi9259]

Bootstrap Css❤️

[@xamantiwari]

Try out tailwind you will love it atleast once

[@MysticCloak-e9r]

30th like and 10th Comment. Can I get a heart plz??? Keep Growing Man!!!! You have helped me a lot!

[@Dastcz]

Go check out Grayshift too :)

[@mshikebkhan]

Which of these look more good on mobiles??

[@coding4evry1]

Did you notice you go from #3 Bulma to #5 Material Design? Where is #4?

[@fastsolution]

Bulma hmm nice

[@AdrianTwarog]

:D

[@buildingphase9712]

I love vuetify so much. . .

[@joeadeleke]

Chakra UI???

[@maluksd6537]

Tailwind is the best 👌

[@AdrianTwarog]

It’s pretty good

[@abdullahsaid8561]

bulma isn't finished, and i highly suggest to not use semantic UI, it's currently abandoned, the docs also messy

[@frrabelo]

Do a review of this video compared to vuejs

[@miguelmondragon1366]

Tailwind number one😉

[@HimasRafeek]

Anyone checked out Butter Cake css framework?

[@MarkEdwardTan]

Combination of Ant Design + Tailwind for me.

[@ducdungnguyen3925]

Actually MUI (Material UI) can't create without React.

[@medafouk606]

Hello everyone l want to ask you some questions

[@bineetnaidu5146]

go ahead!

[@abhayagarwal5097]

Don't type to say i will ask instead ask them , so even if you don't care others might benefit from it.

[@staefoded]

Tailwind 🥳

[@harshadm824]

Tailwind is the best

[@robertusadrian]

still love Bootstrap 😅

[@xamantiwari]

Bruh try out tailwind you will love it

[@AdrianTwarog]

:D me too

[@mintesnotmelese6552]

Tailwind OP

[@l.ga.1061]

Nice

[@samnayakawadi]

Sementic UI

[@avishkadevinda7773]

Tailwind❤️❤️

[@sidhantthakur961]

Tailwindcss is ❤️

[@eliashrn]

Your forgot ant design

[@one_way_tech]

Wow 🙏

[@pirbaba755]

F css lern 1st php

[@AdrianTwarog]

:D

[@squigglyspaghetti8690]

I'm sure the information is great but I just can't get past how contrived and uncanny your gesturing is. It's like some clueless FANG company trained a ML model exclusively on r/TikTokCringe videos and applied it to their prototype Patagonia tech-bro andriod . I know you gotta do you but please consider toning it down a notch.

[@andrewb5412]

You move weird

[@michaelandreuzza]

tailwind css is not a framework.

[@gatosssss1]

I laugh at you not putting Quasar in the list

[@jorge1869]

It sound like sh1t

[@margaretocean322]

Stop with the hands. Please.

[@oleksandrkhrashchevskyi5265]

to be honest tailwind 3 sucks in comparison to Bootstrap 5

[@AkashChowdhuryAkash]

Going with skeleton 🦴🩻