loading...

Looking for a CSS framework that I don't have to fight against it (also Vue Framework)

patarapolw profile image Pacharapol Withayasakpunt ・1 min read

Example of frameworks that I have to fight against them (due to global styling and common class names)

  • Bootstrap
  • Bulma

Example of Vue frameworks that also have global styling

  • Vuetify
  • Buefy

Well, I was using Buefy all these times.

What should I try next? Can I avoid creating Vue components all by myself?

I am working on this project BTW, which works very well, except if one doesn't use Bulma.

GitHub logo patarapolw / blogdown-cms

Content Management System, to provide API endpoints for Static Site Generators or JAMStacks

Discussion

markdown guide
 

A comment fairly applicable to all CSS framework convos these days: Have you checked out Tailwind?

The first header on the Tailwind landing page: Most CSS frameworks do too much.

 

I'm going to be unoriginal and be the nth person to recommend Tailwind!!

I used to refuse Tailwind's approach because I found it messy, and I was adamant about "separation of concern" (ie. CSS class names should describe content not presentation) etc. I tried as much as possible to stick to BEM. But as I work in a large web app where features are added, removed, and modified regularly, and I have to create quick prototypes (add to that, I also struggle with the visual side of UI design). Things get messy, I couldn't be as disciplined as I'd ideally be about sticking to the CSS methodology, and vaguely presentational class names like .card, .sidebar and .dropdown start to get thrown to the mix. Then I thought what the heck, might as well go the Tailwind route. And I never looked back! Tailwind is soo helpful for my use case.

I also happen to use Laravel, which has built-in postcss support so I can use the Purgecss feature by literally copy-pasting some 3 lines of code. Slimmer minified build css, more productive & happier dev!

 

Tailwind also seems to use common names, like flex, container as well.

A solution, though, if I need my own class name, is to prefix with something, like a-, for example.

 

I agree, Tailwindcss is probably what you want. I tried other tools for years and finally came over to it a couple weeks ago. Now I'm wondering why I delayed for so long.

As someone who has a critical eye for design but struggles with CSS, Tailwindcss gives me the power to do what I want. The class names are easy to remember and the directives are bliss. I can't say enough good things about it.

 

Tailwind seems to be good so far.

But as I am making a Markdown Editor, and Tailwind also resets everything, I also need unreset.scss.

Actually, there seems to be an easier way -- Disabling preflight

 

I love Tailwind. You can still use it to make your own components if you want, but you'll find yourself remembering the utilities over time too as a side effect of using it.

 
 

Any reason why you don't want to just write your own CSS with something like SASS or SCSS? It seems like this will usually be the most flexible and most lightweight approach, if that's what you're looking for.

 

I can use some global CSS / SCSS, with Vue SFC scoped CSS / SCSS as well. Still I do want to use a pre-made Components. I might go with this option.

Tailwind with purge CSS might not be a option as well, but never tried for real.

 

Sounds like that might be a good choice. I just know as a matter of experience that I've never needed most of the features offered by really any CSS framework that I've used, and writing most of my own SASS mixins over time to support functionality that I use frequently still gives me flexibility to reuse components, but lets me continue to flex my vanilla CSS muscles and be thoughtful about writing efficient and powerful combinations of CSS declarations.

Mike I couldn't agree with you more.

 

Tailwind is pretty awesome and really flies next to you own CSS.

Otherwise I would suggest Pure or a bit more unknown perhaps Tania Rascia's Primitive which both are minimalist and awesome.

 

You would be better off using pure css. I was in the same fix as you are. I've used Bulma in the past but needed to implement a very custom web app. I was fighting Bulma (my former favourite framework) then I tried tailwind css.. I was aghast. I then tried Pure. I set up SASS and my productivity shot up instantly. I can't recommend Pure CSS + SASS enough.

 

Pure CSS is nice in that it is unobtrusive, but in the end, I think I need a series of nice CSS tutorials, such as this one -- dev.to/bnevilleoneill/how-to-style...

As for components, it needs to be unobtrusive as well. I think PrimeVue is one of them, but I should use to the minimum, as it is not cross-framework. (for example, if I use Gatsby...)

 

To answer your questions on components, you can use Keen UI (josephuspaye.github.io/Keen-UI/#/u...)

 

God.. i'm alone to think that tailwind sucks ? that's the same sh.. than Bootstrap or jQu.. Oooops.. πŸ˜‡
well, to answer you, i tried a lot of frameworks this lasts times both for me (side projects) and for my company, and Bulma is realy good for customize and the weight of this one is realy good.
However if you want to quickly craft some apps with amazing presentation, Vuetify is impressive but to customize, it seems to me very hard.

 

Haha, not shocked to see that I just logged in to respond and already when I come back to the page, I glance down and notice that Tailwind is already being suggested. Tailwind ROCKS. It is truly a game-changer, in my opinion. The same way that the original Bootstrap was a game-changer for many when it first came out, Tailwind has managed to completely reinvigorate my personal love for the usual front-end development stuff all over again.

 

Tailwind Definetely. The Vue Tailwind Plugin also setups Purge CSS for you ;)

 
 

I think you'll have to write your own framework.

 

Now that I think about it,

  • Regarding the styling, best framework is no framework; that is pure CSS, e.g. grid or flex. But I do copy ideas from TailwindCSS
  • Regarding the components, I love the idea of shadow DOM, which has isolated CSS environment, while the JavaScript may be connected with the outer side or not. However, I have yet to know more web components libraries.
    • I don't really care about library agnosticism, but rather CSS agonisticism...
  • Maybe, I am shifting my thinking towards that global CSS environment should be touch to the very least. Not even CSS resets or classless CSS.
    • normalize.css might be OK, though; as a normalization of browser wars.