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: 10 months 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 (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T00:12:57.000Z (over 2 years ago)
- Last Synced: 2025-04-14T09:14:48.495Z (10 months ago)
- Topics: srv-store-framework, xp-developer
- Language: JavaScript
- Homepage:
- Size: 2.48 MB
- Stars: 6
- Watchers: 136
- 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