JavaScriptures 3 - Styled Components

https://github.com/artsy/javascriptures/tree/master/3_intro-to-styled-components

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