Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamesmcallister/styled-components-tachyons

Bringing Tachyon's in with styled components
https://github.com/jamesmcallister/styled-components-tachyons

Last synced: 18 days ago
JSON representation

Bringing Tachyon's in with styled components

Awesome Lists containing this project

README 

        
# tachyons-for-styled-components



[![Edit jamesmcallister/styled-components-tachyons: example-site](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/KOD16MXpM)



Beaware that you need to use `snake_cased` rather than `kebab-cased`



Thanks to :

Adam Morse for http://tachyons.io/

Jon Gold for https://github.com/jongold/tachyons-js

and also https://styled-components.com/



Install with npm i.e



```sh 



npm install styled-components-tachyons

```



Add tachyons css variables somewhere in your project.  Below are some of the default tachyons variables (some excluded for brevity).  Alternatively you could `import` variables.css from this respository via your favorite bundler (webpack etc.).



```html

    

     :root {

        --black: #000;

        --near-black: #111;

        --dark-gray:#333;

        --mid-gray:#555;

        --gray: #777;

        --silver: #999;

        --light-silver: #aaa;

        --moon-gray: #ccc;

        --light-gray: #eee;

        --near-white: #f4f4f4;

        --white: #fff;



        --dark-red: #f00008;

        --red: #ff3223;

        --orange: #f3a801;

        --gold: #f2c800;

        --yellow: #ffde37;

        --purple: #7d5da9;

        --light-purple: #8d4f92;

  

    }

    

```



Example usage



```jsx



import styled from 'styled-components'

import tachyons from 'styled-components-tachyons'



const Article = styled.article`

  ${tachyons}

  font-family: athelas, georgia, serif;

  background-color: var(--yellow);

`

const Main = styled.div`

  ${tachyons}

  background:url(./static/009.jpg) no-repeat center;

`

const Header = styled.header`

  ${tachyons}

`

const Div = styled.div`

  ${tachyons}

  `

const H1 = styled.h1`

  ${tachyons}

  `

const H2 = styled.h2`

  ${tachyons}

  `

const H3 = styled.h3`

  ${tachyons}

  `

const P = styled.p`

  ${tachyons}

  `

const Blockquote = styled.blockquote`

  ${tachyons}

  `

const Cite = styled.cite`

  ${tachyons}

  `

export default () =>

  

    

      


        

          
Issue Six


          
Summer MMXVI


        

        
The Chronicles


        


          


            It's the space you put between the notes that make the music.

        


          Massimo Vignelli

        


      


    

    


      
The repercussion of ugliness is endless


      


        The choice of paper size is one of the  first of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.

    


      


        The international Standard paper sizes, called the A series, is based

      on a golden rectangle, the divine proportion. It is extremely handsome

      and practical as well. It is adopted by many countries around the world

      and is based on the German DIN metric Standards. The United States uses

      a basic letter size (8 1/2 x 11”) of ugly proportions, and results in

      complete chaos with an endless amount of paper sizes. It is a

      by_product of the culture of free enterprise, competition and waste.

      Just another example of the misinterpretations of freedom.

    


      


        These are the basic DIN sizes in mm. for : A0, 841x1189 _ A1, 594x841 _

      A2, 420x594 _ A3, 297x420 _ A4, 210x297 _ A5, 148x210 _ A6, 105 x148 _

      A7, 74x 105 _ A8, 52x74 _ A9, 37x52 _ A10, 26x37.

    


      


        The A4 is the basic size for stationary. Two thirds of it is a square,

      a nice economical happenstance resulting from the golden rectangle.

      It is one of the reasons we tend to use as much

      as possible the DIN sizes: proportions are always leading to other nice proportions.

    


      


        This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!

      The repercussion of ugliness is endless.

    


    


  



      

```