Migration to other CSS framework

[simkepal]

Hello,

It looks like this project is dead and I was wondering, how to migrate to something else like tailwindCSS. Did anyone go through this process and has some good practices?

Thank you for your help.

[Vectrex]

I switched to Tailwind some time ago. Since the concept is so fundamentally different I'd say there are no "recipes".

[laurentpayot]

Tailwind is not for me so I switched to Beercss and I’m quite happy: #673 (comment)

[Vectrex]

@simkepal explicitly asked for a migration to "something like Tailwind". YMMV as always, but comparing a fully blown component based, thoroughly opinionated CSS framework with Tailwind is futile. (Despite all the articles which - as the linked one - largely miss the point.)
Anyway, can you provide good practices when moving from Spectre to Beercss?

[laurentpayot]

@Vectrex please do not overreact simply because I put a link to a critical article about your framework of choice. As you said YMMV.
I was just mentioning "something else" as asked, and also indicating that just like any tech Tailwind has some drawbacks to consider, as @simkepal is "wondering".

Anyway, can you provide good practices when moving from Spectre to Beercss?

I suspect this question to be purely rhetorical because obviously there is no choice but a total rewrite of your html/css. Totaly worth it, in my use case.

[Vectrex]

Actually no. Since quite a few component based CSS frameworks share similar approaches, one practice could be a bunch of search-and-replaces with some rework afterwards. I case components share the same name (chips, modals, cards, etc.) it might be even less: "Configure the new framework and accept the new looks" (yes, I am exaggerating). Again: The issue is not about "any" alternatives but about "how to migrate".

[laurentpayot]

@Vectrex

search-and-replaces with some rework afterwards

That's what I call a total rewrite.

I[n] case components share the same name (chips, modals, cards, etc.) it might be even less

So you're basically saying that if two things have the same API then the migration is easier. I wouldn't go against such a helpful statement.

[Vectrex]

Ah, we are at polemics now. I suppose this helps @simkepal a lot.

[sciborrudnicki]

I am working on my project on spectre.css and i want to invest some time into it.

[sciborrudnicki]

Fork with the latest version 0.5.10, and I've already changed the project to use CSS properties in an HSL way divided into a separate variables:
--s-primary-color-h // hue
--s-primary-color-l // lightness
--s-primary-color-s // saturation

It's not published yet.

https://www.npmjs.com/package/@angular-package/spectre.css

[sciborrudnicki]

1.0.0-alpha with CSS variables here

[laurentpayot]

@sciborrudnicki beware of copyright stuff, the author was angry after a fork: #634

[salamwaddah]

@laurentpayot to be fair the project is MIT with author giving full permission to do anything. Plus it's abandoned.

[laurentpayot]

@salamwaddah Sure. I was talking about the "License and copyright notice" condition from the MIT licence. You cannot do anything, you have to respect that condition.

[sciborrudnicki]

@laurentpayot As I see, it's MIT, that's why I decided to fork and do the job because I want to use this CSS framework in my project. I can help to maintain it if the author wants it.

You can read:

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

[laurentpayot]

@sciborrudnicki Oh I see, no CC by like clause. Yep you can do pretty much everything.

[chrissy-dev]

Hello,

It looks like this project is dead and I was wondering, how to migrate to something else like tailwindCSS. Did anyone go through this process and has some good practices?

Thank you for your help.

I wouldn't really say the project is dead - it's stable and provides a good solid list of components. However, @picturepan2 must not have enough time to manage the requests/deal with PR's which could be stopping the project moving forward in ways some people want it to.

There's a couple of options:

1. @picturepan2 adds a few people to a core team in the repo/organisation to help manage the PR's and ship releases.
2. Someone forks the project as a base for a new incarnation of Spectre and invests in it as a new project with a different name. This is exactly what has happened with Sequel Pro and the new Sequal Ace fork and the latter has had great success.

Option 2 is well within the MIT License of the project and embraces the beauty of open source.

I switched to Tailwind some time ago. Since the concept is so fundamentally different I'd say there are no "recipes".

As for Tailwind, porting probably isn't a very good option as the core concepts are vastly different. However, re-creating the Spectre components in Tailwind could be a great way to bridge the gap.

[mithray]

Framework is not maintained but still like better than Tailwind. Words cannot describe how disgusted I am by the appearance of that HTML 😆

[mithray]

It's pretty surprising how well older and smaller frameworks hold up. Skeleton and Milligram are good too.

[qgustavor]

@sciborrudnicki Is it possible to use @angular-package/spectre.css without using Angular? The installation instructions are not working and issues are disabled on that repository.

[sciborrudnicki]

@sciborrudnicki Is it possible to use @angular-package/spectre.css without using Angular? The installation instructions are not working and issues are disabled on that repository.

This documentation is not finished yet, and it refers to an upcoming beta version, please be patient.
There is no need to use angular, because of its only one typescript dependency. I am close to finishing significant changes to the project in a module-customizable way with dark/light/normal color schemes. I also brought back using gulp to compile CSS files and added the ability to create issues, I forgot about. So add yours, I can check.

[sciborrudnicki]

Here is dark light theme preview working on the prefers-color-scheme.