Skip to content

Instantly share code, notes, and snippets.

@victorouse

victorouse/preference.md

Last active October 10, 2019 23:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save victorouse/f7f2ddb3c78312443e67666a8296bf71 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save victorouse/f7f2ddb3c78312443e67666a8296bf71 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. victorouse revised this gist Oct 10, 2019. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -180,7 +180,7 @@ const App = () => (
    )
    ```

    # Theme UI
    # Theme UI (Optional)

    - [theme-ui.com/getting-started](https://theme-ui.com/getting-started)
    - [github.com/system-ui/theme-ui](https://github.com/system-ui/theme-ui)
    @@ -189,7 +189,7 @@ const App = () => (
    - 37kb bundle size
    - Created with emotion + styled-system
    - [@types/theme-ui](https://www.npmjs.com/package/@types/theme-ui)
    - **Built-in support for dark modes**
    - **Built-in support for dark mode**

    ## Examples

    @@ -209,7 +209,7 @@ const theme = {

    Inject theme via `ThemeProvider` and theme props become available via `sx` prop

    ```
    ```js
    /** @jsx jsx */
    import { jsx } from 'theme-ui'

    @@ -265,7 +265,7 @@ const theme = {

    And of course **dark mode**

    ```
    ```js
    const theme = {
    initialColorMode: 'light',
    colors: {
  2. victorouse revised this gist Oct 10, 2019. 1 changed file with 50 additions and 0 deletions.
    50 changes: 50 additions & 0 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -236,3 +236,53 @@ const App = () => (
    But how is this different from using just `styled-system` + `emotion`?

    > Theme UI uses @styled-system/css and the same theme spec that Styled System adheres to. Styled System is a much lower-level API that is not in any way coupled to React or Emotion. For example, Styled System works with Node.js, Vuejs, Svelte, and many other libraries. Theme UI is intended to be a higher-level abstraction specifically for use in React applications and includes features that will not likely be added to the core Styled System library.
    A slightly more complex example can be found [here](https://mitchgavan.com/styleguide-driven-development/), which from what I can see includes some extra nice-nice things like:

    - `Layout`: the root styled component for wrapping other layout components
    - `Container`: a centered area with a max-width
    - `Box` & `Flex`: are convenience components with a few style presets, similar to the ones found in [Rebass](https://rebassjs.org/reflexbox/).

    That can be configured via `theme`

    ```js
    const theme = {
    ...
    styles: {
    Layout: {
    color: 'text',
    backgroundColor: 'background',
    fontFamily: 'body',
    lineHeight: 'body',
    },
    Container: {
    maxWidth: 1160,
    padding: 3,
    },
    },
    }
    ```

    And of course **dark mode**

    ```
    const theme = {
    initialColorMode: 'light',
    colors: {
    text: '#392a25',
    muted: '#aaaaaa',
    background: '#f8f8f8',
    foreground: '#ffffff',
    primary: '#92b955',
    secondary: '#9f8a6d',
    modes: {
    dark: {
    text: '#ffffff',
    background: '#111111',
    foreground: '#333333',
    primary: '#1da1f2',
    },
    },
    }
    }
    ```
  3. victorouse revised this gist Oct 10, 2019. 1 changed file with 40 additions and 1 deletion.
    41 changes: 40 additions & 1 deletion preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,6 +72,7 @@ const Button = styled.button`
    - 18kb bundle size
    - [Mark Dalgleish twitter endorsement](https://mobile.twitter.com/markdalgleish/status/1107732365474848768)
    - [@types/styled-system](https://www.npmjs.com/package/@types/styled-system)
    - [Figma integration!](https://github.com/jxnblk/figma-theme)

    ## Examples

    @@ -187,13 +188,51 @@ const App = () => (
    - 33 open issues
    - 37kb bundle size
    - Created with emotion + styled-system
    - [@types/theme-ui](https://www.npmjs.com/package/@types/theme-ui)
    - **Built-in support for dark modes**

    ## Examples

    Define as theme as per `styled-system`

    ```js
    // TODO
    const theme = {
    colors: {
    primary: '#000e1a',
    secondary: '#fff',
    purple: '#007ce0',
    magenta: '#004175',
    },
    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
    }
    ```

    Inject theme via `ThemeProvider` and theme props become available via `sx` prop

    ```
    /** @jsx jsx */
    import { jsx } from 'theme-ui'
    const App = () => (
    <ThemeProvider theme={theme}>
    <div
    sx={{
    width: [
    1,
    1 / 2,
    1 / 4,
    ],
    p: 1,
    mb: 2,
    bg: 'purple',
    })}
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </div>
    </ThemeProvider>
    )
    ```

    But how is this different from using just `styled-system` + `emotion`?

    > Theme UI uses @styled-system/css and the same theme spec that Styled System adheres to. Styled System is a much lower-level API that is not in any way coupled to React or Emotion. For example, Styled System works with Node.js, Vuejs, Svelte, and many other libraries. Theme UI is intended to be a higher-level abstraction specifically for use in React applications and includes features that will not likely be added to the core Styled System library.
  4. victorouse revised this gist Oct 10, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -185,7 +185,7 @@ const App = () => (
    - [github.com/system-ui/theme-ui](https://github.com/system-ui/theme-ui)
    - 1k stars
    - 33 open issues
    - 37kb (`theme-ui`) + 3kb (`@mdx-js/react`) = 40kb bundle size
    - 37kb bundle size
    - Created with emotion + styled-system
    - **Built-in support for dark modes**

  5. victorouse revised this gist Oct 10, 2019. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -187,7 +187,6 @@ const App = () => (
    - 33 open issues
    - 37kb (`theme-ui`) + 3kb (`@mdx-js/react`) = 40kb bundle size
    - Created with emotion + styled-system
    -
    - **Built-in support for dark modes**

    ## Examples
  6. victorouse revised this gist Oct 10, 2019. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -179,5 +179,22 @@ const App = () => (
    )
    ```

    # Theme UI

    - [theme-ui.com/getting-started](https://theme-ui.com/getting-started)
    - [github.com/system-ui/theme-ui](https://github.com/system-ui/theme-ui)
    - 1k stars
    - 33 open issues
    - 37kb (`theme-ui`) + 3kb (`@mdx-js/react`) = 40kb bundle size
    - Created with emotion + styled-system
    -
    - **Built-in support for dark modes**

    ## Examples

    ```js
    // TODO

    ```


  7. victorouse revised this gist Oct 10, 2019. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -112,7 +112,11 @@ Can also be used as inline css, pulling values from the `theme` object (see: nex
    const Box = () => (
    <div
    css={css({
    width: [1, 1 / 2, 1 / 4],
    width: [
    1,
    1 / 2,
    1 / 4,
    ],
    p: 1,
    mb: 2,
    bg: 'purple',
    @@ -158,7 +162,11 @@ const App = () => (

    <div
    css={css({
    width: [1, 1 / 2, 1 / 4],
    width: [
    1,
    1 / 2,
    1 / 4,
    ],
    p: 1,
    mb: 2,
    bg: 'purple',
  8. victorouse revised this gist Oct 10, 2019. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -81,7 +81,6 @@ You can easily add common props to components with nice (and responsive) shortha
    import styled from '@emotion/styled'
    import { space, color, layout } from 'styled-system'

    // As a component
    const Box = styled.div({
    space,
    color,
    @@ -109,7 +108,7 @@ const Box = styled.div({

    Can also be used as inline css, pulling values from the `theme` object (see: next section)

    ```
    ```js
    const Box = () => (
    <div
    css={css({
  9. victorouse revised this gist Oct 10, 2019. 1 changed file with 45 additions and 2 deletions.
    47 changes: 45 additions & 2 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -81,13 +81,13 @@ You can easily add common props to components with nice (and responsive) shortha
    import styled from '@emotion/styled'
    import { space, color, layout } from 'styled-system'

    // As a component
    const Box = styled.div({
    space,
    color,
    layout
    })


    <Box
    // Arrays as values to set styles responsively using a mobile-first approach
    width={[
    @@ -107,6 +107,23 @@ const Box = styled.div({
    </Box>
    ```

    Can also be used as inline css, pulling values from the `theme` object (see: next section)

    ```
    const Box = () => (
    <div
    css={css({
    width: [1, 1 / 2, 1 / 4],
    p: 1,
    mb: 2,
    bg: 'purple',
    })}
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </div>
    )
    ```

    Setting up theme variables are defined as such

    ```js
    @@ -125,7 +142,33 @@ Then injected via the `ThemeProvider`

    ```js
    const App = () => (
    <ThemeProvider theme={theme}>{/* application elements */}</ThemeProvider>
    <ThemeProvider theme={theme}>
    <div>
    <Box
    width={[
    1,
    1 / 2,
    1 / 4,
    ]}
    p={1}
    mb={2}
    bg="purple"
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </Box>

    <div
    css={css({
    width: [1, 1 / 2, 1 / 4],
    p: 1,
    mb: 2,
    bg: 'purple',
    })}
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </div>
    </div>
    </ThemeProvider>
    )
    ```

  10. victorouse revised this gist Oct 10, 2019. 1 changed file with 1 addition and 12 deletions.
    13 changes: 1 addition & 12 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,7 @@
    - 216 open issues
    - 80kb bundle size
    - [Comparison with styled-components](https://github.com/jsjoeio/styled-components-vs-emotion)
    - [Companies that use emotion](https://github.com/emotion-js/awesome-emotion#examples-in-the-wild)

    ## Examples

    @@ -128,17 +129,5 @@ const App = () => (
    )
    ```

    Or we could make some nice hooks to achieve a similar effect

    ```
    const ThemeContext = useContext(theme)
    const MyComponent = () => {
    const { colors } = useContext(ThemeContext)
    return (
    <Box color={colors.primary} />
    )
    }
    ```

  11. victorouse revised this gist Oct 10, 2019. 1 changed file with 43 additions and 5 deletions.
    48 changes: 43 additions & 5 deletions preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -88,19 +88,57 @@ const Box = styled.div({


    <Box
    // Note the array for the width prop:
    // - Breakpoint #1: 100% width
    // - Breakpoint #2: 50% width
    width={[1, 1 / 2]}
    // Arrays as values to set styles responsively using a mobile-first approach
    width={[
    1, // 100% below the smallest breakpoint (all viewports)
    1 / 2, // 50% from the next breakpoint and up
    1 / 4, // 25% from the next breakpoint and up
    ]}
    // These values are from a standard spacing scale, default to powers of 2
    // - p={1} -> padding={1} -> padding="2px"
    // - mb={2} -> marginBottom={2} -> marginBottom="4px"
    p={1}
    mb={2}
    // Sets the background-color to whatever value passed to bg here
    bg="tomato"
    bg="purple"
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </Box>
    ```

    Setting up theme variables are defined as such

    ```js
    const theme = {
    colors: {
    primary: '#000e1a',
    secondary: '#fff',
    purple: '#007ce0',
    magenta: '#004175',
    },
    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
    }
    ```

    Then injected via the `ThemeProvider`

    ```js
    const App = () => (
    <ThemeProvider theme={theme}>{/* application elements */}</ThemeProvider>
    )
    ```

    Or we could make some nice hooks to achieve a similar effect

    ```
    const ThemeContext = useContext(theme)
    const MyComponent = () => {
    const { colors } = useContext(ThemeContext)
    return (
    <Box color={colors.primary} />
    )
    }
    ```

  12. victorouse renamed this gist Oct 10, 2019. 1 changed file with 34 additions and 3 deletions.
    37 changes: 34 additions & 3 deletions options.md → preference.md
    View file
    Original file line number Diff line number Diff line change
    @@ -63,13 +63,44 @@ const Button = styled.button`
    - [Theming](https://emotion.sh/docs/theming)
    - [Typescript](https://emotion.sh/docs/typescript)

    # Goodies

    ## Styled System
    # Styled System
    - [styled-system.com](https://styled-system.com)
    - [github.com/styled-system/styled-system](https://github.com/styled-system/styled-system)
    - 4.9k stars
    - 18 open issues
    - 18kb bundle size
    - [Mark Dalgleish twitter endorsement](https://mobile.twitter.com/markdalgleish/status/1107732365474848768)
    - [@types/styled-system](https://www.npmjs.com/package/@types/styled-system)

    ## Examples

    You can easily add common props to components with nice (and responsive) shorthand methods

    ```js
    import styled from '@emotion/styled'
    import { space, color, layout } from 'styled-system'

    const Box = styled.div({
    space,
    color,
    layout
    })


    <Box
    // Note the array for the width prop:
    // - Breakpoint #1: 100% width
    // - Breakpoint #2: 50% width
    width={[1, 1 / 2]}
    // These values are from a standard spacing scale, default to powers of 2
    // - p={1} -> padding={1} -> padding="2px"
    // - mb={2} -> marginBottom={2} -> marginBottom="4px"
    p={1}
    mb={2}
    // Sets the background-color to whatever value passed to bg here
    bg="tomato"
    >
    This is a tomato box, with responsive width, some padding, and margin bottom
    </Box>
    ```

  13. victorouse revised this gist Oct 10, 2019. 1 changed file with 24 additions and 2 deletions.
    26 changes: 24 additions & 2 deletions options.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,11 @@
    # Emotion

    - [https://github.com/emotion-js/emotion](https://github.com/emotion-js/emotion)
    - [emotion.sh/docs/introduction](https://emotion.sh/docs/introduction)
    - [github.com/emotion-js/emotion](https://github.com/emotion-js/emotion)
    - 9.1k stars
    - 216 open issues
    - 80kb bundle size
    - [Comparison with styled-components](https://github.com/jsjoeio/styled-components-vs-emotion)

    ## Examples

    @@ -24,6 +27,7 @@ const SomeComponent = () => (
    Also can write inline css via the `css` import

    ```js
    /** @jsx jsx */
    import { css, jsx } from '@emotion/core'

    const base = css`
    @@ -50,4 +54,22 @@ import styled from '@emotion/styled'
    const Button = styled.button`
    color: turquoise;
    `
    ```
    ```

    ## Additional

    - [Media queries](https://emotion.sh/docs/media-queries)
    - [Animation](https://emotion.sh/docs/keyframes)
    - [Theming](https://emotion.sh/docs/theming)
    - [Typescript](https://emotion.sh/docs/typescript)

    # Goodies

    ## Styled System
    - [styled-system.com](https://styled-system.com)
    - [github.com/styled-system/styled-system](https://github.com/styled-system/styled-system)
    - 4.9k stars
    - 18 open issues
    - 18kb bundle size
    - [Mark Dalgleish twitter endorsement](https://mobile.twitter.com/markdalgleish/status/1107732365474848768)

  14. victorouse created this gist Oct 10, 2019.
    53 changes: 53 additions & 0 deletions options.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    # Emotion

    - [https://github.com/emotion-js/emotion](https://github.com/emotion-js/emotion)
    - 9.1k stars
    - 216 open issues

    ## Examples

    Using the `css` prop and POJOs

    ```js
    /** @jsx jsx */
    import { jsx } from '@emotion/core'

    const SomeComponent = () => (
    <div
    css={{
    color: 'hotpink'
    }}
    />
    )
    ```

    Also can write inline css via the `css` import

    ```js
    import { css, jsx } from '@emotion/core'

    const base = css`
    color: hotpink;
    `

    const SomeComponent = () => (
    <div
    css={css`
    ${base};
    background-color: #eee;
    `}
    />
    )
    ```

    Note: there is a babel plugin [babel-plugin-emotion](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion) to do the pragma/`jsx` stuff

    Using `styled-components`-esque api

    ```js
    import styled from '@emotion/styled'

    const Button = styled.button`
    color: turquoise;
    `
    ```