Tachyons: Generate the source based on custom inputs?

[matthewmueller]

Giving tachyons a try for a client project :-) The paddings were given to me and I needed to format tachyons to support the various sizes. This turned out to be tedious to do by hand, so I wrote a quick script to do it.

How do you feel about something that prompts for inputs and then writes the files? Maybe the media queries for other ones aren't so cut and dry, I'm not sure. But here's one for spacing (could easily add margins):

/**
 * Module Dependencies
 */

let tpl = require('colon-template')

/**
 * Prompts
 */

let base = 16
let px = [0, 12, 16, 24, 32, 40, 48, 56, 64, 96, 112, 128, 256]
let medias = {
  'ns': 'screen and (min-width: 48em)',
  'm': 'screen and (min-width: 48em) and (max-width: 64em)',
  'l': 'screen and (min-width: 64em)'
}

/**
 * Computed
 */

let rems = sizes.map(size => size / base)
let directions = {
  all: 'pa',
  left: 'pl',
  right: 'pr',
  top: 'pt',
  bottom: 'pb',
  vertical: 'pv',
  horizontal: 'ph'
}

let rules = {
  'all': '{ padding: :valuerem; }',
  'left': '{ padding-left: :valuerem; }',
  'right': '{ padding-right: :valuerem; }',
  'top': '{ padding-top: :valuerem; }',
  'bottom': '{ padding-bottom: :valuerem; }',
  'vertical': '{ padding-top: :valuerem; padding-bottom: :valuerem; }',
  'horizontal': '{ padding-left: :valuerem; padding-right: :valuerem; }',
}

/**
 * Write
 */

for (let direction in directions) {
  let selector = directions[direction]
  console.log()
  console.log(`/* ${direction} */`)
  rems.forEach(function (value, i) {
    console.log(`.${selector}${i}  ${tpl(rules[direction])({ value })}`)
  })
}

for (let suffix in medias) {
  let media = medias[suffix]
  console.log(`@media ${media} {`)
  for (let direction in directions) {
    let selector = directions[direction]
    console.log()
    rems.forEach(function (value, i) {
      console.log(`  .${selector}${i}-${suffix}  ${tpl(rules[direction])({ value })}`)
    })
  }
  console.log('}')
}

Usage:

node spacing.js > spacing.css

[mrmrs]

Want to keep the main repo simple but I'd like to have a super configurable version of tachyons that uses stuff like this. So super open to breaking it off as a separate thing.

[mrmrs]

I really like this idea of a cli, or web gui that is just a series of questions
then builds tachyons out for you. What can I offer as help? Just a list of all variables?

[matthewmueller]

yah, i think the CLI or web GUI would be great. I'm currently working on a CLI scaffolding project that would make it really easy to gather all the responses and then do the processing, so I may write a tachyons builder for that :-D

The really great thing about this library is that most of the pieces are really easy to generate.

[zakdances]

I like the idea of a seperate repo that uses variables (with defaults) as mentioned in this issue.

_Customization directly via stylesheet variables_ should be prioritised before a CLI, in my opinion. Remember, many people are already using one or more CLIs for their build system and package manager, so adding yet another one seems excessive (a reason why many have replaced bower + NPM with just NPM). And I feel like CSS is meant to be continually tweaked over time - a CLI is antithetical to that pattern.

[johno]

😸 https://github.com/tachyons-css/tachyons-generator