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

JavaScriptures 3 - Styled Components

JavaScriptures 3 - Styled Components

Artsy Open Source

April 11, 2018
Tweet

More Decks by Artsy Open Source

Other Decks in Programming

Transcript

  1. Styled Components
    Let style be gathered together unto one place
    JavaScriptures III
    Roop and Jon

    View Slide

  2. “styled-components” is a Javascript library
    ● that allows you to style React UIs
    ● and utilises the CSS and JS you already know
    ● while promoting maintainable, component-centric architecture
    What are Styled Components?

    View Slide

  3. // App.js
    const App = () => (

    Hello, World

    )
    What do they look like?
    // Title.js
    const Title = (props) => {
    return (

    {props.children}

    )
    }
    // Title.css
    h1.title {
    font: bold 24px sans-serif;
    color: purple;
    }
    Without styled components

    View Slide

  4. What do they look like?
    // App.js
    const App = () => (

    Hello, World

    )
    // Title.js
    import styled from "styled-components"
    const Title = styled.h1`
    font: bold 24px sans-serif;
    color: purple;
    `
    With styled components
    function
    argument(s)

    View Slide

  5. // in document
    <br/>.fyUoxx {<br/>font: bold 24px sans-serif;<br/>color: purple;<br/>}<br/>
    Where’d the styles actually go?
    // App.js
    const App = () => (

    Hello, World

    )
    at runtime,
    transforms
    into
    // in document


    Hello, World


    View Slide

  6. It’s just CSS!
    What’s so great about Styled Components?
    const EditionSetHeader = styled.div`
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px gray;
    margin-bottom: 15px;
    padding-bottom: 10px;
    `
    const Description = styled.div`
    color: #999999;
    padding-top: 20px;
    display: none;
    @media (min-width: 768px) {
    display: block;
    }
    `

    View Slide

  7. But it’s not just CSS
    ● Vendor prefixing, e.g.
    -webkit-text-orientation: sideways;
    ● Nested and parent selectors …
    What’s so great about Styled Components?
    const ImageLink = styled.a`
    border: solid 1px gray;
    &:hover {
    border-color: purple
    }
    img {
    opacity: 0.5
    }
    `

    View Slide

  8. const fonts = {
    sans: "'Avant Garde', sans-serif",
    serif: "Garamond, serif",
    }
    Also, it’s just Javascript!
    ● Share named constants and
    chunks of CSS easily
    What’s so great about Styled Components?
    import { fonts } from "shared/stuff"
    const Name = styled.div`
    font-family: ${fonts.sans}
    `

    View Slide

  9. const Button = styled.button`
    background: ${ (props) =>
    (props.primary ? "black" : "lightGray") };
    color: ${ (props) =>
    (props.primary ? "white" : "black") };
    `
    Also, it’s just Javascript!
    ● Make your component adapt to its props
    What’s so great about Styled Components?
    const Tools = () => (

    Cancel
    Save

    )

    View Slide

  10. const Artists = styled.div`
    font: ${fonts.sans};
    margin: 1em 0;
    `
    const Title = styled.div`
    font: ${fonts.serif};
    `
    const Button = styled.button`
    ${(props) => (props.primary && ' background: black')}
    `
    const Artwork = ({ artists, title, forSale }) =>
    (


    {artists.map(a => a.name).join(‘, ‘)}

    {title || 'untitled'}
    {forSale && Buy}

    )
    Putting it together

    View Slide

  11. ● We will refactor the styles in our JavaScriptures app
    ● Visit https://github.com/artsy/javascriptures
    ● Go into project #4’s README
    ● Follow along on CodeSandbox.io
    Let’s code!

    View Slide

  12. ● Build up your UI from small, declarative visual primitives
    ● Separate presentation from structure at the component level
    ● Leverage the CSS and JS you already know
    ● Eliminate conflicts and cruft
    What we’ve seen

    View Slide

  13. ● Style third-party libraries
    ● Theming
    ● Server-side rendering / streaming
    ● React Native
    What else can Styled Components do?

    View Slide

  14. Official Website
    https://www.styled-components.com/
    Tutorial
    https://hackernoon.com/styled-components-in-action-723852f2a93d
    About Tagged Template Literals
    https://mxstbr.blog/2016/11/styled-components-magic-explained/
    Future roadmap
    https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c
    Early thoughts on CSS in JS
    http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html
    Further reading

    View Slide

  15. View Slide