c-Tiles16

Colorscheming with Variables

Readme in HTML format

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:

1. 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

2. 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

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

• Base16 Builder by Chris Kempson
• HSL Color Picker by Brandon Mathis
• SassMe by Arc90

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

Colorscheming Tools - links

• Coolors - the coolest schemes generator
• Harmonic16, by Jannik

Internal links

• Pantone spring colors 1014
• Pantone spring colors 1015
• Pantone spring colors 1016

License

Copyright (c) 2013 Bram de Haan

Released under MIT Licence