loading...
Cover image for Trending CSS Frameworks

Trending CSS Frameworks

3rchuss profile image Jesus Abril ・2 min read

From easy to complex, from simple to the best

How useful is a great CSS Framework? As you know there are many of them, one's easy and others more complexes, but all of them really helpful.

Those chosen are my favorites, there are already popular and getting even more.

Bulma.io CSS

This is a powerful CSS framework which its primary feature is the fact that all its components are dependent of flex box, making it a nice CSS to create easy layouts.
Its simple classes make it very intuitive. Let see an example:

<section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
     </h2>
   </div>
</section>

You only need to read its documentation once, amazing isn't it?
Bulma classes
Bulma.io CSS


Let talk about my 2nd favorite one

Bootstrap v.5

Almost everybody in web development know about Bootstrap.
And it's simple amazing, the recent arrival of its new version made a big step just leaving out jQuery and rewriting back all its plugins in simple JavaScript. (lighter and faster).
Also, a new feature is the responsive fonts and headings, plus the gutter. 😍

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Result
Bootstrap is a strong framework that you should learn. It is the most used one.

See more about v5.Bootstrap


And the last one at the first position....

Tailwind CSS

How amazing a CSS framework can be? Its prefix classes as...

    'sm': '640px',
    // => @media (min-width: 640px) { ... }

    'md': '768px',
    // => @media (min-width: 768px) { ... }

    'lg': '1024px',
    // => @media (min-width: 1024px) { ... }

    'xl': '1280px',
    // => @media (min-width: 1280px) { ... }

🦄🦄🦄🦄

All you can think and would use to build an amazing HTML web, Tailwind has it already ready to use.

Still, you don't trust me?
This CSS Framework is full of features, almost everything is done in classes like, animations, transitions, negative margins or paddings, dark mode 😍😍.
You don't need a style.css anymore, trust me!

Tailwindcss


Ending the post I would like to introduce a side project that my friend

michaelandreuzza image



& myself are working on.

WickedTemplates

We are creating pure HTML templates based on the CSS Frameworks I wrote about.

We are not using any stile out of the CSS Frameworks and as you can see, these CSS Frameworks has a lot of potential.

Thanks for reading!.

Posted on by:

3rchuss profile

Jesus Abril

@3rchuss

Self-taught Full Stack Web Developer. Apasionado por javascript!

Discussion

pic
Editor guide
 

I think I'm gonna give Bulma a try. I got sick and tired of seeing Bootstrap in pretty much every project I've worked in and went to find alternatives.

I found an open-source design system called tachyons.io and used it for some time but it seems the project is now dead and there's no more support for it so I have to find an alternative now.

There's a few I've seen pop up so I'm giving Bulma a try first and btw Tailwind is way too mainstream for me so not an option.

 

Woow what a pity, just checked and looks pretty cool, the way the classes are name... I will have a look in depth.

Bulma is simple, but effective, and there's a good community behind

 

Yeah man it's very cool the way they built the project and the fact that you can get a custom version of the entire Design System. I suppose it still works for small personal projects and such but unfortunately no support for anything else more ambitious.

 

Just been getting back on the Boostrap train after a few years, man I love it. People say "everything looks like a Bootstrap website" but that's just because the devs were too lazy to style it, Bootstrap gives you the power to do pretty much whatever you want.

Not a fan of Bulma though, started using it on a project this spring and almost immediately canned it it's not accessible and the maintainers seem to have no interest in making it accessible. It shouldn't be used in production projects (although it is). github.com/jgthms/bulma/issues/53 Once it becomes accessible then I'd revisit it.

 

Yes, you're right! Bootstrap is just amazing, and its new version is awesome, really powerful, and as you say many developers are just to lazy build something nice.
But would recommend you to use Tailwind, a bit complex, but once you get use of, I can say is too far from bootstrap (in front) :D

 

I've gotten close a few times in personal projects, I wish I had a good use case at work, with personal projects it's always a fight to get things done or learn something new. Tailwind definitely looks cool I'm a big fan of the Refactoring UI guys in general, I'd love to try it out.

 

CodyFrame never gets the attention it deserves, in my opinion. It uses custom properties (css variables), has nearly built-in dark mode support, utility classes a la Tailwind, and a huge library of pre-built components available.

 

Never heard about it. And seems to be based on components? Will look at it more in depth.

 

I am using bulma for pretty long, its pretty good,

I am amazed by love of developers toward tailwind.One thing i always wonder why tailwind is so popular ?. To me, it is something that gives you classes for everything, Why someone will use it for larger projects, wouldn't the development slow in tailwind. For example to create card you have to mention 10+ classes

 

Yeah, you're right about tailwind, but its to easy to memorize its classes, so you can insert 20 of them really quickly instead to make your own style.

Anyway I use it for small/medium projects, for big ones most of the time is use custom + normalize

 

Bulma is very opinionated, and underrated.

I like Bulma, a lot, in fact my first Project is built on Bulma and using the sidebarfrom Buefy, same as my our project. that is also made only Bulma.

Why? Because is quick, and now you have the spacing helpers for margin and padding...

I really like it.

But I have to agree with a comment underneath, it doesn't seem that the maintainers want to make it less opinionated...

For example look at the colors...

I am starting to be a Tailwind guy... it has a looooooot of classes but, is stunning.
.

Have a great day!

 

Plug: I hope this will become a tending CSS tool some day soon. npmjs.com/package/reactive-css-pro...

Full disclosure I wrote it.

 

I’ve used Bulma on some simple projects but I always come back to Bootstrap. Great article!

 

Yeah. Bulma I think is just for really simple projects but still loving it. It has something that make me keep working with it.
Thanks🙏