JSPM

  • Created
  • Published
  • Downloads 3088
  • Score
    100M100P100Q123302F
  • License MIT

Functional CSS for humans — customized by the VTEX team

Package Exports

  • vtex-tachyons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vtex-tachyons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VTEX TACHYONS

Extending tachyons powers for VTEX admins.

How to use

Install

npm i vtex-tachyons --save

Link in your application:

<link rel="stylesheet" href="tachyons.min.css">
<link rel="stylesheet" href="vtex-tachyons.min.css">
<link rel="stylesheet" href="theme.min.css">

or

//React Webpack import
import 'tachyons'
import 'vtex-tachyons'
import 'theme'

Use the CDN

WIP

How to develop

Local Setup

Clone the repo from github and install dependencies through npm.

git clone https://github.com/vtex-apps/vtex-tachyons
cd vtex-tachyons
npm install

Dev

If you want to just use everything in tachyons/src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running

npm start

This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes. It's aliased to the command:

npm run build:watch

If you'd like to just build the css once without watching the src directory run

npm run build

If you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command

npm run mutations