DEV Community

What's everyone's choice of CSS framework and or methodologies for creating bespoke designs fast?

Tom Griffiths on July 05, 2020

Hi guys. I've been trying to work out the best workflow for creating custom CSS for my projects and it seems there's a lot of conflicting informati...
Read full post
Collapse
 
marcusatlocalhost profile image
Marcus •

I'm still loving bootstrap, using the scss directly, tweaking some vars and write custom CSS for certain components. It's maybe a bit annoying finding the right variables, but it's a solid start and I can quickly mockup elements using utility classes and later come back and replace some of them with custom css if I need to. I like the Sass utilities (breakpoints, grid) and I think Bootstrap v5 is going to be nice.
I tried tailwind.css and it's a joke. It's like writing inline css and I don't like the workflow introducing a bunch of weight, just to strip it with PostCSS afterwards. The only good thing about Tailwinds is, the defaults are looking nice.

At the end of the day, if you write your own framework/css starter kit, every site will look like that. I think it's a matter of how good you know the framework of choice and how good you know CSS to make the right tweaks to not let it look like the underlying framework. The enduser won't care about that anyway.

Collapse
 
louislow profile image
Louis Low • • Edited

For some people who dislike to inline the CSS in the HTML, Yogurt CSS has the option to expose it's utility modules into a custom class in a separate CSS file. For example:

<y class="button">
  ...
</y>

.button {
  @extend
    .px-3,
    .py-2,
    .text-teal-100,
    .bg-teal-400;

  &:hover {
    @extend
      .bg-teal-500,
      .shadow;
  }
}
Collapse
 
marcusatlocalhost profile image
Marcus • • Edited

Thanks for introducing it!
The same is possible with Tailwind, though.

I like the concept, of having a set of rules, that keeps things consistent - that seems to be more flexible than variables.

What I like the most in both frameworks, are the media query modifiers lg:*. That would be my main reason to use either.
Even if Bootstrap Utility classes made it easy to write media queries, this seems easier.

<y class="sm:bg-charcoal-100 lg:bg-red-400">
  ...
</y>