https://github.com/tachyons-css/tachyons-styled-react
Tachyons implemented with emotion and styled-system. Sits on create-react-app.
https://github.com/tachyons-css/tachyons-styled-react
Last synced: about 2 months ago
JSON representation
Tachyons implemented with emotion and styled-system. Sits on create-react-app.
- Host: GitHub
- URL: https://github.com/tachyons-css/tachyons-styled-react
- Owner: tachyons-css
- Created: 2019-05-05T00:03:04.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T21:01:41.000Z (over 2 years ago)
- Last Synced: 2025-04-06T22:42:55.892Z (3 months ago)
- Language: JavaScript
- Homepage: https://tachyons-styled-react.now.sh
- Size: 4.17 MB
- Stars: 201
- Watchers: 9
- Forks: 16
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```
```
## 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](https://github.com/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