Colorscheme Lab – with Sass variables

code syntax highlighter builder

HTML


<!-- main grid section --> 
<div class="row"> 
 <div class="large-4 columns">
   <div class="panel">
     <h5>panel title</h5>
     <p>this is a three columns grid panel with an arbitrary height.</p>
   </div>
 </div>
 <div class="large-6 columns">
   <div class="panel">
     <h5>panel title</h5>
     <p>this is a six columns grid panel with an arbitrary height. bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
   </div>
 </div>
 <div class="large-3  columns">
   <div class="panel">

CSS

 
/* comment */ 
@media only screen { 
footer { 
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
}
footer ul {
  list-style: none;
  padding-left: 0; 
} 
.cf:before,
.cf:after {
  content: "";
  display: table;
} 
.cf:after { clear: both !important; }

Javascript


// comment
events : function () {
  var self = this;

  $(this.scope)
    .on('click.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
      e.preventDefault();

      if (this.settings.$li.next().length < 1) {
        this.end();
      } else if (this.settings.timer > 0) {
        clearTimeout(this.settings.automate);
        this.hide();
        this.show();
        this.startTimer();
      } else {
        this.hide();

SVG


<!-- http://www.w3.org/html/logo/downloads/HTML5_Badge.svg -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <title>HTML5 Logo Badge</title>
  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>

About


# Colorscheme Lab  
Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme.     
  
When using [Base16 Builder](https://github.com/chriskempson/base16-builder) as a building tool, you can, like Solarized, make colorschemes that come in a light, - and in a dark background version.          
  The Sass variables that are used here in this 'Colorscheme Lab', are basically the same as in the template.erb files by Base16 Builder, so after creating a colorscheme with this lab, converting to many application formats for syntax highlighting comes within reach.    
  Base16 Builder requires Ruby 1.9 or greater, see the repository for more information.
  
* [Atelier Schemes](https://atelierbram.github.io/syntax-highlighting/atelier-schemes)
* [Base16 Builder](https://github.com/chriskempson/base16-builder
* [This page as Gthub Gist](https://gist.github.com/atelierbram/6283373)  

Sixteen colors

base00
base01
base02
base03
base04
base05
base06
base07
yellow
orange
red
magenta
violet
blue
cyan
green

Colors in code Scss variables


$base00: hsl(229, 37%, 20%); /* #202746 */
$base01: hsl(229, 35%, 25%); /* #293256 */
$base02: hsl(228, 18%, 45%); /* #5e6687 */
$base03: hsl(229, 16%, 50%); /* #6b7394 */
$base04: hsl(229, 13%, 59%); /* #898ea4 */
$base05: hsl(229, 16%, 65%); /* #979db4 */
$base06: hsl(229, 40%, 91%); /* #dfe2f1 */
$base07: hsl(229, 94%, 98%); /* #f5f7ff */
$base08: hsl(14, 71%, 47%);; /* #c94922 */
$base09: hsl(25, 66%, 47%);  /* #c76b29 */
$base0A: hsl(38, 60%, 47%);  /* #c08b30 */
$base0B: hsl(177, 50%,45%);  /* #39aca6 */
$base0C: hsl(194, 71%, 46%); /* #22a2c9 */
$base0D: hsl(207, 62%, 53%); /* #3d8fd1 */
$base0E: hsl(229, 50%, 60%); /* #6679cc */
$base0F: hsl(336, 22%, 50%); /* #9c637a */ 
                                                              
$red:     $base08;
$orange:  $base09;
$yellow:  $base0A;
$green:   $base0B;
$cyan:    $base0C;
$blue:    $base0D;
$violet:  $base0E;
$magenta: $base0F; 

        
require "gem"

string = "base16"
symbol = :base16
fixnum = 0
float  = 0.00
array  = Array.new
array  = ['chris', 85]
hash   = {"test" => "test"}
regexp = /[abc]/

# This is a comment
class Person

  attr_accessor :name

  def initialize(attributes = {})
    @name = attributes[:name]
  end

  def self.greet
    "hello"
  end
end

person1 = Person.new(:name => "Chris")
print Person::greet, " ", person1.name, "\n"
puts "another #{Person::greet} #{person1.name}"
      
require "rubygems"

string = "tomorrow"
symbol = :tomorrow
fixnum = 0
float  = 0.00
array  = Array.new
array  = ['chris', 85]
hash   = {"test" => "test"}
regexp = /[abc]/

# This is a comment
class Person

  attr_accessor :name

  def initialize(attributes = {})
    @name = attributes[:name]
  end

  def self.greet
    "hello"
  end
end

person1 = Person.new(:name => "Chris")
print Person::greet, " ", person1.name, "\n"
puts "another #{Person::greet} #{person1.name}"