Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Okay, so... how do I *actually* generate my own scheme? #1

Open
TiZ-HugLife opened this issue Oct 3, 2016 · 3 comments
Open

Okay, so... how do I *actually* generate my own scheme? #1

TiZ-HugLife opened this issue Oct 3, 2016 · 3 comments

Comments

@TiZ-HugLife
Copy link

I'm sure this will sound stupid, but I'm not clear on how I'm supposed to generate a yml scheme for base16-builder given two hues. I see there are some sass files in the assets folder that seem to be the right direction, but I'm not clear on where to go from there. The cli/io.sh file mentioned in the readme no longer exists, and your commit messages don't really give me any clues on where it went and why. The readme doesn't really have any directions on what to do aside from "edit the demo tiles!"

Can you help me out? Thanks.

@atelierbram
Copy link
Owner

atelierbram commented Oct 4, 2016

Thanks for the feedback, I just edited the README with hopefully a bit more helpful information to get people on the way making there own colorschemes.
Base2Tone can generate themes for applications from colorschemes with Base16-Builder, and if one uses an existing colorscheme, and has no ambition in creating a custom one, this can be a fast process with using the commandline generating those themes. However creating your own colorscheme is not a fast process; it can't be "generated" but instead is a manual iterative process. This is the hard part; although the idea is to make color-schemes from just two color-hues, there is no easy way (at least not on this repository) to generate colorschemes from these two color-hues, (because I don’t believe in an automated process that takes account of the peculiarities of the human eye, in connection to the perception of color). It will always be a manual iterative process. My process is editing the demo-tile colors for Base2Tone-prism, you can see those demo-tiles on top of the pages over here. So what I do is edit the sass file for those demo-tiles (I use HSL and then convert those values from the browser, or a tool like HSL Color Picker to HEX values), and then manually copy and paste the new color-values over into a new schemes/my-new-colorscheme.yml. After that generate the prism-my-new-colorscheme.scss and see how the syntax-highlighting turns out on that demo-page. There are 32 color-value variables to be defined, so it will require a dedicated effort to build your own Base2Tone colorscheme. But if you do succeed in this, you will have the blueprint for generating colorthemes for these applications.
I hope this is helpful, but please let me know if you have any more questions: this is actually also helpful for me in making better documentation (for I have developed this huge blind spot for this thing).

@TiZ-HugLife
Copy link
Author

Sorry for taking so long to follow up. This doesn't really answer my question. What I need to know are the commands I need to run, as well as the dependencies I need to have in order to run those commands. How is the sass file compiled? How is the scss file generated? How does that scss file get used for a viewable demo page? The procedure as you describe it is way too vague, I don't know what's going on. I'm not a web developer hip to the current development trends, I'm a Linux application developer.

@atelierbram
Copy link
Owner

atelierbram commented Oct 14, 2016

There is this extra complexity on Github that is confusing; I can see that, that is why I updated this demo of Base2Tone-Prism on Codepen to make this a bit more easy going and straight forward. I will edit the README to point to this demo as well, so thanks again for your feedback.

How is the sass file compiled? How is the scss file generated? How does that scss file get used for a viewable demo page?

Codepen has their own Sass rendering engine going on, no need to worry about that over there; it happens automagically, but the demo's here on Github are using Compass to compile the scss syntax into css. See also the config file for Compass, note also the additional import-path for the generated files by Base16-Builder.

add_import_path "output/prism-sass"

This setup on Github makes sense to me, for this is generating scss files (color variables fed into this Sass implementation of Prism) from Base16-Builder's yml-scheme and ejs-template files. The compass watch in the root folder will regenerate the css output, each time those scss files are updated.

What I need to know are the commands I need to run, as well as the dependencies I need to have in order to run those commands.

The way to update them is editing the db/schemes/{{colorscheme}}.yml colorvariables and run these commands for Base16-Builder -read about installing this in the README on their repo - in the Terminal.

  base16-builder --scheme "db/schemes/base2tone-pool.yml" --template "db/templates/prism/dark.ejs" > "output/prism/prism-base2tone-pool-dark.css"
  base16-builder --scheme "db/schemes/base2tone-pool.yml" --template "db/templates/prism-sass/dark.ejs" > "output/prism-sass/_prism-base2tone-pool-dark.scss"

The first command - see also the bash-script io.sh generates a css file for Prism, and the second command - see bash-script io-prism-sass.sh generates this Sass implementation for Prism. I'm sorry this is confusing too, will have to clarify that in the Readme, but like I wrote: better use the Codepen demo to create your colorscheme.

Okay so ... in essence; one doesn't generate yml colorschemes, these are created, color-values manually copied over from a, for example, forked and adapted version of that demo on Codepen. (Tip: use the Developer Tools in your Browser to copy the HEX-color-values output from the rendered css). Base16-Builder’s commands are used for generating theme files for ... anything really, as long as you can make a template for this application. The syntax for variables in those ejs templates are pretty self-explanatorily I think, but don’t hesitate to ask if you have any more questions.

I hope this was helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants