Awesome

c-Tiles16

Colorscheming with Variables

screenshot of c-Tiles16 colorschemer

Introduction

It’ s one thing two have color variables declared on top of your Sass/Less/Stylus stylesheet. It’ s another thing to use them in an intuitive and meaningfull way in your designs. That’s where c-Tiles16 comes in to help out. There are two parts:

A build script named ctiles16, that is a fork of Base16, and can be executed from the terminal/commandline, and generates preprocessor variables to be used by Sass, Less, or Stylus
A colorscheming test playground that is assembled to have the best colorscheming tools, alongside colorscheme-tiles on one webpage-test-playground, making it convenient to create your own colorscheme, with sixteen variables

Getting started

A possible way to make this tool, or rather collection-of-tools, your own can be:

download the zip-file, or clone the the repo to your own computer
when using Sass, open assets/sass/ctiles16-custom.scss (which is a copy of ctiles16-ctiles.scss) in a text-editor. Don’t rename it just yet, but:
(this works best full screen) start editing the values of the variables with the text-editor on one side, and the browser-window with the test colorscheming playground (colorscheming/index.html) on the other side of your screen
play with the hsl-picker to help you get along
try some live editing with the hidden styles at the top
from the dropdown-menu you can pick and see how other colorschemes look.
there’s a button for toggling the page background-color, but you can also hover with your mouse over the colortiles
refresh the colorschemer-webpage after each time you edit your ctiles16-custom.scss-colorscheme-variables file (or use something like LiveReload)
When following the workflow above, you have been using c-Tiles16 to make a colorscheme made out of sixteen colors</li>

Development

Now put the colorscheme you just made as one of the first partial files to import in the _base-partial file (the one that is included throughout the whole project)
Keep using the colorschermer any time you like to generate color-values during the design phase of the website
One can make it a personal challenge to only use the colorscheme values, or variations of those with Sass color-functions
BTW: You can als try to make a pull request on Github in order to submit your colorscheme to this collection here on c-Tiles16

Usage of buildtool

Since c-Tiles16 is a fork of Base16-builder, you can look it up on Github for more information.

Build color variations of Base16 with YAML scheme definitions and ERB templates. Requires Ruby 1.9 or greater.

go in the terminal to c-tiles16/schemes/

cd  c-tiles16/schemes/

To build all schemes:

../ctiles16

Build only the ‘default’ theme

    > ../ctiles16 default.yml

Build a scheme stored on some webspace.

./ctiles16 https://awesome-schemes.com/my-scheme.yml

Credits

Resources

Prism by Lea Verou
Sass Prism base theme by Maxime Thirouin
Formalize by Nathan Smith
long dropdown menu by Chris Coyier and Geams
lightweight accordion by Devin Walker