Create all styles with styled components

[AlgusDark]

Maybe creating a new repo or rewrite bloomer helpers to have same logic as Bulma but with styled components instead of sass

[floric]

Hey Algus, thanks for this great project. I started something really similar until I found this! Unfortunately ReBulma is quite outdated. If you like I'd like to contribute. Did you consider support glamorJS?

[AlgusDark]

Hi @floric, thanks, any help is welcome :) I didn't knew about ReBulma until a few days.

I was thinking about glamorJS or styled-components. Maybe rewrite Bulma Sass files to an Object to be injected with ThemeProvider, that way you could do with Blumer the same as Bulma customization.

Right now, in my internal discussion, styled-components is winning. So I opened this issue for discussion so others can talk about it.

What would you like?

[KaRkY]

Hi,

I would like to see this project rewritten in styled-components or maybe JSS. Maybe then components like DatePicker, FileUpload etc. could be added

[floric]

Hey :) I've been experimenting a bit the last days. Unfortunately, I only got used to glamor so far. So my opinion might be a bit unhelpful. Hopefully next week I could support with better proposals.

Is the idea to get something like hybrid solution based on the customizable SASS theme or overwrite it completely?

[AlgusDark]

@KaRkY First of all, thanks to be interested on this project. The idea behind styled-components is to create new components/elements/anything for Bloomer, but I believe that that's going to be for V2, right now you can see a few issues regarding V1 -> https://github.com/AlgusDark/bloomer/milestone/1

@floric I believe that styled-components use glamor under the hood, so we can opt for styled-components. The idea is to overwrite completely using styled-components and polished. So all css would be name-scoped and we are going to create a theme for bloomer to be injected on <ThemeProvider/> from styled-components. All should be modular (as Bulma doest with multiple sass files), so the user can overwrite some variables in the theme object to customization. But I believe that that's going to be for V2, right now you can see a few issues regarding V1 -> https://github.com/AlgusDark/bloomer/milestone/1

[webernir]

I would love to see Bulma uses styled-components.
what's the plan? can I help?

[AlgusDark]

@webernir of course you can help. Today I'm going to start defining the Roadmap for 1.0 so we can start coding. You can help with comments and code. I'll tag you once roadmap draft is up.

[AlgusDark]

@webernir Simple Roadmap to 1.0.0

[webernir]

@AlgusDark is there a branch for that?

[AlgusDark]

@webernir Right now, we have branch bloomer-1.0.0. But I'm working on branch bulma-0.5.0, this one has the new Navbar. After finish this one, I'll start working on the bloomer-1.0.0 with styled components.

[stern-shawn]

If you like glamor, might I suggest looking into Glamorous? It is essentially glamor with an API similar to styled-components, but using object literals instead of string templates. It also supports Theme Provider and other such features that you'd need.

I would love to contribute, however:

• I don't have any TS experience
• Other than having bulma as a dependency in package.json and applying the bulma class names to the element className prop, I'm not sure how the styles are actually being applied (I usually need to do a require('/path/to/bulma') somewhere in my root app.js or similar file. I've only been using CSS Modules up to this point, so this is probably me just being stupid 😞

[AlgusDark]

@stern-shawn : Hi, thanks for the suggestion. Although we discussed Glamorous to be used on Bloomer, we selected Styled-Components because of the tagged templates and the support that has behind :)

Of course you can contribute, If no TS experience, don't worry, you can learn :) For the second point, I'm not clear if that's a question, hehehe. What we need to do, is to bring all *.sass files from bulma to JS, so we can have a Bloomer theme to be injected trough <ThemeProvider>, also, if the user needs to create a new Theme, then can overwrite variables like primary to change base colors and other stuff :)

[stern-shawn]

@AlgusDark Great to know, thank you for letting me know about the decision!

For the second point, that's actually what I'm curious about: how are you bringing the *.sass from bulma into the project and exposing it your components?

I can see in the source files that you are applying different bulma classNames to the components based on props. That part definitely makes sense. :) The part I'm confused about is how bulma is actually being imported so that those classNames result in the styles being applied.

For example in a project I am working on with CSS Modules, if I want to style a component with bulma I need to import it using import bulma from '~bulma/bulma.sass'; and then can apply bulma styling in this way: <div className={bulma.container}></div>. If I simply put <div className="container"></div> the bulma styles won't be applied, even though I have bulma as a dependency in package.json.

tl;dr I've looked around in the source and don't see any such imports or requires of bulma, so I'm curious how the css is reaching your components. Hopefully that makes my question slightly clearer? 😬

[AlgusDark]

@stern-shawn Ohhh, actually we leave that to the user, you just need to have global bulma css in your project.

The fun part here, is that Bloomer V1 is going to be a complete rewrite, and we're going to have js files with objects that can be injected trough ThemeProvider from styled-components.

That way, you could do something like:

<Theme flavor="bloomer">
  <Button />
</Theme>

And Button has Bloomer default primary/secondary defined by us. That way, a final user can create his own theme or overwrite the default one, just like bulma let's you do overwrite thanks to SASS files.

[stern-shawn]

@AlgusDark Ahh that makes more sense! I feel silly for not having thought of that option.

Awesome, I will have to take a look over the weekend!

[AlgusDark]

Cool, next week I'm going to work in a first implementation so it should be easier to start doing some collaboratin with that starting point.

Thanks to be interested in this project :)

El 28 jul. 2017 15:05, "Shawn Stern" [email protected] escribió:

@AlgusDark https://github.com/algusdark Ahh that makes more sense! I feel silly for not having thought of that option.

Awesome, I will have to take a look over the weekend!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AlgusDark/bloomer/issues/45#issuecomment-318749459, or mute the thread https://github.com/notifications/unsubscribe-auth/AAx-qJ2qkW0zUfyJC57T180eKWIkfT_dks5sSj8EgaJpZM4N2lqr .

[ghalex]

Hi @AlgusDark, first this is an awesome project, congrats. Second I saw this issues and I recently worked on something called styled-utils and I was inspired by your code to write the modifiers in styled-components, maybe it can help you in writing bloomer with styled-components.

Check this components for some examples on how I used styled-utils

[AlgusDark]

Thanks @ghalex, your project looks really cool. I'm really excited in the new bloomer implementation with styled-components, since that way the user could create themes by himself or use the default one or do some customizations.

Right now, we're working on bring new components from bulma (Dropdown and other two more), then we can work again with the styled-components work :)

[seanWLawrence]

Hey @AlgusDark, this repo is great! I was just about to start working on recreating this with styled components myself to add the option to update theme styles with the Netlify CMS dashboard and saw you're already working on it.

Is there anything I can help with?

[AlgusDark]

@seanWLawrence Thanks for your comments. And I'm very sorry to this late answer, I was really busy. Next week we're going to start working on some implementation. The basic idea is to translate all SASS from bulma to styled-components with the help of polished. If you want to contribute, maybe we can open a slack so we can discuss the best approach and create issues here at github

[seanWLawrence]

@AlgusDark It’s all good, thanks for getting back to me.

And yes, I’d love to help - works great for me!

Sean W. Lawrence

On Feb 7, 2018, at 8:08 PM, Carlos Pérez Gutiérrez [email protected] wrote:

@seanWLawrence Thanks for your comments. And I'm very sorry to this late answer, I was really busy. Next week we're going to start working on some implementation. The basic idea is to translate all SASS from bulma to styled-components with the help of polished. If you want to contribute, maybe we can open a slack so we can discuss the best approach and create issues here at github

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[imcodingideas]

I like scss better because, at least I think so because we can have things like autoprefixer. Do styled-components offer this?

[stern-shawn]

@imcodingideas yes I believe everything generated through styled-components is processed via postcss. I started migrating a project at work to styled-components and I've noticed that all of the resulting css has vendor prefixing that I hadn't added previously.

[eugeneross]

Any update on this? Is there a repo with styled-components being used?

[AlgusDark]

Sorry, I moved to Japan and didn't had a PC, now I can start with this.

[ghost]

what about bulma-styled-components? It seems this project has done just this.