Top CSS Frameworks to check out in 2021

Top CSS Frameworks to check out in 2021
If you're looking to improve your website development with css, then a good framework can make life a lot easier with premade colors, styles and UI. Check out these great frameworks worth trying
00:00 - Introduction
00:13 - 1. Tailwindcss
02:07 - 2. Bootstrap
03:25 - 3. Material UI
03:25 - 4. Materialize
04:43 - 5. Bulma
07:04 - 6. Foundation
08:49 - 7. Skeleton
10:42 - 8. Semantic UI
12:00 - 9. Pure css
13:28 - 10. UI Kit
#css #frameworks #2021
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE

[@francescociulla]

The quality of these videos impresses me every single time!

[@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

[@vrajroy1976]

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

[@JayCeeIsOutrageous]

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

[@leticiaespino7251]

Thanks for the quick review

[@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

[@_MdAbirAlFoysal]

That was really helpful

[@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?

[@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

[@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

[@Seeking_Solace]

@@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.

[@Fixerhub]

Well explained!

[@didziszvaigzne7679]

Tailwindcss is my absolute favorite one!

[@wrongname3636]

tailwind sucksssss

[@AdrianTwarog]

:D awesome!

[@Quabbe2]

This is the way

[@Weibenfalk]

Good one as always man!

[@AdrianTwarog]

Thanks!

[@nicetomeetugaming7024]

Good video sir!

[@samirsamir7779]

Bootstrap ... thank you Adrian ^--^

[@AdrianTwarog]

😇

[@xamantiwari]

Bruh try it out tailwind you wiill love it

[@EasyWebCode]

Very Useful

[@vg6306]

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

[@prashlovessamosa]

Thanks for sharing

[@theobellash6440]

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

[@nirvanzentinal]

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

[@AdrianTwarog]

I’ll need to check that out

[@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.

[@lautaroclericierhardt7843]

Coffee time. Greetings from Argentina!

[@daedrikaskhan]

HOW you protect your website from copying using Tailwind ?

[@Franco_76]

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

[@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.

[@ideagame3633]

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

[@El_nino_337]

Semantic UI looks the best among all.

[@asheaven1st]

Yess.. Tailwind CSS is outstanding..

[@gesangwibawono7570]

Bootstrap ❤

[@ArifAldoseri]

Oxygen Builder + Bulma does the job for me

[@mandomandohm]

Try combination between ant.design with tailwindCss

[@joakogiri4728]

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

[@AdrianTwarog]

Hahah, fixed :D

[@Fridayy.Blessed]

I think I'll go with Bootstrap

[@siya4536]

This was interesting. What about the transition?

[@l.ga.1061]

Nice

[@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! ✌🏻

[@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.

[@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?

[@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

[@WISE_]

Tailwind utilization is the best!

[@snipeminecrafter3001]

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

[@imnemo2327]

Semantic or Material ui ?? Confused please tell

[@developerpranav]

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

[@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....

[@srinathmuthusamy9661]

Tailwind Css 💫

[@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.

[@staefoded]

Tailwind 🥳

[@meghrajshete304]

I have doubt css or tailwind css which I learn

[@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.

[@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...😉

[@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)

[@one_way_tech]

Wow 🙏

[@buildingphase9712]

I love vuetify so much. . .

[@mintesnotmelese6552]

Tailwind OP

[@Dastcz]

Go check out Grayshift too :)

[@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... 😉

[@mshikebkhan]

Which of these look more good on mobiles??

[@frrabelo]

Do a review of this video compared to vuejs

[@OniHuntress]

your body language is so awesome bro

[@harshadm824]

Tailwind is the best

[@miguelmondragon1366]

Tailwind number one😉

[@samnayakawadi]

Sementic UI

[@lauraruival360]

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

[@fastsolution]

Bulma hmm nice

[@AdrianTwarog]

:D

[@zalman_6175]

How can I install tailwind css in laravel?

[@fahimadnan9492]

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

[@aashiqhasnat2]

@@fahimadnan9492 to design his site..

[@joeadeleke]

Chakra UI???

[@MarkEdwardTan]

Combination of Ant Design + Tailwind for me.

[@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

[@bineetnaidu5146]

Chakra UI??

[@lutfiikbalmajid3128]

is it come from naruto?

[@pseudoanonymous]

Can't believe this didn't make his list, it's up there with tailwind in quality.

[@_ap__]

it comes under React frameworks

[@bineetnaidu5146]

@@_ap__ that's true tho ☺️

[@HimasRafeek]

Anyone checked out Butter Cake css framework?

[@ducdungnguyen3925]

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

[@avishkadevinda7773]

Tailwind❤️❤️

[@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.

[@robertusadrian]

still love Bootstrap 😅

[@xamantiwari]

Bruh try out tailwind you will love it

[@AdrianTwarog]

:D me too

[@sidhantthakur961]

Tailwindcss is ❤️

[@eliashrn]

Your forgot ant design

[@andrewb5412]

You move weird

[@gatosssss1]

I laugh at you not putting Quasar in the list

[@jorge1869]

It sound like sh1t

[@pirbaba755]

F css lern 1st php

[@AdrianTwarog]

:D

[@michaelandreuzza]

tailwind css is not a framework.

[@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.

[@margaretocean322]

Stop with the hands. Please.

[@oleksandrkhrashchevskyi5265]

to be honest tailwind 3 sucks in comparison to Bootstrap 5

[@balajiravi9259]

Bootstrap Css❤️

[@xamantiwari]

Try out tailwind you will love it atleast once