DEV Community

Madza
Madza

Posted on

What CSS framework would you recommend to pick-up in 2020?

So far I've tried just Bootstrap and a bit of Bulma.

Tho there are Tailwind, Foundation, Materialize, Skeleton and many others (most of them I have not even heard before).

I'm interested to hear what's your CSS framework of choice for this year and the main reasons behind your choice?

Top comments (24)

Collapse
 
louislow profile image
Louis Low

My choice of a CSS framework is Yogurt. I use it for all my clients and personal projects. I also refactoring existing projects from Bootstrap to Yogurt. It allows me to create a functional web component with an MVP framework without worrying about CSS.

Collapse
 
madza profile image
Madza • Edited

Never tried, but seems like a modern approach from what you described 👍🔥

Collapse
 
louislow profile image
Louis Low

This is how it looks like below. I use my favorite MVP framework (Krugurt.js or Vue.js) with Yogurt to create functional and reusable web component with API callbacks.

I first create a new web component (HTML, CSS, Javascript). The props (properties) thing or its value will expose outside of the component. For example, the imageheight, imagewidth and textsize. The component is ready for mounting and ready to use everywhere in the project.

<item-card>
  <y class="rounded-lg shadow">
    <img class="{ props.imageheight} { props.imagewidth } ... object-cover object-center"
         src="{ props.imageurl }">
    <y class="{ props.textsize } ... p-2 text-khaki-500">
      { props.description }
    <y>
  </y>
</item-card>

Then to reuse the web component repeatedly, just like below. I can configure the imageheight, imagewdith and textsize manually the values can be set differently to others.

<item-card
  imageurl="https://..."
  imageheight="h-48"
  imagewdith="w-full"
  textsize="text-lg">
</item-card>

I also can iterate each="..." the web component with data using fetch.

<y class="flex justify-start items-center">
  <y each="{ data in items }">

    <item-card
      imageurl="{ data.image }"
      imageheight="h-48"
      imagewdith="w-full"
      textsize="text-lg"
      description="{ data.description }">
    </item-card>

  </y>
</y>

I doing refactoring or making a new frontend project. I calculate how many UI components that I need to design before making them into web components with the MVP framework.

I just love making web component, it is cleaner and easy to manage.

Thread Thread
 
madza profile image
Madza

Very well thought-out approach 👍
This seems it could be especially useful if the app scales up 🔥🔥

Thread Thread
 
louislow profile image
Louis Low

Yes. it is.

Collapse
 
u_cancall_me_rj profile image
RJ-1998

For the past few weeks I've been using CSS Grids and the first word about it is that it's "awesome". Previously I relied mostly on Bootstrap for most of my projects, but now I think CSS Grids has created a top spot above all the frameworks. What do you think?

Collapse
 
madza profile image
Madza • Edited

I remember when Grid was announced everyone was talking how revolutionary it is noting that this is the end of bootstrap, tho after the initial buzz most of them continue to use frameworks and new ones are being built every day.

I really like the Grid system and I have used it for couple of projects.

Collapse
 
mousetail profile image
Maurits van Riezen

Agree, I disliked frameworks already but now with grid they only get in the way except for very quick prototyping.

Collapse
 
tringakrasniqi profile image
Tringa Krasniqi

I've used only Bootstrap before, until the recent small project where I gave Materialize a try. It turned out to be great actually, super easy and fast to get used to it. It also has a way to use SASS with it (even though I didn't try that, I used pure css for any custom change I needed). I would say it is worth a try _^

Collapse
 
madza profile image
Madza

The bulkiness of framework is another important aspect to consider before choosing a framework for sure. I depends of the scale of app you are building and you don't want extra file sizes/load times for features you don't use.

Collapse
 
tringakrasniqi profile image
Tringa Krasniqi

Yeah of course!! For big projects, research is definitely very important because using a wrong framework can result in low performance and it is not easy switching to another one after some time. However, for a small project like it was mine, and it was needed to be up for a very short time, Materialize turned out to be quite good. Not sure how it performs in big projects though.

Thread Thread
 
madza profile image
Madza

For larger projects time spent on preparation work (research, planning, wireframing, etc) is crucial.

A.Lincoln has a great quote on this:
"Give me six hours to chop down a tree and I will spend the first four sharpening the axe."

Thread Thread
 
tringakrasniqi profile image
Tringa Krasniqi

Yeah exactly! That's how it should always be done _^

Collapse
 
peiche profile image
Paul

I absolutely love CodyFrame by @CodyHouse. It's a nice mix of BEM and utility classes, which I've paired with PurgeCSS on a few different projects to minimize the stylesheet size. I prefer it over Bootstrap because even though it's written in Sass, it uses Custom Properties (CSS variables), not Sass variables, to quickly and easily implement dark mode on a site-wide or per-component basis.

Collapse
 
madza profile image
Madza

I will look into it, thanks for share :)

Collapse
 
mousetail profile image
Maurits van Riezen • Edited

None, I would focus on creating more advanced effects without frameworks. Perhaps learn some CSS preprocessors if you want to learn something new.

edit: Just want to remind everybody to never ever use UIKit

Collapse
 
calix profile image
Calix Huang

I say Bootstrap - it's been popular and I think it will be popular for a long time

Collapse
 
madza profile image
Madza

v4 was a major upgrade, hopefully we will see v5 soon :)

Collapse
 
calix profile image
Calix Huang

I actually started using Bootstrap when v4 was already released, so I don't know how much of an upgrade it was from v3 XD

Collapse
 
anthonywebdev profile image
Anthony R.

Tailwind ... As I am a huge fan of this framework !

Now if you want already made elements, Bootstrap (as it is for me the only framework with a really good documentation).

Collapse
 
madza profile image
Madza

Since yesterday already studied Tailwind docs a bit, one thing is for granted, it offers so much customization options compared to static-predefined frameworks like bootstrap.

In fact, when you visit a site, you can immediately tell if its built with bootstrap, lol xdd

Collapse
 
anthonywebdev profile image
Anthony R.

That's true ... Most of the time you can know in under 10 secondes if a website is made using Bootstrap or not.

Collapse
 
khrome83 profile image
Zane Milakovic

I would avoid any framework that does button, input, button-secondary. Basically anything that has a predefined appearance. Try tailwind. Stay away from bootstrap and those of its type.

Collapse
 
madza profile image
Madza

Heard too many great things about it :)
Cant wait for next ground-up project, i'm gonna try it :)