Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styling Intro

Max Stoiber
February 28, 2017

Styling Intro

React in Flip Flops satyling talk

Max Stoiber

February 28, 2017
Tweet

More Decks by Max Stoiber

Other Decks in Technology

Transcript

  1. Styling React
    Applications
    Max Stoiber
    @mxstbr
    Open Source Developer, Thinkmill

    View full-size slide

  2. Let’s talk about styling

    View full-size slide

  3. The Checklist

    View full-size slide

  4. No build requirements
    Small and lightweight
    Supports global CSS
    Supports entirety of CSS
    Colocated
    Isolated
    Easy to override
    Theming
    Server side rendering
    No wrapper components

    View full-size slide

  5. There is no ✅✅✅ solution

    View full-size slide

  6. Every app is different

    View full-size slide

  7. fake.twitter.com

    View full-size slide

  8. fake.twitter.com

    View full-size slide

  9. fake.twitter.com


    View full-size slide

  10. fake.twitter.com




    View full-size slide

  11. 1. CSS
    2. Inline Styles
    3. CSS Modules
    4. styled-components
    The Methods

    View full-size slide

  12. 1. CSS
    2. Inline Styles
    3. CSS Modules
    4. styled-components
    The Methods

    View full-size slide

  13. html {
    color: #292f33;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3125;
    }
    .container {
    margin: 0 auto;
    width: 100%;
    }
    @media screen and (min-width: 360px) {
    html {
    font-size: 15px;
    }
    .container {
    max-width: 400px;
    }
    }

    View full-size slide

  14. .tweet__content {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5em;
    margin: 0;
    padding: .65625rem 0 .98438rem;
    }
    .tweet__content a {
    color: #1da1f2;
    }
    .tweet__content a:hover {
    text-decoration: underline;
    }

    View full-size slide

  15. const Content = ({ text, media }) => (

    className=“tweet__content"
    dangerouslySetInnerHTML={{ __html: text }}
    />
    className=“tweet__media"
    target=“_blank"
    href={media.expanded_url}
    >
    className=“tweet__image"
    src={media.media_url_https}
    alt=“"
    />


    );

    View full-size slide

  16. No build requirements
    Small and lightweight
    Supports global CSS
    Supports entirety of CSS
    Colocated
    Isolated
    Easy to override
    Theming
    Server side rendering
    No wrapper components







    (Custom Properties)


    View full-size slide

  17. 1. CSS
    2. Inline Styles
    3. CSS Modules
    4. styled-components
    The Methods

    View full-size slide

  18. const styles = {
    container: {
    margin: '0 auto',
    width: '100%'
    }
    }

    View full-size slide

  19. const styles = {
    content: {
    fontSize: '1.25rem',
    fontWeight: '300',
    lineHeight: '1.5em',
    margin: 0,
    padding: '.65625rem 0 .98438rem'
    }
    }

    View full-size slide

  20. const Content = ({ text, media }) => (

    style={styles.content}
    dangerouslySetInnerHTML={{ __html: text }}
    />
    style={styles.media}
    target=“_blank"
    href={media.expanded_url}
    >
    style={styles.image}
    src={media.media_url_https}
    alt=“"
    />


    );

    View full-size slide

  21. No build requirements
    Small and lightweight
    Supports global CSS
    Supports entirety of CSS
    Colocated
    Isolated
    Easy to override
    Theming
    Server side rendering
    No wrapper components










    View full-size slide

  22. 1. CSS
    2. Inline Styles
    3. CSS Modules
    4. styled-components
    The Methods

    View full-size slide

  23. html {
    color: #292f33;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3125;
    }
    .container {
    margin: 0 auto;
    width: 100%;
    }
    @media screen and (min-width: 360px) {
    html {
    font-size: 15px;
    }
    .container {
    max-width: 400px;
    }
    }

    View full-size slide

  24. .content {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5em;
    margin: 0;
    padding: .65625rem 0 .98438rem;
    }
    .content a {
    color: #1da1f2;
    }
    .content a:hover {
    text-decoration: underline;
    }

    View full-size slide

  25. import styles from './content.css';
    const Content = ({ text, media }) => (

    className={styles.content}
    dangerouslySetInnerHTML={{ __html: text }}
    />
    className={styles.media}
    target=“_blank"
    href={media.expanded_url}
    >
    className={styles.image}
    src={media.media_url_https}
    alt=“"
    />


    );

    View full-size slide

  26. /* content.css */
    .content { /* … */ }
    .content__content__a452s { /* … */ }
    /* home.css */
    .content { /* … */ }
    .home__content__juz65 { /* … */ }

    View full-size slide

  27. No build requirements
    Small and lightweight
    Supports global CSS
    Supports entirety of CSS
    Colocated
    Isolated
    Easy to override
    Theming
    Server side rendering
    No wrapper components
    ❌ (requires webpack)



    (has to be separate file)





    View full-size slide

  28. If you’re writing React, you
    have access to a more
    powerful styling construct
    than CSS class names. You
    have components.”
    – Michael Chan, @chantastic

    View full-size slide

  29. 1. CSS
    2. Inline Styles
    3. CSS Modules
    4. styled-components
    The Methods

    View full-size slide

  30. const styles = {
    color: '#000',
    };
    Inline styles vs. CSS-in-JS
    // Inline styles:

    // CSS-in-JS (requires lib):

    View full-size slide

  31. import styled from 'styled-components';
    const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    `;
    const Wrapper = styled.section`
    color: palevioletred;
    padding: 4em;
    width: 100%;
    height: 100%;
    background: papayawhip;
    `;

    View full-size slide

  32. import styled from 'styled-components';
    const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    `;
    const Wrapper = styled.section`
    color: palevioletred;
    padding: 4em;
    width: 100%;
    height: 100%;
    background: papayawhip;
    `;

    View full-size slide

  33. import styled from 'styled-components';
    const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    `;
    const Wrapper = styled.section`
    color: palevioletred;
    padding: 4em;
    width: 100%;
    height: 100%;
    background: papayawhip;
    `;
    styled.h1

    View full-size slide

  34. import styled from 'styled-components';
    const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    `;
    const Wrapper = styled.section`
    color: palevioletred;
    padding: 4em;
    width: 100%;
    height: 100%;
    background: papayawhip;
    `;

    View full-size slide

  35. import styled from 'styled-components';
    const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    `;
    const Wrapper = styled.section`
    color: palevioletred;
    padding: 4em;
    width: 100%;
    height: 100%;
    background: papayawhip;
    `;

    View full-size slide

  36. const App = () => (


    Hello World, this is my first styled component!


    );
    ReactDOM.render(
    ,
    document.getElementById(‘#app')
    );

    View full-size slide

  37. styled-components

    View full-size slide

  38. Adapting based on props

    View full-size slide

  39. Normal
    Primary

    View full-size slide

  40. const Button = styled.button`
    /* Adapt the colors based on primary prop */
    background: ${(props) =>
    props.primary ? 'palevioletred' : 'white'
    };
    color: ${(props) =>
    props.primary ? 'white' : 'palevioletred'
    };
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    `;
    export default Button;

    View full-size slide

  41. Normal
    Primary

    View full-size slide

  42. styled-components

    View full-size slide

  43. Theming Built In

    View full-size slide

  44. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View full-size slide

  45. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View full-size slide

  46. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View full-size slide

  47. import styled from 'styled-components';
    const Button = styled.button`
    /* Adjust background based on the theme */
    background: ${props => props.theme.primary};
    color: white;
    `;

    View full-size slide

  48. styled-components

    View full-size slide

  49. const redTheme = {
    primary: 'palevioletred',
    };
    const greenTheme = {
    primary: 'mediumseagreen',
    };
    // …

    I'm red!


    I'm green!

    View full-size slide

  50. styled-components

    View full-size slide



  51. I'm still red!


    View full-size slide




  52. I'm still red!



    View full-size slide





  53. I'm still red!




    View full-size slide






  54. I'm still red!





    View full-size slide







  55. I'm still red!






    View full-size slide








  56. I'm still red!







    View full-size slide









  57. I'm still red!








    View full-size slide










  58. I'm still red!









    View full-size slide

  59. Full ReactNative Support

    View full-size slide

  60. import styled from 'styled-components/native';
    const Wrapper = styled.View`
    background-color: papayawhip;
    flex: 1;
    justify-content: center;
    align-items: center;
    `;
    const Title = styled.Text`
    font-size: 20;
    text-align: center;
    margin: 10;
    color: palevioletred;
    font-weight: bold;
    `;

    View full-size slide

  61. import styled from 'styled-components/native';
    const Wrapper = styled.View`
    background-color: papayawhip;
    flex: 1;
    justify-content: center;
    align-items: center;
    `;
    const Title = styled.Text`
    font-size: 20;
    text-align: center;
    margin: 10;
    color: palevioletred;
    font-weight: bold;
    `;

    View full-size slide

  62. import styled from 'styled-components/native';
    const Wrapper = styled.View`
    background-color: papayawhip;
    flex: 1;
    justify-content: center;
    align-items: center;
    `;
    const Title = styled.Text`
    font-size: 20;
    text-align: center;
    margin: 10;
    color: palevioletred;
    font-weight: bold;
    `;

    View full-size slide

  63. import styled from 'styled-components/native';
    const Wrapper = styled.View`
    background-color: papayawhip;
    flex: 1;
    justify-content: center;
    align-items: center;
    `;
    const Title = styled.Text`
    font-size: 20;
    text-align: center;
    margin: 10;
    color: palevioletred;
    font-weight: bold;
    `;

    View full-size slide

  64. import styled from 'styled-components/native';
    const Wrapper = styled.View`
    background-color: papayawhip;
    flex: 1;
    justify-content: center;
    align-items: center;
    `;
    const Title = styled.Text`
    font-size: 20;
    text-align: center;
    margin: 10;
    color: palevioletred;
    font-weight: bold;
    `;

    View full-size slide

  65. class StyledComponentsNative extends Component {
    render() {
    return (


    Hello World, this is my first native styled component!


    );
    }
    }

    View full-size slide

  66. No build requirements
    Small and lightweight
    Supports global CSS
    Supports entirety of CSS
    Colocated
    Isolated
    Easy to override
    Theming
    Server side rendering
    No wrapper components










    View full-size slide

  67. Get styling!
    git checkout 4-styling

    View full-size slide