How to use css frameworks with jss: bootstrap, material.

[zerkalica]

Can jss combine global-defined styles?

Example, using styles from framework free Material Design lite

const style = jss.createStyleSheet({
   button: {
      extendGlobal: 'mdl-button mdl-js-button mdl-button--fab mdl-button--colored'
   }
})

style.classes.button

Is there bootstrap or material, ported to jss (framework-free pure functions with cssx and jsx)?

For example: bootstrap, ported to css-modules.

[kof]

1. you would need to add those classes to your element or we could add the possibility of using global classes in jss-extend plugin
2. no, I always wanted to port bootstrap to jss but didn't have time for that, feel free to do it! Also maybe there is a way to convert bootstrap to jss, there will be adjustments needed in cli

[zerkalica]

I think, people need possibility of using global classes in jss-extend. In this case jss - abstraction layer between any css-framework and application code. We don't need to touch html or jsx, if css classnames changed and we will be able to migrate from global-css classes to pure jss little by little.

It's hard to manual parse and maintain tons of scss files and converts them to jss functions. May be create smart scss to jss converter?

[kof]

scss/stylus to jss converter would be also part of the cli repository, also on my very long todo list.

[kof]

I think we can introduce jss-compose #265

[yantakus]

@kof jss-compose is a great tool, but scss to jss converter would give us possibility to convert variables of a scss library into js ones and use them with jss in components. This is the most significant advantage of css libraries in my opinion - when you are able to have variables for screen sizes (media queries), colors, sizing, etc. And then use them throughout the app.

Importing of compiled css files prevents us from using variables and editing them. Of course we can change them in scss and compile to css again when needed, but it still doesn't allow us to import variables into jss-powered styles.

[kof]

yes, scss2jss converter is also on the roadmap #166

[kof]

Feel free to help.