Basilio Cáceres basilio

The file _functions-override.scss contains the custom functions to handle color conversions within sass and bootstrap.

Bootstrap does not like its sass variables set to css custom properties, e.g. var(--primary). If you use the code snippets below, you can do so, under some conditions.

In the most basic case, you should provide your color variables using the hsl format.

If you insert this using javascript, you can use the script apply-colors.jsx to let js handle the conversion from hex or rgb to hsl.

Reference the main.scss file to import the files in the correct order.

	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.js"></script>
	<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
	</head>
	<body>
	<script>

	var svg = document.querySelector( "svg" );
	var svgData = new XMLSerializer().serializeToString( svg );

	var canvas = document.createElement( "canvas" );
	var ctx = canvas.getContext( "2d" );

	var img = document.createElement( "img" );
	img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

	img.onload = function() {