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

[Madza]

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

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

[Madza]

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

[Louis Low]

Yes. it is.