search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.31k stars 804 forks source link

Migration to other CSS framework #687

Open simkepal opened 2 years ago

simkepal commented 2 years ago

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 commented 2 years ago

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

laurentpayot commented 2 years ago

Tailwind is not for me so I switched to Beercss and I’m quite happy: https://github.com/picturepan2/spectre/issues/673#issuecomment-942164213

Vectrex commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

sciborrudnicki commented 2 years ago

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

sciborrudnicki commented 2 years ago

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 commented 2 years ago

1.0.0-alpha with CSS variables here

laurentpayot commented 2 years ago

@sciborrudnicki beware of copyright stuff, the author was angry after a fork: https://github.com/picturepan2/spectre/issues/634

salamwaddah commented 2 years ago

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

laurentpayot commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

chrissy-dev commented 2 years ago

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 commented 1 year ago

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

mithray commented 1 year ago

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

qgustavor commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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