tachyons-css/generator

Generate a custom Tachyons build from a config file

generator's Issues

Customizable widths, heights, max-widths and max-heights

Generate should create an object with modules, postcss, css, and minified css

Break out type scale into module

Add all possible color combinations to generated docs

Roadmap?

Is there a roadmap of things that need to be completed before the generator is deemed "ready for production?"

Add ability to override manifest to add/remove media queries for a module

Add a header and footer to generated docs pages

Link to GitHub, other pages, config, object, example html, etc.

Customizable type faces

Possibility to remove the normalize.css that comes with tachyons

With the generator, is there a possibility to remove the normalize.css from the bundle?

We wanted to try modern-normalize instead of the normalize.css which comes bundled with tachyons.

Ensure formatting is pretty

• css
• postcss
• individual modules

Allow to pass CSS variables to the JSON files

That would be useful when you only support the latest browsers and want a variable.css file where you declare your colors.

Palette config option is till broken : (

Generate module documentation based on config

Customizable dim/grow

add ability to disable/remove modules

example:

{
	"disable": [
		"aspect-ratios",
		"tables"
	]
}

Add palx option instead of colors array

Add in some real tests

Use a manifest for generate function

Customizable measures

Missing units

All @media in min- and max-width has missing units.

@media screen and (min-width: 128) { ... }

Break out spacing into module

Name and define new colors?

So excited about this tool!

Any chance it will allow us to define colors not included in Tachyons by default?

Some projects could really use a variable for brown, more shades of orange and gold, etc. and having the generator spread these colors throughout Tachyons (e.g. .b--brown or .hover-bg-light-orange) would be so helpful.

spacing default in config

Did you mean for it to be?

"spacing": [0.25, 0.5, 1, 2, 4, 8, 16]

Customizable border radii and border widths

white & black opacity class names

I'm not sure if this is a bug or if its intentional, but it seems the bg and border class names with the opacity values are not generated.

b--white-##
bg-white-##
b--black-##
bg-black-##
etc.

Load external npm modules

Would be great to be able to load external npm modules to get "third-party" tachyons modules or even additional libs into the same bundle.

Something like this, perhaps:

{
  "typeScale": [
    3, 2.25, 1.5, 1.25, 1, 0.875
  ],
  "spacing": {
    "root": 8,
    "ratio": 2,
    "steps": 6
  },
  "external": {
    "npm@animate-css": "^3.5.2"
  }
}

Add doc wrapping for more dynamic modules like type scale and colors

trying to skip colors module

If I add to the config:

"skipModules": [
    "colors"
]

it looks like it skips the item named "colors" in the manifest, but because other items in the manifest have colors: true, the colors are still generated. In the full .css file, I see them in there 3 times.

Dynamically add module css comment documentation

Palette generation doesn't seem to include variables correctly

Why are debugChildren and debugGrid classes not included in the generated bundle

The .debug and .debug-grid aren't outputted, even though they are present in the original tachyons bundle.

Why was this choice taken? They are pretty useful

This is where they get excluded

generator/lib/assemble-css.js

Lines 35 to 40 in 3feb114

	const importModules = cssObj => {
	const SKIP = [
	'normalize',
	'debugChildren',
	'debugGrid'
	]

I've made a pull request to restore them, if we decide so

#90

Customizable alpha scale

Add sass output option

Go through all partials and make sure they're up to date with tachyons src

Generate different files for different prefix

Could allow us to generate different CSS files that won't need to deliver all vendor prefixes if I'm using Chrome, there is no need for IE, Webkit and Firefox prefix, this help reduce files size.

Perhaps, a simple browser detection in our Javascript should deliver the CSS with vendors specific and full CSS for unknown web browser agent.

Add media query postfix in mq css

semantic aliasing

all right, so we use this

  "typeScale": [
    3.25, 2.5, 1.25, 1, 0.75
  ],

to generate this

/*
  TYPE SCALE
  Docs: http://tachyons.io/docs/typography/scale/

  Base:
    f = font-size

  Modifiers:
    1 = 1st step in size scale
    2 = 2nd step in size scale
    3 = 3rd step in size scale
    4 = 4th step in size scale
    5 = 5th step in size scale
*/
.f1 { font-size: 3.25rem; }
.f2 { font-size: 2.5rem; }
.f3 { font-size: 1.25rem; }
.f4 { font-size: 1rem; }
.f5 { font-size: .75rem; }

This is totally fine, it's the tachyons way. however, communicating to a larger team when to use which font size is not always easy. Adding semantic meaning to scales helps making them easier to understand and read

Semantic proposal:

  "typeScale": [
    {"value": 3.25, "alias": "title"},
    {"value": 2.5, "alias": "sub"},
    {"value": 1.25, "alias": ["copy", "error"]},
    1,
    0.75
  ],

would generate this

/*
  TYPE SCALE
  Docs: http://tachyons.io/docs/typography/scale/

  Base:
    f = font-size

  Modifiers:
    1 = title
    2 = sub
    3 = copy, error
    4 = 4th step in size scale
    5 = 5th step in size scale
*/
.f1, .ftitle { font-size: 3.25rem; }
.f2, .fsub { font-size: 2.5rem; }
.f3, .fcopy, .ferror { font-size: 1.25rem; }
.f4 { font-size: 1rem; }
.f5 { font-size: .75rem; }

what do you think?

Implement a script to build partials from Tachyons src

missing backslash \ after the "json"

There is a missing backslash \ after the "json" in the Readme.

curl -X POST \
     -H "Content-Type: application/json" \
     -d @config.json
     https://tachyons.pub

Add rtl option

adding inherit as a "colour"

Please close if not relevant.

I'm trying to replicate the "original" tachyons CSS library from tachyons.io website using this generator.
Reasoning: we want to migrate to the generator and customise existing scales and values, but we want the transition to happen gradually as we don't have the resources to rewrite everything in one go.

We currently have a config.json which is very close to the css library hosted on the main website.
Unfortunately, we use one "colour" inherit which is in the main project but cannot be added to the generator.
As soon as you add:

{
  "colors": {
    "inherit": "inherit"
  }
}

The library fails with the following error:

Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
Node#moveTo was deprecated. Use Container#append.
(node:6464) UnhandledPromiseRejectionWarning: Error: Unable to parse color from string "inherit"
    at new Color (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/node_modules/color/color.js:31:15)
    at Color (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/node_modules/color/color.js:7:41)
    at /Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/index.js:30:21
    at /Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/node_modules/lodash/index.js:3073:15
    at Function.forIn (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/node_modules/lodash/index.js:3362:16)
    at module.exports (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/colorable/index.js:29:9)
    at Colorable (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/tachyons-generator/docs/components/Colors.js:51:5)
    at module.exports (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/tachyons-generator/docs/components/Colors.js:77:17)
    at module.exports (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/tachyons-generator/docs/components/Styleguide.js:21:5)
    at module.exports (/Users/pole/Sites/learnk8s/learnk8s.io/node_modules/tachyons-generator/docs/index.js:9:23)
(node:6464) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6464) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Is there any workaround available?

Clean up index.js

breakpoint configuration

currently, the logic generates breakpoints based on the following breakpoint
so it seems, that the breakpoint ns which is available in the regular tachyons cannot be produced

I want to mirror the material design breakpoints, which include not only xs, sm, md, lg, xl, but also gt-xs, gt-sm, gt-md, gt-lg (greater-than). They have the same semantic logic as tachyons' ns, basically only describing the min-width

as for the json config, this could be indicated with <= and/or >=

  "customMedia": [
    { "sm": "600px" },
    { "md": "960px" },
    { "lg": "1280px" },
    { "xl": "1920px" },
    { "gt-xs": ">=600px" },
    { "gt-sm": ">=960px" },
    { "gt-md": ">=1280px" },
    { "gt-lg": ">=1920px" }
  ],

where >=600px would result in screen and min-width(600px)
I admit, this does not look nice, but thats only from the top of my head

Add table of styles and table of properties to docs

Cache generated object after its been called

Add ability to specify verbose mode

Colors should be an object rather than an array

Is this repo not mantained anymore?

Some time ago I send this PR that solves some of the major issues with the project, but it hasn't been looked or reviewed since.

You don't have any time to work on this repo? Do you need mantainers?

Allow users to skip modules

Curl Output

What is this supposed to do? Nothing seems to happen after the re

$ curl -X POST \
→      -H "Content-Type: application/json" \
→      -d '{"typeScale": [5,4,3,2,1,0.5] }' \
→      https://tachyons.pub

<!doctype html>
<!-- https://now.sh -->
<h1>Redirecting (302)</h1>
<a href="https://zeit.co/johno/tachyons-publish-api/bvyenznlao?redirect=1">https://zeit.co/johno/tachyons-publish-api/bvyenznlao?redirect=1 </a>