Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme support #366

Closed
morenoh149 opened this issue Aug 3, 2016 · 7 comments
Closed

Theme support #366

morenoh149 opened this issue Aug 3, 2016 · 7 comments
Labels
question

Comments

@morenoh149
Copy link

Does this library intend to support semantic-ui theming? I'm currently using https://github.com/Semantic-Org/Semantic-UI-CSS and dropping it into a react project. But the biggest limitation is lack of theme support. However, I don't want to add all of SemanticUI in my react project either. Could stardust help with this?
@levithomason
Copy link
Member

Yep, we use multiple themes with Stardust here at TechnologyAdvice. Stardust replaces SUI markup and jQuery plugins with React components. You can use any SUI css theme you like on top.

@levithomason
Copy link
Member

levithomason commented Aug 3, 2016 •
edited
Loading

I should note, we are also using semantic-ui-css for the doc site. You can take a look in docs/app/index.ejs to see where we included it. Also, our package.json where we are installing it for use in the docs.

Let me know if I missed anything and I'll re-open this issue. Cheers!

@morenoh149
Copy link
Author

documentation for this usecase would be amazing. Thanks for the reply.

@levithomason
Copy link
Member

Hm, perhaps I'm misunderstanding. I am under the impression this is already documented in the README.md under Usage. After creating your theme, just include it's css in the <head> of your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Stardust</title>

  <!-- SUI CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Just use any SUI theme css in place of the one included there ^. Let me know if I've misunderstood something.

@morenoh149
Copy link
Author

morenoh149 commented Aug 3, 2016 •
edited
Loading

I was expecting an analogue to site.variables or theme.config I could supply to stardust or include in the <head> to achieve theming. http://semantic-ui.com/usage/theming.html

@levithomason
Copy link
Member

levithomason commented Aug 3, 2016 •
edited
Loading

Ah, that would be rad. Unfortunately, this kind of theming is not reasonably possible with React components alone due to the cascading nature of CSS and the limited awareness of components in a render tree. Moreover, changing variables requires a costly build step and recompile of the LESS to generate the new stylesheets. Unfortunately, this is far too slow to perform on the fly.

I've toyed with the idea of components handling theming, though, since it is so novel. I've also built in browser theme compilers in the distant past, like bootstyle for bootstrap. IMO the tech just isn't quite here yet to properly handle this kind of thing live in an app.

The good news is that in the meantime, you can go about theming as you normally would with any SUI site and just include the final result CSS when you're done.

@levithomason levithomason mentioned this issue Sep 7, 2016
Closed
This was referenced Nov 14, 2016
Closed
Closed
@levithomason levithomason mentioned this issue Dec 9, 2016
Open
@paschalidi
Copy link

Is this still the case? Meaning I have to just create a theme with semantic then just import the cdn ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@morenoh149 @paschalidi @levithomason