loading...

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

madza profile image Madza ・1 min read

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?

Discussion

markdown guide
 

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.

 

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

 

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.

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

 

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?

 

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.

 

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

 

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 _^

 

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.

 

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.

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

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

 

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.

 

I will look into it, thanks for share :)

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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.

 

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