Tweet
Tweet

Slide 1

Slide 1 text

hi!

Slide 2

Slide 2 text

Slide 3

Slide 3 text

smart social intelligence

Slide 4

Slide 4 text

bootstrap your application with beautiful material design components react toolbox

Slide 5

Slide 5 text

or why the f*** did you build this thing? what’s special about it?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

but still there are other issues… benefits of traditional css.

Slide 8

Slide 8 text

configuration customization theming

Slide 9

Slide 9 text

really painful stuff… configuration

Slide 10

Slide 10 text

also configuring webpack is not easy we can’t force people to use any tool

Slide 11

Slide 11 text

import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; import style from './style.css'; const Button = ({ children, className, icon, ...other }) => ( {icon && } {children} ); export default ripple()(Button);

Slide 12

Slide 12 text

import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; import style from './style.css'; const Button = ({ children, className, icon, ...other }) => ( {icon && } {children} ); export default ripple()(Button);

Slide 13

Slide 13 text

import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); export default ripple()(Button);

Slide 14

Slide 14 text

import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( ); export default RTButton;

Slide 15

Slide 15 text

import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( ); export default RTButton;

Slide 16

Slide 16 text

import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( ); export default RTButton;

Slide 17

Slide 17 text

import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( ); export default RTButton;

Slide 18

Slide 18 text

github.com/javivelasco/react-css-themr react-css-themr

Slide 19

Slide 19 text

higher order component provider

Slide 20

Slide 20 text

import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); export default themr('RTButton')( ripple()(Button) );

Slide 21

Slide 21 text

import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); export default themr('RTButton')( ripple()(Button) );

Slide 22

Slide 22 text

import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); export default themr('RTButton')( ripple()(Button) );

Slide 23

Slide 23 text

import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( , document.getElementById('app') );

Slide 24

Slide 24 text

import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( , document.getElementById('app') );

Slide 25

Slide 25 text

import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( , document.getElementById('app') );

Slide 26

Slide 26 text

import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import theme from 'react-toolbox/lib/themes/default.js'; import App from './App.js'; render( , document.getElementById('app') );

Slide 27

Slide 27 text

once configured it is really convenient i wanna keep implicit css requires!

Slide 28

Slide 28 text

// Button/index.js import { themr } from 'react-css-themr'; import Button from './Button.js'; import theme from './theme.css'; export default themr('RTButton', theme)(Button);

Slide 29

Slide 29 text

dependencies should come with css too you should decorate once

Slide 30

Slide 30 text

import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };

Slide 31

Slide 31 text

import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };

Slide 32

Slide 32 text

import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };

Slide 33

Slide 33 text

import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( {icon && } {children} ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };

Slide 34

Slide 34 text

// Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);

Slide 35

Slide 35 text

// Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);

Slide 36

Slide 36 text

// Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);

Slide 37

Slide 37 text

// Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);

Slide 38

Slide 38 text

it’s still just css customization

Slide 39

Slide 39 text

there is kind of an api of classnames it’s a well-known set of properties you can pass your own! but just what you need

Slide 40

Slide 40 text

.button { background: blue } .icon { color: red; }

Slide 41

Slide 41 text

import React from 'react'; import Button from 'react-toolbox/lib/button'; import theme from './custom.css'; export default props => ;

Slide 42

Slide 42 text

themr builds classnames for you you still deal with selector priorities but it's pretty much working

Slide 43

Slide 43 text

¯\_(ツ)_/¯

Slide 44

Slide 44 text

with postcss properties theming

Slide 45

Slide 45 text

react-toolbox is shipped with css variables works in modern browsers (not ie) so maybe you need to transform the css

Slide 46

Slide 46 text

but it’s awesome! we are shipping a script to build your themes no need to setup, just run the script you’ll get your custom theme.css and theme.js

Slide 47

Slide 47 text

this is running in the browser let me show you something