tachyons-css/tachyons-styled-react

Tachyons implemented with emotion and styled-system. Sits on create-react-app.

Tachyons React App [WIP]

This extends create-react-app to include Tachyons implemented with emotion + styled-system. If you're familiar with Tachyons and are interested in css-in-js, this is hopefully a helpful project. Can be used for anything you'd use create-react-app for. While Tachyons is light-weight by default, using css-in-js will result in increased css performance as you don't send unused styles down the wire.

Getting going

Clone the directory and cd into the root of the directory

git clone [email protected]:tachyons-css/tachyons-styled-react.git newProject && cd newProject

Install dependencies

yarn 

Start the dev environment

yarn start

This should start a development environment on localhost:3000

Elements

src/elements/

This folder contains html elements wired up to styled system. Scales are defined and configurable in src/theme.js

Not every element has every styling prop included. For instance I don't find it useful to set fontSize on an img.

Elements can be composed together just like regular html elements to make more complex components.

Pages

Add new pages / routes in src/App.js

You can copy src/pages/Example.js to get a new blank page to work with. Say we wanted to create a view at localhost:3000/new-page and we wanted the page to be called NewPage.

Import it into App.js

// import pages here 
import Styles from './pages/Styles'
import Home from './pages/Home'
import NewPage from './pages/NewPage'

Next add the route you want to use for that page

  <Router>
    <Route exact path='/' component={Home} />
    <Route path='/styles' component={Styles} />
    <Route path='/new-page' component={NewPage} />
  </Router>

Theme

The theme file is 100% configurable. While Tachyons comes with some useful defaults, you can modify, extend, or reduce anything that's there to fit your needs.

Styled system

Styled system is well documented and I suggest checking out the official site over at https://styled-system.com. In short - Styled system allows you to pass arrays of values to style props like color, fontSize, display, and more that map to a consistent set of breakpoints. You can reference scales from a theme file or pass in literal values. The output is a set of single purpose classes for only the styles you need in your view.

I love styled system. I've been using it heavily for the last two years and I think it is a great way to implement Tachyons. While many people think of Tachyons as a css file, I think of it as a project. A whole bunch of modular ideas with a common set of principals.

The main Tachyons repo includes a bunch of terse naming schemes for a lot of the classes, but that was never a core part of the project, which is why thanks to @hongkonggong there has been a verbose version with longer class names we've supported. While the main version was built with postcss, we've long supported a sass build as well. The stack has never been the point. Tachyons for me have been centered around pushing the envelope in css performance for both rendering and download speed while testing the relationships between values in design primitives.

While trying to keep Tachyons small - it's important to limit things like how large the color palette is. For every color there were corresponding border,:hover,:focus classes. With styled-system and emotion this isn't an issue. You can keep a more verbose color palette, without automatically creating a larger css foot-print. The only css that's generated is for the styles you are using. While some people use something to strip out unused styles, I think this model makes more sense and is less error prone.

While personally I don't have too much trouble parsing the same property being spread out in a class string e.g. "f2 db di-ns f3-m f4-l" I think it's a lot nicer to have properties automatically grouped together. You also aren't dealing with repetitive name spacing in the class names e.g f6 f4-ns f3-l Each f is just indicating it's the font size property. I don't think I'm going out on a limb to say that this is ~1000x nicer fontSize={[3,4,6]}

If the transition to javascript style syntax scares you a bit, I can absolutely relate. I am very limited in my javascript ability and this project is partly a reflection of all the stuff I wish I had setup 2 years ago when I first started to almost explicitly work in codebases that used a css-in-js solution for styling. If you know html and css - I hope this serves as a gateway to play with react and css-in-js a bit. It's currently my favorite way to use Tachyons.

Reference

• https://styled-system.com
• https://styled-system.com/table
• https://emotion.sh
• https://github.com/facebook/create-react-app

tachyons-styled-react's Issues

Turn into package?

🎈 First of all, this solution seems pretty great and I can't wait to play some more with it!

I wonder what the rationale behind a starter kit was compared to offering it as a package. If we turned this "starter-kit" into a package users could use plain create-react-app or any other setup instead and they would get bug fixes/updates.

I'm imagining a package (called tachyons-emotion below) which would allow users to do this:

Setup

Install dependencies

yarn add tachyons-emotion styled-system @emotion/core emotion-theming # and some more

tachyons-emotion could have emotion & co as peer-dependencies and users would then provide theme as

import { ThemeProvider } from "emotion-theming"
import { theme } from 'tachyons-emotion'

export default function App (props) {
  return (
    <ThemeProvider theme={theme}>
      <Router />
    </ThemeProvider>
  )
}

Users could still overwrite props of the theme by just spreading over it, or provide their own theme.

Usage

import { Section } from 'tachyons-emotion'

export default function Post() {
  return (<Section p={4}>Hello World</Section>);
}

This would allow using this Tachyons approach with Gatsby and customs solutions and not tie it to create-react-app at all. We could even keep this starter-repo alive by just using the tachyons-emotion package here.

Bonus: Living Style Guide

We could even export a Styles component from tachyons-emotion which would render the complete styles as a living styleguide of sorts. Consumers could then render this component at a specific path.

import { Styles } from 'tachyons-emotion'

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Route path="/styles" component={Styles} />
      </Router>
    </ThemeProvider>
  )
}

Of course this could be improved to only include the component and route during development to keep the production bundle small.

If you're on board/think this is a good idea I could go ahead and create the repo, set things up and hand them over to you.

Display values for border width

Add shadows

How to use with typescript

How to use this with typescript?

Display values for spacing scale

Add colorable output

Add preview of accessible color combos from theme

Consider camelizing colour keys

Looking interesting, I was starting on a conversion util for tachyons for css-in-is before losing all my free time.

Anyway...

Would you possibly consider using camelized keys for colour values so they can be usable via dot-notation?

Unused styles comment

While Tachyons is light-weight by default, using css-in-js will result in increased css performance as you don't send unused styles down the wire.

I was wondering about this statement and did a bit of research. When building a page we either only need tachyons.min.css or we need the setup for styled-system, emotion and the theme itself.

• CSS-based setup
  • tachyons.min.css is 10.9kB (minified+gzipped) or 71.8kB (minified).
• CSS-in-JS setup
  • emotion-theming is 1.8kB (minified+gzipped) or 5kB (minified).
  • @emotion/core is 6.4kB (minified+gzipped) or 17.2kB (minified).
  • @emotion/styled is 4.9kB (minified+gzipped) or 11kB (minified).
  • styled-system is 3.3kB (minified+gzipped) or 11kB (minified).

So to do a fair comparison we'd have to compare tachyons.min.css at 10.9kB vs the rest at 16.4kB. So in terms of payload we are actually shipping ~6kB more. This comparison is excluding the size of the elements definitions and the theme itself.

Not related to create-react-app, but relevant when used with static prerendering (e.g. with react-snap or in Gatsby): Using css-in-js setup ( styled-system and emotion) enables inlining critical CSS which avoids the flash of unstyled content seen when using plain CSS.

The downside is that the critical CSS is loaded "twice" then: once as the critical inlined CSS and once through the JS bundle (theme etc).

Both solutions are coming in pretty lightweight and a 6kb difference won't matter for most connection speeds. So the most promising aspect to me is that we can enable avoiding the flash-of-unstyled-content with this css-in-js setup.

I did not confirm the theories stated above but wanted to share my ramblings. I'll close this again as I don't want to do anything else besides sharing some thoughts. Thanks for coming to my TED talk.

Hi, I've created a prototype styled-tachyons

https://github.com/linonetwo/styled-tachyons

is it similar to this?