https://github.com/vtex/tachyons-generator

Generate a custom Tachyons build from a json configuration
https://github.com/vtex/tachyons-generator

srv-store-framework xp-developer

Last synced: about 1 month ago
JSON representation

Generate a custom Tachyons build from a json configuration

• Host: GitHub
• URL: https://github.com/vtex/tachyons-generator
• Owner: vtex
• License: mit
• Created: 2018-01-12T15:43:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-12T00:12:57.000Z (over 1 year ago)
• Last Synced: 2024-04-14T22:51:59.064Z (9 months ago)
• Topics: srv-store-framework, xp-developer
• Language: JavaScript
• Homepage:
• Size: 2.48 MB
• Stars: 6
• Watchers: 142
• Forks: 2
• Open Issues: 30
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: license

Awesome Lists containing this project

README

        
# @vtex/tachyons-generator

Generate a custom VTEX Tachyons build with a json configuration.

Originally forked from [tachyons-generator](https://github.com/tachyons-css/generator).

## Installation

```bash

npm i -S @vtex/tachyons-generator

```

## Usage

This will generate an index.html file with the generated style guide as well as a static css file.

```javascript

const fs = require('fs')

const tachyonsGenerator = require('@vtex/tachyons-generator')

const config = require('./config.json')

const generate = async () => {

  const tachy = tachyonsGenerator(config)

  // Minify CSS

  const out1 = await tachy.generate({ minify: true })

  fs.writeFileSync('tachyons.min.css', out1)

  // Keep colors as CSS variables

  const out2 = await tachy.generate({ compileVars: false })

  fs.writeFileSync('tachyons-with-vars.css', out2)

  // Create stylesheet for devices of type "large" only

  const out3 = await tachy.generate({ stylesheetType: 'large' })

  fs.writeFileSync('tachyons-large.css', out3)

  // Generate docs website

  const docs = await tachy.docs()

  fs.writeFileSync('index.html', docs)

}

generate()

```

#### Example config

Check [config.js](/config.js)

#### Optional configurations

#### `namespace`

You can pass a `namespace` property to namespace the CSS generated (including the normalize module).

Example:

```json

 "namespace": "my-namespace",

```

Will generate the following CSS:

```css

.my-namespace .bg-black { background-color: #000; }

```

## License

MIT