[RFC] Include LESS and CSS

[levithomason]

Feature Request

Include CSS with our package.

Problem description

1. Currently, adding CSS is complicated. Theming for the CSS is even more complicated.
2. As maintainers, we also do not have control over the updates and release of the CSS since it is managed in another repo. This makes updates and fixes incredibly difficult.

Proposed solution

1. Copy the LESS distribution to our repo. Take over maintenance and updates entirely. Ship the included themes as part of our package, simplifying the setup process.
2. Update the doc site to be a theme designer and sharing app.

Number 2 is a big one. I'd like users to be able to sign in to the doc site to create and share themes. Every component page would include a sidebar for editing the theme variables for the component you are viewing. Changes would be compiled and applied on the fly.

Taking over CSS would allow us to fix things we have been unable to fix in the past. It would also allow us to add features we have been unable to add.

MVP

I'm toying with the "Docs as a theme designer and sharing app" in #2938.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[JonDum]

I like this idea a lot. Semantic isn't as active as it used to be and there's a lot of power we could be harnessing if SUIR "took control" so to speak. It also opens the doors for some things like css-modules should the need arise.

In the circumstance that SUI is updated, how would that be handled? Would we try to back port the changes to maintain consistency?

[aminland]

Re: Consistency, is that really necessary? I get the semantic-ui name has really helped get this project off the ground, but the lack of active development on the underlying library really calls for action and a hard fork. I say simply drop the semantic name, and provide plenty of perpetual thanks for the contributors of the root project.

Re the CSS stuff:
Step 1, include all the less files directly.
Step 2, gradually refactor the less files to actually use less features, and nest css properly. This way we can get rid of the tons of important declarations that are used all over the place.

When the less files actually use less features, theming will become much simpler, including allowing folks to do custom things like add ripples effects to buttons, and have them applied to all variants of buttons.

Doing it gradually and maintaining the LESS dependency will ensure compatibility and provides people an easy migration path.

[levithomason]

Thanks for the feedback guys. I agree wholeheartedly with the statements here.

I also don't think we need to worry about 100% consistency. If anything, I think we can make more things consistent moving forward. We've talked about this in the MANIFESTO.md for Stardust (essentially a hard fork effort).

I think where we are headed is to have Stardust run alongside of SUIR. Initially, I had thought Stardust would really be SUIR v2, however, the changes there are drastic enough that I think we'll brand it as "Stardust" only. It is heavily inspired by SUI, but will not be close enough at completion to be considered an update.

As for SUIR, I think pulling in the styles here is a good move and will ensure the future of the project. Maybe someday, we can converge the efforts in Stardust with SUIR and or SUI. Until then, we should move forward.

[brianespinosa]

In the long run for SUIR this is probably the best solution. There are SO many questions about how the styles work or for style related issues that we can simply not solve. It doesn't matter how well we document the solutions. And the experience for the user when they have to dig in to customizing styles is not the best and basically requires you to install SUI core if you want all of the theming and tooling that is part of it.

Not to mention when there are massive, breaking changes that we have no idea about and then all of a sudden they hit and we have to scramble to try to support a community when we all have our main work taking priority.

Issues like this one are also another problem. When something major in the main SUI library gets updated, we have to move to make a fix... and when inevitable bugs pop up, part of our work is trying to react to an already slow moving project. Semantic-Org/Semantic-UI#6185 (comment)

No disrespect at all to SUI core of course. When things get busy on other fronts, it is completely understandable that work on open source projects is lower priority. Having styles here where we can at least offer immediate solutions and also shelter users of the library from other potential upstream issues I think is going to lead to an overall better user experience.

[levithomason]

@jlukic is flying out tomorrow to meet about Stardust and some other collaboration stuff. I will discuss this with him then as well.

[brianespinosa]

In that case... it might be worth exploring the idea of moving things to a monorepo somehow. Or at least discussing what that might look like. There could still be separate read only repos that get generated and PRs there would go upstream to the mono where they come down to the separates.

For the styles, the build tools that @jlukic built with gulp are great. It would be awesome if there was a way for us to logically maintain that in some way. Not sure if that's the best way moving forward with the modern frontend ecosystem though. I know there is also an Angular flavor of SUI. I do not have visibility on how this impacts them.

This is mostly a brain dump. Just throwing ideas to see if anything sticks.

[levithomason]

This is mostly a brain dump. Just throwing ideas to see if anything sticks.

Definitely. I have similar ambitions for taking a more cohesive approach to how Semantic Org handles sharing specifications, tooling, and styles. We need a better story here.

As for Stardust, we'll be adding pretty robust theme editing experiences right into the doc site. We have a branch that enables each example to become aware of which theme values it is using and expose those to the user to play with in a form. This will quickly grow into color pickers, range sliders, etc and essentially become a full blown theme designer. At that point, I want users to be able to "Sign in with GitHub" to save/share/spin themes.

The power that will be shown there is pretty impressive already, but it is going to get a whole lot better. Add to this the fact that Stardust is also tackling Accessibility, RTL, and a host of other pains out of the gate and the future is looking good. I want to make sure all those goodies don't get locked up in Stardust alone, but are open to the world to compose in their framework or app as well.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[aminland]

Any updated thoughts on this?

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[colinramsay]

I appreciate that the core team has little or no time to work on this right now, but to my eyes it seems fundamental to the progression of SUIR. It would be good to get an official update on where the project's heading, and if that just means the current state of minor improvement releases then so be it.

[levithomason]

I agree. We're in a slow period, but by no means stopped. We will continue to make bug fixes and minor updates for now.

The reason we are not moving forward with this at full pace is largely because we do not want to fracture Semantic UI as an ecosystem. There is a certain tone, quality, and vision to Semantic's components and we do not want to harm that by deviating with our own updates.

I keep in close contact with Jack (original SUI author) on this issue and the future of the library. We have many plans and are still working in the background on much larger picture items. Semantic is by no means dead and we haven't left. Just making sure the next phase of development is both high quality and sustainable.

Thanks for your understanding and patience.

[colinramsay]

Thank you very much for the reply - I look forward to hearing more about future developments!

[ntarocco]

I keep in close contact with Jack (original SUI author) on this issue and the future of the library. We have many plans and are still working in the background on much larger picture items. Semantic is by no means dead and we haven't left. Just making sure the next phase of development is both high quality and sustainable.

@levithomason thank you for this info. Could you please just, very quickly, give us some more details about the dev. of SUI? There is no activity on the repo since October 2018, I think it should stated if dev. will be resumed or not.
People (me! :)) looking for UI frameworks need to have elements to decide if SUI + SUIR is a candidate to be evaluated or to be immediately discarded... At this moment, I am discarding it... :(

[layershifter]

I will say that you can use Fomantic UI (https://fomantic-ui.com/) as drop in replacement for now.

[ntarocco]

@layershifter thank you, but I read your comment here during my investigation, you are actually not recommending it, or am I wrong? :)
Do you have any idea if at some point Semantic-UI development will be resumed?

The point is that I can be happy with the current status of SUI and SUIR, I am just wondering if there will be any support in case of issues in the long term...

[layershifter]

I am closing this issue as proposed thing will never happen due resources limits.

---

@ntarocco things changed, see my comment (#3397). For now, I definitely recommend to switch to Fomantic UI.