-```
-
-```
-@media screen and (min-width: 1100px) {
- body {
- font-size: 100%;
- }
-}
-```
-
-```
-(function(){
- var x = 10;
-
- function y(a, b) {
- return {
- result: (a + b) * x
- }
-
- }
-}());
-```
-
-***
-
-### Comments
-
-Comments are the only way others and **YOURSELF** know why a particular code was written and why it was written in the
-way it was. It's crucial that you comment your code parts and specially code that is not trivial.
-
-Self explaining code is a **MYTH**. There is no such thing as self explaining code. Also there is no such thing as too
-many comments. There is only too little comments.
-
-When you comment code don't comment what's coded, comment why it was coded this way and comment the thinking behind.
-Also include links in your comments to open issues, specifications etc.
-
-**Not recommended**
-```
-var offset = 0;
-
-if(includeLabels) {
- // Add offset of 20
- offset = 20;
-}
-```
-
-**Recommended**
-```
-var offset = 0;
-
-if(includeLabels) {
- // If the labels are included we need to have a minimum offset of 20 pixels
- // We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1
- offset = 20;
-}
-```
-
-Consider using annotations in your comments that help to structure commends and add meta information. For Javascript
-use [JSDoc](http://usejsdoc.org/) or [YUIDoc](http://yui.github.io/yuidoc/). You can also use tools to generate
-documentation from these comments. This is also a great way to encourage developers to write comments. Once comments
-will be used to generate a living documentation they often start to spend more time for detailed comments.
-
-***
-
-### Code linting
-
-For programming languages with less strictness it's important to enforce style rules and formatting guidelines.
-Writing and following a style guide is a good practice but having an automated process that is enforcing it is even
-better. Trust is good, control is better.
-
-For Javascript we recommend to use JSLint / JSHint. In the repository for this styleguide you can also find a
-[dotfile for jshint (.jshintrc)](.jshintrc). You can use this file with JSHint to enforce style
-checking in your Javascript projects.
-
-***
-
-## HTML style rules
-
-***
-
-### Document type
-
-HTML5 (HTML syntax) is preferred for all HTML documents: ``.
-
-(Itās recommended to use HTML, as text/html. Do not use XHTML. XHTML, as application/xhtml+xml,
-lacks both browser and infrastructure support and offers less room for optimization than HTML.)
-
-Although fine with HTML, do not close void elements, i.e. write ` `, not ` `.
-
-***
-
-### HTML validity
-
-Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.
-
-Use tools such as the W3C HTML validator to test.
-
-Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements
-and constraints, and that ensures proper HTML usage.
-
-**Not recommended**
-```
-Test
-This is only a test.
-```
-
-**Recommended**
-```
-
-
-Test
-This is only a test.
-```
-
-***
-
-### Optional Tags
-
-The HTML5 specification defines what tags can be omitted in the HTML markup. For readability purpose the raw source
-file should **NOT** omit optional tags. Omitting optional tags can lead to readability and scannability issues, and
-therefore should not be used in the raw source files.
-
-Omitting tags can lead to significant page size reductions specially on large scale sites. For this purpose you should
-consider an HTML minification post processing of your raw files for distribution purpose.
-
-***
-
-### Script loading
-
-For performance reasons it's important to load scripts asynchronously. A script loaded in the `` like this
-`` will block the whole DOM parsing until the script has fully loaded and executed. This
-will delay the page to be displayed until the script has fully loaded. With larger scripts this can have a big impact
-on user experience.
-
-Asynchronous script loading helps to minimize this performance impact. If browser support is only concerned about IE10+
-the HTML5 async attribute on scripts should be used. This will prevent DOM parser blocking and you can even place your
-script element into the `` element.
-
-If you need to support older browsers it's common practice to use script loaders that will make use of dynamic script
-injection. You should consider [yepnope](http://yepnopejs.com/) or [labjs](http://labjs.com/). The problem with injected
-scripts though is that [they will not start loading until CSS Object Model is ready](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)
-(shortly after the CSS from the head is loaded). This can also load to delay of your behavior added by these javascript
-which can again affect the user experience.
-
-As a result of the above described behaviors you should always consider the following best practice if you need to
-support old browsers (IE9-).
-
-Add your script element just before the body close tag and add them with a async attribute. This will not load the
-scripts asynchronously on old browsers but they will only block the DOM parser just before the body close which is not
-affecting the user experience too much. On modern browsers this will delay the script load until the DOM parser
-discovers the script element at the end of the body, but they will then asynchronously load the script and don't wait
-for CSSOM to complete before loading (execution will still happen after CSSOM).
-
-**Recommended for modern and old browsers**
-```
-
-
-
-
-
-
-
-
-
-
-```
-
-**Recommended for only modern browsers**
-```
-
-
-
-
-
-
-
-
-
-```
-
-***
-
-### Semantics
-
-Use elements (sometimes incorrectly called ātagsā) for what they have been created for. For example, use heading
-elements for headings, p elements for paragraphs, a elements for anchors, etc.
-
-Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.
-
-The following bad / good example should outline some of the major important semantic HTML cases:
-
-**Not recommended**
-```
-My page title
-
I think I'm more on the side and should not receive the main credits
-
- This article was created by David
2014-01-01 00:00
-
-
-
-
-
-
-
-
-```
-
-**Recommended**
-```
-
-
-
-
My page title
-
-
-
-
-
-
-
-
-
-
-
-
-
All news articles
-
-
-
-
-
-
-
-
Good article
-
- Introduction sub-title
-
-
-
-
-
This is a good example for HTML semantics
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-***
-
-### Multimedia fallback
-
-For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access. For images
-that means use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available.
-
-Providing alternative contents is important for accessibility reasons: A blind user has few cues to tell what an
-image is about without @alt, and other users may have no way of understanding what video or audio contents are about
-either.
-
-(For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which
-you cannot immediately use CSS for, use no alternative text, as in alt="".)
-
-**Not recommended**
-```
-
-```
-
-**Recommended**
-```
-
-```
-
-When writing alt tags always try to describe the image as if you'd need to describe what's on the image to somebody
-over the phone or who can't see the real picture.
-
-**Not recommended**
-```
-
-```
-
-**Recommended**
-```
-
-```
-
-***
-
-### Separation of Concerns
-
-It's very important that you understand the different concerns in web and that you know how to and why to separate them.
-In the web we have information (html markup), appearance (css) and behavior (Javascript) and we need to separate them as
-far as possible in order to keep a maintainable and clean code.
-
-Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the
-interaction between the three to an absolute minimum.
-
-That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes.
-Move everything presentational into style sheets, and everything behavioral into scripts.
-
-In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from
-documents and templates.
-
-Clean separation of concerns implies the following things:
-
-1. Don't use more than one or two stylesheets (i.e. main.css, vendor.css)
-1. Don't use more than one or two scripts (use concatination)
-1. Don't use inline styles (``)
-1. Don't use element style attributes (``)
-1. Don't use inline scripts (``)
-1. Don't use presentational elements (i.e. ``, ``, `
`, ``, ``
-1. Don't use presentational class names (i.e. red, left, center)
-
-**Not recommended**
-```
-
-
-
-
-
-
-
-
-
-
- I'm a subtitle and I'm bold!
-
-
-
-
-
-
-```
-
-***
-
-### HTML is content only
-
-Don't pollute your HTML markup with non-content information. There is a tendency to solve design problems at
-the information's cost. The HTML markup should only contain content relevant information and design problems should
-never be solved within the markup.
-
-The only purpose of HTML markup is to represent content information.
-
-- Don't introduce a specific HTML structure just to solve some visual design problems
-- Don't use `` elements for visual design elements
-
-The following examples show two common things that are done wrong when it comes to solving design problems.
-
-**Not recommended**
-```
-
-
-
- See the square next to me?
-
-
-```
-```
-.text-box > .square {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background-color: red;
-}
-```
-
-
-**Recommended**
-```
-
-
- See the square next to me?
-
-
-```
-```
-// We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content
-.text-box:before {
- content: "";
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background-color: red;
-}
-```
-
-The only reason for images and svg graphics to be included in the markup is because they represent content relevant
-information.
-
-**Not recommended**
-```
-
-
-
- See the square next to me?
-
-```
-
-**Recommended**
-```
-
-
- See the square next to me?
-
-
-```
-```
-// We use a :before pseudo element with a background image to solve the problem
-.text-box:before {
- content: "";
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background: url(square.svg) no-repeat;
- background-size: 100%;
-}
-```
-
-***
-
-### Type attributes
-
-Omit type attributes for style sheets and scripts. Do not use type attributes for style sheets (unless not using CSS)
-and scripts (unless not using JavaScript). Specifying type attributes in these contexts is not necessary as
-HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.
-
-**Not recommended**
-```
-
-
-```
-
-**Recommended**
-```
-
-
-```
-
-***
-
-### General Accessibility
-
-If you use proper HTML5 semantics a lot of accessibility issues are already solved. ARIA is using some default roles
-for most of the semantic elements which, if used correctly, solves a lot of the issues already. If you use `nav`,
-`aside`, `main`, `footer` etc. ARIA will use some related default roles. For more details you can reference the
-[ARIA specification](http://rawgit.com/w3c/aria-in-html/master/index.html#recommendations-table) recommendation table
-which contains the defaults for the HTML semantic elements.
-
-Additional roles can be used to give more accessibility context (i.e. `role="tab"`).
-
-***
-
-### Tab Index for Accessibility
-
-Check your document for tab order and assign tabindex values in order to change the tab flow based on priority. You
-can disable the tab index of an element by setting `tabindex="-1"` on any element.
-
-If you add functionality to a element that is not focusable by default, you should always add a `tabindex` in order to
-make the element focusable. This will also enable the CSS pseudo selector `:focus`. Choose an appropriate index value
-for `tabindex` or use `tabindex="0"` to group elements into one tab order level and enforce ordering in natural reading
-order.
-
-***
-
-### Microdata for SEO and Accessibility
-
-If the SEO relevance and / or accessibility environment is given then you should consider to use microdata where
-possible. Microdata is a way to annotate your data in your markup that follows some specific semantics.
-
-Google, Microsoft and Yahoo! have more or less agreed on how to use this additional data and using it correctly has
-great influence on your searches.
-
-You can visit [schema.org](http://schema.org/) for more details.
-
-Simple example of a movie on a web page:
-
-**Without microdata**
-```
-
-
Avatar
- Director: James Cameron (born August 16, 1954)
- Science fiction
- Trailer
-
-```
-
-**With microdata**
-```
-
-
Avatar
-
- Director: James Cameron (born August 16, 1954)
-
-```
-
-***
-
-### IDs for anchors
-
-It's generally a good practice to give all headings on a page a ID. With these ID's on headings you can use the
-browsers default behavior and include the ID names as hash tags in the URL. By default this causes the browser to scroll
-to the position this element.
-
-If you'd enter the URL `http://your-site.com/about#best-practices` in your browser then the browser would scroll down
-so that the H3 below would be scrolled into the view.
-
-```
-
Best practices
-```
-
-***
-
-### General formatting
-
-Use a new line for every block, list, or table element, and indent every such child element.
-Independent of the styling of an element (as CSS allows elements to assume a different role per display property),
-put every block, list, or table element on a new line.
-
-Also, indent them if they are child elements of a block, list, or table element.
-
-(If you run into issues around whitespace between list items itās acceptable to put all li elements in one line.
-A linter is encouraged to throw a warning instead of an error.)
-
-**Recommended**
-```
-
-
Space, the final frontier.
-
-
-
-
Moe
-
Larry
-
Curly
-
-
-
-
-
-
Income
-
Taxes
-
-
-
-
-
$ 5.00
-
$ 4.50
-
-
-
-```
-
-***
-
-### HTML quotation marks
-
-When quoting attributes values, use double quotation marks. Use double ("") rather than single quotation marks ('')
-around attribute values.
-
-**Not recommended**
-```
-
-```
-
-**Recommended**
-```
-
-```
-
-***
-
-## Javascript style guide
-
-***
-
-### Global namespace pollution and IIFE
-
-Always wrap your code into a IIFE (Immediately-Invoked Function Expression) in order to create an isolated closure
-scope. This prevents you from polluting the global namespace.
-
-IIFE can also secure your code from modifications that happened in the global namespace (i.e. 3rd party libraries,
-window reference, overridden undefined keyword etc.)
-
-**Not recommended**
-```
-var x = 10,
- y = 100;
-
-// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
-// will be stored in the window object. This is very unclean and needs to be avoided.
-console.log(window.x + ' ' + window.y);
-```
-
-**Recommended**
-```
-// We declare a IIFE and pass parameters into the function that we will use from the global space
-(function(log, w, undefined){
- 'use strict';
-
- var x = 10,
- y = 100;
-
- // Will output 'true true'
- log((w.x === undefined) + ' ' + (w.y === undefined));
-
-}(window.console.log, window));
-```
-
-***
-
-### IIFE (Immediately-Executed Function Expression)
-
-Use IIFE whenever you want to create a new closure scope. This can be used to create privacy and to keep memory clean.
-
-Every javascript file should start with an IIFE.
-
-The IIFE should be written so you're keeping the execution brackets inside of the surrounding brackets. Although the
-writing the executing brackets outside of the surrounding brackets is valid the second example should be used as this
-sets clear boundaries for the IIFE as the surrounding brackets isolate the whole IIFE.
-
-**Not recommended**
-```
-(function(){})();
-```
-
-**Recommended**
-```
-(function(){}());
-```
-
-The following pattern should be used to format your IIFE:
-
-```
-(function(){
- 'use strict';
-
- // Code goes here
-
-}());
-```
-
-If you want to use global variables or variables form an outer IIFE you should pass them as parameters to your IIFE:
-```
-(function($, w, d){
- 'use strict';
-
- $(function() {
- w.alert(d.querySelectorAll('div').length);
- });
-}(jQuery, window, document));
-```
-
-***
-
-### Strict mode
-
-ECMAScript 5 strict mode can be enabled globally in your script or on function level. It enables more strict error
-handling as well different javascript semantics. Strict mode also enforces a syntax that allows engines to optimize
-the javascript better and strict more scripts can run faster than normal scripts.
-
-Strict mode also blocks the usage of reserved words that possibly get introduced in the future.
-
-You should always enforce strict mode in your scripts. Do so by applying it in your isolation IIFE. Don't apply it to
-your whole script by include it as first statement in your script. This could possibly cause issues with 3rd party
-libraries.
-
-**Not recommended**
-```
-// Script starts here
-'use strict';
-
-(function(){
-
- // Your code starts here
-
-}());
-```
-
-**Recommended**
-```
-(function(){
- 'use strict';
-
- // Your code starts here
-
-}());
-```
-
-***
-
-### Variable declarations
-
-Always use `var` to declare your variables. When you fail to specify var, the variable gets placed in the global
-context, potentially clobbering existing values. Also, if there's no declaration, it's hard to tell in what scope a
-variable lives (e.g., it could be in the Document or Window just as easily as in the local scope).
-So always declare with var.
-
-Using strict mode can help to identify issues where you might mistyped a variable name resulting in a ReferenceError.
-
-**Not recommended**
-```
-x = 10;
-y = 100;
-```
-
-**Recommended**
-```
-var x = 10,
- y = 100;
-```
-
-***
-
-### Understand Javascript scope and hoisting
-
-In Javascript variable and function declarations will be hoisted before execution. Javascript only knows function scope
-and there is no block scope as you know it from other programming languages. This means that if you declare a variable
-inside a if statement or for loop this variable is declared for the whole function scope and not only locally in the
-block statement.
-
-To illustrate this check the following example that will show how a javascript interpreter is hoisting the declarations
-in a function scope:
-
-**Raw function**
-```
-(function(log){
- 'use strict';
-
- var a = 10;
-
- for(var i = 0; i < a; i++) {
- var b = i * i;
- log(b);
- }
-
- if(a === 10) {
- var f = function() {
- log(a);
- };
- f();
- }
-
- function x() {
- log('Mr. X!');
- }
- x();
-
-}(window.console.log));
-```
-
-**Hoisted by Javscript engine**
-```
-(function(log){
- 'use strict';
- // All variables used in the closure will be hoisted to the top of the function
- var a,
- i,
- b,
- f;
- // All functions in the closure will be hoisted to the top
- function x() {
- log('Mr. X!');
- }
-
- a = 10;
-
- for(i = 0; i < a; i++) {
- b = i * i;
- log(b);
- }
-
- if(a === 10) {
- // Function assignments will only result in hoisted variables but the function body will not be hoisted
- // Only by using a real function declaration the whole function will be hoisted with its body
- f = function() {
- log(a);
- };
- f();
- }
-
- x();
-
-}(window.console.log));
-```
-
-Considering now the hoisting above you can now see that you could also run the following code without any exceptions:
-
-**Valid code**
-```
-(function(log){
- 'use strict';
-
- var a = 10;
-
- i = 5;
-
- x();
-
- for(var i; i < a; i++) {
- log(b);
- var b = i * i;
- }
-
- if(a === 10) {
- f = function() {
- log(a);
- };
- f();
-
- var f;
- }
-
- function x() {
- log('Mr. X!');
- }
-
-}(window.console.log));
-```
-
-As you can see this looks very confusing and misunderstanding hoisting can lead to unexpected results. To minimize the
-risk of errors and bugs that resulted from misunderstanding hoisting your should follow the style rule of hoisted
-declarations in the next section.
-
-***
-
-### Use hoisted declarations
-
-To minimize risk of misunderstanding and misinterpreting results from hoisted variable and function declarations (see
-previous section) you should always try to hoist your variable and function declarations manually. This means that
-you should declare all your variables that you're using in a function as a fist statement in the function.
-
-Use only one `var` keyword and comma separate multiple declarations.
-
-**Not recommended**
-```
-(function(log){
- 'use strict';
-
- var a = 10;
- var b = 10;
-
- for(var i = 0; i < 10; i++) {
- var c = a * b * i;
- }
-
- function f() {
-
- }
-
- var d = 100;
- var x = function() {
- return d * d;
- };
- log(x());
-
-}(window.console.log));
-```
-
-**Recommended**
-```
-(function(log){
- 'use strict';
-
- var a = 10,
- b = 10,
- i,
- c,
- d,
- x;
-
- function f() {
-
- }
-
- for(i = 0; i < 10; i++) {
- c = a * b * i;
- }
-
-
-
- d = 100;
- x = function() {
- return d * d;
- };
- log(x());
-
-}(window.console.log));
-```
-
-Being pragmatic you should directly initialize your variables during hoisted declaration.
-
-**Not recommended**
-```
-var a,
- b,
- c;
-
-a = 10;
-b = 10;
-c = 100;
-```
-
-**Recommended**
-```
-var a = 10,
- b = 10,
- c = 100;
-```
-
-***
-
-### Always use strict equal
-
-Always use `===` explicit comparison operators and avoid the hassle you can go through by debugging issues resulted
-from the very much overcomplicated javascript type coercion.
-
-If you're using `===` operators both operands need to be from the same type in order to be valid and there will no
-type coercion be performed.
-
-If you'd like to get more information on type coercion you should read
-[this article by Dmitry Soshnikov](http://dmitrysoshnikov.com/notes/note-2-ecmascript-equality-operators/).
-
-By using only `==` you're telling javascript to use type coercion where needed which can be very complicated to trace
-down. A few examples can be seen below that should give you a indication how strange type coercion can feel:
-
-```
-(function(log){
- 'use strict';
-
- log('0' == 0); // true
- log('' == false); // true
- log('1' == true); // true
- log(null == undefined); // true
-
- var x = {
- valueOf: function() {
- return 'X';
- }
- };
-
- log(x == 'X');
-
-}(window.console.log));
-```
-
-***
-
-### Use truthy / falsy checks wisely
-
-By only putting one variable or expression into a if statement you're creating a truthy / falsy check. The expression
-`if(a == true)` is not the same as `if(a)`. The later expression is creating a special check which is called truthy /
-falsy check. This check performs some special operations in order to evaluate to true or false. The following
-expressions are falsy in javascript `false`, `0`, `undefined`, `null`, `NaN`, `''` (empty string).
-
-Truthy / falsy checks are very helpful as they allow you to quickly react on a group of conditions that you'd like to
-take care of but you need to be sure about what you actually want to do.
-
-The following example shows how truthy / falsy checks work:
-
-```
-(function(log){
- 'use strict';
-
- function logTruthyFalsy(expr) {
- if(expr) {
- log('truthy');
- } else {
- log('falsy');
- }
- }
-
- logTruthyFalsy(true); // truthy
- logTruthyFalsy(1); // truthy
- logTruthyFalsy({}); // truthy
- logTruthyFalsy([]); // truthy
- logTruthyFalsy('0'); // truthy
-
- logTruthyFalsy(false); // falsy
- logTruthyFalsy(0); // falsy
- logTruthyFalsy(undefined); // falsy
- logTruthyFalsy(null); // falsy
- logTruthyFalsy(NaN); // falsy
- logTruthyFalsy(''); // falsy
-
-}(window.console.log));
-```
-
-***
-
-### Logical operators for variable assignments
-
-The logical operators `||` and `&&` can also be used to return non-boolean values. If used with non booleans the
-operands will evaluate each expression from left to right and performs a falsy check. Depending on the operation, one
-of the expressions will be returned. This can be very helpful for variable assignments and should be considered in
-order to simplify your code.
-
-**Not recommended**
-```
-if(!x) {
- if(!y) {
- x = 1;
- } else {
- x = y;
- }
-}
-```
-
-**Recommended**
-```
-x = x || y || 1;
-```
-
-This shorthand is often used to validated function parameters. The following example illustrates one usage example:
-
-```
-(function(log){
- 'use strict';
-
- function multiply(a, b) {
- a = a || 1;
- b = b || 1;
-
- log('Result ' + a * b);
- }
-
- multiply(); // Result 1
- multiply(10); // Result 10
- multiply(3, NaN); // Result 3
- multiply(9, 5); // Result 45
-
-}(window.console.log));
-```
-
-***
-
-### Semicolons
-
-Always use semicolons. Relying on implicit insertion can cause subtle, hard to debug problems. Don't do it.
-You're better than that. There are a couple places where missing semicolons are particularly dangerous:
-
-```
-// 1.
-MyClass.prototype.myMethod = function() {
- return 42;
-} // No semicolon here.
-
-(function() {
- // Some initialization code wrapped in a function to create a scope for locals.
-})();
-
-
-var x = {
- 'i': 1,
- 'j': 2
-} // No semicolon here.
-
-// 2. Trying to do one thing on Internet Explorer and another on Firefox.
-// I know you'd never write code like this, but throw me a bone.
-[ffVersion, ieVersion][isIE]();
-
-
-var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here.
-
-// 3. conditional execution a la bash
--1 == resultOfOperation() || die();
-```
-
-**So what happens?**
-
-1. JavaScript error - first the function returning 42 is called with the second function as a parameter, then
-the number 42 is "called" resulting in an error.
-1. You will most likely get a 'no such property in undefined' error at runtime as it tries to
-call `x[ffVersion, ieVersion][isIE]()`.
-1. `die` is always called since the array minus 1 is `NaN` which is never equal to anything (not even if
-`resultOfOperation()` returns `NaN`) and `THINGS_TO_EAT` gets assigned the result of `die()`.
-
-**Why?**
-
-JavaScript requires statements to end with a semicolon, except when it thinks it can safely infer their existence.
-In each of these examples, a function declaration or object or array literal is used inside a statement. The closing
-brackets are not enough to signal the end of the statement. Javascript never ends a statement if the next token is an
-infix or bracket operator.
-
-This has really surprised people, so make sure your assignments end with semicolons.
-
-**Clarification: Semicolons and functions**
-
-Semicolons should be included at the end of function expressions, but not at the end of function declarations.
-The distinction is best illustrated with an example:
-
-```
-var foo = function() {
- return true;
-}; // semicolon here.
-
-function foo() {
- return true;
-} // no semicolon here.
-```
-
-***
-
-### Nested functions
-
-Nested functions can be very useful, for example in the creation of continuations and for the task of hiding helper
-functions. Feel free to use them.
-
-***
-
-### Function declaration within blocks
-
-Do not declare functions in blocks. This is not valid in ECMAScript 5 strict mode. Functions should be declared on
-top level. Don't hesitate to use variables initialized with function expressions inside of blocks though:
-
-**Not recommended**
-```
-if (x) {
- function foo() {}
-}
-```
-
-**Recommended**
-```
-if (x) {
- var foo = function() {};
-}
-```
-
-***
-
-### Exceptions
-
-You basically can't avoid exceptions if you're doing something non-trivial (using an application development framework,
-etc.).
-
-Without custom exceptions, returning error information from a function that also returns a value can be tricky, not to
-mention inelegant. Bad solutions include passing in a reference type to hold error information or always returning
-Objects with a potential error member. These basically amount to a primitive exception handling hack.
-Feel free to use custom exceptions when appropriate.
-
-In complex environments you should consider throwing objects rather than just strings (default throws).
-
-```
-if(name === undefined) {
- throw {
- name: 'System Error',
- message: 'A name should always be specified!'
- }
-}
-```
-
-***
-
-### Standard features
-
-Always preferred over non-standards features. For maximum portability and compatibility, always prefer standards
-features over non-standards features (e.g., `string.charAt(3)` over `string[3]` and element access with DOM functions
-instead of using an application-specific shorthand).
-
-***
-
-### Simple prototypical inheritance
-
-If you need inheritance of your objects in Javascript follow a simple pattern to create inheritance. If you know that
-you'll end up with complex object inheritance consider a inheritance library like
-[Proto.js by Axel Rauschmayer](https://github.com/rauschma/proto-js).
-
-For simple cases use like the bellow.
-
-```
-(function(log){
- 'use strict';
-
- // Constructor function
- function Apple(name) {
- this.name = name;
- }
- // Defining a method of apple
- Apple.prototype.eat = function() {
- log('Eating ' + this.name);
- };
-
- // Constructor function
- function GrannySmithApple() {
- // Invoking parent constructor
- Apple.prototype.constructor.call(this, 'Granny Smith');
- }
- // Set parent prototype while creating a copy with Object.create
- GrannySmithApple.prototype = Object.create(Apple.prototype);
- // Set constructor to the sub type, otherwise points to Apple
- GrannySmithApple.prototype.constructor = GrannySmithApple;
-
- // Calling a super method
- GrannySmithApple.prototype.eat = function() {
- // Be sure to apply it onto our current object with call(this)
- Apple.prototype.eat.call(this);
-
- log('Poor Grany Smith');
- };
-
- // Instantiation
- var apple = new Apple('Test Apple');
- var grannyApple = new GrannySmithApple();
-
- log(apple.name); // Test Apple
- log(grannyApple.name); // Granny Smith
-
- // Instance checks
- log(apple instanceof Apple); // true
- log(apple instanceof GrannySmithApple); // false
-
- log(grannyApple instanceof Apple); // true
- log(grannyApple instanceof GrannySmithApple); // true
-
- // Calling method that calls super method
- grannyApple.eat(); // Eating Granny Smith\nPoor Grany Smith
-
-}(window.console.log));
-```
-
-***
-
-### Use Closures
-
-The ability to create closures is perhaps the most useful and often overlooked feature of JS.
-Here is [a good description of how closures work](http://jibbering.com/faq/faq_notes/closures.html).
-
-***
-
-### Don't create functions in loops
-
-It's generally a potential source for bugs if you write functions that create a closure inside of simple loops. The
-following example illustrates a common pitfall.
-
-**Not recommended**
-```
-(function(log, w){
- 'use strict';
-
- // numbers and i is defined in the current function closure
- var numbers = [1, 2, 3],
- i;
-
- for(i = 0; i < numbers.length; i++) {
- w.setTimeout(function() {
- // At the moment when this gets executed the i variable, coming from the outer function scope
- // is set to 3 and the current program is alerting the message 3 times
- // 'Index 3 with number undefined
- // If you understand closures in javascript you know how to deal with those cases
- // It's best to just avoid functions / new closures in loops as this prevents those issues
-
- w.alert('Index ' + i + ' with number ' + numbers[i]);
- }, 0);
- }
-
-}(window.console.log, window));
-```
-
-The following variation of the above example solves our problem / bug but still violates our policy to not create
-functions / closures inside of loops.
-
-**Not recommended**
-```
-(function(log, w){
- 'use strict';
-
- // numbers and i is defined in the current function closure
- var numbers = [1, 2, 3],
- i;
-
- for(i = 0; i < numbers.length; i++) {
- // Creating a new closure scope with an IIFE solves the problem
- // The delayed function will use index and number which are
- // in their own closure scope (one closure per loop iteration).
- // ---
- // Still this is not recommended as we violate our rule to not
- // create functions within loops and we are creating two!
-
- (function(index, number){
- w.setTimeout(function() {
- // Will output as expected 0 > 1, 1 > 2, 2 > 3
- w.alert('Index ' + index + ' with number ' + number);
- }, 0);
- }(i, numbers[i]));
- }
-
-}(window.console.log, window));
-```
-
-The following variation solves our problem / bug and we also comply with our style guide. However, this seems to be
-heavily overcomplicated and we should look for a better / easier way.
-
-**Partially recommended**
-```
-(function(log, w){
- 'use strict';
-
- // numbers and i is defined in the current function closure
- var numbers = [1, 2, 3],
- i;
-
- // Create a function outside of the loop that will accept arguments to create a
- // function closure scope. This function will return a function that executes in this
- // closure parent scope.
- function alertIndexWithNumber(index, number) {
- return function() {
- w.alert('Index ' + index + ' with number ' + number);
- };
- }
-
- // First parameter is a function call that returns a function.
- // ---
- // This solves our problem and we don't create a function inside our loop
- for(i = 0; i < numbers.length; i++) {
- w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
- }
-
-}(window.console.log, window));
-```
-
-By using a functional approach for our loop we solve the problem immediately as we create a new closure with every loop.
-Functional style is recommended and will also lead to more natural and expected results.
-
-**Recommended**
-```
-(function(log, w){
- 'use strict';
-
- // numbers and i is defined in the current function closure
- var numbers = [1, 2, 3],
- i;
-
- numbers.forEach(function(number, index) {
- w.setTimeout(function() {
- w.alert('Index ' + index + ' with number ' + number);
- }, 0);
- });
-
-}(window.console.log, window));
-```
-
-***
-
-### The (evil) eval function
-
-`eval()` makes for confusing semantics and is dangerous to use if the string being eval()'d contains user input.
-There's usually a better, clearer, and safer way to write your code, so its use is generally not permitted.
-
-***
-
-### The this keyword
-
-Use the `this` keyword only in object constructors, methods, and in setting up closures. The semantics of this can be
-tricky. At times it refers to the global object (in most places), the scope of the caller (in eval), a node in the DOM
-tree (when attached using an event handler HTML attribute), a newly created object (in a constructor), or some other
-object (if function was call()ed or apply()ed).
-
-Because this is so easy to get wrong, limit its use to those places where it is required:
-
-- in constructors
-- in methods of objects (including in the creation of closures)
-
-***
-
-### Functional is preferred
-
-Using functional style programming you can simplify your code and reduce maintenance cost by gaining easy re-usability,
-proper isolation and less dependencies.
-
-The following example compares two solutions for the same problem of summing up all number elements in an array. The
-first example is a classical procedural approach while the second one makes use of functional style programming and the
-ECMA Script 5.1 array functions.
-
-Exception: In situations where performance is considered to be more important than maintainability then you might
-consider the most performant solution over the most maintainable (i.e. using simple for loop over forEach)
-
-**Not recommended**
-```
-(function(log){
- 'use strict';
-
- var arr = [10, 3, 7, 9, 100, 20],
- sum = 0,
- i;
-
-
- for(i = 0; i < arr.length; i++) {
- sum += arr[i];
- }
-
- log('The sum of array ' + arr + ' is: ' + sum)
-
-}(window.console.log));
-```
-
-**Recommended**
-```
-(function(log){
- 'use strict';
-
- var arr = [10, 3, 7, 9, 100, 20];
-
- var sum = arr.reduce(function(prevValue, currentValue) {
- return prevValue + currentValue;
- }, 0);
-
- log('The sum of array ' + arr + ' is: ' + sum);
-
-}(window.console.log));
-```
-
-An other example would be to filter an array for certain criteria so that we can create a new array that only contains
-those elements that match the criteria.
-
-**Not recommended**
-```
-(function(log){
- 'use strict';
-
- var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
- numbersGreaterTen = [],
- i;
-
-
- for(i = 0; i < numbers.length; i++) {
- if(numbers[i] > 10) {
- numbersGreaterTen.push(numbers[i]);
- }
- }
-
- log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
-
-}(window.console.log));
-```
-
-**Recommended**
-```
-(function(log){
- 'use strict';
-
- var numbers = [11, 3, 7, 9, 100, 20, 14, 10];
-
- var numbersGreaterTen = numbers.filter(function(element) {
- return element > 10;
- });
-
- log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
-
-}(window.console.log));
-```
-
-***
-
-### Use ECMA Script 5
-
-Use the syntactical sugar and functional style that was added with ECMA Script 5. It's simplifying your programming
-style and makes your code more flexible and re-usable.
-
-***
-
-### Array and object property iteration
-
-The ECMA5 way to iterate over an array is preferred. Use Array.forEach or Array.every if you would like to cancel the
-iteration at a certain condition.
-
-```
-(function(log){
- 'use strict';
-
- // Iterate over an array and break at a certain condition
- [1, 2, 3, 4, 5].every(function(element, index, arr) {
- log(element + ' at index ' + index + ' in array ' + arr);
-
- if(index !== 5) {
- return true;
- }
- });
-
- // Defining a simple javascript object
- var obj = {
- a: 'A',
- b: 'B',
- 'c-d-e': 'CDE'
- };
-
- // Iterating over the object keys
- Object.keys(obj).forEach(function(element, index, arr) {
- log('Key ' + element + ' has value ' + obj[element]);
- });
-
-}(window.console.log));
-```
-
-***
-
-### Don't use switch
-
-switch is a very error prone control statement in every programming language. Use if else if instead.
-
-***
-
-### Array and Object literals
-
-Use Array and Object literals instead of Array and Object constructors. Array constructors are error-prone due to their
-arguments.
-
-**Not recommended**
-```
-// Length is 3.
-var a1 = new Array(x1, x2, x3);
-
-// Length is 2.
-var a2 = new Array(x1, x2);
-
-// If x1 is a number and it is a natural number the length will be x1.
-// If x1 is a number but not a natural number this will throw an exception.
-// Otherwise the array will have one element with x1 as its value.
-var a3 = new Array(x1);
-
-// Length is 0.
-var a4 = new Array();
-```
-
-Because of this, if someone changes the code to pass 1 argument instead of 2 arguments, the array might not have the
-expected length. To avoid these kinds of weird cases, always use the more readable array literal.
-
-**Recommended**
-```
-var a = [x1, x2, x3];
-var a2 = [x1, x2];
-var a3 = [x1];
-var a4 = [];
-```
-
-Object constructors don't have the same problems, but for readability and consistency object literals should be used.
-
-**Not recommended**
-```
-var o = new Object();
-
-var o2 = new Object();
-o2.a = 0;
-o2.b = 1;
-o2.c = 2;
-o2['strange key'] = 3;
-```
-
-Should be written as:
-
-**Recommended**
-```
-var o = {};
-
-var o2 = {
- a: 0,
- b: 1,
- c: 2,
- 'strange key': 3
-};
-```
-
-***
-
-### Modifying prototypes of builtin objects
-
-Modifying builtins like `Object.prototype` and `Array.prototype` are strictly forbidden. Modifying other builtins like
-`Function.prototype` is less dangerous but still leads to hard to debug issues in production and should be avoided.
-
-***
-
-### Custom toString() methods
-
-You can control how your objects string-ify themselves by defining a custom `toString()` method. This is fine, but you
-need to ensure that your method (1) always succeeds and (2) does not have side-effects. If your method doesn't meet
-these criteria, it's very easy to run into serious problems. For example, if `toString()` calls a method that does an
-assert, assert might try to output the name of the object in which it failed, which of course requires
-calling `toString()`.
-
-***
-
-### Parentheses
-
-Use sparingly and in general only where required by the syntax and semantics. Never use parentheses for unary
-operators such as `delete`, `typeof` and `void` or after keywords such as `return`, `throw` as well
-as others (`case`, in or `new`).
-
-***
-
-### Strings
-
-For consistency single-quotes (') are preferred to double-quotes ("). This is helpful when creating
-strings that include HTML:
-
-```
-var msg = 'This is some HTML ';
-```
-
-***
-
-### Conditional Ternary Operator (shorthand if)
-
-Use the ternary operator for assignments or return statements. Use it only in simple conditions and avoid it in complex
-ones. No body likes to wrap his brain around 10 lines of nested ternary operators.
-
-**Not recommended**
-```
-if(x === 10) {
- return 'valid';
-} else {
- return 'invalid';
-}
-```
-
-**Recommended**
-```
-return x === 10 ? 'valid' : 'invalid';
-```
-
-***
-
-## CSS and Sass (SCSS) style rules
-
-***
-
-### ID and class naming
-
-Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in
-question, or that are otherwise generic.
-
-Names that are specific and reflect the purpose of the element should be preferred as these are most understandable
-and the least likely to change.
-
-Generic names are simply a fallback for elements that have no particular or no meaning different from their siblings.
-They are typically needed as āhelpers.ā
-
-Even though class names and ID's have no semantic meaning to computer interpreters, semantic names are often the right
-choice as they represent the information meaning and don't introduce presentational constraints.
-
-**Not recommended**
-```
-.fw-800 {
- font-weight: 800;
-}
-
-.red {
- color: red;
-}
-```
-
-**Recommended**
-```
-.heavy {
- font-weight: 800;
-}
-
-.important {
- color: red;
-}
-```
-
-***
-
-### Avoid ID's where possible
-
-In general ID's should not be used to apply style. Styles on ID's can't be re-used and you can only use them once per
-page. The only valid location for using an ID would be to identify a page or a whole site. Still you should always
-consider using a class that you use once instead of an id.
-
-**Not recommended**
-```
-#content .title {
- font-size: 2em;
-}
-```
-
-**Recommended**
-```
-.content .title {
- font-size: 2em;
-}
-```
-
-One other argument against using ID's would be that selector chains containing ID's are over-prioritized. A selector
-containing just one ID is weighted higher than a selector containing 1000 class names only which makes it very odd.
-
-```
-// This selecor is considered with higher priority
-#content .title {
- color: red;
-}
-
-// than this selector!
-html body div.content.news-content .title.content-title.important {
- color: blue;
-}
-```
-
-***
-
-### Avoid elements in CSS selectors
-
-When building your selectors use clear, precise and sensible class names. Don't use element selectors. If you're only
-concerned about your class names and not about your elements your code gets a lot more maintainable.
-
-From a separation of concerns perspective you don't want to dictate the markup / semantics from the presentation layer.
-It might be that a ordered list needs to be changed to an unordered list or that a div will be converted to an article.
-If you only care about sensible class names and don't use element selectors you'd only need to change your markup and
-not your css.
-
-**Not recommended**
-```
-div.content > header.content-header > h2.title {
- font-size: 2em;
-}
-```
-
-**Recommended**
-```
-.content > .content-header > .title {
- font-size: 2em;
-}
-```
-
-***
-
-### Be as precise as possible
-
-A lot of front-end developers don't use direct child selectors when they write their selector chains. Sometimes this
-can cause painful design issues and other times it's just a performance eater. However, in any case, it's a very bad
-practice. If you don't write very generic selectors that need to match down to the bottom of the DOM you should always
-consider direct child selectors.
-
-Consider the following DOM:
-
-```
-
- News event
-
-
- Check this out
-
-
-
This is a news article content
-
-
-
Buy this
-
Yey!
-
-
-
-```
-
-The following CSS would apply to all three elements that have a title class. This then would need to be overridden again
-with more granular selectors in order to fix the content title and the teaser title.
-
-**Not recommended**
-```
-.content .title {
- font-size: 2rem;
-}
-```
-
-**Recommended**
-```
-.content > .title {
- font-size: 2rem;
-}
-
-.content > .content-body > .title {
- font-size: 1.5rem;
-}
-
-.content > .content-body > .teaser > .title {
- font-size: 1.2rem;
-}
-```
-
-***
-
-### Shorthand Properties
-
-CSS offers a variety of shorthand properties (like font) that should be used whenever possible, even in cases where
-only one value is explicitly set.
-
-Using shorthand properties is useful for code efficiency and understandability.
-
-**Not recommended**
-```
-border-top-style: none;
-font-family: palatino, georgia, serif;
-font-size: 100%;
-line-height: 1.6;
-padding-bottom: 2em;
-padding-left: 1em;
-padding-right: 1em;
-padding-top: 0;
-```
-
-**Recommended**
-```
-border-top: 0;
-font: 100%/1.6 palatino, georgia, serif;
-padding: 0 1em 2em;
-```
-
-***
-
-### 0 and units
-
-Omit unit specification after ā0ā values. Do not use units after 0 values unless they are required.
-
-**Not recommended**
-```
-padding-bottom: 0px;
-margin: 0em;
-```
-
-**Recommended**
-```
-padding-bottom: 0;
-margin: 0;
-```
-
-***
-
-### Hexadecimal Notation
-
-Use 3 character hexadecimal notation where possible. For color values that permit it, 3 character hexadecimal notation
-is shorter and more succinct.
-
-Always use lower case hex digits.
-
-**Not recommended**
-```
-color: #FF33AA;
-```
-
-**Recommended**
-```
-color: #f3a;
-```
-
-***
-
-### ID and Class Name Delimiters
-
-Separate words in ID and class names by a hyphen. Do not concatenate words and abbreviations in selectors by any
-characters (including none at all) other than hyphens, in order to improve understanding and scannability.
-
-Also as the standard foresees attribute selectors that recognise hyphens as separator of words `[attribute|=value]`
-it's best to stick to the hyphen as separator.
-
-**Not recommended**
-```
-.demoimage {}
-.error_status {}
-```
-
-**Recommended**
-```
-#video-id {}
-.ads-sample {}
-```
-
-***
-
-### Hacks
-
-Avoid user agent detection as well as CSS āhacksāātry a different approach first. Itās tempting to address styling
-differences over user agent detection or special CSS filters, workarounds, and hacks. Both approaches should be
-considered last resort in order to achieve and maintain an efficient and manageable code base. Put another way, giving
-detection and hacks a free pass will hurt projects in the long run as projects tend to take the way of least
-resistance. That is, allowing and making it easy to use detection and hacks means using detection and hacks more
-frequentlyāand more frequently is too frequently.
-
-***
-
-### Declaration Order
-
-This example should give a rough outline of how to order CSS properties within a selector. This is important in order
-to guarantee better readability and better scannability.
-
-As a best practice we should follow the following ordering (in the same order as the listing):
-
-1. structural
- 1. display
- 1. position, left, top, right etc.
- 1. overflow, float, clear etc.
- 1. margin, padding
-1. skin
- 1. background, border etc.
- 1. font, text
-
-**Not recommended**
-```
-.box {
- font-family: 'Arial', sans-serif;
- border: 3px solid #ddd;
- left: 30%;
- position: absolute;
- text-transform: uppercase;
- background-color: #eee;
- right: 30%;
- isplay: block;
- font-size: 1.5rem;
- overflow: hidden;
- padding: 1em;
- margin: 1em;
-}
-```
-
-**Recommended**
-```
-.box {
- display: block;
- position: absolute;
- left: 30%;
- right: 30%;
- overflow: hidden;
- margin: 1em;
- padding: 1em;
- background-color: #eee;
- border: 3px solid #ddd;
- font-family: 'Arial', sans-serif;
- font-size: 1.5rem;
- text-transform: uppercase;
-}
-```
-
-***
-
-### Declaration Stops
-
-End every declaration with a semicolon for consistency and extensibility reasons and put each declaration on a new line.
-
-**Not recommended**
-```
-.test {
- display: block; height: 100px
-}
-```
-
-**Recommended**
-```
-.test {
- display: block;
- height: 100px;
-}
-```
-
-***
-
-### Property Name Stops
-
-Use a space after a property nameās colon. Always use a single space between property and value (but no space between
-property and colon) for consistency reasons.
-
-**Not recommended**
-```
-h3 {
- font-weight:bold;
-}
-```
-
-**Recommended**
-```
-h3 {
- font-weight: bold;
-}
-```
-
-***
-
-### Selector and Declaration Separation
-
-Always start a new line for each selector and declaration.
-
-**Not recommended**
-```
-a:focus, a:active {
- position: relative; top: 1px;
-}
-```
-
-**Recommended**
-```
-h1,
-h2,
-h3 {
- font-weight: normal;
- line-height: 1.2;
-}
-```
-
-***
-
-### Rule Separation
-
-Always put a blank line (two line breaks) between rules.
-
-**Recommended**
-```
-html {
- background: #fff;
-}
-
-body {
- margin: auto;
- width: 50%;
-}
-```
-
-***
-
-### CSS Quotation Marks
-
-Use double ("") rather than single ('') quotation marks for attribute selectors or property values.
-Do not use quotation marks in URI values (url()).
-
-**Not recommended**
-```
-@import url('//cdn.com/foundation.css');
-
-html {
- font-family: 'open sans', arial, sans-serif;
-}
-
-body:after {
- content: 'pause';
-}
-```
-
-**Recommended**
-```
-@import url(//cdn.com/foundation.css);
-
-html {
- font-family: "open sans", arial, sans-serif;
-}
-
-body:after {
- content: "pause";
-}
-```
-
-***
-
-### Nested selectors (SCSS)
-
-In Sass you can nest selectors which is much cleaner and the code becomes much more readable. Nest all selectors but
-try to avoid nesting without any content. If you need to specify some style attributes for a child element where the
-parent element will not receive any styling use a regular CSS selector chain. This will prevent your script to look
-overcomplicated.
-
-**Not recommended**
-```scss
-// Not a good example by not making use of nesting at all
-.content {
- display: block;
-}
-
-.content > .news-article > .title {
- font-size: 1.2em;
-}
-```
-
-**Not recommended**
-```scss
-// Using nesting is better but not in all cases
-// Avoid nesting when there is no attributes and use selector chains instead
-.content {
- display: block;
-
- > .news-article {
- > .title {
- font-size: 1.2em;
- }
- }
-}
-```
-
-**Recommended**
-```scss
-// This example takes the best approach while nesting but use selector chains where possible
-.content {
- display: block;
-
- > .news-article > .title {
- font-size: 1.2em;
- }
-}
-```
-
-***
-
-### Introducing space while nesting (SCSS)
-
-If you nest your selectors introduce blank line between your nested selectors and the css attributes.
-
-**Not recommended**
-```scss
-.content {
- display: block;
- > .news-article {
- background-color: #eee;
- > .title {
- font-size: 1.2em;
- }
- > .article-footnote {
- font-size: 0.8em;
- }
- }
-}
-```
-
-**Recommended**
-```scss
-.content {
- display: block;
-
- > .news-article {
- background-color: #eee;
-
- > .title {
- font-size: 1.2em;
- }
-
- > .article-footnote {
- font-size: 0.8em;
- }
- }
-}
-```
-
-***
-
-### Contextual media queries (SCSS)
-
-While nesting your selectors you can also make use of contextual media queries within Sass. With Sass you can use media
-queries at any given nesting level. The resulting CSS will be converted so that the media query gets rendered around the
-selector.
-
-This technique is very handy and helps to keep media queries in the context where they belong to. With a mobile first
-approach this allows you to write your mobile styles first and then use contextual media queries where ever you need
-them in order to provide the desktop styles.
-
-**Not recommended**
-```scss
-// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
-// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
-// the content in the media query to the content in the upper part (mobile style)
-
-.content-page {
- font-size: 1.2rem;
-
- > .main {
- background-color: whitesmoke;
-
- > .latest-news {
- padding: 1rem;
-
- > .news-article {
- padding: 1rem;
-
- > .title {
- font-size: 2rem;
- }
- }
- }
-
- > .content {
- margin-top: 2rem;
- padding: 1rem;
- }
- }
-
- > .page-footer {
- margin-top: 2rem;
- font-size: 1rem;
- }
-}
-
-@media screen and (min-width: 641px) {
- .content-page {
- font-size: 1rem;
-
- > .main > .latest-news > .news-article > .title {
- font-size: 3rem;
- }
-
- > .page-footer {
- font-size: 0.8rem;
- }
- }
-}
-```
-
-**Recommended**
-```scss
-// This is the same example as above but here we use contextual media queries in order to put the different styles
-// for different media into the right context.
-
-.content-page {
- font-size: 1.2rem;
-
- @media screen and (min-width: 641px) {
- font-size: 1rem;
- }
-
- > .main {
- background-color: whitesmoke;
-
- > .latest-news {
- padding: 1rem;
-
- > .news-article {
- padding: 1rem;
-
- > .title {
- font-size: 2rem;
-
- @media screen and (min-width: 641px) {
- font-size: 3rem;
- }
- }
- }
- }
-
- > .content {
- margin-top: 2rem;
- padding: 1rem;
- }
- }
-
- > .page-footer {
- margin-top: 2rem;
- font-size: 1rem;
-
- @media screen and (min-width: 641px) {
- font-size: 0.8rem;
- }
- }
-}
-```
-
-***
-
-### Nesting order and the parent selector (SCSS)
-
-While using the nesting features of Sass it's important to have a clear order to put your nesting in. A SCSS block
-should have the following content order.
-
-1. Current selector's style attributes
-1. Pseudo selectors with parent selector (:first-letter, :hover, :active etc)
-1. Pseudo elements (:before and :after)
-1. State classe with parent selector (.selected, .active, .enlarged etc.)
-1. Contextual media queries with Sass
-1. Sub selectors as the last part
-
-The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass
-parent selector.
-
-**Recommended**
-```scss
-.product-teaser {
- // 1. Style attributes
- display: inline-block;
- padding: 1rem;
- background-color: whitesmoke;
- color: grey;
-
- // 2. Pseudo selectors with parent selector
- &:hover {
- color: black;
- }
-
- // 3. Pseudo elements with parent selector
- &:before {
- content: "";
- display: block;
- border-top: 1px solid grey;
- }
-
- &:after {
- content: "";
- display: block;
- border-top: 1px solid grey;
- }
-
- // 4. State classes with parent selector
- &.active {
- background-color: pink;
- color: red;
-
- // 4.2. Pseuso selector in state class selector
- &:hover {
- color: darkred;
- }
- }
-
- // 5. Contextual media queries
- @media screen and (max-width: 640px) {
- display: block;
- font-size: 2em;
- }
-
- // 6. Sub selectors
- > .content > .title {
- font-size: 1.2em;
-
- // 6.5. Contextual media queries in sub selector
- @media screen and (max-width: 640px) {
- letter-spacing: 0.2em;
- text-transform: uppercase;
- }
- }
-}
-```
-
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index aa53b62a8..f131704ff 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,8 +1,7 @@
-# Contributing to chartist-js
+# Contributing to Chartist
- - [Issues and Bugs](#issue)
- - [Submission Guidelines](#submit)
- - [Coding Conventions](#conventions)
+- [Issues and Bugs](#issue)
+- [Submission Guidelines](#submit)
## Found an Issue?
@@ -15,48 +14,15 @@ with a fix.
You will need the following to run a local development enviroment.
- Node.js & npm
-- Bower (`sudo npm install bower -g`)
-- Grunt (`sudo npm install grunt-cli -g`)
+- pnpm (`npm install -g pnpm`)
- Text editor of your choice
-
## How to Run a Local Distribution
1. `cd` into your local copy of the repository.
-2. Run `npm install` to install dependencies located in `package.json`.
-3. Run `bower install` to install bower dependencies.
-5. Run `grunt preview` to start the watch task, and the web server should automatically open. Congrats, you should now be able to see your local copy of the demo site.
+2. Run `pnpm i` to install dependencies located in `package.json`.
+5. Run `pnpm start:storybook` to start Storybook, or run `pnpm jest --watch` to run tests in watch mode. Congrats, you should now be able to see your local copy of the Chartist testbed.
## Submission Guidelines
If you are creating a Pull Request, fork the repository and make any changes on the `develop` branch.
-
-### Conventions
-
-Check out the [Coding Style document](CODINGSTYLE.md)
-
-### Grunt
-
-We have five grunt tasks:
-
-1. `grunt build` - Combines the scripts and creates the library for distribution
-2. `grunt public` - Creates the distribution of the example / demo site which is used as visual development help of the charts but also serves as the documentation site / gh-pages.
-3. `grunt dev` - Starts watch with livereload that is executing the same things as the site build default task but for live development.
-4. `grunt preview` - Executes a dist and serves the directory statically in order to serve with the production example / demo site.
-5. `grunt test` - Executes jasmine tests separately, although we have a very big lack of tests.
-
-`dist` should **not** be included in any Pull Requests. So please ensure that code is not being committed as part of the Pull Request.
-
-### Documentation
-
-- Everything is already in place and in the `sitedist` there is a `apidoc` folder generated by [doxication](https://github.com/gionkunz/grunt-doxication) generator that uses JSDoc like comments to generate documentation meta files. Always use proper JSDoc comments when documenting methods and API interfaces. Also assign documentation blocks using @memberof to the virtual module they belong to.
-- The site documentation is built with [Assemble.io](http://assemble.io/). Generally a component based approach should be followed where there are already Handlebar partials / helpers in order to create whole sites based on components that can be specified by type and with their data in yaml files.
-
-### Important missing stuff
-
-1. Jasmine Tests!
-2. Documentation: JSDoc, Getting started documentation and landing page
-3. Better accessibility using ARIA and other optimizations
-4. Better interfaces to the library (i.e. jQuery with data-* attributes for configuration), Angular.js directive etc.
-5. Richer Sass / CSS framework
-6. Other charts types (spider etc.)
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index 844ec02cd..000000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Grunt Configurations
- * ====================
- *
- * Seperate tasks and configurations are declared in '/tasks'.
- *
- * Link: https://github.com/firstandthird/load-grunt-config
- */
-
-'use strict';
-
-module.exports = function (grunt) {
-
- // tracks how long a tasks take
- require('time-grunt')(grunt);
-
- // load task and configurations
- require('load-grunt-config')(grunt, {
- configPath: __dirname + '/tasks',
- data: {
- pkg: grunt.file.readJSON('package.json'),
- year: new Date().getFullYear()
- },
- jitGrunt: {
- staticMappings: {
- 'useminPrepare': 'grunt-usemin',
- 'assemble': 'assemble'
- }
- }
- });
-};
diff --git a/LICENSE-WTFPL b/LICENSE-WTFPL
index 5c93f4565..58a9d91c9 100644
--- a/LICENSE-WTFPL
+++ b/LICENSE-WTFPL
@@ -1,13 +1,13 @@
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
- Copyright (C) 2004 Sam Hocevar
+Copyright (C) 2004 Sam Hocevar
- Everyone is permitted to copy and distribute verbatim or modified
- copies of this license document, and changing it is allowed as long
- as the name is changed.
+Everyone is permitted to copy and distribute verbatim or modified
+copies of this license document, and changing it is allowed as long
+as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
- TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+ TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/README.md b/README.md
index 348946be9..02a281c1f 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,98 @@
# Big welcome by the Chartist Guy
-[](https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[](https://npmjs.org/package/chartist) [](https://travis-ci.org/gionkunz/chartist-js) [](http://inch-ci.org/github/gionkunz/chartist-js)
+[![NPM version][npm]][npm-url]
+[![Downloads][downloads]][downloads-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+[![Bundle size][size]][size-url]
+[![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url]
-
+[npm]: https://img.shields.io/npm/v/chartist.svg
+[npm-url]: https://www.npmjs.com/package/chartist
-*Checkout the documentation site at http://gionkunz.github.io/chartist-js/*
+[downloads]: https://img.shields.io/npm/dm/chartist.svg
+[downloads-url]: https://www.npmjs.com/package/chartist
-*Checkout this lightning talk that gives you an overview of Chartist in 5 minutes https://www.youtube.com/watch?v=WdYzPhOB_c8*
+[build]: https://img.shields.io/github/workflow/status/chartist-js/chartist/CI.svg
+[build-url]: https://github.com/chartist-js/chartist/actions
-*Guest talk of the Chartist.js Guy at the Treehouse Show https://www.youtube.com/watch?v=h9oH0iDaZDQ&t=2m40s*
+[coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg
+[coverage-url]: https://app.codecov.io/gh/chartist-js/chartist
-Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already
+[size]: https://img.shields.io/bundlephobia/minzip/chartist
+[size-url]: https://bundlephobia.com/package/chartist
+
+[chat]: https://badges.gitter.im/gionkunz/chartist-js.svg
+[chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
+
+
Sorry, but the page you were trying to view does not exist.
-
It looks like this was the result of either:
-
-
a mistyped address
-
an out-of-date link
-
-
-
-
-
-
diff --git a/site/code-snippets/1-dimension-values.js b/site/code-snippets/1-dimension-values.js
deleted file mode 100644
index 18177c918..000000000
--- a/site/code-snippets/1-dimension-values.js
+++ /dev/null
@@ -1,4 +0,0 @@
-var data = {
- labels: ['A', 'B', 'C'],
- series: [[10, 8, 14]]
-};
diff --git a/site/code-snippets/2-dimensions-values.js b/site/code-snippets/2-dimensions-values.js
deleted file mode 100644
index f28adaef8..000000000
--- a/site/code-snippets/2-dimensions-values.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var data = {
- labels: ['A', 'B', 'C'],
- series: [[
- {x: undefined, y: 10},
- {x: undefined, y: 8},
- {x: undefined, y: 14}
- ]]
-};
diff --git a/site/code-snippets/aspect-ratio-container.html b/site/code-snippets/aspect-ratio-container.html
deleted file mode 100644
index c774467b6..000000000
--- a/site/code-snippets/aspect-ratio-container.html
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/site/code-snippets/colour-override-line-chart.css b/site/code-snippets/colour-override-line-chart.css
deleted file mode 100644
index 54306316e..000000000
--- a/site/code-snippets/colour-override-line-chart.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.ct-series-a .ct-line,
-.ct-series-a .ct-point {
- stroke: blue;
-}
-
-.ct-series-b .ct-line,
-.ct-series-b .ct-point {
- stroke: green;
-}
diff --git a/site/code-snippets/custom-include.scss b/site/code-snippets/custom-include.scss
deleted file mode 100644
index f7eb41d4a..000000000
--- a/site/code-snippets/custom-include.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "_my-chartist-settings.scss";
-@import "chartist/dist/scss/chartist.scss";
diff --git a/site/code-snippets/custom-style-bar-chart.css b/site/code-snippets/custom-style-bar-chart.css
deleted file mode 100644
index 9c6809ad7..000000000
--- a/site/code-snippets/custom-style-bar-chart.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
-.ct-series-a .ct-bar {
- /* Colour of your bars */
- stroke: red;
- /* The width of your bars */
- stroke-width: 20px;
- /* Yes! Dashed bars! */
- stroke-dasharray: 20px;
- /* Maybe you like round corners on your bars? */
- stroke-linecap: round;
-}
diff --git a/site/code-snippets/custom-style-donut-chart.css b/site/code-snippets/custom-style-donut-chart.css
deleted file mode 100644
index a96c124c5..000000000
--- a/site/code-snippets/custom-style-donut-chart.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
-.ct-series-a .ct-slice-donut {
- /* give the donut slice a custom colour */
- stroke: blue;
- /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
- stroke-width: 5px !important;
- /* create modern looking rounded donut charts */
- stroke-linecap: round;
-}
diff --git a/site/code-snippets/custom-style-line-chart.css b/site/code-snippets/custom-style-line-chart.css
deleted file mode 100644
index 82bdaf63d..000000000
--- a/site/code-snippets/custom-style-line-chart.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* Use this selector to override the line style on a given series */
-.ct-series-a .ct-line {
- /* Set the colour of this series line */
- stroke: red;
- /* Control the thikness of your lines */
- stroke-width: 5px;
- /* Create a dashed line with a pattern */
- stroke-dasharray: 10px 20px;
-}
-
-/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
-.ct-series-a .ct-point {
- /* Colour of your points */
- stroke: red;
- /* Size of your points */
- stroke-width: 20px;
- /* Make your points appear as squares */
- stroke-linecap: square;
-}
diff --git a/site/code-snippets/custom-style-pie-chart.css b/site/code-snippets/custom-style-pie-chart.css
deleted file mode 100644
index 52c30cc13..000000000
--- a/site/code-snippets/custom-style-pie-chart.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Pie charts consist of solid slices where you can use this selector to override the default style. */
-.ct-series-a .ct-slice-pie {
- /* fill of the pie slieces */
- fill: hsl(120, 40%, 60%);
- /* give your pie slices some outline or separate them visually by using the background color here */
- stroke: white;
- /* outline width */
- stroke-width: 4px;
-}
diff --git a/site/code-snippets/plugin-example.js b/site/code-snippets/plugin-example.js
deleted file mode 100644
index dd2adf026..000000000
--- a/site/code-snippets/plugin-example.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function ctPointLabels(options) {
- return function ctPointLabels(chart) {
- var defaultOptions = {
- labelClass: 'ct-label',
- labelOffset: {
- x: 0,
- y: -10
- },
- textAnchor: 'middle'
- };
-
- options = Chartist.extend({}, defaultOptions, options);
-
- if(chart instanceof Chartist.Line) {
- chart.on('draw', function(data) {
- if(data.type === 'point') {
- data.group.elem('text', {
- x: data.x + options.labelOffset.x,
- y: data.y + options.labelOffset.y,
- style: 'text-anchor: ' + options.textAnchor
- }, options.labelClass).text(data.value);
- }
- });
- }
- }
-}
diff --git a/site/code-snippets/plugin-include.js b/site/code-snippets/plugin-include.js
deleted file mode 100644
index f131ab50b..000000000
--- a/site/code-snippets/plugin-include.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7],
- series: [
- [1, 5, 3, 4, 6, 2, 3],
- [2, 4, 2, 5, 4, 3, 6]
- ]
-}, {
- plugins: [
- ctPointLabels({
- textAnchor: 'middle'
- })
- ]
-});
diff --git a/site/code-snippets/plugin-signature.js b/site/code-snippets/plugin-signature.js
deleted file mode 100644
index 8c7f27767..000000000
--- a/site/code-snippets/plugin-signature.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function myChartistPlugin(chart) {
-
-}
diff --git a/site/code-snippets/simple-start-aspect-ratio-chart.js b/site/code-snippets/simple-start-aspect-ratio-chart.js
deleted file mode 100644
index 96f838eaa..000000000
--- a/site/code-snippets/simple-start-aspect-ratio-chart.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var data = {
- // A labels array that can contain any sort of values
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
- // Our series array that contains series objects or in this case series data arrays
- series: [
- [5, 2, 4, 2, 0]
- ]
-};
-
-// Create a new line chart object where as first parameter we pass in a selector
-// that is resolving to our chart container element. The Second parameter
-// is the actual data object.
-new Chartist.Line('.ct-chart', data);
\ No newline at end of file
diff --git a/site/code-snippets/simple-start-cdn.html b/site/code-snippets/simple-start-cdn.html
deleted file mode 100644
index 8ae6a735f..000000000
--- a/site/code-snippets/simple-start-cdn.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/site/code-snippets/simple-start-fixed-chart.js b/site/code-snippets/simple-start-fixed-chart.js
deleted file mode 100644
index 711ee5df8..000000000
--- a/site/code-snippets/simple-start-fixed-chart.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var data = {
- // A labels array that can contain any sort of values
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
- // Our series array that contains series objects or in this case series data arrays
- series: [
- [5, 2, 4, 2, 0]
- ]
-};
-
-// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
-// as you saw in the previous example
-var options = {
- width: 300,
- height: 200
-};
-
-// Create a new line chart object where as first parameter we pass in a selector
-// that is resolving to our chart container element. The Second parameter
-// is the actual data object. As a third parameter we pass in our custom options.
-new Chartist.Line('.ct-chart', data, options);
diff --git a/site/code-snippets/simple-start.html b/site/code-snippets/simple-start.html
deleted file mode 100644
index 5b8c524ff..000000000
--- a/site/code-snippets/simple-start.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
- My first Chartist Tests
-
-
-
-
-
-
-
diff --git a/site/code-snippets/two-charts.html b/site/code-snippets/two-charts.html
deleted file mode 100644
index 07a4cd552..000000000
--- a/site/code-snippets/two-charts.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
diff --git a/site/data/pages/examples.yml b/site/data/pages/examples.yml
deleted file mode 100644
index 87f32f136..000000000
--- a/site/data/pages/examples.yml
+++ /dev/null
@@ -1,274 +0,0 @@
-sections:
- - title: Line chart examples
- level: 3
- items:
- - type: live-example
- data:
- title: Simple line chart
- level: 4
- id: simple-line-chart
- classes: ct-golden-section
- intro: An example of a simple line chart with three series. You can edit this example in realtime.
- - type: live-example
- data:
- title: Holes in data
- level: 4
- id: example-line-data-holes
- classes: ct-golden-section
- intro: >
- Chartist does not freak out if you have holes in your data. Instead it will render the lines in
- segments and handles these holes gracefully. This also allows you to introduce a line at a later
- point or to terminate the series before others.
- - type: live-example
- data:
- title: Filled holes in data
- level: 4
- id: example-line-data-fill-holes
- classes: ct-golden-section
- intro: >
- Sometimes you don't want your data looking so fragmented, even when it really is. That's why you
- can also configure Chartist to smooth over holes in your data.
- - type: live-example
- data:
- title: Only whole numbers
- level: 4
- id: example-line-only-integer
- classes: ct-golden-section
- intro: >
- You're dealing with series that contain only whole numbers? It looks weird that Chartist is creating
- a scale that contains fractions even if your data does not? No problem! Tell the Chartist guy to
- only use integers and he'll do the math!
- - type: live-example
- data:
- title: Line scatter diagram with responsive settings
- level: 4
- id: line-scatter-random
- classes: ct-golden-section
- intro: >
- This advanced example uses a line chart to draw a scatter diagram. The data object is created
- with a functional style random mechanism. There is a mobile first responsive configuration using
- the responsive options to show less labels on small screens.
- - type: live-example
- data:
- title: Line chart with area
- level: 4
- id: example-line-area
- classes: ct-golden-section
- intro: >
- This chart uses the showArea option to draw line, dots but also an area shape. Use the low option to
- specify a fixed lower bound that will make the area expand. You can also use the areaBase property
- to specify a data value that will be used to determine the area shape base position (this is 0 by default).
- - type: live-example
- data:
- title: Bi-polar Line chart with area only
- level: 4
- id: example-bipolar-line-area
- classes: ct-golden-section
- intro: >
- You can also only draw the area shapes of the line chart. Area shapes will always be constructed around
- their areaBase (that can be configured in the options) which also allows you to draw nice bi-polar
- areas.
- - type: live-example
- data:
- title: Using events to replace graphics
- level: 4
- id: example-line-modify-drawing
- classes: ct-golden-section
- intro: >
- Chartist has fixed graphical representations that are chosen because of their flexibility and to
- provide a high level of separation of the concerns. However, sometimes you probably would like to use
- different shapes or even images for your charts. One way to achieve this is by using the draw events and replace
- or add custom SVG shapes.
- - type: live-example
- data:
- title: Advanced SMIL Animations
- level: 4
- id: example-line-svg-animation
- classes: ct-golden-section
- intro: >
- Chartist provides a simple API to animate the elements on the Chart using SMIL. Usually you can achieve most
- animation with CSS3 animations but in some cases you'd like to animate SVG properties that are not available
- in CSS.
- - type: live-example
- data:
- title: SVG Path animation
- level: 4
- id: example-line-path-animation
- classes: ct-golden-section
- intro: >
- Path animation is made easy with the SVG Path API.
- The API allows you to modify complex SVG paths and transform them for different animation morphing states.
- - type: live-example
- data:
- title: Line Interpolation / Smoothing
- level: 4
- id: example-line-simple-smoothing
- classes: ct-golden-section
- intro: >
- By default Chartist uses a cardinal spline algorithm to smooth the lines. However, like all other
- things in Chartist, this can be customized easily! Check out
- the API Documentation for more
- smoothing options.
- - type: live-example
- data:
- title: Series Overrides
- level: 4
- id: example-line-series-override
- classes: ct-golden-section
- intro: >
- By naming your series using the series object notation with a name property, you can enable the
- individual configuration of series specific settings. showLine, showPoint,
- showArea and even the smoothing function can be overriden per series! And guess what?
- You can even override those series settings in the responsive configuration! Check the example code
- for more details.
- - type: live-example
- data:
- title: Time Series with Moment.js
- level: 4
- id: example-timeseries-moment
- classes: ct-golden-section
- intro: >
- This example uses Moment.js in the label interpolation function
- to format a date object. The fixed axis ensures that there is correct spacing between the data points,
- and the number of labels is determined by the divisor.
- - title: Bar chart examples
- level: 3
- items:
- - type: live-example
- data:
- title: Bi-polar bar chart
- level: 4
- id: bi-polar-bar-interpolated
- classes: ct-golden-section
- intro: >
- A bi-polar bar chart with a range limit set with low and high. There is also an interpolation
- function used to skip every odd grid line / label.
- - type: live-example
- data:
- title: Overlapping bars on mobile
- level: 4
- id: overlapping-bars
- classes: ct-golden-section
- intro: >
- This example makes use of label interpolation and the seriesBarDistance property that allows you
- to make bars overlap over each other. This then can be used to use the available space on mobile better.
- Resize your browser to see the effect of the responsive configuration.
- - type: live-example
- data:
- title: Add peak circles using the draw events
- level: 4
- id: example-bar-with-circle-modify-drawing
- classes: ct-golden-section
- intro: >
- With the help of draw events we are able to add a custom SVG shape to the peak of our bars.
- - type: live-example
- data:
- title: Multi-line labels
- level: 4
- id: example-multiline-bar
- classes: ct-golden-section
- intro: >
- Chartist will figure out if your browser supports foreignObject and it will use them to create labels
- that are based on regular HTML text elements. Multi-line and regular CSS styles are just two of many
- benefits while using foreignObjects!
- - type: live-example
- data:
- title: Stacked bar chart
- level: 4
- id: stacked-bar
- classes: ct-golden-section
- intro: >
- You can also set your bar chart to stack the series bars on top of each other easily by using the
- stackBars property in your configuration.
- - type: live-example
- data:
- title: Horizontal bar chart
- level: 4
- id: example-bar-horizontal
- classes: ct-golden-section
- intro: >
- Guess what! Creating horizontal bar charts is as simple as it can get. There's no new chart type
- you need to learn, just passing an additional option is enough.
- - type: live-example
- data:
- title: Extreme responsive configuration
- level: 4
- id: example-bar-extreme-responsive
- classes: ct-golden-section
- intro: >
- As all settings of a chart can be customized with the responsive configuration override mechanism of
- Chartist, you can create a chart that adopts to every media condition!
- - type: live-example
- data:
- title: Distributed series
- level: 4
- id: example-bar-distributed-series
- classes: ct-golden-section
- intro: >
- Sometime it's desired to have bar charts that show one bar per series distributed along the x-axis. If
- this option is enabled, you need to make sure that you pass a single series array to Chartist that
- contains the series values. In this example you can see T-shirt sales of a store categorized by size.
- - type: live-example
- data:
- title: Label placement
- level: 4
- id: example-bar-label-position
- classes: ct-golden-section
- intro: >
- You can change the position of the labels on line and bar charts easily by using the position
- option inside of the axis configuration.
-
- - title: Pie chart examples
- level: 3
- items:
- - type: live-example
- data:
- title: Simple pie chart
- level: 4
- id: simple-pie-chart
- classes: ct-golden-section ct-negative-labels
- intro: A very simple pie chart with label interpolation to show percentage instead of the actual data series value.
- - type: live-example
- data:
- title: Pie chart with custom labels
- level: 4
- id: pie-with-custom-labels
- classes: ct-golden-section
- intro: >
- This pie chart is configured with custom labels specified in the data object. On desktop we use the labelOffset
- property to offset the labels from the center. Also labelDirection can be used to control the direction
- in which the labels are expanding.
-
- - type: live-example
- data:
- title: Gauge chart
- level: 4
- id: simple-gauge-chart
- classes: ct-golden-section ct-negative-labels
- intro: This pie chart uses donut, startAngle and total to draw a gauge chart.
-
- - type: live-example
- data:
- title: Animating a Donut with Svg.animate
- level: 4
- id: example-donut-animation
- classes: ct-golden-section
- intro: >
- Although it'd be also possible to achieve this animation with CSS, with some minor suboptimal
- things, here's an example of how to animate donut charts using Chartist.Svg.animate and SMIL.
-
- - type: live-example
- data:
- title: Donut chart using fill rather than stroke
- level: 4
- id: example-donut-solid-chart
- classes: ct-golden-section ct-negative-labels
- intro: This pie chart uses donut and donutSolid to draw a donut chart.
-
- - type: live-example
- data:
- title: Gauge chart using fill rather than stroke
- level: 4
- id: example-gauge-donut-solid-chart
- classes: ct-golden-section ct-negative-labels
- intro: This pie chart uses total, startAngle, donut and donutSolid to draw a gauge chart.
diff --git a/site/data/pages/getting-started.yml b/site/data/pages/getting-started.yml
deleted file mode 100644
index d18de12d1..000000000
--- a/site/data/pages/getting-started.yml
+++ /dev/null
@@ -1,729 +0,0 @@
-sections:
- - title: Download and set-up
- level: 3
- items:
- - type: sub-section
- data:
- title: Bower
- level: 4
- items:
- - type: text
- data:
- text: 'The easiest way to get started with Chartist.js is by using bower:'
-
- - type: code
- data:
- lang: bash
- code: bower install chartist --save
-
- - type: text
- data:
- text: >
- The bower package contains the JavaScript library, CSS as well as the Sass (SCSS) files.
- You can then integrate the desired dependencies in your project and start using them
- immediately.
-
- - type: sub-section
- data:
- title: One, two, three, CSS!
- level: 4
- items:
- - type: text
- data:
- text: >
- The quickest way to get things up and running is by using the Chartist.js CSS files.
- The CSS is compiled from the Sass files with the default class names which are also
- configured in the JavaScript library. You can then override the default styles or
- modify the CSS file, however, for customization it's recommended to use the Sass
- version of Chartist.js.
-
- - type: code-snippet
- data:
- id: simple-start
- lang: html
-
- - type: heading
- data:
- level: 5
- title: Use a CDN alternatively
-
- - type: text
- data:
- text: >
- If you'd like to get started even faster you can also use a CDN to load Chartist.js. The
- awesome people at jsDelivr provide a fantastic job in hosting libraries from over 42 POP Locations
- around the world! They always update Chartist.js to the latest version immediately and
- they do all that for free! Check out the jsDeliver website
- for more information.
-
- - type: code-snippet
- data:
- id: simple-start-cdn
- lang: html
- button: Show CDN Code
-
- - type: sub-section
- data:
- title: The Sass way
- level: 4
- items:
- - type: text
- data:
- text: >
- If you like to customize your charts you can either remove the CSS fully and write your
- own selectors using the Chartist.js Sass mixins or you just use the Chartist.js Sass
- settings file to customize the look and feel of your charts.
-
- - type: text
- data:
- text: >
- Styling inline SVG with CSS is a breeze and you should also consider writing your own
- selectors for your charts and using the Sass mixins. You can read more about using the
- Sass mixins in the advanced section.
-
- - type: text
- data:
- text: >
- To customize the style of your charts using the Sass settings file you should copy the
- settings file to your own Sass folder.
-
- - type: code
- data:
- lang: bash
- code: cp bower_components/chartist/dist/scss/settings/_chartist-settings.scss styles
-
- - type: text
- data:
- text: >
- Then just import your copy of the settings file before you import the chartist.scss
- file and change the settings in your copy as desired.
-
- - type: code-snippet
- data:
- id: custom-include
- lang: scss
-
- - type: heading
- data:
- level: 5
- title: Default settings
-
- - type: text
- data:
- text: >
- The settings file contains all relevant variables used in the mixins and while
- generating the default classes. You can simply change the settings for styling your
- own charts. If you want to override certain settings based on state or pseeudo
- selectors, you can use the individual mixins to only override specific styles.
-
- - type: text
- data:
- text: >
- Take a look at the settings to see how to customize the style of the defalt Chartist.js
- class selectors.
-
- - type: code-snippet
- data:
- id: default-sass-settings
- button: Show default settings
- path: src/styles/settings/_chartist-settings.scss
- lang: scss
-
- - title: Create your first chart
- level: 3
- items:
- - type: text
- data:
- text: >
- In this section you'll go through a simple example of how to use Chartist.js in your project.
- You'll learn the default stages you go through when creating and customizing a basic line chart.
- If you'd like to see more in depth and advanced examples you should check out
- the advanced section or the examples page.
-
- - type: sub-section
- data:
- title: As simple as it can get
- level: 4
- items:
- - type: text
- data:
- text: >
- Chartist provides you a very simple API to get started, however, while trying to follow the
- best practice of relying on standards and clear separation of concerns it sometimes needs a small mind
- shift in order to understand how things are meant to work within Chartist. Instead of specifying
- your colors, line width and other style related things in the JavaScript API, you'll need to use
- CSS in order to control your appearance.
-
- - type: sub-section
- data:
- title: Creating a chart using aspect ratios
- level: 5
- items:
- - type: text
- data:
- text: >
- Because of the nature of responsive design it's important to understand that blocks in design like images,
- videos and similar content need to be able to scale and adapt to the media. In order for an element to scale, you
- need to rely on a certain aspect ratios (like 4:3, 3:2, 16:9 etc.) rather than specifying a fixed width and height.
-
- - type: text
- data:
- text: >
- To designers this Idea is absolutely not new, but to developers this might be at first. However, when a designer talks
- to a developer about the images being 320x240 on this page and 300x200 on that element, he actually just
- translated his idea of using 4:3 and 3:2 images into pixels.
-
- - type: text
- data:
- text: >
- With Chartist you can specify those ratios directly on containers without the need to calculate any fixed dimensions.
- In order to create a chart that is using the aspect ratio of a golden section you can just add the class .ct-golden-section
- to your container where you initialize Chartist.
-
- - type: text
- data:
- text: >
- Here is a list of all available container ratios (If using the Sass version of Chartist you can also easily add others):
-
- - type: table
- data:
- id: container-aspect-ratio-classes
- button: Show available aspect ratios
- header:
- - Container class
- - Ratio
- rows:
- -
- - .ct-square
- - '1'
- -
- - .ct-minor-second
- - '15:16'
- -
- - .ct-major-second
- - '8:9'
- -
- - .ct-minor-third
- - '5:6'
- -
- - .ct-major-third
- - '4:5'
- -
- - .ct-perfect-fourth
- - '3:4'
- -
- - .ct-perfect-fifth
- - '2:3'
- -
- - .ct-minor-sixth
- - '5:8'
- -
- - .ct-golden-section
- - '1:1.618'
- -
- - .ct-major-sixth
- - '3:5'
- -
- - .ct-minor-seventh
- - '9:16'
- -
- - .ct-major-seventh
- - '8:15'
- -
- - .ct-octave
- - '1:2'
- -
- - .ct-major-tenth
- - '2:5'
- -
- - .ct-major-eleventh
- - '3:8'
- -
- - .ct-major-twelfth
- - '1:3'
- -
- - .ct-double-octave
- - '1:4'
-
- - type: text
- data:
- text: >
- Use the following HTML code to specify a container with one of the above aspect ratio classes.
-
- - type: code
- data:
- code: ''
- lang: html
-
- - type: text
- data:
- text: >
- When using a fixed aspect ratio container you can then simply initialize your chart without
- specifying any width or height in the options.
-
- - type: code-snippet
- data:
- id: simple-start-aspect-ratio-chart
- lang: js
-
- - type: sub-section
- data:
- title: Creating a chart with fixed dimensions
- level: 5
- items:
- - type: text
- data:
- text: >
- In order to create a simple line chart with fixed width and height you only need to have a
- container element and initialize Chartist.js on it.
- Give the container the class ct-chart so that it will get the default styles (if you don't
- use your own classes).
-
- - type: code-snippet
- data:
- id: simple-start-fixed-chart
- lang: js
-
- - type: sub-section
- data:
- title: More than one chart on my page?
- level: 5
- items:
- - type: text
- data:
- text: >
- The example above uses the chartist default class to select the element where the chart should
- be created. This class is important for applying the right styles in the CSS of Chartist. If
- you need to create individual charts on one page, you should use IDs to initialize them separately.
-
- - type: code-snippet
- data:
- id: two-charts
- lang: html
-
- - type: sub-section
- data:
- title: The configuration of your chart
- level: 4
- items:
- - type: text
- data:
- text: >
- Chartist.js is built very flexible and almost everything within your charts can be configured.
- In the default settings (that you can check in the API Documentation)
- you'll get some predefined defaults applied to your charts.
-
- - type: text
- data:
- text: >
- You can always override the default settings of your charts by passing in a configuration
- object at creation time.
-
- - type: example-chart
- data:
- id: simple-configuration-chart
- classes: ct-golden-section
- show-code-button: Show code and comments
-
- - type: sub-section
- data:
- title: Responsive sugar topping
- level: 4
- items:
- - type: text
- data:
- text: >
- Responsive web design is all based on
- media queries
- as you are probably already aware. Media queries are great and they help you to define media related
- conditions that you can use to apply different styles for different media.
- - type: text
- data:
- text: >
- Sometimes it's also required to have different behavior on certain media and it's possible that
- a specific component of your web site should behave in an other way on a small media than on a
- large one. Luckily there is window.matchMedia in your browser that comes to the rescue. With
- matchMedia it's possible to let your javascript react differently based on CSS3 media queries.
-
- - type: heading
- data:
- level: 5
- title: Responsive setting overrides
-
- - type: text
- data:
- text: >
- Configuring different chart behavior for various media is made simple with an override
- mechanism. The priority of the override mechanism is based on order of specification of
- the matching media queries.
-
- - type: text
- data:
- text: >
- The following example uses different label interpolations (to save some space) on small media
- as well as different spacing between the bars of the bar chart series. Resize your browser window
- to see the effect.
-
- - type: example-chart
- data:
- id: example-simple-bar
- classes: ct-golden-section
- type: Bar
- show-code-button: Show code and comments
-
- - type: hint
- data:
- title: Cross-browser support
- classes: hint-cross-browser
- text: >
- For IE9 you need to use a matchMedia polyfill. You should take a look at
- Paul Irish's matchMedia polyfill. Make
- sure you include matchMedia.js as well as matchMedia.addListener.js as always both are needed
- to polyfill the full specification of window.matchMedia.
-
- - type: sub-section
- data:
- title: Different configuration for different series
- level: 4
- items:
- - type: text
- data:
- text: >
- Chartist also allows you to add specific configuration overrides for your series. This is useful
- if you want to combine different looks for your series on the same chart.
- - type: text
- data:
- text: >
- You can even take this one step further by again overriding your series configuration in some
- responsive settings overrides. This sounds complicated but it actually is very simple. Check the
- example code with inline comments below to see how easy it is.
- - type: example-chart
- data:
- id: example-line-series-override
- classes: ct-golden-section
- show-code-button: Show code
-
- - title: Styling your chart
- level: 3
- items:
- - type: text
- data:
- text: >
- You should always use the power of CSS to make your data pop into your visitors eyes. I know
- Iām telling this over and over but itās all about a clean separation of concerns. In this chapter
- youāll find some useful information on how to style your charts with CSS.
- - type: sub-section
- data:
- title: Customizing the default CSS
- level: 4
- items:
- - type: text
- data:
- text: >
- Chartist comes with a highly customizable Sass file that allows you to customize all sorts of
- appearance relevant things on your charts including colours used for series, line styles,
- thickness and other properties. If you have the advantage of having a Sass build process at
- your disposal, I highly recommend you to use the Sass version of Chartist instead of the
- already prebuilt CSS. For more information on how to use the Sass version
- please check out the Sass way of Chartist.
-
- - type: text
- data:
- text: >
- Chartist generates predefined classes for series by default. Those class names are alphabetically
- ordered and always start with ct-series-a, where the letter a will be iterated
- with each series count (a, b, c, d etc.). To address a specific series in styling, youāll
- need to create some styles for the corresponding series class name.
-
- - type: text
- data:
- text: >
- Here is a list of selectors from the different chart types with some comments to explain what
- properties can be used to influence the visual style of your charts.
-
- - type: sub-section
- data:
- title: Line chart
- level: 5
- items:
- - type: code-snippet
- data:
- id: custom-style-line-chart
- lang: css
-
- - type: sub-section
- data:
- title: Bar chart
- level: 5
- items:
- - type: code-snippet
- data:
- id: custom-style-bar-chart
- lang: css
-
- - type: sub-section
- data:
- title: Pie chart
- level: 5
- items:
- - type: code-snippet
- data:
- id: custom-style-pie-chart
- lang: css
-
- - type: sub-section
- data:
- title: Donut chart
- level: 5
- items:
- - type: code-snippet
- data:
- id: custom-style-donut-chart
- lang: css
-
- - type: sub-section
- data:
- title: Colour up your charts
- level: 4
- items:
- - type: text
- data:
- text: >
- Colour is a core attribute of appearance and as you already know, we believe in strong
- separation of concerns in web development. Therefore, Chartist does not include any options
- within the JavaScript API to control colour of your charts.
- - type: text
- data:
- text: >
- This might first seem very inconvenient, but youāll agree that itās the right choice once you
- need to change some colours in your web project where youād need to go through some nasty
- find-and-replace adventures in your JavaScript files to fix some colour mismatches.
- - type: text
- data:
- text: >
- The prebuilt CSS version of Chartist ships with 15 default colours that will be applied to your
- chart series elements. If you just want to override some of these colours I recommend you use
- the information
- found in how to customize the default CSS of Chartist.
- - type: text
- data:
- text: >
- The following example illustrates how youād override the colours of your line chart line and
- point elements, within the two first sieries (ct-series-a and ct-series-b).
- - type: code-snippet
- data:
- id: colour-override-line-chart
- lang: css
-
- - type: text
- data:
- text: >
- Note that on SVG elements there are two CSS properties for colourization. For strokes you
- should use the stroke property and assign a CSS colour value. For fill areas you
- can use the fill property. More information can be found in the above topics.
-
- - type: sub-section
- data:
- title: Dynamic colouring
- level: 5
- items:
- - type: text
- data:
- text: >
- Often, predefined classes which can be used to colour your charts are fine but sometimes
- CSS is not flexible enough to control all facets of dynamic appearance. While we could
- build semantic classes like level1, level2, level3 and so on, we could then assign a
- class dynamically, but still weād need to rely on discrete values defined in CSS. One
- lack of CSS today is that it does not incorporate dynamic values like mouse position
- or placeholder variables that can be linked to JavaScript.
- - type: text
- data:
- text: >
- So, how do you go about your heat map chart or dynamically calculated line chart
- strokes based on your data?
- - type: text
- data:
- text: >
- Chartist offers you a powerful tool for such kind of chart manipulations. The intrusive
- event pipeline of Chartist allows you to hook into a draw event that allows
- you to modify all your charts elements on the go while theyāre drawn.
- - type: text
- data:
- text: >
- The following live code example shows you how to make a dynamically coloured chart
- based on some data. Please go ahead and play around with the example, thatās what live
- coding is for! For more information on how to use the Chartist.Svg API,
- please check
- the API documentation.
- - type: live-example
- data:
- title: Using draw events to modify chart elements
- level: 5
- id: example-dynamic-colours
- classes: ct-golden-section
- intro: >
- By using the intrusive event pipeline of Chartist, you can easily change the behaviour of your
- charts in a consistent and convenient way.
-
- - title: Advanced
- level: 3
- items:
- - type: text
- data:
- text: >
- In the following chapter you'll find some advanced usage examples that might be of interest for you.
- Chartist is very flexible because it relies on standard technology. This also means that you will need
- to implement certain things yourself. This topic should cover some of these use-cases and give you some
- basic idea why and how to implement certain functionality.
-
- - type: sub-section
- data:
- title: Animations using Chartist.Svg
- level: 4
- items:
- - type: text
- data:
- text: >
- Usually we recommend using CSS for animations as it's closer to a clean separation of concerns.
- However, sometimes you would want to animate SVG properties that are not available in CSS to animate.
- For this purpose we have added a simple but powerful animation API that allows you to create SMIL
- animations in a more convenient way.
- - type: text
- data:
- text: >
- In combination with the draw events of Chartist the animations are a very powerful and
- flexible tool. You can intercept almost any step in chartist and if there is an SVG element
- involved you can animate it using
- Chartist.Svg.animate.
- - type: text
- data:
- text: >
- The following simple example shows you how to created a delayed fade in effect for the a scatter chart.
- You can also edit the example to play around with the settings.
-
- - type: live-example
- data:
- title: Some SVG Animations can only be done with SMIL
- level: 5
- id: example-simple-svg-animation
- classes: ct-golden-section
- intro: >
- Edit this example to figure out how to tweak animations. The force is strong in you young padawan!
-
- - type: sub-section
- data:
- title: Switching axis type
- level: 4
- items:
- - type: text
- data:
- text: >
- The default configuration of the line chart is that it will use a step based X-Axis and an
- automatic linear scale for the Y-Axis. This is all happening under the hood of Chartist and
- already satisfies a lot of use-cases.
- - type: text
- data:
- text: >
- Sometimes though, it's not enough to have a fixed step chart and you'd need something a bit
- more complex. Something that allows you to plot those values along the X- and Y-Axis, instead
- of just the Y-Axis. Sometimes, you'd also want to specify the ticks on your chart manually
- rather than having them auto calculated from Chartist.
- - type: text
- data:
- text: >
- Of course Chartist wouldn't let you down with all those ideas you have in mind on how to
- visualize your data!
-
- - type: sub-section
- data:
- title: A line chart is only 1-dimensional?!
- level: 5
- items:
- - type: text
- data:
- text: >
- By default, Chartist uses Chartist.StepAxis for the X-Axis and Chartist.AutoScaleAxis
- for the Y-Axis. Please read the API documentation
- if you'd like to get more details, or available options on axis configuration.
- - type: text
- data:
- text: >
- The step based axis will not use any value for projection but rather rely on the index
- of the given value to determine the position. This is fine for discrete steps of one
- dimensional data, like we know it from regular Chartist charts:
- - type: code-snippet
- data:
- id: 1-dimension-values
- lang: js
- - type: text
- data:
- text: >
- What really happens with such one dimensional series data under the hood is that it will
- be transformed into two dimensional data like so:
- - type: code-snippet
- data:
- id: 2-dimensions-values
- lang: js
- - type: text
- data:
- text: >
- You can see that Chartist will automatically convert one dimensional data into two
- dimensional values where the previous value is assigned to y and x will be set to
- undefined. As the default axis for projecting the x value
- is a Chartist.StepAxis that relies on the value index rather than the
- value, this is perfectly fine for the default setup.
-
-
- - type: sub-section
- data:
- title: Creating an XY-plot chart
- level: 5
- items:
- - type: text
- data:
- text: >
- In order to plot on the X-Axis too, we'd need to switch the standard axis type
- Chartist.StepAxis to something more continuous. Let's create a full fledged auto
- scale chart that scales both the Y- and X-Axis automatically using
- the Chartist.AutoScaleAxis!
- - type: live-example
- data:
- title: Configure your axis type
- level: 6
- id: example-axis-auto
- classes: ct-golden-section
- intro: >
- Note that we have just specified the X-Axis because the Y-Axis is configured to
- Chartist.AutoScaleAxis by default.
- - type: text
- data:
- text: >
- A few things are different in this chart. Because
- the labels array of our data is just used to be mapped as ticks option for the
- default Chartist.StepAxis X-Axis, we can completely remove the labels from our data,
- once we use a different axis than the step based one. Also you can see now from the
- data series is that we are specifying 2-dimensional values directly.
-
- - type: sub-section
- data:
- title: Fixed stuff can be sweet too!
- level: 5
- items:
- - type: text
- data:
- text: >
- The following example shows how to create an axis with some fixed ticks.
- The Chartist.FixedScaleAxis can be used to create a more rudimentary
- continuous linear scale, where ticks can be fixed either with an array of values or
- with a divisor. For the detailed options please check
- the API documentation.
- - type: live-example
- data:
- title: Unleash your creativity...
- level: 6
- id: example-axis-fixed-and-auto
- classes: ct-golden-section
- intro: >
- Let's say we'd like to fix a few ticks on the Y-Axis on our chart as those are the only
- ones we're interested in. The X-Axis should be continuous too, but let's make
- that axis a Chartist.AutoScaleAxis.
diff --git a/site/data/pages/index.yml b/site/data/pages/index.yml
deleted file mode 100644
index 201742163..000000000
--- a/site/data/pages/index.yml
+++ /dev/null
@@ -1,321 +0,0 @@
-affiliate-projects:
- - title: Material Dashboard Pro
- link: https://www.creative-tim.com/product/material-dashboard-pro?ref=chartist.io
- image:
- src: https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg
- alt: Material Dashboard Pro
- - title: Material Dashboard Pro Angular
- link: https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=chartist.io
- image:
- src: https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg
- alt: Material Dashboard Pro Angular
- - title: Light Bootstrap Dashboard PRO React
- link: https://www.creative-tim.com/product/light-bootstrap-dashboard-pro-react?ref=chartist.io
- image:
- src: https://s3.amazonaws.com/creativetim_bucket/products/66/original/opt_lbdp_react_thumbnail.jpg
- alt: Light Bootstrap Dashboard PRO React
-gallery-examples:
- - id: example-gallery-one
- classes: ct-golden-section
- - id: example-gallery-two
- classes: ct-golden-section
- - id: example-gallery-three
- classes: ct-golden-section
- - id: example-gallery-four
- classes: ct-golden-section
-
-sections:
- - title: Browser compatibility
- level: 4
- items:
- - type: browser-support-table
- data:
- browsers:
- - IE9
- - IE10
- - IE11
- - Firefox 31
- - Chrome 35
- - Safari 7
- - Safari 8
- - Android 4.3
- - Android 4.4
- - iOS Safari 6
- - iOS Safari 7
- features:
- - name: Overall Browser Support
- browsers:
- - name: IE9
- status: supported
- text: Supported
- - name: IE10
- status: supported
- text: Supported
- - name: IE11
- status: supported
- text: Supported
- - name: Firefox 31
- status: supported
- text: Supported
- - name: Chrome 35
- status: supported
- text: Supported
- - name: Safari 7
- status: supported
- text: Supported
- - name: Safari 8
- status: supported
- text: Supported
- - name: Android 4.3
- status: supported
- text: Supported
- - name: Android 4.4
- status: supported
- text: Supported
- - name: iOS Safari 6
- status: supported
- text: Supported
- - name: iOS Safari 7
- status: supported
- text: Supported
- - name: Multi-line Labels (foreignObject)
- browsers:
- - name: IE9
- status: not-supported
- text: Not supported
- - name: IE10
- status: not-supported
- text: Not supported
- - name: IE11
- status: not-supported
- text: Not supported
- - name: Firefox 31
- status: supported
- text: Supported
- - name: Chrome 35
- status: supported
- text: Supported
- - name: Safari 7
- status: not-supported
- text: Not supported
- - name: Safari 8
- status: supported
- text: Supported
- - name: Android 4.3
- status: not-supported
- text: Not supported
- - name: Android 4.4
- status: supported
- text: Supported
- - name: iOS Safari 6
- status: not-supported
- text: Not supported
- - name: iOS Safari 7
- status: supported
- text: Supported
- - name: Advanced CSS Animations
- browsers:
- - name: IE9
- status: not-supported
- text: Not supported
- - name: IE10
- status: not-supported
- text: Not supported
- - name: IE11
- status: not-supported
- text: Not supported
- - name: Firefox 31
- status: supported
- text: Supported
- - name: Chrome 35
- status: supported
- text: Supported
- - name: Safari 7
- status: not-supported
- text: Not supported
- - name: Safari 8
- status: supported
- text: Supported
- - name: Android 4.3
- status: not-supported
- text: Not supported
- - name: Android 4.4
- status: supported
- text: Supported
- - name: iOS Safari 6
- status: supported
- text: Supported
- - name: iOS Safari 7
- status: supported
- text: Supported
- - name: SVG Animations with SMIL
- browsers:
- - name: IE9
- status: not-supported
- text: Not supported
- - name: IE10
- status: not-supported
- text: Not supported
- - name: IE11
- status: not-supported
- text: Not supported
- - name: Firefox 31
- status: supported
- text: Supported
- - name: Chrome 35
- status: supported
- text: Supported
- - name: Safari 7
- status: supported
- text: Supported
- - name: Safari 8
- status: supported
- text: Supported
- - name: Android 4.3
- status: supported
- text: Supported
- - name: Android 4.4
- status: supported
- text: Supported
- - name: iOS Safari 6
- status: supported
- text: Supported
- - name: iOS Safari 7
- status: supported
- text: Supported
- - name: Responsive Options Override
- browsers:
- - name: IE9*
- status: supported
- text: Supported with polyfill
- - name: IE10
- status: supported
- text: Supported
- - name: IE11
- status: supported
- text: Supported
- - name: Firefox 31
- status: supported
- text: Supported
- - name: Chrome 35
- status: supported
- text: Supported
- - name: Safari 7
- status: supported
- text: Supported
- - name: Safari 8
- status: supported
- text: Supported
- - name: Android 4.3
- status: supported
- text: Supported
- - name: Android 4.4
- status: supported
- text: Supported
- - name: iOS Safari 6
- status: supported
- text: Supported
- - name: iOS Safari 7
- status: supported
- text: Supported
-
- - title: Projects / Wrapper libraries
- level: 4
- items:
- - type: text
- data:
- text: These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. If you know other projects that use Chartist.js please let us know or make a pull request for this file.
- - type: table
- data:
- id: chartist-projects-table
- header:
- - Project
- - Type
- rows:
- -
- - 'node-chartist'
- - Node Package for Server-side Charts
- -
- - 'ng-chartist.js'
- - Angular Directive
- -
- - 'chartistAngularDirective.js'
- - Angular Directive
- -
- - 'react-chartist'
- - React Component
- -
- - 'meteor-chartist-js'
- - Meteor Package
- -
- - 'tablepress_chartist'
- - Wordpress / Tablepress Extension
- -
- - 'ember-cli-chartist'
- - Ember Addon
- -
- - 'ChartistJSF'
- - Java Server Faces (Prime Faces) Component
- -
- -'vue-chartist'
- - Vue plugin
- -
- -'aurelia-chartist'
- - Aurelia plugin
- - title: Chart CSS animation example
- level: 3
- items:
- - type: example-chart
- data:
- id: example-line-months-interpolation
- classes: ct-golden-section dark
- - type: hint
- data:
- title: Cross-browser support
- classes: hint-cross-browser
- text: Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary.
- side-notes:
- - type: text
- data:
- text: Specifying the style of your chart in CSS is not only cleaner but also enables you to use awesome CSS animations and transitions to be applied to your SVG elements!
-
- - title: Crazy Animations with SMIL!
- level: 3
- items:
- - type: example-chart
- data:
- id: example-line-svg-animation
- classes: ct-golden-section
- side-notes:
- - type: text
- data:
- text: >
- Almost limitless animation possibilities with the Chartist.Svg animation API. Checkout the
- advanced getting started guide about SVG
- animations with SMIL.
-
- - title: Responsive charts configuration
- level: 3
- items:
- - type: example-chart
- data:
- id: example-line-simple-responsive
- classes: ct-golden-section
- show-code-button: Show code
- - type: sub-section
- data:
- title: Configuration overrides based on media queries
- level: 4
- items:
- - type: text
- data:
- text: Configuring different chart behavior for various media is made simple with an override mechanism. The priority of the override mechanism is based on order of specification of the matching media queries.
- - type: hint
- data:
- title: Cross-browser support
- classes: hint-cross-browser
- text: For IE9 you need to use a matchMedia polyfill. You should take a look at Paul Irish's matchMedia polyfill.
- side-notes:
- - type: text
- data:
- text: With the clear separation of concerns within Chartist.js, you're able to style your charts with CSS in @media queries. However, sometimes you also need to conditionally control the behavior of your charts. For this purpose, Chartist.js provides you with a simple configuration override mechanism based on media queries.
diff --git a/site/data/pages/plugins.yml b/site/data/pages/plugins.yml
deleted file mode 100755
index 6144d15b9..000000000
--- a/site/data/pages/plugins.yml
+++ /dev/null
@@ -1,335 +0,0 @@
-sections:
- - title: Overview
- level: 3
- items:
- - type: sub-section
- data:
- title: What's a plugin?
- level: 4
- items:
- - type: text
- data:
- text: >
- Plugins allow you to extend the basic functionality of your charts. You can develop your own
- plugins or use plugins that others have already developed.
-
- - type: sub-section
- data:
- title: How to use plugins
- level: 4
- items:
- - type: text
- data:
- text: >
- Once you have included a plugin in your project you can use it in your chart by specifying it explicitly
- in the plugins section of your chart configuration. Check the List of plugins
- section to see what plugins you can use.
-
- - type: code-snippet
- data:
- id: plugin-include
- lang: js
-
- - type: hint
- data:
- title: Order of specification
- text: >
- Plugins are chainable and the order of specification in the plugins array of your configuration
- is important for the end result.
-
- - type: text
- data:
- text: >
- Chartist.js expects an array of plugin functions to be present in the plugins array
- of the chart configuration. Usually plugins should be written as function factories so you
- can pass additional parameters and options to the factory which is creating the plugin function and returns it.
-
- - title: Available plugins
- level: 3
- items:
- - type: text
- data:
- text: >
- Here you can find a list of known plugins. Usually plugins should be available from both Bower and NPM for
- installation. If you have developed your own plugin but can't find it here, you should create a
- pull request
- for this page and add your plugin to the list.
-
- - type: sub-section
- data:
- title: Accessibility Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- 285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision.
- We should stop the discrimination against our fellow human and, by fairly little effort and following best
- practices, make our content on the web accessible.
- - type: text
- data:
- text: >
- The accessibility plugin makes your chart accessible for blind people. It automatically generates
- visually hidden accessibility tables that allow you to describe your chart for blind people easily.
- This plugin was tested with NVDA and JAWS, and provides all necessary things for building an accessible chart.
- - type: text
- data:
- text: >
- By simply including this plugin with default configurations you will already make your charts
- accessible to blind people! If you put in 5 minutes effort in customizing the configuration with
- meaningful content, you will actually even make them enjoy your charts!
- - type: live-example
- data:
- id: example-plugin-accessibility
- classes: ct-golden-section
- intro: >
- Creating an accessible chart that shows some fiscal year figures. This example overrides the visuallyHiddenStyles
- configuration property so you can actually see the "invisible" table.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Gion Kunz
- -
- - 'Link:'
- - 'chartist-plugin-accessibility'
-
- - type: sub-section
- data:
- title: Tooltip Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The tooltip plugin makes it super simple to add tooltips to most of your charts which can often
- increase it's usability.
- - type: text
- data:
- text: >
- By simply including this plugin with default configurations you will already make your charts
- get some tooltips showing.
- - type: live-example
- data:
- id: example-plugin-tooltip
- classes: ct-golden-section
- intro: >
- Creating a simple line chart showing how the tooltips work.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Markus Padourek
- -
- - 'Link:'
- - 'chartist-plugin-tooltip'
-
- - type: sub-section
- data:
- title: Point Label Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The point label plugin can be used if you like to add simple labels on top of your data points
- on line charts. This is usefull if you'd like the user to see the exact values of the data without
- any additional interaction.
- - type: live-example
- data:
- id: example-plugin-pointlabel
- classes: ct-golden-section
- intro: >
- The point label plugin draws labels on top of your line chart points.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Gion Kunz
- -
- - 'Link:'
- - 'chartist-plugin-pointlabels'
-
- - type: sub-section
- data:
- title: Axis Title Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The axis title plugin allows you to add simple titles to your axes.
- - type: live-example
- data:
- id: example-plugin-axistitle
- classes: ct-golden-section
- intro: >
- While not a core functionality, this plugin makes it absolutely easy to add axis titles to your chart.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Alex Stanbury
- -
- - 'Link:'
- - 'chartist-plugin-axistitle'
- - type: sub-section
- data:
- title: Threshold Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- This Chartist plugin can be used to divide your Line or Bar chart with a threshold.
- - type: live-example
- data:
- id: example-plugin-threshold
- classes: ct-golden-section
- intro: >
- Everything above and below the
- threshold will be tagged with a special class, in order for your to apply different styling where appropriate.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Gion Kunz
- -
- - 'Link:'
- - 'chartist-plugin-threshold'
- - type: sub-section
- data:
- title: FillDonut Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- Let animated donuts look filled and provide options for append labels and html to the donut chart.
- This plugin draw the donut a second time but without delay and animation, so it animation will overlaps and looks like the fill the donut.
- Also your a possible to add multiple html-labels to the donut on different positions.
- - type: live-example
- data:
- id: example-plugin-fill-donut
- classes: ct-golden-section
- intro: >
- Let animated donuts look filled and provide options for append labels and html to the donut chart.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Moxx
- -
- - 'Link:'
- - 'chartist-plugin-fill-donut'
- - type: sub-section
- data:
- title: Zoom Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The zoom plugin allows you to zoom into charts.
- - type: live-example
- data:
- id: example-plugin-zoom
- classes: ct-golden-section
- intro: >
- Use the left mouse button to drag a zoom box. The plugin provides a callback that can be used to reset the zoom.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Hannes Kamecke
- -
- - 'Link:'
- - 'chartist-plugin-zoom'
- - type: sub-section
- data:
- title: Target Line Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The target line plugin allows you to draw a target line on your chart.
- - type: live-example
- data:
- id: example-plugin-targetline
- classes: ct-golden-section
- intro: >
- Pass a value to the plugin to draw a target line on the chart.
- - type: table
- data:
- rows:
- -
- - 'Author:'
- - Harry Twyford
- -
- - 'Link:'
- - 'chartist-plugin-targetline'
- - title: Develop a plugin
- level: 3
- items:
-
- - type: text
- data:
- text: >
- Plugins are functions that will be called for each chart that is created with the plugin enabled
- (specified in the plugins configuration of a chart). The plugin function will be called with one
- argument which is the chart that is registering itself for the plugin. If you wish to use some additional
- parameters or configuration for your plugin initialization, it's recommended to use a function factory.
- You can check the example plugin for an implementation using a function factory.
-
- - type: code-snippet
- data:
- id: plugin-signature
- lang: js
-
- - type: text
- data:
- text: >
- From the chart object options, svg (root SVG element) and the
- eventEmitter can be used to manipulate the behaviour of the chart. It's the
- responsibility of the plugin to decide if it should be activated on a given chart (i.e. by checking
- the chart type chart instanceof Chartist.Line etc.).
-
- - type: text
- data:
- text: >
- It's recommended to use the events of Chartist.js (like draw) to manipulate the
- underlying elements. Using the events, plugins can chain up in a natural way and work independently
- on extending the functionality of the chart.
-
- - type: text
- data:
- text: >
- Plugins should contain their own default settings and use Chartist.extend to override
- the settings specified in the options passed to the plugin factory function. Using
- the optionsProvider of the chart object one could also implement functioanlity based on
- the chart configuration as well as responsive configuration.
-
- - type: sub-section
- data:
- title: Example Plugin
- level: 4
- items:
- - type: text
- data:
- text: >
- The following code shows an example plugin that is also available for download and installation.
- You can also use the repository
- of the example plugin to start your own awesome Chartist.js plugin.
-
- - type: code-snippet
- data:
- id: plugin-example
- lang: js
diff --git a/site/examples/bi-polar-bar-interpolated.js b/site/examples/bi-polar-bar-interpolated.js
deleted file mode 100644
index e78b04843..000000000
--- a/site/examples/bi-polar-bar-interpolated.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var data = {
- labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
- series: [
- [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
- ]
-};
-
-var options = {
- high: 10,
- low: -10,
- axisX: {
- labelInterpolationFnc: function(value, index) {
- return index % 2 === 0 ? value : null;
- }
- }
-};
-
-new Chartist.Bar('.ct-chart', data, options);
diff --git a/site/examples/example-axis-auto.js b/site/examples/example-axis-auto.js
deleted file mode 100644
index cc2a0b6cf..000000000
--- a/site/examples/example-axis-auto.js
+++ /dev/null
@@ -1,14 +0,0 @@
-new Chartist.Line('.ct-chart', {
- series: [[
- {x: 1, y: 100},
- {x: 2, y: 50},
- {x: 3, y: 25},
- {x: 5, y: 12.5},
- {x: 8, y: 6.25}
- ]]
-}, {
- axisX: {
- type: Chartist.AutoScaleAxis,
- onlyInteger: true
- }
-});
diff --git a/site/examples/example-axis-fixed-and-auto.js b/site/examples/example-axis-fixed-and-auto.js
deleted file mode 100644
index 3638693a0..000000000
--- a/site/examples/example-axis-fixed-and-auto.js
+++ /dev/null
@@ -1,21 +0,0 @@
-new Chartist.Line('.ct-chart', {
- series: [[
- {x: 1, y: 100},
- {x: 2, y: 50},
- {x: 3, y: 25},
- {x: 5, y: 12.5},
- {x: 8, y: 6.25}
- ]]
-}, {
- axisX: {
- type: Chartist.AutoScaleAxis,
- onlyInteger: true
- },
- axisY: {
- type: Chartist.FixedScaleAxis,
- ticks: [0, 50, 75, 87.5, 100],
- low: 0
- },
- lineSmooth: Chartist.Interpolation.step(),
- showPoint: false
-});
diff --git a/site/examples/example-bar-distributed-series.js b/site/examples/example-bar-distributed-series.js
deleted file mode 100644
index 99f02ba63..000000000
--- a/site/examples/example-bar-distributed-series.js
+++ /dev/null
@@ -1,6 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
- series: [20, 60, 120, 200, 180, 20, 10]
-}, {
- distributeSeries: true
-});
diff --git a/site/examples/example-bar-extreme-responsive.js b/site/examples/example-bar-extreme-responsive.js
deleted file mode 100644
index 6aa8225b7..000000000
--- a/site/examples/example-bar-extreme-responsive.js
+++ /dev/null
@@ -1,46 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
- series: [
- [5, 4, 3, 7],
- [3, 2, 9, 5],
- [1, 5, 8, 4],
- [2, 3, 4, 6],
- [4, 1, 2, 1]
- ]
-}, {
- // Default mobile configuration
- stackBars: true,
- axisX: {
- labelInterpolationFnc: function(value) {
- return value.split(/\s+/).map(function(word) {
- return word[0];
- }).join('');
- }
- },
- axisY: {
- offset: 20
- }
-}, [
- // Options override for media > 400px
- ['screen and (min-width: 400px)', {
- reverseData: true,
- horizontalBars: true,
- axisX: {
- labelInterpolationFnc: Chartist.noop
- },
- axisY: {
- offset: 60
- }
- }],
- // Options override for media > 800px
- ['screen and (min-width: 800px)', {
- stackBars: false,
- seriesBarDistance: 10
- }],
- // Options override for media > 1000px
- ['screen and (min-width: 1000px)', {
- reverseData: false,
- horizontalBars: false,
- seriesBarDistance: 15
- }]
-]);
diff --git a/site/examples/example-bar-horizontal.js b/site/examples/example-bar-horizontal.js
deleted file mode 100644
index b70fa008c..000000000
--- a/site/examples/example-bar-horizontal.js
+++ /dev/null
@@ -1,14 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
- series: [
- [5, 4, 3, 7, 5, 10, 3],
- [3, 2, 9, 5, 4, 6, 4]
- ]
-}, {
- seriesBarDistance: 10,
- reverseData: true,
- horizontalBars: true,
- axisY: {
- offset: 70
- }
-});
diff --git a/site/examples/example-bar-label-position.js b/site/examples/example-bar-label-position.js
deleted file mode 100644
index 19b93d5c9..000000000
--- a/site/examples/example-bar-label-position.js
+++ /dev/null
@@ -1,16 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- series: [
- [5, 4, 3, 7, 5, 10, 3],
- [3, 2, 9, 5, 4, 6, 4]
- ]
-}, {
- axisX: {
- // On the x-axis start means top and end means bottom
- position: 'start'
- },
- axisY: {
- // On the y-axis start means left and end means right
- position: 'end'
- }
-});
diff --git a/site/examples/example-bar-with-circle-modify-drawing.js b/site/examples/example-bar-with-circle-modify-drawing.js
deleted file mode 100644
index 1b641cb84..000000000
--- a/site/examples/example-bar-with-circle-modify-drawing.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Create a simple bi-polar bar chart
-var chart = new Chartist.Bar('.ct-chart', {
- labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
- series: [
- [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
- ]
-}, {
- high: 10,
- low: -10,
- axisX: {
- labelInterpolationFnc: function(value, index) {
- return index % 2 === 0 ? value : null;
- }
- }
-});
-
-// Listen for draw events on the bar chart
-chart.on('draw', function(data) {
- // If this draw event is of type bar we can use the data to create additional content
- if(data.type === 'bar') {
- // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
- data.group.append(new Chartist.Svg('circle', {
- cx: data.x2,
- cy: data.y2,
- r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
- }, 'ct-slice-pie'));
- }
-});
diff --git a/site/examples/example-bipolar-line-area.js b/site/examples/example-bipolar-line-area.js
deleted file mode 100644
index 213e6cf7e..000000000
--- a/site/examples/example-bipolar-line-area.js
+++ /dev/null
@@ -1,20 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7, 8],
- series: [
- [1, 2, 3, 1, -2, 0, 1, 0],
- [-2, -1, -2, -1, -2.5, -1, -2, -1],
- [0, 0, 0, 1, 2, 2.5, 2, 1],
- [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
- ]
-}, {
- high: 3,
- low: -3,
- showArea: true,
- showLine: false,
- showPoint: false,
- fullWidth: true,
- axisX: {
- showLabel: false,
- showGrid: false
- }
-});
diff --git a/site/examples/example-donut-animation.js b/site/examples/example-donut-animation.js
deleted file mode 100644
index 72f3501ef..000000000
--- a/site/examples/example-donut-animation.js
+++ /dev/null
@@ -1,55 +0,0 @@
-var chart = new Chartist.Pie('.ct-chart', {
- series: [10, 20, 50, 20, 5, 50, 15],
- labels: [1, 2, 3, 4, 5, 6, 7]
-}, {
- donut: true,
- showLabel: false
-});
-
-chart.on('draw', function(data) {
- if(data.type === 'slice') {
- // Get the total path length in order to use for dash array animation
- var pathLength = data.element._node.getTotalLength();
-
- // Set a dasharray that matches the path length as prerequisite to animate dashoffset
- data.element.attr({
- 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
- });
-
- // Create animation definition while also assigning an ID to the animation for later sync usage
- var animationDefinition = {
- 'stroke-dashoffset': {
- id: 'anim' + data.index,
- dur: 1000,
- from: -pathLength + 'px',
- to: '0px',
- easing: Chartist.Svg.Easing.easeOutQuint,
- // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
- fill: 'freeze'
- }
- };
-
- // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
- if(data.index !== 0) {
- animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
- }
-
- // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
- data.element.attr({
- 'stroke-dashoffset': -pathLength + 'px'
- });
-
- // We can't use guided mode as the animations need to rely on setting begin manually
- // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
- data.element.animate(animationDefinition, false);
- }
-});
-
-// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
-chart.on('created', function() {
- if(window.__anim21278907124) {
- clearTimeout(window.__anim21278907124);
- window.__anim21278907124 = null;
- }
- window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
-});
diff --git a/site/examples/example-donut-solid-chart.js b/site/examples/example-donut-solid-chart.js
deleted file mode 100644
index 57b2a176b..000000000
--- a/site/examples/example-donut-solid-chart.js
+++ /dev/null
@@ -1,9 +0,0 @@
-new Chartist.Pie('.ct-chart', {
- series: [20, 10, 30, 40]
-}, {
- donut: true,
- donutWidth: 60,
- donutSolid: true,
- startAngle: 270,
- showLabel: true
-});
diff --git a/site/examples/example-dynamic-colours.js b/site/examples/example-dynamic-colours.js
deleted file mode 100644
index c14bc9449..000000000
--- a/site/examples/example-dynamic-colours.js
+++ /dev/null
@@ -1,29 +0,0 @@
-var count = 45;
-var max = 100;
-
-// Creating a bar chart with no labels and a series array with one series. For the series we generate random data with `count` elements and random data ranging from 0 to `max`.
-var chart = new Chartist.Bar('.ct-chart', {
- labels: Chartist.times(count),
- series: [
- Chartist.times(count).map(Math.random).map(Chartist.mapMultiply(max))
- ]
-}, {
- axisX: {
- showLabel: false
- },
- axisY: {
- onlyInteger: true
- }
-});
-
-// This is the bit we are actually interested in. By registering a callback for `draw` events, we can actually intercept the drawing process of each element on the chart.
-chart.on('draw', function(context) {
- // First we want to make sure that only do something when the draw event is for bars. Draw events do get fired for labels and grids too.
- if(context.type === 'bar') {
- // With the Chartist.Svg API we can easily set an attribute on our bar that just got drawn
- context.element.attr({
- // Now we set the style attribute on our bar to override the default color of the bar. By using a HSL colour we can easily set the hue of the colour dynamically while keeping the same saturation and lightness. From the context we can also get the current value of the bar. We use that value to calculate a hue between 0 and 100 degree. This will make our bars appear green when close to the maximum and red when close to zero.
- style: 'stroke: hsl(' + Math.floor(Chartist.getMultiValue(context.value) / max * 100) + ', 50%, 50%);'
- });
- }
-});
diff --git a/site/examples/example-gallery-four.js b/site/examples/example-gallery-four.js
deleted file mode 100644
index f2a5f7041..000000000
--- a/site/examples/example-gallery-four.js
+++ /dev/null
@@ -1,33 +0,0 @@
-var data = {
- series: [60, 20]
-};
-
-var options = {
- donut: true,
- donutWidth: 40,
- total: 100,
- labelInterpolationFnc: function(value) {
- return value + '%';
- }
-};
-
-var responsiveOptions = [
- [
- Foundation.media_queries.medium,
- {
- labelOffset: 30,
- chartPadding: 10,
- labelDirection: 'explode'
- }
- ],
- [
- Foundation.media_queries.large,
- {
- labelOffset: -30,
- chartPadding: 0,
- labelDirection: 'implode'
- }
- ]
-];
-
-new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/example-gallery-one.js b/site/examples/example-gallery-one.js
deleted file mode 100644
index daeb09ea9..000000000
--- a/site/examples/example-gallery-one.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var data = {
- labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9'],
- series: [
- [12, 9, 7, 8, 6, 4, 3, 2, 0],
- [2, 1, 3.5, 7, 9, 8, 7.7, 4, 7],
- [1, 3, 4, 5, 6, 8, 9, 10, 11],
- [11, 7.5, 5.5, 5.5, 4, 3.5, 2, 1, 0]
- ]
-};
-
-new Chartist.Line('.ct-chart', data);
\ No newline at end of file
diff --git a/site/examples/example-gallery-three.js b/site/examples/example-gallery-three.js
deleted file mode 100644
index 631f693f8..000000000
--- a/site/examples/example-gallery-three.js
+++ /dev/null
@@ -1,40 +0,0 @@
-var data = {
- labels: ['Day one', 'Day two', 'Day three', 'Day four'],
- series: [20, 15, 40, 10]
-};
-
-var options = {
- labelInterpolationFnc: function(value) {
- return value.split(/\s+/).reduce(function(str, elem) {
- return str + elem[0] + '.';
- }, '');
- }
-};
-
-var responsiveOptions = [
- [
- Foundation.media_queries.medium,
- {
- chartPadding: 30,
- labelOffset: 50,
- labelDirection: 'explode',
- labelInterpolationFnc: function(value) {
- return value;
- }
- }
- ],
- [
- Foundation.media_queries.large,
- {
- labelOffset: 80
- }
- ],
- [
- Foundation.media_queries.xlarge,
- {
- labelOffset: 100
- }
- ]
-];
-
-new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/example-gallery-two.js b/site/examples/example-gallery-two.js
deleted file mode 100644
index e408db59c..000000000
--- a/site/examples/example-gallery-two.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var data = {
- labels: ['1938', '1939', '1940', '1941', '1942', '1943'],
- series: [
- [12000, 9000, 7000, 8000, 12000, 10000],
- [2000, 1000, 3500, 7000, 5000, 9000]
- ]
-};
-
-var options = {
- seriesBarDistance: 5
-};
-
-new Chartist.Bar('.ct-chart', data, options);
\ No newline at end of file
diff --git a/site/examples/example-gauge-donut-solid-chart.js b/site/examples/example-gauge-donut-solid-chart.js
deleted file mode 100644
index 735303ff6..000000000
--- a/site/examples/example-gauge-donut-solid-chart.js
+++ /dev/null
@@ -1,10 +0,0 @@
-new Chartist.Pie('.ct-chart', {
- series: [20, 10, 30, 40]
-}, {
- donut: true,
- donutWidth: 60,
- donutSolid: true,
- startAngle: 270,
- total: 200,
- showLabel: true
-});
diff --git a/site/examples/example-line-area.js b/site/examples/example-line-area.js
deleted file mode 100644
index ab86b9231..000000000
--- a/site/examples/example-line-area.js
+++ /dev/null
@@ -1,9 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7, 8],
- series: [
- [5, 9, 7, 8, 5, 3, 5, 4]
- ]
-}, {
- low: 0,
- showArea: true
-});
\ No newline at end of file
diff --git a/site/examples/example-line-data-fill-holes.js b/site/examples/example-line-data-fill-holes.js
deleted file mode 100644
index 0faae16d1..000000000
--- a/site/examples/example-line-data-fill-holes.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
- series: [
- [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
- [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
- [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
- [{x:3, y: 3},{x: 4, y: 3}, {x: 5, y: undefined}, {x: 6, y: 4}, {x: 7, y: null}, {x: 8, y: 4}, {x: 9, y: 4}]
- ]
-}, {
- fullWidth: true,
- chartPadding: {
- right: 10
- },
- lineSmooth: Chartist.Interpolation.cardinal({
- fillHoles: true,
- }),
- low: 0
-});
diff --git a/site/examples/example-line-data-holes.js b/site/examples/example-line-data-holes.js
deleted file mode 100644
index 60027417d..000000000
--- a/site/examples/example-line-data-holes.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
- series: [
- [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
- [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
- [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
- [{x:3, y: 3},{x: 4, y: 3}, {x: 5, y: undefined}, {x: 6, y: 4}, {x: 7, y: null}, {x: 8, y: 4}, {x: 9, y: 4}]
- ]
-}, {
- fullWidth: true,
- chartPadding: {
- right: 10
- },
- low: 0
-});
diff --git a/site/examples/example-line-modify-drawing.js b/site/examples/example-line-modify-drawing.js
deleted file mode 100644
index 32785ab18..000000000
--- a/site/examples/example-line-modify-drawing.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5],
- series: [
- [12, 9, 7, 8, 5]
- ]
-});
-
-// Listening for draw events that get emitted by the Chartist chart
-chart.on('draw', function(data) {
- // If the draw event was triggered from drawing a point on the line chart
- if(data.type === 'point') {
- // We are creating a new path SVG element that draws a triangle around the point coordinates
- var triangle = new Chartist.Svg('path', {
- d: ['M',
- data.x,
- data.y - 15,
- 'L',
- data.x - 15,
- data.y + 8,
- 'L',
- data.x + 15,
- data.y + 8,
- 'z'].join(' '),
- style: 'fill-opacity: 1'
- }, 'ct-area');
-
- // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
- data.element.replace(triangle);
- }
-});
diff --git a/site/examples/example-line-months-interpolation.js b/site/examples/example-line-months-interpolation.js
deleted file mode 100644
index 37538feda..000000000
--- a/site/examples/example-line-months-interpolation.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var data = {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- series: [
- [1, 2, 2.7, 0, 3, 5, 3, 4, 8, 10, 12, 7],
- [0, 1.2, 2, 7, 2.5, 9, 5, 8, 9, 11, 14, 4],
- [10, 9, 8, 6.5, 6.8, 6, 5.4, 5.3, 4.5, 4.4, 3, 2.8]
- ]
-};
-
-var responsiveOptions = [
- [
- Foundation.media_queries.small,
- {
- axisX: {
- labelInterpolationFnc: function (value, index) {
- // Interpolation function causes only every 2nd label to be displayed
- if (index % 2 !== 0) {
- return false;
- } else {
- return value;
- }
- }
- }
- }
- ]
-];
-
-new Chartist.Line('.ct-chart', data, {
- chartPadding: {
- top: 30
- }
-}, responsiveOptions);
diff --git a/site/examples/example-line-only-integer.js b/site/examples/example-line-only-integer.js
deleted file mode 100644
index 2157bb9d4..000000000
--- a/site/examples/example-line-only-integer.js
+++ /dev/null
@@ -1,18 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5, 6, 7, 8],
- series: [
- [1, 2, 3, 1, -2, 0, 1, 0],
- [-2, -1, -2, -1, -3, -1, -2, -1],
- [0, 0, 0, 1, 2, 3, 2, 1],
- [3, 2, 1, 0.5, 1, 0, -1, -3]
- ]
-}, {
- high: 3,
- low: -3,
- fullWidth: true,
- // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
- axisY: {
- onlyInteger: true,
- offset: 20
- }
-});
diff --git a/site/examples/example-line-path-animation.js b/site/examples/example-line-path-animation.js
deleted file mode 100644
index a216e0cca..000000000
--- a/site/examples/example-line-path-animation.js
+++ /dev/null
@@ -1,27 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
- series: [
- [1, 5, 2, 5, 4, 3],
- [2, 3, 4, 8, 1, 2],
- [5, 4, 3, 2, 1, 0.5]
- ]
-}, {
- low: 0,
- showArea: true,
- showPoint: false,
- fullWidth: true
-});
-
-chart.on('draw', function(data) {
- if(data.type === 'line' || data.type === 'area') {
- data.element.animate({
- d: {
- begin: 2000 * data.index,
- dur: 2000,
- from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
- to: data.path.clone().stringify(),
- easing: Chartist.Svg.Easing.easeOutQuint
- }
- });
- }
-});
diff --git a/site/examples/example-line-series-override.js b/site/examples/example-line-series-override.js
deleted file mode 100644
index 034039bf2..000000000
--- a/site/examples/example-line-series-override.js
+++ /dev/null
@@ -1,49 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
- // Naming the series with the series object array notation
- series: [{
- name: 'series-1',
- data: [5, 2, -4, 2, 0, -2, 5, -3]
- }, {
- name: 'series-2',
- data: [4, 3, 5, 3, 1, 3, 6, 4]
- }, {
- name: 'series-3',
- data: [2, 4, 3, 1, 4, 5, 3, 2]
- }]
-}, {
- fullWidth: true,
- // Within the series options you can use the series names
- // to specify configuration that will only be used for the
- // specific series.
- series: {
- 'series-1': {
- lineSmooth: Chartist.Interpolation.step()
- },
- 'series-2': {
- lineSmooth: Chartist.Interpolation.simple(),
- showArea: true
- },
- 'series-3': {
- showPoint: false
- }
- }
-}, [
- // You can even use responsive configuration overrides to
- // customize your series configuration even further!
- ['screen and (max-width: 320px)', {
- series: {
- 'series-1': {
- lineSmooth: Chartist.Interpolation.none()
- },
- 'series-2': {
- lineSmooth: Chartist.Interpolation.none(),
- showArea: false
- },
- 'series-3': {
- lineSmooth: Chartist.Interpolation.none(),
- showPoint: true
- }
- }
- }]
-]);
diff --git a/site/examples/example-line-simple-responsive.js b/site/examples/example-line-simple-responsive.js
deleted file mode 100644
index 62f987446..000000000
--- a/site/examples/example-line-simple-responsive.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* Add a basic data series with six labels and values */
-var data = {
- labels: ['1', '2', '3', '4', '5', '6'],
- series: [
- {
- data: [1, 2, 3, 5, 8, 13]
- }
- ]
-};
-
-/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
-var options = {
- axisX: {
- labelInterpolationFnc: function(value) {
- return 'Calendar Week ' + value;
- }
- }
-};
-
-/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
-var responsiveOptions = [
- ['screen and (min-width: 641px) and (max-width: 1024px)', {
- showPoint: false,
- axisX: {
- labelInterpolationFnc: function(value) {
- return 'Week ' + value;
- }
- }
- }],
- ['screen and (max-width: 640px)', {
- showLine: false,
- axisX: {
- labelInterpolationFnc: function(value) {
- return 'W' + value;
- }
- }
- }]
-];
-
-/* Initialize the chart with the above settings */
-new Chartist.Line('#my-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/example-line-simple-smoothing.js b/site/examples/example-line-simple-smoothing.js
deleted file mode 100644
index 99c0abb6c..000000000
--- a/site/examples/example-line-simple-smoothing.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3, 4, 5],
- series: [
- [1, 5, 10, 0, 1],
- [10, 15, 0, 1, 2]
- ]
-}, {
- // Remove this configuration to see that chart rendered with cardinal spline interpolation
- // Sometimes, on large jumps in data values, it's better to use simple smoothing.
- lineSmooth: Chartist.Interpolation.simple({
- divisor: 2
- }),
- fullWidth: true,
- chartPadding: {
- right: 20
- },
- low: 0
-});
diff --git a/site/examples/example-line-svg-animation.js b/site/examples/example-line-svg-animation.js
deleted file mode 100644
index 4a7d746c9..000000000
--- a/site/examples/example-line-svg-animation.js
+++ /dev/null
@@ -1,127 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
- series: [
- [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
- [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
- [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
- [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
- ]
-}, {
- low: 0
-});
-
-// Let's put a sequence number aside so we can use it in the event callbacks
-var seq = 0,
- delays = 80,
- durations = 500;
-
-// Once the chart is fully created we reset the sequence
-chart.on('created', function() {
- seq = 0;
-});
-
-// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
-chart.on('draw', function(data) {
- seq++;
-
- if(data.type === 'line') {
- // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
- data.element.animate({
- opacity: {
- // The delay when we like to start the animation
- begin: seq * delays + 1000,
- // Duration of the animation
- dur: durations,
- // The value where the animation should start
- from: 0,
- // The value where it should end
- to: 1
- }
- });
- } else if(data.type === 'label' && data.axis === 'x') {
- data.element.animate({
- y: {
- begin: seq * delays,
- dur: durations,
- from: data.y + 100,
- to: data.y,
- // We can specify an easing function from Chartist.Svg.Easing
- easing: 'easeOutQuart'
- }
- });
- } else if(data.type === 'label' && data.axis === 'y') {
- data.element.animate({
- x: {
- begin: seq * delays,
- dur: durations,
- from: data.x - 100,
- to: data.x,
- easing: 'easeOutQuart'
- }
- });
- } else if(data.type === 'point') {
- data.element.animate({
- x1: {
- begin: seq * delays,
- dur: durations,
- from: data.x - 10,
- to: data.x,
- easing: 'easeOutQuart'
- },
- x2: {
- begin: seq * delays,
- dur: durations,
- from: data.x - 10,
- to: data.x,
- easing: 'easeOutQuart'
- },
- opacity: {
- begin: seq * delays,
- dur: durations,
- from: 0,
- to: 1,
- easing: 'easeOutQuart'
- }
- });
- } else if(data.type === 'grid') {
- // Using data.axis we get x or y which we can use to construct our animation definition objects
- var pos1Animation = {
- begin: seq * delays,
- dur: durations,
- from: data[data.axis.units.pos + '1'] - 30,
- to: data[data.axis.units.pos + '1'],
- easing: 'easeOutQuart'
- };
-
- var pos2Animation = {
- begin: seq * delays,
- dur: durations,
- from: data[data.axis.units.pos + '2'] - 100,
- to: data[data.axis.units.pos + '2'],
- easing: 'easeOutQuart'
- };
-
- var animations = {};
- animations[data.axis.units.pos + '1'] = pos1Animation;
- animations[data.axis.units.pos + '2'] = pos2Animation;
- animations['opacity'] = {
- begin: seq * delays,
- dur: durations,
- from: 0,
- to: 1,
- easing: 'easeOutQuart'
- };
-
- data.element.animate(animations);
- }
-});
-
-// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
-chart.on('created', function() {
- if(window.__exampleAnimateTimeout) {
- clearTimeout(window.__exampleAnimateTimeout);
- window.__exampleAnimateTimeout = null;
- }
- window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
-});
-
diff --git a/site/examples/example-multiline-bar.js b/site/examples/example-multiline-bar.js
deleted file mode 100644
index e71f16421..000000000
--- a/site/examples/example-multiline-bar.js
+++ /dev/null
@@ -1,20 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
- series: [
- [60000, 40000, 80000, 70000],
- [40000, 30000, 70000, 65000],
- [8000, 3000, 10000, 6000]
- ]
-}, {
- seriesBarDistance: 10,
- axisX: {
- offset: 60
- },
- axisY: {
- offset: 80,
- labelInterpolationFnc: function(value) {
- return value + ' CHF'
- },
- scaleMinSpace: 15
- }
-});
\ No newline at end of file
diff --git a/site/examples/example-plugin-accessibility.js b/site/examples/example-plugin-accessibility.js
deleted file mode 100644
index 620d1fe5c..000000000
--- a/site/examples/example-plugin-accessibility.js
+++ /dev/null
@@ -1,36 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
- series: [
- {name: 'Income', data: [20000, 30000, 35000, 32000, 40000, 42000, 50000, 62000, 80000, 94000, 100000, 120000]},
- {name: 'Expenses', data: [10000, 15000, 12000, 14000, 20000, 23000, 22000, 24000, 21000, 18000, 30000, 32000]}
- ]
-}, {
- fullWidth: true,
- lineSmooth: false,
- chartPadding: {
- right: 20,
- left: 10
- },
- axisX: {
- labelInterpolationFnc: function(value) {
- return value.split('').slice(0, 3).join('');
- }
- },
- plugins: [
- Chartist.plugins.ctAccessibility({
- caption: 'Fiscal year 2015',
- seriesHeader: 'business numbers',
- summary: 'A graphic that shows the business numbers of the fiscal year 2015',
- valueTransform: function(value) {
- return value + ' dollar';
- },
- // ONLY USE THIS IF YOU WANT TO MAKE YOUR ACCESSIBILITY TABLE ALSO VISIBLE!
- visuallyHiddenStyles: 'position: absolute; top: 100%; width: 100%; font-size: 11px; overflow-x: auto; background-color: rgba(0, 0, 0, 0.1); padding: 10px'
- })
- ]
-});
-
-// This is only used for the example on the Chartist example page
-$chart.parent().css({
- 'margin-bottom': '160px'
-});
diff --git a/site/examples/example-plugin-axistitle.js b/site/examples/example-plugin-axistitle.js
deleted file mode 100644
index ed27945bd..000000000
--- a/site/examples/example-plugin-axistitle.js
+++ /dev/null
@@ -1,37 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['0-15', '16-30', '31-45', '46-60', '61-75', '76-90', '91-105', '106-120'],
- series: [[1, 3, 7, 12, 1, 2, 1, 0]]
-}, {
- chartPadding: {
- top: 20,
- right: 0,
- bottom: 30,
- left: 0
- },
- axisY: {
- onlyInteger: true
- },
- plugins: [
- Chartist.plugins.ctAxisTitle({
- axisX: {
- axisTitle: 'Time (mins)',
- axisClass: 'ct-axis-title',
- offset: {
- x: 0,
- y: 50
- },
- textAnchor: 'middle'
- },
- axisY: {
- axisTitle: 'Goals',
- axisClass: 'ct-axis-title',
- offset: {
- x: 0,
- y: 0
- },
- textAnchor: 'middle',
- flipTitle: false
- }
- })
- ]
-});
diff --git a/site/examples/example-plugin-fill-donut.js b/site/examples/example-plugin-fill-donut.js
deleted file mode 100755
index ef263d745..000000000
--- a/site/examples/example-plugin-fill-donut.js
+++ /dev/null
@@ -1,56 +0,0 @@
-var chart = new Chartist.Pie('.ct-chart',
- {
- series: [160, 60 ],
- labels: ['', '']
- }, {
- donut: true,
- donutWidth: 20,
- startAngle: 210,
- total: 260,
- showLabel: false,
- plugins: [
- Chartist.plugins.fillDonut({
- items: [{
- content: '',
- position: 'bottom',
- offsetY : 10,
- offsetX: -2
- }, {
- content: '
160mph
'
- }]
- })
- ],
- });
-
-chart.on('draw', function(data) {
- if(data.type === 'slice' && data.index == 0) {
- // Get the total path length in order to use for dash array animation
- var pathLength = data.element._node.getTotalLength();
-
- // Set a dasharray that matches the path length as prerequisite to animate dashoffset
- data.element.attr({
- 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
- });
-
- // Create animation definition while also assigning an ID to the animation for later sync usage
- var animationDefinition = {
- 'stroke-dashoffset': {
- id: 'anim' + data.index,
- dur: 1200,
- from: -pathLength + 'px',
- to: '0px',
- easing: Chartist.Svg.Easing.easeOutQuint,
- fill: 'freeze'
- }
- };
-
- // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
- data.element.attr({
- 'stroke-dashoffset': -pathLength + 'px'
- });
-
- // We can't use guided mode as the animations need to rely on setting begin manually
- // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
- data.element.animate(animationDefinition, true);
- }
-});
diff --git a/site/examples/example-plugin-pointlabel.js b/site/examples/example-plugin-pointlabel.js
deleted file mode 100644
index 09b6768a3..000000000
--- a/site/examples/example-plugin-pointlabel.js
+++ /dev/null
@@ -1,12 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['M', 'T', 'W', 'T', 'F'],
- series: [
- [12, 9, 7, 8, 5]
- ]
-}, {
- plugins: [
- Chartist.plugins.ctPointLabels({
- textAnchor: 'middle'
- })
- ]
-});
diff --git a/site/examples/example-plugin-targetline.js b/site/examples/example-plugin-targetline.js
deleted file mode 100644
index b6cac7e58..000000000
--- a/site/examples/example-plugin-targetline.js
+++ /dev/null
@@ -1,12 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['M', 'T', 'W', 'T', 'F'],
- series: [
- [5, 11, 2, 5, 7]
- ]
-}, {
- plugins: [
- Chartist.plugins.ctTargetLine({
- value: 6
- })
- ]
-});
diff --git a/site/examples/example-plugin-threshold.js b/site/examples/example-plugin-threshold.js
deleted file mode 100644
index 835ee57f7..000000000
--- a/site/examples/example-plugin-threshold.js
+++ /dev/null
@@ -1,16 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- series: [
- [5, -4, 3, 7, 20, 10, 3, 4, 8, -10, 6, -8]
- ]
-}, {
- showArea: true,
- axisY: {
- onlyInteger: true
- },
- plugins: [
- Chartist.plugins.ctThreshold({
- threshold: 4
- })
- ]
-});
diff --git a/site/examples/example-plugin-tooltip.js b/site/examples/example-plugin-tooltip.js
deleted file mode 100644
index 060cb7499..000000000
--- a/site/examples/example-plugin-tooltip.js
+++ /dev/null
@@ -1,22 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: [1, 2, 3],
- series: [
- [
- {meta: 'description', value: 1 },
- {meta: 'description', value: 5},
- {meta: 'description', value: 3}
- ],
- [
- {meta: 'other description', value: 2},
- {meta: 'other description', value: 4},
- {meta: 'other description', value: 2}
- ]
- ]
-}, {
- low: 0,
- high: 8,
- fullWidth: true,
- plugins: [
- Chartist.plugins.tooltip()
- ]
-});
diff --git a/site/examples/example-plugin-zoom.js b/site/examples/example-plugin-zoom.js
deleted file mode 100644
index 08668360b..000000000
--- a/site/examples/example-plugin-zoom.js
+++ /dev/null
@@ -1,39 +0,0 @@
-var data = {
- series: [[
- { x: 1, y: 100 },
- { x: 2, y: 50 },
- { x: 3, y: 25 },
- { x: 4, y: 66 },
- { x: 5, y: 30 },
- { x: 6, y: 22 }
- ]]
-};
-
-var options = {
- axisX: {
- type: Chartist.AutoScaleAxis
- },
- axisY: {
- type: Chartist.AutoScaleAxis
- },
- plugins: [
- Chartist.plugins.zoom({ onZoom: onZoom })
- ]
-};
-
-var chart = Chartist.Line('.ct-chart', data, options);
-var resetFnc;
-function onZoom(chart, reset) {
- resetFnc = reset;
-}
-
-var btn = document.createElement('button');
-btn.id = 'reset-zoom-btn';
-btn.innerHTML = 'Reset Zoom';
-btn.style.float = 'right';
-btn.addEventListener('click', function() {
- console.log(resetFnc);
- resetFnc && resetFnc();
-});
-var parent = document.querySelector('#example-plugin-zoom .chart');
-!parent.querySelector('#reset-zoom-btn') && parent.appendChild(btn);
diff --git a/site/examples/example-simple-bar.js b/site/examples/example-simple-bar.js
deleted file mode 100644
index f655562c5..000000000
--- a/site/examples/example-simple-bar.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var data = {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- series: [
- [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
- [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
- ]
-};
-
-var options = {
- seriesBarDistance: 15
-};
-
-var responsiveOptions = [
- ['screen and (min-width: 641px) and (max-width: 1024px)', {
- seriesBarDistance: 10,
- axisX: {
- labelInterpolationFnc: function (value) {
- return value;
- }
- }
- }],
- ['screen and (max-width: 640px)', {
- seriesBarDistance: 5,
- axisX: {
- labelInterpolationFnc: function (value) {
- return value[0];
- }
- }
- }]
-];
-
-new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/example-simple-svg-animation.js b/site/examples/example-simple-svg-animation.js
deleted file mode 100644
index 97c7a7a1e..000000000
--- a/site/examples/example-simple-svg-animation.js
+++ /dev/null
@@ -1,63 +0,0 @@
-var chart = new Chartist.Line('.ct-chart', {
- labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
- series: [
- [12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
- [4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
- ]
-}, {
- low: 0,
- showLine: false,
- axisX: {
- showLabel: false,
- offset: 0
- },
- axisY: {
- showLabel: false,
- offset: 0
- }
-});
-
-// Let's put a sequence number aside so we can use it in the event callbacks
-var seq = 0;
-
-// Once the chart is fully created we reset the sequence
-chart.on('created', function() {
- seq = 0;
-});
-
-// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
-chart.on('draw', function(data) {
- if(data.type === 'point') {
- // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
- data.element.animate({
- opacity: {
- // The delay when we like to start the animation
- begin: seq++ * 80,
- // Duration of the animation
- dur: 500,
- // The value where the animation should start
- from: 0,
- // The value where it should end
- to: 1
- },
- x1: {
- begin: seq++ * 80,
- dur: 500,
- from: data.x - 100,
- to: data.x,
- // You can specify an easing function name or use easing functions from Chartist.Svg.Easing directly
- easing: Chartist.Svg.Easing.easeOutQuart
- }
- });
- }
-});
-
-// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
-chart.on('created', function() {
- if(window.__anim0987432598723) {
- clearTimeout(window.__anim0987432598723);
- window.__anim0987432598723 = null;
- }
- window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
-});
-
diff --git a/site/examples/example-timeseries-moment.js b/site/examples/example-timeseries-moment.js
deleted file mode 100644
index 4e79f9928..000000000
--- a/site/examples/example-timeseries-moment.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// Requires Moment.js
-
-var chart = new Chartist.Line('.ct-chart', {
- series: [
- {
- name: 'series-1',
- data: [
- {x: new Date(143134652600), y: 53},
- {x: new Date(143234652600), y: 40},
- {x: new Date(143340052600), y: 45},
- {x: new Date(143366652600), y: 40},
- {x: new Date(143410652600), y: 20},
- {x: new Date(143508652600), y: 32},
- {x: new Date(143569652600), y: 18},
- {x: new Date(143579652600), y: 11}
- ]
- },
- {
- name: 'series-2',
- data: [
- {x: new Date(143134652600), y: 53},
- {x: new Date(143234652600), y: 35},
- {x: new Date(143334652600), y: 30},
- {x: new Date(143384652600), y: 30},
- {x: new Date(143568652600), y: 10}
- ]
- }
- ]
-}, {
- axisX: {
- type: Chartist.FixedScaleAxis,
- divisor: 5,
- labelInterpolationFnc: function(value) {
- return moment(value).format('MMM D');
- }
- }
-});
\ No newline at end of file
diff --git a/site/examples/line-scatter-random.js b/site/examples/line-scatter-random.js
deleted file mode 100644
index 593f37e9a..000000000
--- a/site/examples/line-scatter-random.js
+++ /dev/null
@@ -1,36 +0,0 @@
-var times = function(n) {
- return Array.apply(null, new Array(n));
-};
-
-var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
- data.labels.push(index + 1);
- data.series.forEach(function(series) {
- series.push(Math.random() * 100)
- });
-
- return data;
-}, {
- labels: [],
- series: times(4).map(function() { return new Array() })
-});
-
-var options = {
- showLine: false,
- axisX: {
- labelInterpolationFnc: function(value, index) {
- return index % 13 === 0 ? 'W' + value : null;
- }
- }
-};
-
-var responsiveOptions = [
- ['screen and (min-width: 640px)', {
- axisX: {
- labelInterpolationFnc: function(value, index) {
- return index % 4 === 0 ? 'W' + value : null;
- }
- }
- }]
-];
-
-new Chartist.Line('.ct-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/overlapping-bars.js b/site/examples/overlapping-bars.js
deleted file mode 100644
index 8df7b8132..000000000
--- a/site/examples/overlapping-bars.js
+++ /dev/null
@@ -1,24 +0,0 @@
-var data = {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- series: [
- [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
- [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
- ]
-};
-
-var options = {
- seriesBarDistance: 10
-};
-
-var responsiveOptions = [
- ['screen and (max-width: 640px)', {
- seriesBarDistance: 5,
- axisX: {
- labelInterpolationFnc: function (value) {
- return value[0];
- }
- }
- }]
-];
-
-new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
diff --git a/site/examples/pie-with-custom-labels.js b/site/examples/pie-with-custom-labels.js
deleted file mode 100644
index 3ddf2c51e..000000000
--- a/site/examples/pie-with-custom-labels.js
+++ /dev/null
@@ -1,27 +0,0 @@
-var data = {
- labels: ['Bananas', 'Apples', 'Grapes'],
- series: [20, 15, 40]
-};
-
-var options = {
- labelInterpolationFnc: function(value) {
- return value[0]
- }
-};
-
-var responsiveOptions = [
- ['screen and (min-width: 640px)', {
- chartPadding: 30,
- labelOffset: 100,
- labelDirection: 'explode',
- labelInterpolationFnc: function(value) {
- return value;
- }
- }],
- ['screen and (min-width: 1024px)', {
- labelOffset: 80,
- chartPadding: 20
- }]
-];
-
-new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
\ No newline at end of file
diff --git a/site/examples/simple-configuration-chart.js b/site/examples/simple-configuration-chart.js
deleted file mode 100644
index 21eb36d39..000000000
--- a/site/examples/simple-configuration-chart.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// Our labels and three data series
-var data = {
- labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'],
- series: [
- [5, 4, 3, 7, 5, 10],
- [3, 2, 9, 5, 4, 6],
- [2, 1, -3, -4, -2, 0]
- ]
-};
-
-// We are setting a few options for our chart and override the defaults
-var options = {
- // Don't draw the line chart points
- showPoint: false,
- // Disable line smoothing
- lineSmooth: false,
- // X-Axis specific configuration
- axisX: {
- // We can disable the grid for this axis
- showGrid: false,
- // and also don't show the label
- showLabel: false
- },
- // Y-Axis specific configuration
- axisY: {
- // Lets offset the chart a bit from the labels
- offset: 60,
- // The label interpolation function enables you to modify the values
- // used for the labels on each axis. Here we are converting the
- // values into million pound.
- labelInterpolationFnc: function(value) {
- return '$' + value + 'm';
- }
- }
-};
-
-// All you need to do is pass your configuration as third parameter to the chart function
-new Chartist.Line('.ct-chart', data, options);
diff --git a/site/examples/simple-gauge-chart.js b/site/examples/simple-gauge-chart.js
deleted file mode 100644
index c7ffec9c8..000000000
--- a/site/examples/simple-gauge-chart.js
+++ /dev/null
@@ -1,9 +0,0 @@
-new Chartist.Pie('.ct-chart', {
- series: [20, 10, 30, 40]
-}, {
- donut: true,
- donutWidth: 60,
- startAngle: 270,
- total: 200,
- showLabel: false
-});
\ No newline at end of file
diff --git a/site/examples/simple-line-chart.js b/site/examples/simple-line-chart.js
deleted file mode 100644
index 0b5c4742e..000000000
--- a/site/examples/simple-line-chart.js
+++ /dev/null
@@ -1,13 +0,0 @@
-new Chartist.Line('.ct-chart', {
- labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
- series: [
- [12, 9, 7, 8, 5],
- [2, 1, 3.5, 7, 3],
- [1, 3, 4, 5, 6]
- ]
-}, {
- fullWidth: true,
- chartPadding: {
- right: 40
- }
-});
diff --git a/site/examples/simple-pie-chart.js b/site/examples/simple-pie-chart.js
deleted file mode 100644
index 3417aa1b0..000000000
--- a/site/examples/simple-pie-chart.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var data = {
- series: [5, 3, 4]
-};
-
-var sum = function(a, b) { return a + b };
-
-new Chartist.Pie('.ct-chart', data, {
- labelInterpolationFnc: function(value) {
- return Math.round(value / data.series.reduce(sum) * 100) + '%';
- }
-});
\ No newline at end of file
diff --git a/site/examples/stacked-bar.js b/site/examples/stacked-bar.js
deleted file mode 100644
index 058b80a40..000000000
--- a/site/examples/stacked-bar.js
+++ /dev/null
@@ -1,21 +0,0 @@
-new Chartist.Bar('.ct-chart', {
- labels: ['Q1', 'Q2', 'Q3', 'Q4'],
- series: [
- [800000, 1200000, 1400000, 1300000],
- [200000, 400000, 500000, 300000],
- [100000, 200000, 400000, 600000]
- ]
-}, {
- stackBars: true,
- axisY: {
- labelInterpolationFnc: function(value) {
- return (value / 1000) + 'k';
- }
- }
-}).on('draw', function(data) {
- if(data.type === 'bar') {
- data.element.attr({
- style: 'stroke-width: 30px'
- });
- }
-});
diff --git a/site/favicon.ico b/site/favicon.ico
deleted file mode 100755
index 69108702e..000000000
Binary files a/site/favicon.ico and /dev/null differ
diff --git a/site/helpers/chartist-helpers.js b/site/helpers/chartist-helpers.js
deleted file mode 100644
index 88be22501..000000000
--- a/site/helpers/chartist-helpers.js
+++ /dev/null
@@ -1,27 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-
-// Export helpers
-module.exports.register = function (Handlebars, opt, params) {
- // The helpers to be exported
- var helpers = {
-
- snippetPath: function (snippetId, snippetLang) {
- return 'site/code-snippets/' + snippetId + '.' + snippetLang || 'js';
- },
-
- exampleCode: function(exampleId) {
- return new Buffer(fs.readFileSync('site/examples/' + exampleId + '.js', {
- encoding: 'utf8'
- }), 'utf8').toString('base64');
- }
- };
-
- opt = opt || {};
- for (var helper in helpers) {
- if (helpers.hasOwnProperty(helper)) {
- Handlebars.registerHelper(helper, helpers[helper]);
- }
- }
-};
diff --git a/site/helpers/common-helpers.js b/site/helpers/common-helpers.js
deleted file mode 100644
index 374221e0b..000000000
--- a/site/helpers/common-helpers.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Common Handlebars Helpers
- * Copyright (c) 2014 Gion Kunz
- * Licensed under the WTFPL License (WTFPL).
- */
-'use strict';
-
-var path = require('path');
-var fs = require('fs');
-
-// Export helpers
-module.exports.register = function (Handlebars, opt, params) {
- // Loading package.json for later use
- var pkg = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
-
- function slugify(str) {
- return str
- .toLowerCase()
- .replace(/[^\w ]+/g,'')
- .replace(/ +/g,'-');
- }
-
- // The helpers to be exported
- var helpers = {
-
- pkg: function (key) {
- return pkg[key];
- },
-
- escape: function(str) {
- return Handlebars.Utils.escapeExpression(str);
- },
-
- jsonStringify: function(obj) {
- return JSON.stringify(obj);
- },
-
- slugify: function(str) {
- return slugify(str);
- },
-
- concat: function() {
- var arr = [];
- for(var i = 0; i < arguments.length - 1; i++) {
- arr[i] = arguments[i];
- }
-
- return arr.join('');
- },
-
- partial: function(name, context) {
- var partial = Handlebars.partials[name];
-
- // Check if partial is not found, invalid or un-compiled and handle accordingly
- if(!partial) {
- throw 'Could not find partial with name "' + name + '".';
- } else if(typeof partial === 'string') {
- // Compile partial as its still a string and update Handlebars
- partial = Handlebars.partials[name] = Handlebars.compile(Handlebars.partials[name]);
- } else if(typeof partial !== 'function') {
- throw 'Found unknown type of partial "' + name + '" (' + typeof Handlebars.partials[name] +
- ') in Handlebars partial Array => ' + Handlebars.partials;
- }
-
- return new Handlebars.SafeString(partial(context || this));
- },
-
- atob: function(a) {
- return new Buffer(a, 'base64').toString('utf8');
- },
-
- btoa: function(b) {
- return new Buffer(b, 'utf8').toString('base64');
- }
- };
-
- opt = opt || {};
- for (var helper in helpers) {
- if (helpers.hasOwnProperty(helper)) {
- Handlebars.registerHelper(helper, helpers[helper]);
- }
- }
-};
diff --git a/site/helpers/dox-helpers.js b/site/helpers/dox-helpers.js
deleted file mode 100644
index a0ee1b00d..000000000
--- a/site/helpers/dox-helpers.js
+++ /dev/null
@@ -1,70 +0,0 @@
-'use strict';
-
-var path = require('path'),
- _ = require('lodash');
-
-// Export helpers
-module.exports.register = function (Handlebars, opt, params) {
- // The helpers to be exported
- var helpers = {
-
- doxTag: function(doxElement, doxTagType) {
- return _.find(doxElement.tags, {type: doxTagType});
- },
-
- doxTagProperty: function(doxElement, doxTagType, doxTagProperty) {
- var doxTag = helpers.doxTag(doxElement, doxTagType);
-
- if(doxTag) {
- return doxTag[doxTagProperty];
- } else {
- return doxTag;
- }
- },
-
- doxHash: function(doxElement) {
- return [helpers.doxTagProperty(doxElement, 'memberof', 'string'),
- doxElement.ctx.type,
- doxElement.ctx.name].join(' ')
- .toLowerCase()
- .replace(/[^\w ]+/g,'')
- .replace(/ +/g,'-');
- },
-
- doxTagsOfType: function(doxElement, doxTagType) {
- return _.filter(doxElement.tags, {type: doxTagType});
- },
-
- doxTransform: function(dox) {
- return dox.map(function(doxFile) {
- return {
- fileName: path.basename(doxFile.file),
- modules: doxFile.comments.reduce(function(arr, doxElement) {
- var doxModuleName = helpers.doxTagProperty(doxElement, 'module', 'string');
-
- if(doxModuleName) {
- arr.push({
- name: doxModuleName,
- description: doxElement.description.summary,
- isPrivate: doxElement.isPrivate,
- members: doxFile.comments.filter(function(doxFilterElement) {
- return helpers.doxTagProperty(doxFilterElement, 'memberof', 'string') === doxModuleName;
- })
- });
- }
-
- return arr;
- }, [])
- };
- });
- }
-
- };
-
- opt = opt || {};
- for (var helper in helpers) {
- if (helpers.hasOwnProperty(helper)) {
- Handlebars.registerHelper(helper, helpers[helper]);
- }
- }
-};
diff --git a/site/helpers/lorem-helper.js b/site/helpers/lorem-helper.js
deleted file mode 100644
index 9ee422797..000000000
--- a/site/helpers/lorem-helper.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Lorem Handlebars Helpers
- * Copyright (c) 2014 Gion Kunz
- * Licensed under the WTFPL License (WTFPL).
- */
-'use strict';
-
-var seed = require('seed-random');
-
-// Export helpers
-module.exports.register = function (Handlebars, opt, params) {
- var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit Nullam in pharetra nisl Mauris dictum fermentum malesuada Donec tincidunt, lectus nec tempor eleifend, sem enim rhoncus nibh, nec ultricies ante lectus sit amet mi Proin cursus dolor in nisl varius elementum Aliquam blandit lobortis adipiscing Proin euismod est non feugiat venenatis Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac neque consectetur, ullamcorper neque quis, commodo ligula In ornare tempus feugiat Suspendisse ut pretium dui, at egestas velit Etiam ultricies, nisl quis gravida condimentum, dui nisl congue ligula, porta consectetur est sapien viverra est Donec quis ipsum quis metus luctus porttitor sed id justo Proin ultricies adipiscing dolor, luctus interdum urna ullamcorper sit amet Phasellus mollis erat egestas urna tincidunt viverra Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Nam est ante, blandit vitae porta sed, consectetur vitae libero Sed sit amet auctor diam, eu ullamcorper nulla Aenean interdum, augue nec ullamcorper aliquam, libero justo pellentesque libero, vitae venenatis velit justo pellentesque enim Nam lobortis tortor non sagittis mollis Integer commodo eget nulla vel tincidunt Cras vitae vestibulum ipsum, a sollicitudin erat Cras feugiat vehicula magna, nec vehicula massa lacinia in Nam cursus arcu cursus felis feugiat, vel tincidunt eros aliquet Sed magna est, tincidunt a porta id, aliquam eu orci Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec nec tempus eros Mauris placerat, nisi sit amet varius venenatis, arcu felis cursus risus, ut ultricies tortor lorem nec massa Integer molestie mattis tortor, nec pretium augue accumsan at Mauris nisi risus, hendrerit in libero a, accumsan tincidunt nunc Ut id volutpat massa Duis mattis tellus ut massa ultricies volutpat Curabitur non ante vel odio tempor condimentum Duis eu sollicitudin risus Pellentesque eget metus';
- var loremWords = loremText.split(' ');
- var random = seed(loremText);
-
- function initCap(str) {
- return str.toLowerCase().replace(/(?:^|\s)[a-z]/g, function (m) {
- return m.toUpperCase();
- });
- }
-
- function randomInt(min, max) {
- min = min || (min === 0 ? 0 : -Math.pow(2, 53));
- max = max || (max === 0 ? 0 : Math.pow(2, 53));
-
- return Math.floor(random() * (max - min + 1)) + min;
- }
-
- function n(c, fnc) {
- for(var i = 0; i < c; i++) fnc(i, c);
- }
-
- function validifyNumber(number, fallback) {
- // If valid number in string, will be converted
- number = +number;
- // undefined, Object, NaN, null etc is not > 0
- if(number > 0) {
- return number;
- } else {
- return fallback;
- }
- }
-
- // The helpers to be exported
- var helpers = {
-
- loremWord: function () {
- return initCap(loremWords[randomInt(0) % loremWords.length].replace(/[,]/g, ''));
- },
-
- loremWords: function (count) {
- count = validifyNumber(count, 1);
-
- var words = [];
- n(count, function() {
- words.push(loremWords[randomInt(0, loremWords.length)]);
- });
-
- return words.join(' ');
- },
-
- loremSentence: function() {
- return helpers.loremWords(randomInt(5, 20)).replace(/^[a-z]/, function(m) {
- return m.toUpperCase();
- }) + '.';
- },
-
- loremSentences: function(count) {
- count = validifyNumber(count, 1);
-
- var sentences = [];
-
- n(count, function() {
- sentences.push(helpers.loremSentence());
- });
-
- return sentences.join(' ');
- },
-
- loremParagraph: function () {
- return helpers.loremSentences(randomInt(4, 10));
- }
- };
-
- opt = opt || {};
- for (var helper in helpers) {
- if (helpers.hasOwnProperty(helper)) {
- Handlebars.registerHelper(helper, helpers[helper]);
- }
- }
-};
diff --git a/site/images/chartist-guy.gif b/site/images/chartist-guy.gif
deleted file mode 100644
index 64895091d..000000000
Binary files a/site/images/chartist-guy.gif and /dev/null differ
diff --git a/site/images/chartist-guy.svg b/site/images/chartist-guy.svg
deleted file mode 100755
index d2f338fac..000000000
--- a/site/images/chartist-guy.svg
+++ /dev/null
@@ -1,125 +0,0 @@
-
diff --git a/site/images/chartist-icon.svg b/site/images/chartist-icon.svg
deleted file mode 100755
index 2f72bb41d..000000000
--- a/site/images/chartist-icon.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
diff --git a/site/layouts/content.hbs b/site/layouts/content.hbs
deleted file mode 100644
index 444128129..000000000
--- a/site/layouts/content.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: default
----
-
- {{>navigation}}
-
-
-
-
diff --git a/site/partials/api-side-navigation.hbs b/site/partials/api-side-navigation.hbs
deleted file mode 100644
index 2a2d71669..000000000
--- a/site/partials/api-side-navigation.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-
\ No newline at end of file
diff --git a/site/partials/browser-support-table.hbs b/site/partials/browser-support-table.hbs
deleted file mode 100644
index 895823582..000000000
--- a/site/partials/browser-support-table.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
- {{#each browsers}}
-
{{this}}
- {{/each}}
-
-
-
- {{#each features}}
-
-
{{name}}
- {{#each browsers}}
-
- {{text}}
-
- {{/each}}
-
- {{/each}}
-
-
\ No newline at end of file
diff --git a/site/partials/code-snippet.hbs b/site/partials/code-snippet.hbs
deleted file mode 100644
index adc2f44b6..000000000
--- a/site/partials/code-snippet.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-{{#if button}}{{/if}}
-{{! if path is there then we load the file and escape in path otherwise we lookup a file called id.lang (index.html,
- test.js etc.) }}
-
{{#if path}}{{glob path}}{{else}}{{glob (snippetPath id lang)}}{{/if}}
\ No newline at end of file
diff --git a/site/partials/code.hbs b/site/partials/code.hbs
deleted file mode 100644
index 6405be6b3..000000000
--- a/site/partials/code.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{#if button}}{{/if}}
-{{code}}
\ No newline at end of file
diff --git a/site/partials/dox/dox-member.hbs b/site/partials/dox/dox-member.hbs
deleted file mode 100644
index 2836f45f5..000000000
--- a/site/partials/dox/dox-member.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/site/robots.txt b/site/robots.txt
deleted file mode 100644
index 941749507..000000000
--- a/site/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# robotstxt.org
-
-User-agent: *
diff --git a/site/scripts/chartist-guy.js b/site/scripts/chartist-guy.js
deleted file mode 100644
index e13ab0381..000000000
--- a/site/scripts/chartist-guy.js
+++ /dev/null
@@ -1,63 +0,0 @@
-(function(){
- 'use strict';
-
- // Chartist guy data chart data and options
- var optionsChartistGuy = {
- width: 195,
- height: 137,
- chartPadding: {
- top: 15,
- right: 10,
- bottom: 10,
- left: 10
- },
- axisX: {
- offset: 15,
- showLabel: true,
- showGrid: true,
- labelInterpolationFnc: function(n) {
- return n;
- }
- },
- axisY: {
- offset: 25,
- showLabel: true,
- labelOffset: {
- y: 5
- },
- showGrid: true,
- scaleMinSpace: 15,
- labelInterpolationFnc: function(n) {
- return Math.round(n / 100000) / 10 + 'm.';
- }
- }
- };
-
- var chartistGuyData = {
- labels: ['1st', '2nd', '3rd'],
- series: [
- {
- name: 'Workers',
- data: [1283000, 1500000, 5706000]
- },
- {
- name: 'Nobles',
- data: [1883000, 2050000, 3706000]
- }
- ]
- };
-
- var $chartistGuyElement = $('#chartist-guy');
- if($chartistGuyElement.length > 0) {
-
- // Create new snap object from SVG
- var chartistGuySnap = Snap($chartistGuyElement.get(0));
- // Load Chartist guy SVG
- Snap.load($chartistGuyElement.data('svgSrc'), function (fragment) {
- chartistGuySnap.append(fragment);
-
- // Add line chart to canvas of Chartist guy :-)
- window.Chartist.Line($chartistGuyElement.find('#chart-canvas').get(0), chartistGuyData, optionsChartistGuy);
- });
- }
-}());
diff --git a/site/scripts/main.js b/site/scripts/main.js
deleted file mode 100644
index 38d8b8232..000000000
--- a/site/scripts/main.js
+++ /dev/null
@@ -1,123 +0,0 @@
-'use strict';
-
-// Initialize highlight.js
-window.hljs.initHighlightingOnLoad();
-
-function evalChartistCode(code, chartElement) {
- // Modify the code to use a proper selector using the ID of the example as well as return the Chartist object
- var modified = code.replace(/.*Chartist\s*\.\s*(.+)\(\s*['"](.+)['"]/, function(match, type) {
- return ['var chart = new Chartist.', type, '(chartElement'].join('');
- }) + '; return chart;';
-
- // Remove any declaration of $chart as we are passing $chart to our function eval
- modified = modified.replace(/var \$chart.+;/, '');
-
- var $chartElement = $(chartElement).empty();
-
- try {
- // Create function from the modified code and execute it
- return (new Function(['chartElement', '$chart'], modified)(chartElement, $chartElement)); // jshint ignore:line
- } catch(err) {
- // Maybe show error in the future
- }
-}
-
-// Generic data-* driven control behaviour
-$(function() {
- $('[data-toggle-visible]').each(function() {
- var $element = $(this),
- $target = $($element.data('toggleVisible'));
-
- $target.addClass('invisible');
- $element.on('click', function(e) {
- $target.toggleClass('invisible');
- e.preventDefault();
- });
- });
-
- $('[data-sticky]').each(function() {
- var $element = $(this),
- initialOffset = $element.offset().top,
- margin = $element.data('sticky') || 0;
-
- $(window).on('scroll', function() {
- var scrollTop = $(window).scrollTop();
-
- if(scrollTop > initialOffset - margin) {
- $element.css({
- position: 'relative',
- top: scrollTop + margin - initialOffset
- });
- } else {
- $element.css({
- position: '',
- top: ''
- });
- }
- });
- });
-
- $('[data-example]').each(function() {
- var $element = $(this),
- code = window.atob($element.data('example'));
-
- // Execute the Chartist code immediately
- evalChartistCode(code, $element.get(0));
- });
-
- $('[data-live-example]').each(function() {
- var $element = $(this),
- $editor = $element.find('.code-editor'),
- initialCode = window.atob($element.data('liveExample')),
- chartist,
- cm;
-
- function updateChart() {
- if(chartist) {
- chartist.update();
- }
- }
-
- function initializeCodeMirror() {
- if(cm) {
- return;
- }
-
- cm = window.CodeMirror.fromTextArea($editor.get(0), {
- mode: 'javascript',
- theme: 'chartist',
- lineWrapping: true,
- indentUnit: 2,
- tabSize: 2
- });
-
- cm.on('change', function(event) {
- // Execute the Chartist code once the code gets updated
- chartist = evalChartistCode(event.doc.getValue(), $element.find('.ct-chart').get(0));
- });
- }
-
- $element.find('.edit-button').on('click', function() {
- $element.addClass('edit-mode');
- updateChart();
- initializeCodeMirror();
- });
-
- $element.find('.close-edit-button').on('click', function() {
- $element.removeClass('edit-mode');
- updateChart();
- });
-
- $editor.val(initialCode);
-
- // Execute the Chartist code immediately
- chartist = evalChartistCode(initialCode, $element.find('.ct-chart').get(0));
- });
-});
-
-// Initialize foundation
-$(document).foundation({
- topbar: {
- scrolltop: false
- }
-});
diff --git a/site/styles/_affiliate-project.scss b/site/styles/_affiliate-project.scss
deleted file mode 100644
index 3d9297887..000000000
--- a/site/styles/_affiliate-project.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.affiliate-projects {
- display: flex;
- margin: 0 -10px;
-}
-
-.affiliate-project {
- display: block;
- margin: 0 10px;
-}
-
-.affiliate-project__title {
- display: block;
- font-size: 20px;
- font-weight: bold;
- margin: 10px 0;
- line-height: 1.1;
-}
-
-.affiliate-project__image {
- margin-bottom: 10px;
-}
-
-@media screen and (max-width: 640px) {
- .affiliate-projects {
- display: block;
- }
-
- .affiliate-project {
- margin: 10px;
- }
-}
diff --git a/site/styles/_api-doc.scss b/site/styles/_api-doc.scss
deleted file mode 100644
index 61f62d592..000000000
--- a/site/styles/_api-doc.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.module-member {
- margin-bottom: 2em;
- background-color: mix(black, $color-white, 5%);
- box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
- padding: 10px;
-
- .member-header {
- position: relative;
-
- .api-code-button {
- @include button();
- text-transform: uppercase;
- width: calc(100% + 20px);
- margin: 0 -10px;
-
-
- @media #{$medium-up} {
- position: absolute;
- width: auto;
- margin: 0;
- top: 0;
- right: -10px;
- padding: 0 10px;
- height: 100%;
- }
- }
- }
-
- .description {
- margin-top: 1em;
- margin-bottom: 2em;
-
- strong {
- display: inline-block;
- padding-top: 1em;
- padding-bottom: 0.5em;
- }
- }
-
- .member-title {
- background: #453D3F;
- padding: 10px;
- margin: -10px -10px 0 -10px;
- color: lighten($color-white, 10%);
- text-transform: none;
- }
-
- .api-example {
- margin-top: 2em;
- }
-
- .param {
- margin-bottom: 0.5em;
-
- > code {
- font-weight: bold;
- }
- }
-
- .param-type {
-
- > code {
- background-color: rgba(255, 255, 255, 0.2);
- padding: 0.1em 0.2em;
- }
-
- &:after {
- content: "ā±";
- }
-
- &:last-of-type {
- &:after {
- content: none;
- }
- }
- }
-
- pre {
- margin: 0 -10px;
- }
-}
diff --git a/site/styles/_base.scss b/site/styles/_base.scss
deleted file mode 100644
index e5bd390c7..000000000
--- a/site/styles/_base.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-$modular-scale: generateScale(16, $scale-perfect-fourth);
-
-body {
- line-height: 1.54;
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAIoElEQVRoQ23a7bETOxCE4eNfJxEIBnKBYCAXCAZy4bpVPK4X1XWVWe+uPkYz3T0jHR6/fv16f3t+Pn369Pb8vZ9vP3/+fPv9+/d59uHDh/P748ePb1++fDnXvd937ff+69ev53nH2O+12btd9/n27dtps/vv37+fvnu233tm/I1rfvbs3Z65bly/N8ZjC2HMefB4vAxk8CbfZJuAwfrsGcMsxDg/fvw47TepBTByRqzdjNuzz58/n4WtnUXPlrXbs73veMbZs30ez0bvG3CT7crzovLnz58z2d7tu88G3eC7t5Ddr90+G0t0d7/nM3JjGkNERYyztOOU2dMI7b6fvdv38TT0QGur3+oYaSId5xlGisaitAnvcFuUPmu3T2G4BYn4novC5tsXDG+IQcUcrN3GeTwHeN+Em4yHYRHG17ket0jexZE9X7t994yBu78NFAk8mQPBjYPKm7U3pghxxPo9nv+8M3wT4gjI7B0D/4lpyAv/oLMFMmyTg5boFnbmwTORGjpEcmPsgw9gL2oHWuMIQwqRhQ4BZ8gGQdrd40GVjiDMy3OICNebFIxzyh/PtuCNYZFbhCjjnHkh4HCkqlMJrXQyblcTEQmRgmeT3oJAoTih44NNpbryjV91iggf257GHI7MgyIjZFUxYlAjQXHR2/sSsCrIo/qScE7j1UapqkWmZ/CiDna4chby/OdwZEYg/CYme5VMyWsdB7v1oWR4Jm8Uv+AgQiKC1FUs0V1b0SfrFNJiKveH7F2xRcic87REJZ/I9p2oWf7/8k2rAbmKE6gaR20sBN+7fcguJQSxjXsissxOTkuoarQwU6BFgnKQyIa8ULVoWVniK78Y3nnArVCupJNzue9ExOplVZ7nsV1n3OBUqPGOdq23kHbv9htUW7uBj/mbFwgQ+LrHo5Yzs+uoloRmUlhcAx8lCkFoUcloOWeTi17H4j2QxA2OQGbvIYUjtJfAFZmb65+EOMNhcZ14T701o0go73Vy+aayKZdsvMFvk8tHKmAwLgdV2e0v4kgut23sf1RrC6E2SHQaRZphl1csGHSqWnhQwhaeFQBtKaIM3zE4YHODmMT7eK7qFI3C12wMPgYFge4NZngTHQgyUhTnPbBE4NZb5pf4umUAKbmpOWvtFtnDkXLhzsbIfReGSoQZTqJvkUDUliHkXQQtrsbuHdg06a2NfQnnK4tOrVWF2QC8A88w7NrSYgtp2QKGhZ5MTJblBeOo61TZ99ZBBMBc1HHlFI3L7LRdSU2pLAhMNgAZtmDhVkjWaIaKMrJ6brHNXxxDGETBItlSDr9Uq+UIzLXmbw2FuMp0RnRvwgGEQZUAYozs9rkQolhbxBzTYrSqyZazkEFLYiKRMwQ516jlOYnmZfmCAMwg4kBeK7Ptt/koEA6KtFquiXDt5SV83HwnITazrxFviIK6SEli+7q2xW5LFp7CsW7OWhmAi1OUe5EkVuLT3qKb804Zvxc9ZKDXrTqVIyX82nUnx0hXOaEFn7wAZjjWOqpOKxxbEkGJyv11HGS/AV4mF/ritAluz220SCjxUAyq4dRUpBNhuxNVTYCqqDRaxuWEzX8iAqsiUQIjLo/JG/q09mIYLzF8V1iWW8CpUZQGNiaSN7FyqoW3TDoRoctICf+wWfUhBEgucd11U0sLcGzyAzse7x6n0muvtHbykLyF+IfsiwjsyZpVIrtGE5LJlhAWKtsPpqQTVBkqAgxshIzNgfKO6NuDiBiInkT5/L7fW1aTKiBBY/c9uqwE2ra2r0iTcIpnHA7ALcc/EvKdweWqXbvxO5l98gsWFML+Gx9kdFHZRJXAPRchk1EeC5vRcsz6tswh08hrHm1EWj8VAViv/atoRNSqBDViNA92J2hRnRwpi29Khxvr5/QFlERm/XryiVu2CERB/9eeXdJTqth/bwCliER5e0+YqRu+Vfn2W1L0nndxiXNEtAJxn9TL9o3y2Y8gt9KCcZukpIZZHtt7OaLPkFDoQZWXGd1Dc326zUVyTlBQgi2oTlxep/EGR7h16p7jKMPfo6EmPpGS5e1tJDBwxD81FGVTCuGH7XLrNGe+PeieDVRs719bXcZV0lo6W6g8ghPdq/AmbvSKoBwE5yBZjh4Vus6OQQ5MRUMRe+SX56vxapkS7az87/7dORWptCBjSaoMx0Oe7zmA7W35YXzP1H0SI7tUD6/ql4fkDKGDY1zpbm5tW4brC264xnsihFu83vIH9PAWB1Xmu7eIRvWUKLzqRbM3Y9RhJaUkaDHe2fysr8WprXrgxsv1esui5hoRsmjbYVA/EYE7k/J0t68iZPAWdrhxY5taySHln3H0ZSCoNIfham0gvbj6Ovut7OFKC7kNUhlcG0rVUxT7/h4lKQLLN1zq9mDGO6UUJerWqEvCuHXK+EVEIuQl4YL1e0MjKZrMoZtaCgxnLPjVw7J7YSZrF+b/V1ByAHGR605EeAL5bGqEuaRtXbX3zQPai+7GKTElRIT198pGF7/AaG3x695p1jmnjFdOrPN+C1nrpzvrW9Da87rMv3tbZ/mh+t+q2WJ4li2M7O7RH6OoXkXlZPZm525t10GZAXY9LVHSW4ykirgMJiI9hAARzrsr6FvlCA9FxUV2HY5Udr2QwBRoDhkaCVzAMd4sR0S1BO2f7Rycg2PnNRe1U6IQnkbmpVogoMYxSHnSMy2evMsRELEYGJ8nlSPgu/suVNW9vlLArreorP+QYWEb49RaQm/Q+xyqRz5C2xKCXKvHdu1envrU+/DNaOPeXOy2d79V2UoVtHjVWpQDYVtmkFHhv//ypI8oURzR4XmVdc+HVcXgyRmqZl4v37xTYW/cc2SqGGw9VW44USSfd7kCw/YL3svoFtKECrKMAmVOKxSJThMvfhjnddLYfbH0j6DdWzRjN9uDAEwr9rqpaja3xzCHxZ5t69//fICTajLnwlTSHBvjP9uuEN4BiDLbAAAAAElFTkSuQmCC);
- background-position: 50% 50%;
- background-repeat: repeat repeat;
-}
-
-html {
- box-sizing: border-box;
-}
-
-*, *:before, *:after {
- box-sizing: inherit;
-}
-
-p:first-child {
- margin-top: 0;
-}
-
-a {
- color: $color-red;
- text-decoration: none;
-
- &:hover {
- color: lighten($color-red, 10%);
- }
-}
-
-ul {
- padding: 0;
-
- list-style: disc outside none;
- padding-left: 1em;
-}
-
-pre {
- white-space: normal;
-
- code {
- white-space: pre-wrap;
- }
-}
-
-h1, h2, h3, h4, h5, h6 {
- font-weight: 300;
- text-transform: uppercase;
- line-height: 1.2;
- margin-top: 1em;
- margin-bottom: 0.5em;
-}
-
-h2 {
- font-size: rem-calc(nth($modular-scale, 6));
- font-weight: 400;
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 8));
- font-weight: 300;
- }
-}
-
-h3 {
- font-size: rem-calc(nth($modular-scale, 5));
- font-weight: 400;
- background: #ded0ba;
- padding: 0.2em;
- box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 7));
- }
-}
-
-h4 {
- font-size: rem-calc(nth($modular-scale, 4));
- font-weight: 700;
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 6));
- font-weight: 400;
- }
-}
-
-h5 {
- font-size: rem-calc(nth($modular-scale, 4));
- font-weight: 700;
- margin-top: 2em;
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 4));
- }
-}
-
-h6 {
- font-size: rem-calc(nth($modular-scale, 4));
- font-weight: 700;
- margin-top: 2em;
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 4));
- }
-}
-
-table {
- min-width: 50%;
- text-align: left;
- border-collapse: collapse;
-
- th, td {
- padding: 0.5em 1em;
- }
-
- tr {
- th, td {
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- }
- }
-
- thead th {
- padding: 0.8em 1em;
- }
-}
-
-p > code {
- background-color: rgba(255, 255, 255, 0.3);
- padding: 0.1em 0.2em;
- border-radius: 2px;
-}
diff --git a/site/styles/_code-mirror-theme.scss b/site/styles/_code-mirror-theme.scss
deleted file mode 100644
index 8e7eaa89e..000000000
--- a/site/styles/_code-mirror-theme.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.CodeMirror-scroll {
- overflow: auto !important;
-}
-
-.cm-s-chartist.CodeMirror {
- background: $color-black;
- color: lighten($color-white, 10%);
- padding: rem-calc(nth($modular-scale, 5));
- font-family: "Source Code Pro", "Courier New", monospace !important;
- line-height: 1.4;
- word-wrap: break-word;
- height: auto;
- margin-bottom: rem-calc(nth($modular-scale, 5));
-}
-
-.cm-s-chartist div.CodeMirror-selected {
- background: darken($color-black, 10%) !important;
-}
-
-.cm-s-chartist .CodeMirror-gutters {
- background: #f7f7f7;
- border-right: 0px;
-}
-
-.cm-s-chartist .CodeMirror-guttermarker {
- color: $color-grapefruit;
-}
-
-.cm-s-chartist .CodeMirror-guttermarker-subtle {
- color: darken($color-black, 10%);
-}
-
-.cm-s-chartist .CodeMirror-linenumber {
- color: darken($color-black, 20%);
-}
-
-.cm-s-chartist .CodeMirror-cursor {
- border-left: 2px solid lighten($color-black, 10%) !important;
-}
-
-.cm-s-chartist span.cm-comment {
- color: lighten($color-black, 20%);
-}
-
-.cm-s-chartist span.cm-atom {
- color: $color-yellow;
-}
-
-.cm-s-chartist span.cm-number {
- color: $color-yellow;
-}
-
-.cm-s-chartist span.cm-property, .cm-s-3024-day span.cm-attribute {
- color: lighten($color-white, 10%);
-}
-
-.cm-s-chartist span.cm-keyword {
- color: $color-grapefruit;
- font-weight: bold;
-}
-
-.cm-s-chartist span.cm-string {
- color: $color-yellow;
-}
-
-.cm-s-chartist span.cm-variable {
- color: lighten($color-white, 10%);
-}
-
-.cm-s-chartist span.cm-variable-2 {
- color: lighten($color-grapefruit, 20%);
-}
-
-.cm-s-chartist span.cm-def {
- color: lighten($color-grapefruit, 20%);
-}
-
-.cm-s-chartist span.cm-bracket {
- color: #3a3432;
-}
-
-.cm-s-chartist span.cm-tag {
- color: $color-grapefruit;
- font-weight: bold;
-}
-
-.cm-s-chartist span.cm-link {
- color: $color-yellow;
-}
-
-.cm-s-chartist span.cm-error {
- background-color: $color-grapefruit;
- color: $color-black;
-}
-
-.cm-s-chartist .CodeMirror-activeline-background {
- background: #e8f2ff !important;
-}
-
-.cm-s-chartist .CodeMirror-matchingbracket {
- text-decoration: underline;
- color: white !important;
-}
diff --git a/site/styles/_example-charts.scss b/site/styles/_example-charts.scss
deleted file mode 100755
index 71d3c08fe..000000000
--- a/site/styles/_example-charts.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-#chartist-guy #chart-canvas {
- @include ct-chart($ct-text-color: darken($color-white, 50%), $ct-grid-color: darken($color-white, 20%));
-
- .ct-series-a {
- .ct-point {
- @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
- }
-
- .ct-line {
- @include ct-chart-line($ct-line-dasharray: 5px);
- @include animation(dashoffset, 1s linear infinite);
- }
- }
-}
-
-#example-line-months-interpolation {
- @include ct-chart($ct-text-color: lighten($color-gray, 30%), $ct-grid-color: lighten($color-gray, 5%), $ct-grid-dasharray: 3px);
-
- .ct-series-a {
- .ct-point {
- @include ct-chart-point($ct-point-shape: square);
- }
-
- .ct-line {
- @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
- @include animation(dashoffset, 1s linear infinite);
- }
- }
-
- .ct-series-b {
- .ct-point {
- @include animation(bouncing-stroke, 0.5s ease infinite);
- }
-
- .ct-line {
- @include ct-chart-line($ct-line-width: 3px);
- }
- }
-
- .ct-series-c {
- .ct-point {
- @include animation(exploding-stroke, 1s ease-out infinite);
- }
-
- .ct-line {
- @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
- }
- }
-}
-
-#example-plugin-threshold {
- .ct-line {
- stroke-dasharray: 5px;
- animation: dashoffset 1s linear infinite;
- }
-
- .ct-line.ct-threshold-above, .ct-point.ct-threshold-above, .ct-bar.ct-threshold-above {
- stroke: #f05b4f;
- }
-
- .ct-line.ct-threshold-below, .ct-point.ct-threshold-below, .ct-bar.ct-threshold-below {
- stroke: #59922b;
- }
-
- .ct-area.ct-threshold-above {
- fill: #f05b4f;
- }
-
- .ct-area.ct-threshold-below {
- fill: #59922b;
- }
-}
-
-#example-plugin-fill-donut {
- .ct-chart-donut .ct-series-a .ct-slice-donut {
- stroke: #d70206;
- }
-
- .ct-chart-donut .ct-series-b .ct-slice-donut {
- stroke: rgba(0,0,0,.4);
- opacity: 0.0;
- }
-
- .ct-chart-donut .ct-fill-donut .ct-slice-donut {
- stroke: rgba(0,0,0,.4);
- opacity: 1;
- }
-
- .ct-fill-donut-label {
- h3 {
- font-weight: bolder;
- }
-
- small {
- font-size: 0.6em;
- }
-
-
- i {
- font-size: 1.5em;
- }
-
- }
-}
-#example-plugin-zoom {
- .ct-zoom-rect {
- fill: rgba(200, 100, 100, 0.3);
- stroke: red;
- }
-}
-#example-plugin-tooltip {
- .chart {
- position: relative;
- }
-
- .chartist-tooltip {
- position: absolute;
- display: block;
- min-width: 5em;
- padding: .5em;
- background: #F4C63D;
- color: #453D3F;
- font-family: Oxygen,Helvetica,Arial,sans-serif;
- font-weight: 700;
- text-align: center;
- pointer-events: none;
- z-index: 1;
- -webkit-transition: opacity .2s linear;
- -moz-transition: opacity .2s linear;
- -o-transition: opacity .2s linear;
- transition: opacity .2s linear; }
- .chartist-tooltip:before {
- content: "";
- position: absolute;
- top: 100%;
- left: 50%;
- width: 0;
- height: 0;
- margin-left: -15px;
- border: 15px solid transparent;
- border-top-color: #F4C63D; }
- .chartist-tooltip.tooltip-show {
- opacity: 1; }
-}
diff --git a/site/styles/_highlight.scss b/site/styles/_highlight.scss
deleted file mode 100644
index 407e08c0f..000000000
--- a/site/styles/_highlight.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
-Chartist style - Licensed under WTFPL by Gion Kunz https://github.com/gionkunz/chartist-js
-*/
-
-.hljs {
- display: block;
- padding: rem-calc(nth($modular-scale, 5));
- background: $color-black;
-}
-
-.hljs-tag,
-.hljs-tag .hljs-title,
-.hljs-keyword,
-.hljs-literal,
-.hljs-strong,
-.hljs-change,
-.hljs-winutils,
-.hljs-flow,
-.lisp .hljs-title,
-.clojure .hljs-built_in,
-.nginx .hljs-title,
-.tex .hljs-special {
- color: $color-grapefruit;
-}
-
-.hljs {
- color: lighten($color-white, 10%);
-}
-
-.hljs .hljs-constant,
-.asciidoc .hljs-code {
- color: $color-grapefruit;
-}
-
-.hljs-code,
-.hljs-class .hljs-title,
-.hljs-header {
- color: lighten($color-white, 10%);
-}
-
-.hljs-link_label,
-.hljs-attribute,
-.hljs-symbol,
-.hljs-symbol .hljs-string,
-.hljs-value,
-.hljs-regexp {
- color: $color-grapefruit;
-}
-
-.hljs-link_url,
-.hljs-tag .hljs-value,
-.hljs-string,
-.hljs-bullet,
-.hljs-subst,
-.hljs-title,
-.hljs-emphasis,
-.haskell .hljs-type,
-.hljs-preprocessor,
-.hljs-pragma,
-.ruby .hljs-class .hljs-parent,
-.hljs-built_in,
-.sql .hljs-aggregate,
-.django .hljs-template_tag,
-.django .hljs-variable,
-.smalltalk .hljs-class,
-.hljs-javadoc,
-.django .hljs-filter .hljs-argument,
-.smalltalk .hljs-localvars,
-.smalltalk .hljs-array,
-.hljs-attr_selector,
-.hljs-pseudo,
-.hljs-addition,
-.hljs-stream,
-.hljs-envvar,
-.apache .hljs-tag,
-.apache .hljs-cbracket,
-.tex .hljs-command,
-.hljs-prompt,
-.hljs-number,
-.hljs-hexcolor {
- color: $color-yellow;
-}
-
-.hljs-comment,
-.java .hljs-annotation,
-.smartquote,
-.hljs-blockquote,
-.hljs-horizontal_rule,
-.python .hljs-decorator,
-.hljs-template_comment,
-.hljs-pi,
-.hljs-doctype,
-.hljs-deletion,
-.hljs-shebang,
-.apache .hljs-sqbracket,
-.tex .hljs-formula {
- color: lighten($color-black, 20%);
-}
-
-.hljs-keyword,
-.hljs-literal,
-.css .hljs-id,
-.hljs-phpdoc,
-.hljs-title,
-.hljs-header,
-.haskell .hljs-type,
-.vbscript .hljs-built_in,
-.sql .hljs-aggregate,
-.rsl .hljs-built_in,
-.smalltalk .hljs-class,
-.diff .hljs-header,
-.hljs-chunk,
-.hljs-winutils,
-.bash .hljs-variable,
-.apache .hljs-tag,
-.tex .hljs-special,
-.hljs-request,
-.hljs-status {
- font-weight: bold;
-}
diff --git a/site/styles/_landing.scss b/site/styles/_landing.scss
deleted file mode 100644
index 4cdbd4c79..000000000
--- a/site/styles/_landing.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-.landing-page-header {
- background-color: $color-yellow;
- text-align: center;
-
- > .introduction-title {
- text-transform: uppercase;
- font-size: rem-calc(nth($modular-scale, 8));
- margin: 0;
- display: inline-block;
- width: 100%;
- font-weight: 700;
- color: white;
- line-height: 0.5;
- margin-top: 2rem;
-
- text-shadow: 1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%), 3px 3px mix(black, $color-yellow, 15%);
-
- @media #{$medium-up} {
- font-size: rem-calc(nth($modular-scale, 10));
- }
-
- > small {
- font-size: rem-calc(nth($modular-scale, 4));
- display: inline-block;
- width: 100%;
- @include text-shadow(1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%));
- }
- }
-
- .library-statement {
- text-transform: uppercase;
- font-size: rem-calc(nth($modular-scale, 5));
- margin: 0;
- display: inline-block;
- width: 100%;
- font-weight: 700;
- color: white;
-
- @include text-shadow(1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%));
-
- padding-bottom: $column-gutter;
-
- .important {
- text-decoration: underline;
- }
- }
-
- > .limiter {
- position: relative;
- max-width: 480px;
- margin: 0 auto;
-
- > figure {
- margin: 0;
- @include ct-responsive-svg-container($ratio: (1/1));
-
- > svg {
- width: 100%;
- height: 100%;
- }
- }
- }
-
- > .call-to-action {
- text-align: center;
- padding-bottom: $column-gutter;
- padding-left: $column-gutter / 2;
- padding-right: $column-gutter / 2;
-
- > .button {
- color: white;
- color: rgba(255, 255, 255, 0.9);
- font-weight: 300 !important;
-
- &:before {
- padding-right: 0.5em;
- }
-
- &.download {
- background-color: $color-red;
- &:hover,
- &:focus { background-color: darken($color-red, 10%); color: rgba(255, 255, 255, 1);}
- }
-
- &.contribute {
- background-color: $color-grapefruit;
- &:hover,
- &:focus { background-color: darken($color-grapefruit, 10%); color: rgba(255, 255, 255, 1);}
- }
-
- @media #{$small-only} {
- width: 100%;
- font-size: 1em;
- font-weight: 700 !important;
- }
-
- @media #{$medium-up} {
- &.download {
- margin-right: $column-gutter / 2;
- }
- }
- }
- }
-}
-
-.brwsrsup {
- text-align: center;
-
- .brwsrsup__support--supported {
- color: $color-green;
- @include icon($fa-var-check-circle, $icon-location: after, $icon-size: 1.5rem);
- }
-
- .brwsrsup__visually-hidden {
- position: absolute;
- overflow: hidden;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- padding: 0;
- border: 0;
- }
-}
-
-@media screen and (max-width: 1100px) {
- .brwsrsup {
- display: block;
- text-align: left;
-
- thead {
- display: none;
- }
-
- .brwsrsup__feature {
- display: block;
- padding: 10px 0;
- margin: 20px 0 10px 0;
- }
-
- tbody {
- display: block;
- }
-
- tr {
- display: block;
- &:after {
- content: "";
- display: table;
- clear: both;
- }
- }
-
- td {
- display: block;
- }
-
- .brwsrsup__support {
- diplay: block;
- padding: 5px;
- width: auto;
- float: left;
- margin: 0 10px 10px 0;
-
- &:before {
- content: attr(data-browser)" ";
- }
- }
-
- .brwsrsup__support--supported {
- background: $color-green;
- color: white;
-
- &:before {
- content: attr(data-browser)" ";
- }
-
- @include icon($fa-var-check-circle, $icon-location: after);
- }
-
- .brwsrsup__support--not-supported {
- background: $color-red;
- color: lighten($color-white, 10%);
-
- &:before {
- content: attr(data-browser)" ";
- }
- @include icon($fa-var-exclamation-circle, $icon-location: after);
- }
- }
-}
diff --git a/site/styles/_live-example.scss b/site/styles/_live-example.scss
deleted file mode 100644
index 7c532a7e7..000000000
--- a/site/styles/_live-example.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.live-example {
- @include grid-row(nest);
-
- margin-bottom: rem-calc(nth($modular-scale, 4));
-
- &.edit-mode {
- .chart {
- @media #{$large-up} {
- @include grid-column(12);
- }
- }
-
- .live-code {
- @media #{$large-up} {
- @include grid-column(12);
- }
-
- .introduction {
- display: none;
- }
-
- .editor-area {
- display: block;
- }
- }
- }
-
- .live-example-header {
- @include grid-column(12);
- }
-
- .chart {
- @include grid-column(12);
-
- @media #{$large-up} {
- @include grid-column(8);
- }
- }
-
- .live-code {
- @include grid-column(12);
-
- .editor-area {
- display: none;
- }
-
- @media #{$large-up} {
- @include grid-column(4);
- }
- }
-
- .ct-negative-labels {
- .ct-label {
- fill: rgba(255, 255, 255, 0.8);
- }
- }
-}
diff --git a/site/styles/_modules.scss b/site/styles/_modules.scss
deleted file mode 100644
index 45f60facd..000000000
--- a/site/styles/_modules.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "modules/font";
-@import "modules/icon";
-@import "modules/animation";
-@import "modules/common";
-@import "modules/scale";
diff --git a/site/styles/main.scss b/site/styles/main.scss
deleted file mode 100644
index f8ef8b0b4..000000000
--- a/site/styles/main.scss
+++ /dev/null
@@ -1,309 +0,0 @@
-@import "settings/chartist-docs";
-@import "settings/foundation";
-@import "settings/font-awesome-variables";
-
-@import "modules";
-
-@import "../../src/styles/settings/chartist-settings";
-@import "../../src/styles/chartist";
-
-@import "compass-mixins/lib/compass/css3";
-@import "foundation/scss/normalize";
-@import "foundation/scss/foundation";
-@import "base";
-@import "landing";
-@import "highlight";
-@import "code-mirror-theme";
-@import "api-doc";
-@import "live-example";
-@import "example-charts";
-@import "affiliate-project";
-
-.button {
- text-transform: uppercase;
- box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
-.invisible {
- display: block !important;
- max-height: 0;
- overflow: hidden;
- visibility: hidden;
-}
-
-.text-clipping {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.hint {
- position: relative;
- margin-top: rem-calc(nth($modular-scale, 5));
- margin-bottom: rem-calc(nth($modular-scale, 5));
- padding: rem-calc(nth($modular-scale, 5));
- background: $color-gray;
- color: lighten($color-white, 10%);
-
- > .title {
- font-size: rem-calc(nth($modular-scale, 4));
- text-transform: uppercase;
- font-weight: 600;
- margin-bottom: 0.5rem;
- color: lighten($color-black, 20%);
- }
-
- a {
- color: $color-yellow;
- &:hover {
- color: lighten($color-yellow, 10%);
- }
- }
-
- &[class*="hint-"] {
- padding-left: 5.2rem;
-
- &.hint-cross-browser {
- @include icon($fa-var-arrows-alt, 3rem);
- }
-
- &:before {
- position: absolute;
- left: rem-calc(nth($modular-scale, 5));
- top: rem-calc(nth($modular-scale, 5));
- font-size: 3rem;
- color: lighten($color-black, 5%);
- }
- }
-}
-
-code {
- font-family: "Source Code Pro", "Courier New", monospace !important;
- word-wrap: break-word;
-}
-
-.sticky.contain-to-grid {
- box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
-
- &.fixed, .page-content & {
- .top-bar .name h1 a:before {
- content: "";
- display: inline-block;
- width: 34px;
- height: 34px;
- margin-top: -4px;
- margin-right: 10px;
- vertical-align: middle;
- border-radius: 50%;
- border: 2px solid #F4C63D;
- background-size: 32px 32px;
- background: #F4C63D url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJoZWFkIj48cGF0aCBmaWxsPSIjNzU1NDNCIiBkPSJNMTMuOCAyMC42czEuNiA1LTMuOSA1bDQuOSAxLjUgNC00LjItNS0yLjN6Ii8+PHBhdGggZmlsbD0iI0IyNDk0OSIgZD0iTTE3LjEgMjVzLTQuMS0xLjUtNS45IDEuMWwzLjcuOSAyLjItMnoiLz48cGF0aCBmaWxsPSIjRDM5Qzc2IiBkPSJNOS45IDI1LjRjMi4xIDEuMSA1IC42IDYgMCAxLjUtLjggMS41LTMgMS4xLTMuMi0uMi0uMS0yLjIgMS4zLTUuOS4xbC40LTMuMy01LjktLjJMOS43IDguNHM3LTIuOSAxNCAwVjE5Yy40LS4xLjgtLjIgMS4xIDAgLjkuMyAxLjEgMS40LjYgMi41LS40LjctMSAxLjMtMS43IDEuNHY2LjJzLTcuMiA0LjgtMTUuMSAyLjFjMCAwLTIuNS0uOC0yLjMtMy40IDAtLjItLjItMS45IDMuNi0yLjR6Ii8+PGcgZmlsbD0iIzYzNDEyOCI+PHBhdGggZD0iTTE1LjEgMTQuNGMwIC41LjkgMSAxLjkgMSAxLjEgMCAxLjktLjQgMS45LTEgMC0uNS0uOS0xLTEuOS0xLTEgMC0xLjkuNS0xLjkgMXpNOS43IDE0LjRjMCAuNS44IDEgMS45IDEgMSAwIDEuOS0uNCAxLjktMXMtLjgtMS0xLjktMWMtMS4xLjEtMS45LjUtMS45IDF6Ii8+PC9nPjxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMy44IDEwLjVWNmMuMS0zLjYgMS40LTUuMS40LTUuMy0xLS4yLTMuMi0uNi03LjgtLjYtNC4xIDAtNy4yLjUtOC4yLjZDNy4zIDEgOSAzLjkgOS4zIDZjLjEgMSAuMSAyLjUuMSAzLjgtMy4zLjUtNS4zIDEuNy01LjcgMi44aDI2LjZzLS4zLTEuMS02LjUtMi4xeiIvPjxwYXRoIGZpbGw9IiMzNTM0MzMiIGQ9Ik0xMi44IDIyLjRjMy4xIDIuOCAxMC40IDIuMyAxMC45LTIuMS4xLTEuMy0uNS0uMy0xLjEuMS0uOS42LTIuNS42LTMuNCAwLTEuNS0xLTQuMS00LjEtNi40LTEuOC0yLjQtMi4zLTUgLjgtNi41IDEuOC0uOS42LTIuNi42LTMuNSAwLS42LS40LTEuMi0xLjMtMS4xLS4xLjUgNC40IDcuOSA0LjkgMTEuMSAyLjF6Ii8+PC9nPjwvc3ZnPg==") no-repeat center;
- }
- }
-}
-
-.ct-chart {
- margin-bottom: 1rem;
-}
-
-.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
- font-size: 1em;
-
- @media #{$small-only} {
- fill: rgba(255, 255, 255, 0.8);
- }
-}
-
-.main {
- @include grid-row();
-
- @media #{$medium-up} {
- margin-top: rem-calc(nth($modular-scale, 8));
- }
-
- > header {
- @include grid-column(12);
- margin-top: rem-calc(nth($modular-scale, 5));
-
- .page-content & {
- margin-bottom: rem-calc(nth($modular-scale, 8));
- }
- }
-
- > .side-navigation {
- display: none;
-
- @media #{$medium-up} {
- display: block;
- @include grid-column(4);
-
- > nav {
- max-width: 250px;
-
- > .side-nav {
- background-color: mix(black, $color-white, 5%);
- box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
-
- > .heading {
- font-size: rem-calc(nth($modular-scale, 4));
- text-transform: uppercase;
- font-weight: 600;
- margin-top: rem-calc(nth($modular-scale, 7));
- margin-bottom: rem-calc(nth($modular-scale, 4));
- color: $color-black;
-
- &:first-child {
- margin-top: 0;
- }
- }
-
- > li:not(.heading) > a {
-
- &:before {
- content: "\2013\00A0";
- }
- }
-
- > li a:not(.button) {
- padding: 0;
-
- &:hover {
- background: none;
- }
- }
- }
- }
- }
- }
-
- > .content {
- @include grid-column(12);
-
- @media #{$medium-up} {
- @include grid-column(8);
- }
-
- > .documentation-section {
- @include grid-row(nest);
-
- margin-top: rem-calc(nth($modular-scale, 4));
- margin-bottom: rem-calc(nth($modular-scale, 6));
-
- &:first-child {
- margin-top: 0;
- }
-
- @media #{$medium-up} {
- margin-top: rem-calc(nth($modular-scale, 6));
- margin-bottom: rem-calc(nth($modular-scale, 8));
- }
-
- > header {
- @include grid-column(12);
- }
-
- > .content {
- @include grid-column(12);
-
- @media #{$medium-up} {
- @include grid-column(8);
- }
-
- @media #{$large-up} {
- @include grid-column(9);
- }
-
- .sub-section {
- margin-bottom: 3rem;
- }
-
- > .ct-chart {
- &.dark {
- background-color: $color-gray;
- }
- }
- }
-
- > .side-notes {
- @include grid-column(12);
-
- @media #{$medium-up} {
- @include grid-column(4);
- }
-
- @media #{$large-up} {
- @include grid-column(3);
- }
- }
-
- &.full {
- > .content {
- @media #{$medium-up} {
- @include grid-column(12);
- }
- }
-
- > .side-notes {
- @media #{$medium-up} {
- @include grid-column(12);
- }
- }
- }
- }
-
- > ul.example-gallery {
- @include block-grid(1);
-
- @media #{$medium-up} {
- @include block-grid(2);
- }
- }
- }
-
- .full & {
- > .side-navigation {
- @include grid-column(12);
- }
-
- > .content {
- @include grid-column(12);
- }
- }
-}
-
-@include keyframes(dashoffset) {
- 0% {
- stroke-dashoffset: 0px;
- }
-
- 100% {
- stroke-dashoffset: -20px;
- }
-}
-
-@include keyframes(bouncing-stroke) {
- 0% {
- stroke-width: 5px;
- }
-
- 50% {
- stroke-width: 10px;
- }
-
- 100% {
- stroke-width: 5px;
- }
-}
-
-@include keyframes(exploding-stroke) {
- 0% {
- stroke-width: 2px;
- opacity: 1;
- }
-
- 100% {
- stroke-width: 20px;
- opacity: 0;
- }
-}
-
diff --git a/site/styles/modules/_animation.scss b/site/styles/modules/_animation.scss
deleted file mode 100644
index 1af626a1a..000000000
--- a/site/styles/modules/_animation.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@mixin keyframes($name) {
- @-webkit-keyframes #{$name} {
- @content;
- }
- @-moz-keyframes #{$name} {
- @content;
- }
- @-ms-keyframes #{$name} {
- @content;
- }
- @keyframes #{$name} {
- @content;
- }
-}
-
-@mixin animation($name, $params) {
- -webkit-animation: #{$name} $params; /* Safari 4+ */
- -moz-animation: #{$name} $params; /* Fx 5+ */
- -o-animation: #{$name} $params; /* Opera 12+ */
- animation: #{$name} $params; /* IE 10+ */
-}
\ No newline at end of file
diff --git a/site/styles/modules/_common.scss b/site/styles/modules/_common.scss
deleted file mode 100644
index e29cd020a..000000000
--- a/site/styles/modules/_common.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@function reverse($list, $recursive: false) {
- $result: ();
-
- @for $i from length($list)*-1 through -1 {
- @if type-of(nth($list, abs($i))) == list and $recursive {
- $result: append($result, reverse(nth($list, abs($i)), $recursive));
- }
-
- @else {
- $result: append($result, nth($list, abs($i)));
- }
- }
-
- @return $result;
-}
\ No newline at end of file
diff --git a/site/styles/modules/_font.scss b/site/styles/modules/_font.scss
deleted file mode 100644
index 05507f36b..000000000
--- a/site/styles/modules/_font.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$font-path: "/fonts" !default;
-
-@mixin embed-font($font-name, $font-file, $font-path: $font-path) {
- @font-face {
- font-family: $font-name;
- src: url('#{$font-path}/#{$font-file}.eot');
- src: url('#{$font-path}/#{$font-file}.eot?#iefix') format('embedded-opentype'),
- url('#{$font-path}/#{$font-file}.woff') format('woff'),
- url('#{$font-path}/#{$font-file}.ttf') format('truetype'),
- url('#{$font-path}/#{$font-file}.svg') format('svg');
- font-weight: normal;
- font-style: normal;
- }
-}
\ No newline at end of file
diff --git a/site/styles/modules/_icon.scss b/site/styles/modules/_icon.scss
deleted file mode 100644
index 3d53aa628..000000000
--- a/site/styles/modules/_icon.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-$icon-font-name: "FontAwesome" !default;
-$icon-location: before !default;
-$icon-vertical-align: baseline !default;
-
-$icon-attr-name: data-icon !default;
-$icon-include-classes: true !default;
-
-@mixin icon($icon: "", $icon-size: 1em, $icon-location: $icon-location, $icon-font-name: $icon-font-name, $icon-vertical-align: $icon-vertical-align) {
- &:#{$icon-location} {
- content: $icon;
- display: inline-block;
- vertical-align: $icon-vertical-align;
- font-family: $icon-font-name;
- font-style: normal;
- font-weight: normal;
- font-size: $icon-size;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- // In usage with google font loader we will hide and unhide based on status class on html element
- .wf-loading & {
- visibility: hidden;
- }
- }
-}
-
-@if ($icon-include-classes) {
- [#{$icon-attr-name}] {
- @include icon(attr(#{$icon-attr-name}));
- }
-}
\ No newline at end of file
diff --git a/site/styles/modules/_scale.scss b/site/styles/modules/_scale.scss
deleted file mode 100644
index 1a7a3b7d5..000000000
--- a/site/styles/modules/_scale.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-$scale-minor-second: 15/16;
-$scale-major-second: 8/9;
-$scale-minor-third: 5/6;
-$scale-major-third: 4/5;
-$scale-perfect-fourth: 3/4;
-$scale-perfect-fifth: 2/3;
-$scale-minor-sixth: 5/8;
-$scale-golden-section: 1/1.618;
-$scale-major-sixth: 3/5;
-$scale-minor-seventh: 9/16;
-$scale-major-seventh: 8/15;
-$scale-octave: 1/2;
-$scale-major-tenth: 2/5;
-$scale-major-eleventh: 3/8;
-$scale-major-twelfth: 1/3;
-$scale-double-octave: 1/4;
-
-@function generateScale($base: 16, $scale-type: $scale-golden-section, $limit-lower: 6, $limit-upper: 100) {
- $scale: ();
- $value: $base;
-
- @while $value > $limit-lower {
- $value: $value * $scale-type;
- @if $value > $limit-lower {
- $scale: append($scale, $value);
- }
- }
-
- $scale: reverse($scale);
- $scale: append($scale, $base);
-
- $value: $base;
- @while $value < $limit-upper {
- $value: $value / $scale-type;
- @if $value < $limit-upper {
- $scale: append($scale, $value);
- }
- }
-
- @return $scale;
-}
\ No newline at end of file
diff --git a/site/styles/settings/_chartist-docs.scss b/site/styles/settings/_chartist-docs.scss
deleted file mode 100644
index c5a56b4f8..000000000
--- a/site/styles/settings/_chartist-docs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$color-white: #EADBC4;
-$color-grapefruit: #F05B4F;
-$color-red: #D70206;
-$color-green: #67bf26;
-$color-yellow: #F4C63D;
-$color-gray: #453D3F;
-$color-black: $color-gray;
-
-$font-body: "Oxygen", Helvetica, Arial, sans-serif;
\ No newline at end of file
diff --git a/site/styles/settings/_font-awesome-variables.scss b/site/styles/settings/_font-awesome-variables.scss
deleted file mode 100644
index 719d0c2c4..000000000
--- a/site/styles/settings/_font-awesome-variables.scss
+++ /dev/null
@@ -1,369 +0,0 @@
-$fa-var-glass: "\f000";
-$fa-var-music: "\f001";
-$fa-var-search: "\f002";
-$fa-var-envelope-o: "\f003";
-$fa-var-heart: "\f004";
-$fa-var-star: "\f005";
-$fa-var-star-o: "\f006";
-$fa-var-user: "\f007";
-$fa-var-film: "\f008";
-$fa-var-th-large: "\f009";
-$fa-var-th: "\f00a";
-$fa-var-th-list: "\f00b";
-$fa-var-check: "\f00c";
-$fa-var-times: "\f00d";
-$fa-var-search-plus: "\f00e";
-$fa-var-search-minus: "\f010";
-$fa-var-power-off: "\f011";
-$fa-var-signal: "\f012";
-$fa-var-cog: "\f013";
-$fa-var-trash-o: "\f014";
-$fa-var-home: "\f015";
-$fa-var-file-o: "\f016";
-$fa-var-clock-o: "\f017";
-$fa-var-road: "\f018";
-$fa-var-download: "\f019";
-$fa-var-arrow-circle-o-down: "\f01a";
-$fa-var-arrow-circle-o-up: "\f01b";
-$fa-var-inbox: "\f01c";
-$fa-var-play-circle-o: "\f01d";
-$fa-var-repeat: "\f01e";
-$fa-var-refresh: "\f021";
-$fa-var-list-alt: "\f022";
-$fa-var-lock: "\f023";
-$fa-var-flag: "\f024";
-$fa-var-headphones: "\f025";
-$fa-var-volume-off: "\f026";
-$fa-var-volume-down: "\f027";
-$fa-var-volume-up: "\f028";
-$fa-var-qrcode: "\f029";
-$fa-var-barcode: "\f02a";
-$fa-var-tag: "\f02b";
-$fa-var-tags: "\f02c";
-$fa-var-book: "\f02d";
-$fa-var-bookmark: "\f02e";
-$fa-var-print: "\f02f";
-$fa-var-camera: "\f030";
-$fa-var-font: "\f031";
-$fa-var-bold: "\f032";
-$fa-var-italic: "\f033";
-$fa-var-text-height: "\f034";
-$fa-var-text-width: "\f035";
-$fa-var-align-left: "\f036";
-$fa-var-align-center: "\f037";
-$fa-var-align-right: "\f038";
-$fa-var-align-justify: "\f039";
-$fa-var-list: "\f03a";
-$fa-var-outdent: "\f03b";
-$fa-var-indent: "\f03c";
-$fa-var-video-camera: "\f03d";
-$fa-var-picture-o: "\f03e";
-$fa-var-pencil: "\f040";
-$fa-var-map-marker: "\f041";
-$fa-var-adjust: "\f042";
-$fa-var-tint: "\f043";
-$fa-var-pencil-square-o: "\f044";
-$fa-var-share-square-o: "\f045";
-$fa-var-check-square-o: "\f046";
-$fa-var-arrows: "\f047";
-$fa-var-step-backward: "\f048";
-$fa-var-fast-backward: "\f049";
-$fa-var-backward: "\f04a";
-$fa-var-play: "\f04b";
-$fa-var-pause: "\f04c";
-$fa-var-stop: "\f04d";
-$fa-var-forward: "\f04e";
-$fa-var-fast-forward: "\f050";
-$fa-var-step-forward: "\f051";
-$fa-var-eject: "\f052";
-$fa-var-chevron-left: "\f053";
-$fa-var-chevron-right: "\f054";
-$fa-var-plus-circle: "\f055";
-$fa-var-minus-circle: "\f056";
-$fa-var-times-circle: "\f057";
-$fa-var-check-circle: "\f058";
-$fa-var-question-circle: "\f059";
-$fa-var-info-circle: "\f05a";
-$fa-var-crosshairs: "\f05b";
-$fa-var-times-circle-o: "\f05c";
-$fa-var-check-circle-o: "\f05d";
-$fa-var-ban: "\f05e";
-$fa-var-arrow-left: "\f060";
-$fa-var-arrow-right: "\f061";
-$fa-var-arrow-up: "\f062";
-$fa-var-arrow-down: "\f063";
-$fa-var-share: "\f064";
-$fa-var-expand: "\f065";
-$fa-var-compress: "\f066";
-$fa-var-plus: "\f067";
-$fa-var-minus: "\f068";
-$fa-var-asterisk: "\f069";
-$fa-var-exclamation-circle: "\f06a";
-$fa-var-gift: "\f06b";
-$fa-var-leaf: "\f06c";
-$fa-var-fire: "\f06d";
-$fa-var-eye: "\f06e";
-$fa-var-eye-slash: "\f070";
-$fa-var-exclamation-triangle: "\f071";
-$fa-var-plane: "\f072";
-$fa-var-calendar: "\f073";
-$fa-var-random: "\f074";
-$fa-var-comment: "\f075";
-$fa-var-magnet: "\f076";
-$fa-var-chevron-up: "\f077";
-$fa-var-chevron-down: "\f078";
-$fa-var-retweet: "\f079";
-$fa-var-shopping-cart: "\f07a";
-$fa-var-folder: "\f07b";
-$fa-var-folder-open: "\f07c";
-$fa-var-arrows-v: "\f07d";
-$fa-var-arrows-h: "\f07e";
-$fa-var-bar-chart-o: "\f080";
-$fa-var-twitter-square: "\f081";
-$fa-var-facebook-square: "\f082";
-$fa-var-camera-retro: "\f083";
-$fa-var-key: "\f084";
-$fa-var-cogs: "\f085";
-$fa-var-comments: "\f086";
-$fa-var-thumbs-o-up: "\f087";
-$fa-var-thumbs-o-down: "\f088";
-$fa-var-star-half: "\f089";
-$fa-var-heart-o: "\f08a";
-$fa-var-sign-out: "\f08b";
-$fa-var-linkedin-square: "\f08c";
-$fa-var-thumb-tack: "\f08d";
-$fa-var-external-link: "\f08e";
-$fa-var-sign-in: "\f090";
-$fa-var-trophy: "\f091";
-$fa-var-github-square: "\f092";
-$fa-var-upload: "\f093";
-$fa-var-lemon-o: "\f094";
-$fa-var-phone: "\f095";
-$fa-var-square-o: "\f096";
-$fa-var-bookmark-o: "\f097";
-$fa-var-phone-square: "\f098";
-$fa-var-twitter: "\f099";
-$fa-var-facebook: "\f09a";
-$fa-var-github: "\f09b";
-$fa-var-unlock: "\f09c";
-$fa-var-credit-card: "\f09d";
-$fa-var-rss: "\f09e";
-$fa-var-hdd-o: "\f0a0";
-$fa-var-bullhorn: "\f0a1";
-$fa-var-bell: "\f0f3";
-$fa-var-certificate: "\f0a3";
-$fa-var-hand-o-right: "\f0a4";
-$fa-var-hand-o-left: "\f0a5";
-$fa-var-hand-o-up: "\f0a6";
-$fa-var-hand-o-down: "\f0a7";
-$fa-var-arrow-circle-left: "\f0a8";
-$fa-var-arrow-circle-right: "\f0a9";
-$fa-var-arrow-circle-up: "\f0aa";
-$fa-var-arrow-circle-down: "\f0ab";
-$fa-var-globe: "\f0ac";
-$fa-var-wrench: "\f0ad";
-$fa-var-tasks: "\f0ae";
-$fa-var-filter: "\f0b0";
-$fa-var-briefcase: "\f0b1";
-$fa-var-arrows-alt: "\f0b2";
-$fa-var-users: "\f0c0";
-$fa-var-link: "\f0c1";
-$fa-var-cloud: "\f0c2";
-$fa-var-flask: "\f0c3";
-$fa-var-scissors: "\f0c4";
-$fa-var-files-o: "\f0c5";
-$fa-var-paperclip: "\f0c6";
-$fa-var-floppy-o: "\f0c7";
-$fa-var-square: "\f0c8";
-$fa-var-bars: "\f0c9";
-$fa-var-list-ul: "\f0ca";
-$fa-var-list-ol: "\f0cb";
-$fa-var-strikethrough: "\f0cc";
-$fa-var-underline: "\f0cd";
-$fa-var-table: "\f0ce";
-$fa-var-magic: "\f0d0";
-$fa-var-truck: "\f0d1";
-$fa-var-pinterest: "\f0d2";
-$fa-var-pinterest-square: "\f0d3";
-$fa-var-google-plus-square: "\f0d4";
-$fa-var-google-plus: "\f0d5";
-$fa-var-money: "\f0d6";
-$fa-var-caret-down: "\f0d7";
-$fa-var-caret-up: "\f0d8";
-$fa-var-caret-left: "\f0d9";
-$fa-var-caret-right: "\f0da";
-$fa-var-columns: "\f0db";
-$fa-var-sort: "\f0dc";
-$fa-var-sort-asc: "\f0dd";
-$fa-var-sort-desc: "\f0de";
-$fa-var-envelope: "\f0e0";
-$fa-var-linkedin: "\f0e1";
-$fa-var-undo: "\f0e2";
-$fa-var-gavel: "\f0e3";
-$fa-var-tachometer: "\f0e4";
-$fa-var-comment-o: "\f0e5";
-$fa-var-comments-o: "\f0e6";
-$fa-var-bolt: "\f0e7";
-$fa-var-sitemap: "\f0e8";
-$fa-var-umbrella: "\f0e9";
-$fa-var-clipboard: "\f0ea";
-$fa-var-lightbulb-o: "\f0eb";
-$fa-var-exchange: "\f0ec";
-$fa-var-cloud-download: "\f0ed";
-$fa-var-cloud-upload: "\f0ee";
-$fa-var-user-md: "\f0f0";
-$fa-var-stethoscope: "\f0f1";
-$fa-var-suitcase: "\f0f2";
-$fa-var-bell-o: "\f0a2";
-$fa-var-coffee: "\f0f4";
-$fa-var-cutlery: "\f0f5";
-$fa-var-file-text-o: "\f0f6";
-$fa-var-building-o: "\f0f7";
-$fa-var-hospital-o: "\f0f8";
-$fa-var-ambulance: "\f0f9";
-$fa-var-medkit: "\f0fa";
-$fa-var-fighter-jet: "\f0fb";
-$fa-var-beer: "\f0fc";
-$fa-var-h-square: "\f0fd";
-$fa-var-plus-square: "\f0fe";
-$fa-var-angle-double-left: "\f100";
-$fa-var-angle-double-right: "\f101";
-$fa-var-angle-double-up: "\f102";
-$fa-var-angle-double-down: "\f103";
-$fa-var-angle-left: "\f104";
-$fa-var-angle-right: "\f105";
-$fa-var-angle-up: "\f106";
-$fa-var-angle-down: "\f107";
-$fa-var-desktop: "\f108";
-$fa-var-laptop: "\f109";
-$fa-var-tablet: "\f10a";
-$fa-var-mobile: "\f10b";
-$fa-var-circle-o: "\f10c";
-$fa-var-quote-left: "\f10d";
-$fa-var-quote-right: "\f10e";
-$fa-var-spinner: "\f110";
-$fa-var-circle: "\f111";
-$fa-var-reply: "\f112";
-$fa-var-github-alt: "\f113";
-$fa-var-folder-o: "\f114";
-$fa-var-folder-open-o: "\f115";
-$fa-var-smile-o: "\f118";
-$fa-var-frown-o: "\f119";
-$fa-var-meh-o: "\f11a";
-$fa-var-gamepad: "\f11b";
-$fa-var-keyboard-o: "\f11c";
-$fa-var-flag-o: "\f11d";
-$fa-var-flag-checkered: "\f11e";
-$fa-var-terminal: "\f120";
-$fa-var-code: "\f121";
-$fa-var-reply-all: "\f122";
-$fa-var-mail-reply-all: "\f122";
-$fa-var-star-half-o: "\f123";
-$fa-var-location-arrow: "\f124";
-$fa-var-crop: "\f125";
-$fa-var-code-fork: "\f126";
-$fa-var-chain-broken: "\f127";
-$fa-var-question: "\f128";
-$fa-var-info: "\f129";
-$fa-var-exclamation: "\f12a";
-$fa-var-superscript: "\f12b";
-$fa-var-subscript: "\f12c";
-$fa-var-eraser: "\f12d";
-$fa-var-puzzle-piece: "\f12e";
-$fa-var-microphone: "\f130";
-$fa-var-microphone-slash: "\f131";
-$fa-var-shield: "\f132";
-$fa-var-calendar-o: "\f133";
-$fa-var-fire-extinguisher: "\f134";
-$fa-var-rocket: "\f135";
-$fa-var-maxcdn: "\f136";
-$fa-var-chevron-circle-left: "\f137";
-$fa-var-chevron-circle-right: "\f138";
-$fa-var-chevron-circle-up: "\f139";
-$fa-var-chevron-circle-down: "\f13a";
-$fa-var-html5: "\f13b";
-$fa-var-css3: "\f13c";
-$fa-var-anchor: "\f13d";
-$fa-var-unlock-alt: "\f13e";
-$fa-var-bullseye: "\f140";
-$fa-var-ellipsis-h: "\f141";
-$fa-var-ellipsis-v: "\f142";
-$fa-var-rss-square: "\f143";
-$fa-var-play-circle: "\f144";
-$fa-var-ticket: "\f145";
-$fa-var-minus-square: "\f146";
-$fa-var-minus-square-o: "\f147";
-$fa-var-level-up: "\f148";
-$fa-var-level-down: "\f149";
-$fa-var-check-square: "\f14a";
-$fa-var-pencil-square: "\f14b";
-$fa-var-external-link-square: "\f14c";
-$fa-var-share-square: "\f14d";
-$fa-var-compass: "\f14e";
-$fa-var-caret-square-o-down: "\f150";
-$fa-var-caret-square-o-up: "\f151";
-$fa-var-caret-square-o-right: "\f152";
-$fa-var-eur: "\f153";
-$fa-var-gbp: "\f154";
-$fa-var-usd: "\f155";
-$fa-var-inr: "\f156";
-$fa-var-jpy: "\f157";
-$fa-var-rub: "\f158";
-$fa-var-krw: "\f159";
-$fa-var-btc: "\f15a";
-$fa-var-file: "\f15b";
-$fa-var-file-text: "\f15c";
-$fa-var-sort-alpha-asc: "\f15d";
-$fa-var-sort-alpha-desc: "\f15e";
-$fa-var-sort-amount-asc: "\f160";
-$fa-var-sort-amount-desc: "\f161";
-$fa-var-sort-numeric-asc: "\f162";
-$fa-var-sort-numeric-desc: "\f163";
-$fa-var-thumbs-up: "\f164";
-$fa-var-thumbs-down: "\f165";
-$fa-var-youtube-square: "\f166";
-$fa-var-youtube: "\f167";
-$fa-var-xing: "\f168";
-$fa-var-xing-square: "\f169";
-$fa-var-youtube-play: "\f16a";
-$fa-var-dropbox: "\f16b";
-$fa-var-stack-overflow: "\f16c";
-$fa-var-instagram: "\f16d";
-$fa-var-flickr: "\f16e";
-$fa-var-adn: "\f170";
-$fa-var-bitbucket: "\f171";
-$fa-var-bitbucket-square: "\f172";
-$fa-var-tumblr: "\f173";
-$fa-var-tumblr-square: "\f174";
-$fa-var-long-arrow-down: "\f175";
-$fa-var-long-arrow-up: "\f176";
-$fa-var-long-arrow-left: "\f177";
-$fa-var-long-arrow-right: "\f178";
-$fa-var-apple: "\f179";
-$fa-var-windows: "\f17a";
-$fa-var-android: "\f17b";
-$fa-var-linux: "\f17c";
-$fa-var-dribbble: "\f17d";
-$fa-var-skype: "\f17e";
-$fa-var-foursquare: "\f180";
-$fa-var-trello: "\f181";
-$fa-var-female: "\f182";
-$fa-var-male: "\f183";
-$fa-var-gittip: "\f184";
-$fa-var-sun-o: "\f185";
-$fa-var-moon-o: "\f186";
-$fa-var-archive: "\f187";
-$fa-var-bug: "\f188";
-$fa-var-vk: "\f189";
-$fa-var-weibo: "\f18a";
-$fa-var-renren: "\f18b";
-$fa-var-pagelines: "\f18c";
-$fa-var-stack-exchange: "\f18d";
-$fa-var-arrow-circle-o-right: "\f18e";
-$fa-var-arrow-circle-o-left: "\f190";
-$fa-var-caret-square-o-left: "\f191";
-$fa-var-dot-circle-o: "\f192";
-$fa-var-wheelchair: "\f193";
-$fa-var-vimeo-square: "\f194";
-$fa-var-try: "\f195";
-$fa-var-plus-square-o: "\f196";
\ No newline at end of file
diff --git a/site/styles/settings/_foundation.scss b/site/styles/settings/_foundation.scss
deleted file mode 100644
index 67499c4b0..000000000
--- a/site/styles/settings/_foundation.scss
+++ /dev/null
@@ -1,1436 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-//
-
-// Table of Contents
-// Foundation Settings
-//
-// a. Base
-// b. Grid
-// c. Global
-// d. Media Query Ranges
-// e. Typography
-// 01. Accordion
-// 02. Alert Boxes
-// 03. Block Grid
-// 04. Breadcrumbs
-// 05. Buttons
-// 06. Button Groups
-// 07. Clearing
-// 08. Dropdown
-// 09. Dropdown Buttons
-// 10. Flex Video
-// 11. Forms
-// 12. Icon Bar
-// 13. Inline Lists
-// 14. Joyride
-// 15. Keystrokes
-// 16. Labels
-// 17. Magellan
-// 18. Off-canvas
-// 19. Orbit
-// 20. Pagination
-// 21. Panels
-// 22. Pricing Tables
-// 23. Progress Bar
-// 24. Range Slider
-// 25. Reveal
-// 26. Side Nav
-// 27. Split Buttons
-// 28. Sub Nav
-// 29. Switch
-// 30. Tables
-// 31. Tabs
-// 32. Thumbnails
-// 33. Tooltips
-// 34. Top Bar
-// 36. Visibility Classes
-
-// a. Base
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// This is the default html and body font-size for the base rem value.
-// $rem-base: 16px;
-
-// Allows the use of rem-calc() or lower-bound() in your settings
-@import "foundation/scss/foundation/functions";
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with browser-based text zoom or user-set defaults.
-
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be different and not have it affect the grid breakpoints,
-// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
-// $base-font-size: 100%;
-
-// The $base-font-size is 100% while $base-line-height is 150%
-// $base-line-height: 150%;
-
-// We use this to control whether or not CSS classes come through in the gem files.
-$include-html-classes: false;
-// $include-print-styles: true;
-$include-html-global-classes: true;
-
-// b. Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-grid-classes: $include-html-classes;
-// $include-xl-html-grid-classes: false;
-
-$row-width: rem-calc(1200);
-$total-columns: 12;
-$column-gutter: rem-calc(50);
-
-// c. Global
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to define default font stacks
-//$font-family-sans-serif: $font-body;
-// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-//$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
-
-// We use these to define default font weights
-// $font-weight-normal: normal !default;
-// $font-weight-bold: bold !default;
-
-// $white : #FFFFFF;
-// $ghost : #FAFAFA;
-// $snow : #F9F9F9;
-// $vapor : #F6F6F6;
-// $white-smoke : #F5F5F5;
-// $silver : #EFEFEF;
-// $smoke : #EEEEEE;
-// $gainsboro : #DDDDDD;
-// $iron : #CCCCCC;
-// $base : #AAAAAA;
-// $aluminum : #999999;
-// $jumbo : #888888;
-// $monsoon : #777777;
-// $steel : #666666;
-// $charcoal : #555555;
-// $tuatara : #444444;
-// $oil : #333333;
-// $jet : #222222;
-// $black : #000000;
-
-// We use these as default colors throughout
-$primary-color: $color-yellow;
-$secondary-color: $color-gray;
-$alert-color: $color-red;
-$success-color: $color-yellow;
-$warning-color: $color-grapefruit;
-$info-color: $color-gray;
-
-// We use these to control various global styles
-$body-bg: $color-white;
-$body-font-color: darken($color-white, 60%);
-$body-font-family: $font-body;
-// $body-font-weight: $font-weight-normal;
-// $body-font-style: normal;
-
-// We use this to control font-smoothing
-// $font-smoothing: antialiased;
-
-// We use these to control text direction settings
-// $text-direction: ltr;
-// $opposite-direction: right;
-// $default-float: left;
-// $last-child-float: $opposite-direction;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 1000px;
-
-// We use these to control inset shadow shiny edges and depressions.
-// $shiny-edge-size: 0 1px 0;
-// $shiny-edge-color: rgba($white, .5);
-// $shiny-edge-active-color: rgba($black, .2);
-
-// d. Media Query Ranges
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$small-range: (0em, 40em);
-$medium-range: (40.063em, 64em);
-$large-range: (64.063em, 90em);
-$xlarge-range: (90.063em, 120em);
-$xxlarge-range: (120.063em, 99999999em);
-
-$screen: "only screen";
-
-$landscape: "#{$screen} and (orientation: landscape)";
-$portrait: "#{$screen} and (orientation: portrait)";
-
-$small-up: $screen;
-$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
-
-$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
-$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
-
-$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
-$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
-
-$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
-$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
-
-$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
-$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
-
-// Legacy
-// $small: $medium-up;
-// $medium: $medium-up;
-// $large: $large-up;
-
-// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
-// $cursor-crosshair-value: crosshair;
-// $cursor-default-value: default;
-// $cursor-pointer-value: pointer;
-// $cursor-help-value: help;
-// $cursor-text-value: text;
-
-// e. Typography
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-type-classes: $include-html-classes;
-
-// We use these to control header font styles
-// $header-font-family: $body-font-family;
-// $header-font-weight: $font-weight-normal;
-// $header-font-style: normal;
-// $header-font-color: $jet;
-// $header-line-height: 1.4;
-// $header-top-margin: .2rem;
-// $header-bottom-margin: .5rem;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-// $h1-font-size: rem-calc(44);
-// $h2-font-size: rem-calc(37);
-// $h3-font-size: rem-calc(27);
-// $h4-font-size: rem-calc(23);
-// $h5-font-size: rem-calc(18);
-// $h6-font-size: 1rem;
-
-// We use these to control header size reduction on small screens
-// $h1-font-reduction: rem-calc(10) !default;
-// $h2-font-reduction: rem-calc(10) !default;
-// $h3-font-reduction: rem-calc(5) !default;
-// $h4-font-reduction: rem-calc(5) !default;
-// $h5-font-reduction: 0 !default;
-// $h6-font-reduction: 0 !default;
-
-// These control how subheaders are styled.
-// $subheader-line-height: 1.4;
-// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
-// $subheader-font-weight: $font-weight-normal;
-// $subheader-top-margin: .2rem;
-// $subheader-bottom-margin: .5rem;
-
-// A general styling
-// $small-font-size: 60%;
-// $small-font-color: scale-color($header-font-color, $lightness: 35%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: $font-weight-normal;
-// $paragraph-font-size: 1rem;
-// $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: rem-calc(20);
-// $paragraph-aside-font-size: rem-calc(14);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-// $paragraph-text-rendering: optimizeLegibility;
-
-// We use these to style tags
-// $code-color: $oil;
-// $code-font-family: $font-family-monospace;
-// $code-font-weight: $font-weight-normal;
-// $code-background-color: scale-color($secondary-color, $lightness: 70%);
-// $code-border-size: 1px;
-// $code-border-style: solid;
-// $code-border-color: scale-color($code-background-color, $lightness: -10%);
-// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-text-decoration-hover: none;
-// $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
-
-// We use these to style the element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: $gainsboro;
-// $hr-margin: rem-calc(20);
-
-// We use these to style lists
-// $list-font-family: $paragraph-font-family;
-// $list-font-size: $paragraph-font-size;
-// $list-line-height: $paragraph-line-height;
-// $list-margin-bottom: $paragraph-margin-bottom;
-// $list-style-position: outside;
-// $list-side-margin: 1.1rem;
-// $list-ordered-side-margin: 1.4rem;
-// $list-side-margin-no-bullet: 0;
-// $list-nested-margin: rem-calc(20);
-// $definition-list-header-weight: $font-weight-bold;
-// $definition-list-header-margin-bottom: .3rem;
-// $definition-list-margin-bottom: rem-calc(12);
-
-// We use these to style blockquotes
-// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
-// $blockquote-padding: rem-calc(9 20 0 19);
-// $blockquote-border: 1px solid $gainsboro;
-// $blockquote-cite-font-size: rem-calc(13);
-// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted $gainsboro;
-
-// We use these to control padding and margin
-// $microformat-padding: rem-calc(10 12);
-// $microformat-margin: rem-calc(0 0 20 0);
-
-// We use these to control the border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: $gainsboro;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: $font-weight-bold;
-// $microformat-fullname-font-size: rem-calc(15);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: $font-weight-bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: rem-calc(0 1);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: $font-weight-bold;
-// $microformat-abbr-font-decoration: none;
-
-// 01. Accordion
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-accordion-classes: $include-html-classes;
-
-// $accordion-navigation-padding: rem-calc(16);
-// $accordion-navigation-bg-color: $silver ;
-// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
-// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
-// $accordion-navigation-font-color: $jet;
-// $accordion-navigation-font-size: rem-calc(16);
-// $accordion-navigation-font-family: $body-font-family;
-
-// $accordion-content-padding: $column-gutter/2;
-// $accordion-content-active-bg-color: $white;
-
-// 02. Alert Boxes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-alert-classes: $include-html-classes;
-
-// We use this to control alert padding.
-// $alert-padding-top: rem-calc(14);
-// $alert-padding-default-float: $alert-padding-top;
-// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
-// $alert-padding-bottom: $alert-padding-top;
-
-// We use these to control text style.
-// $alert-font-weight: $font-weight-normal;
-// $alert-font-size: rem-calc(13);
-// $alert-font-color: $white;
-// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
-
-// We use this for close hover effect.
-// $alert-function-factor: -14%;
-
-// We use these to control border styles.
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
-// $alert-bottom-margin: rem-calc(20);
-
-// We use these to style the close buttons
-// $alert-close-color: $oil;
-// $alert-close-top: 50%;
-// $alert-close-position: rem-calc(4);
-// $alert-close-font-size: rem-calc(22);
-// $alert-close-opacity: 0.3;
-// $alert-close-opacity-hover: 0.5;
-// $alert-close-padding: 9px 6px 4px;
-
-// We use this to control border radius
-// $alert-radius: $global-radius;
-
-// We use this to control transition effects
-// $alert-transition-speed: 300ms;
-// $alert-transition-ease: ease-out;
-
-// 03. Block Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-block-grid-classes: $include-html-classes;
-// $include-xl-html-block-grid-classes: false;
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: rem-calc(20);
-// $align-block-grid-to-grid: false;
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-// $block-grid-media-queries: true;
-
-// 04. Breadcrumbs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$include-html-nav-classes: $include-html-classes;
-
-// We use this to set the background color for the breadcrumb container.
-// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
-
-// We use these to set the padding around the breadcrumbs.
-// $crumb-padding: rem-calc(9 14 9);
-// $crumb-side-padding: rem-calc(12);
-
-// We use these to control border styles.
-// $crumb-function-factor: -10%;
-// $crumb-border-size: 1px;
-// $crumb-border-style: solid;
-// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
-// $crumb-radius: $global-radius;
-
-// We use these to set various text styles for breadcrumbs.
-// $crumb-font-size: rem-calc(11);
-// $crumb-font-color: $primary-color;
-// $crumb-font-color-current: $oil;
-// $crumb-font-color-unavailable: $aluminum;
-// $crumb-font-transform: uppercase;
-// $crumb-link-decor: underline;
-
-// We use these to control the slash between breadcrumbs
-// $crumb-slash-color: $base;
-// $crumb-slash: "/";
-
-// 05. Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$include-html-button-classes: true;
-
-// We use these to build padding for buttons.
-// $button-tny: rem-calc(10);
-// $button-sml: rem-calc(14);
-// $button-med: rem-calc(16);
-// $button-lrg: rem-calc(18);
-
-// We use this to control the display property.
-// $button-display: inline-block;
-// $button-margin-bottom: rem-calc(20);
-
-// We use these to control button text styles.
-// $button-font-family: $body-font-family;
-$button-font-color: $color-black;
-// $button-font-color-alt: $oil;
-// $button-font-tny: rem-calc(11);
-// $button-font-sml: rem-calc(13);
-// $button-font-med: rem-calc(16);
-// $button-font-lrg: rem-calc(20);
-// $button-font-weight: $font-weight-normal;
-// $button-font-align: center;
-
-// We use these to control various hover effects.
-// $button-function-factor: -20%;
-
-// We use these to control button border and hover styles.
-// $button-border-width: 0px;
-// $button-border-style: solid;
-// $button-bg-color: $primary-color;
-// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
-// $button-border-color: $button-bg-hover;
-// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
-// $secondary-button-border-color: $secondary-button-bg-hover;
-// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
-// $success-button-border-color: $success-button-bg-hover;
-// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
-// $alert-button-border-color: $alert-button-bg-hover;
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-// $button-round: $global-rounded;
-
-// We use this to set default opacity and cursor for disabled buttons.
-// $button-disabled-opacity: 0.7;
-// $button-disabled-cursor: $cursor-default-value;
-
-// 06. Button Groups
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-// $button-bar-margin-opposite: rem-calc(10);
-// $button-group-border-width: 1px;
-
-// 07. Clearing
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-clearing-classes: $include-html-classes;
-
-// We use these to set the background colors for parts of Clearing.
-// $clearing-bg: $oil;
-// $clearing-caption-bg: $clearing-bg;
-// $clearing-carousel-bg: rgba(51,51,51,0.8);
-// $clearing-img-bg: $clearing-bg;
-
-// We use these to style the close button
-// $clearing-close-color: $iron;
-// $clearing-close-size: 30px;
-
-// We use these to style the arrows
-// $clearing-arrow-size: 12px;
-// $clearing-arrow-color: $clearing-close-color;
-
-// We use these to style captions
-// $clearing-caption-font-color: $iron;
-// $clearing-caption-font-size: 0.875em;
-// $clearing-caption-padding: 10px 30px 20px;
-
-// We use these to make the image and carousel height and style
-// $clearing-active-img-height: 85%;
-// $clearing-carousel-height: 120px;
-// $clearing-carousel-thumb-width: 120px;
-// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
-
-// 08. Dropdown
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-dropdown-classes: $include-html-classes;
-
-// We use these to controls height and width styles.
-// $f-dropdown-max-width: 200px;
-// $f-dropdown-height: auto;
-// $f-dropdown-max-height: none;
-
-// Used for bottom position
-// $f-dropdown-margin-top: 2px;
-
-// Used for right position
-// $f-dropdown-margin-left: $f-dropdown-margin-top;
-
-// Used for left position
-// $f-dropdown-margin-right: $f-dropdown-margin-top;
-
-// Used for top position
-// $f-dropdown-margin-bottom: $f-dropdown-margin-top;
-
-// We use this to control the background color
-// $f-dropdown-bg: $white;
-
-// We use this to set the border styles for dropdowns.
-// $f-dropdown-border-style: solid;
-// $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: scale-color($white, $lightness: -20%);
-
-// We use these to style the triangle pip.
-// $f-dropdown-triangle-size: 6px;
-// $f-dropdown-triangle-color: $white;
-// $f-dropdown-triangle-side-offset: 10px;
-
-// We use these to control styles for the list elements.
-// $f-dropdown-list-style: none;
-// $f-dropdown-font-color: $charcoal;
-// $f-dropdown-font-size: rem-calc(14);
-// $f-dropdown-list-padding: rem-calc(5, 10);
-// $f-dropdown-line-height: rem-calc(18);
-// $f-dropdown-list-hover-bg: $smoke ;
-// $dropdown-mobile-default-float: 0;
-
-// We use this to control the styles for when the dropdown has custom content.
-// $f-dropdown-content-padding: rem-calc(20);
-
-// Default radius for dropdown.
-// $f-dropdown-radius: $global-radius;
-
-
-// 09. Dropdown Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to set the color of the pip in dropdown buttons
-// $dropdown-button-pip-color: $white;
-// $dropdown-button-pip-color-alt: $oil;
-
-// $button-pip-tny: rem-calc(6);
-// $button-pip-sml: rem-calc(7);
-// $button-pip-med: rem-calc(9);
-// $button-pip-lrg: rem-calc(11);
-
-// We use these to style tiny dropdown buttons
-// $dropdown-button-padding-tny: $button-pip-tny * 7;
-// $dropdown-button-pip-size-tny: $button-pip-tny;
-// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
-// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
-
-// We use these to style small dropdown buttons
-// $dropdown-button-padding-sml: $button-pip-sml * 7;
-// $dropdown-button-pip-size-sml: $button-pip-sml;
-// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
-// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
-
-// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
-// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
-// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
-
-// We use these to style large dropdown buttons
-// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
-// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
-// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
-
-// 10. Flex Video
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control video container padding and margins
-// $flex-video-padding-top: rem-calc(25);
-// $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: rem-calc(16);
-
-// We use this to control widescreen bottom padding
-// $flex-video-widescreen-padding-bottom: 56.34%;
-
-// 11. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: rem-calc(16);
-
-// We use these to style the labels in different ways
-// $form-label-pointer: pointer;
-// $form-label-font-size: rem-calc(14);
-// $form-label-font-weight: $font-weight-normal;
-// $form-label-line-height: 1.5;
-// $form-label-font-color: scale-color($black, $lightness: 30%);
-// $form-label-small-transform: capitalize;
-// $form-label-bottom-margin: 0;
-// $input-font-family: inherit;
-// $input-font-color: rgba(0,0,0,0.75);
-// $input-font-size: rem-calc(14);
-// $input-bg-color: $white;
-// $input-focus-bg-color: scale-color($white, $lightness: -2%);
-// $input-border-color: scale-color($white, $lightness: -20%);
-// $input-focus-border-color: scale-color($white, $lightness: -40%);
-// $input-border-style: solid;
-// $input-border-width: 1px;
-// $input-border-radius: $global-radius;
-// $input-disabled-bg: $gainsboro;
-// $input-disabled-cursor: $cursor-default-value;
-// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-
-// We use these to style the fieldset border and spacing.
-// $fieldset-border-style: solid;
-// $fieldset-border-width: 1px;
-// $fieldset-border-color: $gainsboro;
-// $fieldset-padding: rem-calc(20);
-// $fieldset-margin: rem-calc(18 0);
-
-// We use these to style the legends when you use them
-// $legend-bg: $white;
-// $legend-font-weight: $font-weight-bold;
-// $legend-padding: rem-calc(0 3);
-
-// We use these to style the prefix and postfix input elements
-// $input-prefix-bg: scale-color($white, $lightness: -5%);
-// $input-prefix-border-color: scale-color($white, $lightness: -20%);
-// $input-prefix-border-size: 1px;
-// $input-prefix-border-type: solid;
-// $input-prefix-overflow: hidden;
-// $input-prefix-font-color: $oil;
-// $input-prefix-font-color-alt: $white;
-
-// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
-// $input-number-spinners: true;
-
-// We use these to style the error states for inputs and labels
-// $input-error-message-padding: rem-calc(6 9 9);
-// $input-error-message-top: -1px;
-// $input-error-message-font-size: rem-calc(12);
-// $input-error-message-font-weight: $font-weight-normal;
-// $input-error-message-font-style: italic;
-// $input-error-message-font-color: $white;
-// $input-error-message-font-color-alt: $oil;
-
-// We use this to style the glowing effect of inputs when focused
-// $input-include-glowing-effect: true;
-// $glowing-effect-fade-time: 0.45s;
-// $glowing-effect-color: $input-focus-border-color;
-
-// Select variables
-// $select-bg-color: $ghost;
-// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
-
-// 12. Icon Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to style the icon-bar and items
-// $include-html-icon-bar-classes: $include-html-classes;
-// $icon-bar-bg: $oil;
-// $icon-bar-font-color: $white;
-// $icon-bar-font-size: 1rem;
-// $icon-bar-hover-color: $primary-color;
-// $icon-bar-icon-color: $white;
-// $icon-bar-icon-size: 1.875rem;
-// $icon-bar-image-width: 1.875rem;
-// $icon-bar-image-height: 1.875rem;
-// $icon-bar-active-color: $primary-color;
-// $icon-bar-item-padding: 1.25rem;
-
-// 13. Inline Lists
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-inline-list-classes: $include-html-classes;
-
-// We use this to control the margins and padding of the inline list.
-// $inline-list-top-margin: 0;
-// $inline-list-opposite-margin: 0;
-// $inline-list-bottom-margin: rem-calc(17);
-// $inline-list-default-float-margin: rem-calc(-22);
-// $inline-list-default-float-list-margin: rem-calc(22);
-
-// $inline-list-padding: 0;
-
-// We use this to control the overflow of the inline list.
-// $inline-list-overflow: hidden;
-
-// We use this to control the list items
-// $inline-list-display: block;
-
-// We use this to control any elements within list items
-// $inline-list-children-display: block;
-
-// 14. Joyride
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-joyride-classes: $include-html-classes;
-
-// Controlling default Joyride styles
-// $joyride-tip-bg: $oil;
-// $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: rem-calc(18 20 24);
-// $joyride-tip-border: solid 1px $charcoal;
-// $joyride-tip-radius: 4px;
-// $joyride-tip-position-offset: 22px;
-
-// Here, we're setting the tip font styles
-// $joyride-tip-font-color: $white;
-// $joyride-tip-font-size: rem-calc(14);
-// $joyride-tip-header-weight: $font-weight-bold;
-
-// This changes the nub size
-// $joyride-tip-nub-size: 10px;
-
-// This adjusts the styles for the timer when its enabled
-// $joyride-tip-timer-width: 50px;
-// $joyride-tip-timer-height: 3px;
-// $joyride-tip-timer-color: $steel;
-
-// This changes up the styles for the close button
-// $joyride-tip-close-color: $monsoon;
-// $joyride-tip-close-size: 24px;
-// $joyride-tip-close-weight: $font-weight-normal;
-
-// When Joyride is filling the screen, we use this style for the bg
-// $joyride-screenfill: rgba(0,0,0,0.5);
-
-// 15. Keystrokes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-keystroke-classes: $include-html-classes;
-
-// We use these to control text styles.
-// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: inherit;
-// $keystroke-font-color: $jet;
-// $keystroke-font-color-alt: $white;
-// $keystroke-function-factor: -7%;
-
-// We use this to control keystroke padding.
-// $keystroke-padding: rem-calc(2 4 0);
-
-// We use these to control background and border styles.
-// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
-// $keystroke-border-style: solid;
-// $keystroke-border-width: 1px;
-// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
-// $keystroke-radius: $global-radius;
-
-// 16. Labels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-label-classes: $include-html-classes;
-
-// We use these to style the labels
-// $label-padding: rem-calc(4 8 4);
-// $label-radius: $global-radius;
-
-// We use these to style the label text
-// $label-font-sizing: rem-calc(11);
-// $label-font-weight: $font-weight-normal;
-// $label-font-color: $oil;
-// $label-font-color-alt: $white;
-// $label-font-family: $body-font-family;
-
-// 17. Magellan
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-magellan-classes: $include-html-classes;
-
-// $magellan-bg: $white;
-// $magellan-padding: 0 !important;
-
-// 18. Off-canvas
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-off-canvas-classes: $include-html-classes;
-
-// $tabbar-bg: $oil;
-// $tabbar-height: rem-calc(45);
-// $tabbar-icon-width: $tabbar-height;
-// $tabbar-line-height: $tabbar-height;
-// $tabbar-color: $white;
-// $tabbar-middle-padding: 0 rem-calc(10);
-
-// Off Canvas Divider Styles
-// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
-// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
-
-// Off Canvas Tab Bar Headers
-// $tabbar-header-color: $white;
-// $tabbar-header-weight: $font-weight-bold;
-// $tabbar-header-line-height: $tabbar-height;
-// $tabbar-header-margin: 0;
-
-// Off Canvas Menu Variables
-// $off-canvas-width: rem-calc(250);
-// $off-canvas-bg: $oil;
-// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
-
-// Off Canvas Menu List Variables
-// $off-canvas-label-padding: 0.3rem rem-calc(15);
-// $off-canvas-label-color: $aluminum;
-// $off-canvas-label-text-transform: uppercase;
-// $off-canvas-label-font-size: rem-calc(12);
-// $off-canvas-label-font-weight: $font-weight-bold;
-// $off-canvas-label-bg: $tuatara;
-// $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%);
-// $off-canvas-label-border-bottom: none;
-// $off-canvas-label-margin:0;
-// $off-canvas-link-padding: rem-calc(10, 15);
-// $off-canvas-link-color: rgba($white, 0.7);
-// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
-// $off-canvas-back-bg: $tuatara;
-// $off-canvas-back-border-top: $off-canvas-label-border-top;
-// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
-// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
-// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
-// $off-canvas-back-hover-border-bottom: none;
-
-// Off Canvas Menu Icon Variables
-// $tabbar-menu-icon-color: $white;
-// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
-
-// $tabbar-menu-icon-text-indent: rem-calc(35);
-// $tabbar-menu-icon-width: $tabbar-height;
-// $tabbar-menu-icon-height: $tabbar-height;
-// $tabbar-menu-icon-padding: 0;
-
-// $tabbar-hamburger-icon-width: rem-calc(16);
-// $tabbar-hamburger-icon-left: false;
-// $tabbar-hamburger-icon-top: false;
-// $tabbar-hamburger-icon-thickness: 1px;
-// $tabbar-hamburger-icon-gap: 6px;
-
-// Off Canvas Back-Link Overlay
-// $off-canvas-overlay-transition: background 300ms ease;
-// $off-canvas-overlay-cursor: pointer;
-// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5);
-// $off-canvas-overlay-background: rgba($white, 0.2);
-// $off-canvas-overlay-background-hover: rgba($white, 0.05);
-
-// Transition Variables
-// $menu-slide: "transform 500ms ease";
-
-// 19. Orbit
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-orbit-classes: $include-html-classes;
-
-// We use these to control the caption styles
-// $orbit-container-bg: none;
-// $orbit-caption-bg: rgba(51,51,51, 0.8);
-// $orbit-caption-font-color: $white;
-// $orbit-caption-font-size: rem-calc(14);
-// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
-// $orbit-caption-padding: rem-calc(10 14);
-// $orbit-caption-height: auto;
-
-// We use these to control the left/right nav styles
-// $orbit-nav-bg: transparent;
-// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
-// $orbit-nav-arrow-color: $white;
-// $orbit-nav-arrow-color-hover: $white;
-
-// We use these to control the timer styles
-// $orbit-timer-bg: rgba(255,255,255,0.3);
-// $orbit-timer-show-progress-bar: true;
-
-// We use these to control the bullet nav styles
-// $orbit-bullet-nav-color: $iron;
-// $orbit-bullet-nav-color-active: $aluminum;
-// $orbit-bullet-radius: rem-calc(9);
-
-// We use these to controls the style of slide numbers
-// $orbit-slide-number-bg: rgba(0,0,0,0);
-// $orbit-slide-number-font-color: $white;
-// $orbit-slide-number-padding: rem-calc(5);
-
-// Hide controls on small
-// $orbit-nav-hide-for-small: true;
-// $orbit-bullet-hide-for-small: true;
-// $orbit-timer-hide-for-small: true;
-
-// Graceful Loading Wrapper and preloader
-// $wrapper-class: "slideshow-wrapper";
-// $preloader-class: "preloader";
-
-// 20. Pagination
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-pagination-classes: $include-html-classes;
-
-// We use these to control the pagination container
-// $pagination-height: rem-calc(24);
-// $pagination-margin: rem-calc(-5);
-
-// We use these to set the list-item properties
-// $pagination-li-float: $default-float;
-// $pagination-li-height: rem-calc(24);
-// $pagination-li-font-color: $jet;
-// $pagination-li-font-size: rem-calc(14);
-// $pagination-li-margin: rem-calc(5);
-
-// We use these for the pagination anchor links
-// $pagination-link-pad: rem-calc(1 10 1);
-// $pagination-link-font-color: $aluminum;
-// $pagination-link-active-bg: scale-color($white, $lightness: -10%);
-
-// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: default;
-// $pagination-link-unavailable-font-color: $aluminum;
-// $pagination-link-unavailable-bg-active: transparent;
-
-// We use these for currently selected anchor links
-// $pagination-link-current-background: $primary-color;
-// $pagination-link-current-font-color: $white;
-// $pagination-link-current-font-weight: $font-weight-bold;
-// $pagination-link-current-cursor: default;
-// $pagination-link-current-active-bg: $primary-color;
-
-// 21. Panels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-panel-classes: $include-html-classes;
-
-// We use these to control the background and border styles
-// $panel-bg: scale-color($white, $lightness: -5%);
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-
-// We use this % to control how much we darken things on hover
-// $panel-function-factor: -11%;
-// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
-
-// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: rem-calc(20);
-// $panel-padding: rem-calc(20);
-
-// We use these to set default font colors
-// $panel-font-color: $oil;
-// $panel-font-color-alt: $white;
-
-// $panel-header-adjust: true;
-// $callout-panel-link-color: $primary-color;
-
-// 22. Pricing Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-pricing-classes: $include-html-classes;
-
-// We use this to control the border color
-// $price-table-border: solid 1px $gainsboro;
-
-// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: rem-calc(20);
-
-// We use these to control the title styles
-// $price-title-bg: $oil;
-// $price-title-padding: rem-calc(15 20);
-// $price-title-align: center;
-// $price-title-color: $smoke;
-// $price-title-weight: $font-weight-normal;
-// $price-title-size: rem-calc(16);
-// $price-title-font-family: $body-font-family;
-
-// We use these to control the price styles
-// $price-money-bg: $vapor ;
-// $price-money-padding: rem-calc(15 20);
-// $price-money-align: center;
-// $price-money-color: $oil;
-// $price-money-weight: $font-weight-normal;
-// $price-money-size: rem-calc(32);
-// $price-money-font-family: $body-font-family;
-
-// We use these to control the description styles
-// $price-bg: $white;
-// $price-desc-color: $monsoon;
-// $price-desc-padding: rem-calc(15);
-// $price-desc-align: center;
-// $price-desc-font-size: rem-calc(12);
-// $price-desc-weight: $font-weight-normal;
-// $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the list item styles
-// $price-item-color: $oil;
-// $price-item-padding: rem-calc(15);
-// $price-item-align: center;
-// $price-item-font-size: rem-calc(14);
-// $price-item-weight: $font-weight-normal;
-// $price-item-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the CTA area styles
-// $price-cta-bg: $white;
-// $price-cta-align: center;
-// $price-cta-padding: rem-calc(20 20 0);
-
-// 23. Progress Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use this to set the progress bar height
-// $progress-bar-height: rem-calc(25);
-// $progress-bar-color: $vapor ;
-
-// We use these to control the border styles
-// $progress-bar-border-color: scale-color($white, $lightness: 20%);
-// $progress-bar-border-size: 1px;
-// $progress-bar-border-style: solid;
-// $progress-bar-border-radius: $global-radius;
-
-// We use these to control the margin & padding
-// $progress-bar-pad: rem-calc(2);
-// $progress-bar-margin-bottom: rem-calc(10);
-
-// We use these to set the meter colors
-// $progress-meter-color: $primary-color;
-// $progress-meter-secondary-color: $secondary-color;
-// $progress-meter-success-color: $success-color;
-// $progress-meter-alert-color: $alert-color;
-
-// 24. Range Slider
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-range-slider-classes: $include-html-classes;
-
-// These variables define the slider bar styles
-// $range-slider-bar-width: 100%;
-// $range-slider-bar-height: rem-calc(16);
-
-// $range-slider-bar-border-width: 1px;
-// $range-slider-bar-border-style: solid;
-// $range-slider-bar-border-color: $gainsboro;
-// $range-slider-radius: $global-radius;
-// $range-slider-round: $global-rounded;
-// $range-slider-bar-bg-color: $ghost;
-
-// Vertical bar styles
-// $range-slider-vertical-bar-width: rem-calc(16);
-// $range-slider-vertical-bar-height: rem-calc(200);
-
-// These variables define the slider handle styles
-// $range-slider-handle-width: rem-calc(32);
-// $range-slider-handle-height: rem-calc(22);
-// $range-slider-handle-position-top: rem-calc(-5);
-// $range-slider-handle-bg-color: $primary-color;
-// $range-slider-handle-border-width: 1px;
-// $range-slider-handle-border-style: solid;
-// $range-slider-handle-border-color: none;
-// $range-slider-handle-radius: $global-radius;
-// $range-slider-handle-round: $global-rounded;
-// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
-// $range-slider-handle-cursor: pointer;
-
-// 25. Reveal
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-reveal-classes: $include-html-classes;
-
-// We use these to control the style of the reveal overlay.
-// $reveal-overlay-bg: rgba($black, .45);
-// $reveal-overlay-bg-old: $black;
-
-// We use these to control the style of the modal itself.
-// $reveal-modal-bg: $white;
-// $reveal-position-top: rem-calc(100);
-// $reveal-default-width: 80%;
-// $reveal-max-width: $row-width;
-// $reveal-modal-padding: rem-calc(20);
-// $reveal-box-shadow: 0 0 10px rgba($black,.4);
-
-// We use these to style the reveal close button
-// $reveal-close-font-size: rem-calc(40);
-// $reveal-close-top: rem-calc(8);
-// $reveal-close-side: rem-calc(11);
-// $reveal-close-color: $base;
-// $reveal-close-weight: $font-weight-bold;
-
-// We use this to set the default radius used throughout the core.
-// $reveal-radius: $global-radius;
-// $reveal-round: $global-rounded;
-
-// We use these to control the modal border
-// $reveal-border-style: solid;
-// $reveal-border-width: 1px;
-// $reveal-border-color: $steel;
-
-// $reveal-modal-class: "reveal-modal";
-// $close-reveal-modal-class: "close-reveal-modal";
-
-// 26. Side Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$include-html-nav-classes: true;
-
-// We use this to control padding.
-$side-nav-padding: 1rem 1rem;
-
-// We use these to control list styles.
-$side-nav-list-type: none;
-$side-nav-list-position: inside;
-$side-nav-list-margin: rem-calc(0 0 7 0);
-
-// We use these to control link styles.
-$side-nav-link-color: $color-red;
-$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
-$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
-$side-nav-font-size: rem-calc(14);
-$side-nav-font-weight: normal;
-$side-nav-font-family: $body-font-family;
-$side-nav-active-font-family: $side-nav-font-family;
-
-// We use these to control heading styles.
-// $side-nav-heading-color: $side-nav-link-color;
-// $side-nav-heading-font-size: $side-nav-font-size;
-// $side-nav-heading-font-weight: bold;
-// $side-nav-heading-text-transform: uppercase;
-
-// We use these to control border styles
-$side-nav-divider-size: 1px;
-$side-nav-divider-style: solid;
-$side-nav-divider-color: scale-color(#fff, $lightness: -10%);
-
-// 27. Split Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to control different shared styles for Split Buttons
-// $split-button-function-factor: 10%;
-// $split-button-pip-color: $white;
-// $split-button-pip-color-alt: $oil;
-// $split-button-active-bg-tint: rgba(0,0,0,0.1);
-
-// We use these to control tiny split buttons
-// $split-button-padding-tny: $button-pip-tny * 10;
-// $split-button-span-width-tny: $button-pip-tny * 6;
-// $split-button-pip-size-tny: $button-pip-tny;
-// $split-button-pip-top-tny: $button-pip-tny * 2;
-// $split-button-pip-default-float-tny: rem-calc(-6);
-
-// We use these to control small split buttons
-// $split-button-padding-sml: $button-pip-sml * 10;
-// $split-button-span-width-sml: $button-pip-sml * 6;
-// $split-button-pip-size-sml: $button-pip-sml;
-// $split-button-pip-top-sml: $button-pip-sml * 1.5;
-// $split-button-pip-default-float-sml: rem-calc(-6);
-
-// We use these to control medium split buttons
-// $split-button-padding-med: $button-pip-med * 9;
-// $split-button-span-width-med: $button-pip-med * 5.5;
-// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $split-button-pip-top-med: $button-pip-med * 1.5;
-// $split-button-pip-default-float-med: rem-calc(-6);
-
-// We use these to control large split buttons
-// $split-button-padding-lrg: $button-pip-lrg * 8;
-// $split-button-span-width-lrg: $button-pip-lrg * 5;
-// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
-// $split-button-pip-default-float-lrg: rem-calc(-6);
-
-// 28. Sub Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use these to control margin and padding
-// $sub-nav-list-margin: rem-calc(-4 0 18);
-// $sub-nav-list-padding-top: rem-calc(4);
-
-// We use this to control the definition
-// $sub-nav-font-family: $body-font-family;
-// $sub-nav-font-size: rem-calc(14);
-// $sub-nav-font-color: $aluminum;
-// $sub-nav-font-weight: $font-weight-normal;
-// $sub-nav-text-decoration: none;
-// $sub-nav-padding: rem-calc(3 16);
-// $sub-nav-border-radius: 3px;
-// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
-
-// We use these to control the active item styles
-// $sub-nav-active-font-weight: $font-weight-normal;
-// $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
-// $sub-nav-active-color: $white;
-// $sub-nav-active-padding: $sub-nav-padding;
-// $sub-nav-active-cursor: default;
-
-// $sub-nav-item-divider: "";
-// $sub-nav-item-divider-margin: rem-calc(12);
-
-// 29. Switch
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// Controlling border styles and background colors for the switch container
-// $switch-border-color: scale-color($white, $lightness: -20%);
-// $switch-border-style: solid;
-// $switch-border-width: 1px;
-// $switch-bg: $white;
-
-// We use these to control the switch heights for our default classes
-// $switch-height-tny: rem-calc(22);
-// $switch-height-sml: rem-calc(28);
-// $switch-height-med: rem-calc(36);
-// $switch-height-lrg: rem-calc(44);
-// $switch-bottom-margin: rem-calc(20);
-
-// We use these to control default font sizes for our classes.
-// $switch-font-size-tny: 11px;
-// $switch-font-size-sml: 12px;
-// $switch-font-size-med: 14px;
-// $switch-font-size-lrg: 17px;
-// $switch-label-side-padding: 6px;
-
-// We use these to style the switch-paddle
-// $switch-paddle-bg: $white;
-// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
-// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
-// $switch-paddle-border-width: 1px;
-// $switch-paddle-border-style: solid;
-// $switch-paddle-transition-speed: .1s;
-// $switch-paddle-transition-ease: ease-out;
-// $switch-positive-color: scale-color($success-color, $lightness: 94%);
-// $switch-negative-color: $white-smoke;
-
-// Outline Style for tabbing through switches
-// $switch-label-outline: 1px dotted $jumbo;
-
-// 30. Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-table-classes: $include-html-classes;
-
-// These control the background color for the table and even rows
-// $table-bg: $white;
-// $table-even-row-bg: $snow ;
-
-// These control the table cell border style
-// $table-border-style: solid;
-// $table-border-size: 1px;
-// $table-border-color: $gainsboro;
-
-// These control the table head styles
-// $table-head-bg: $white-smoke ;
-// $table-head-font-size: rem-calc(14);
-// $table-head-font-color: $jet;
-// $table-head-font-weight: $font-weight-bold;
-// $table-head-padding: rem-calc(8 10 10);
-
-// These control the row padding and font styles
-// $table-row-padding: rem-calc(9 10);
-// $table-row-font-size: rem-calc(14);
-// $table-row-font-color: $jet;
-// $table-line-height: rem-calc(18);
-
-// These are for controlling the layout, display and margin of tables
-// $table-layout: auto;
-// $table-display: table-cell;
-// $table-margin-bottom: rem-calc(20);
-
-// 31. Tabs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tabs-classes: $include-html-classes;
-
-// $tabs-navigation-padding: rem-calc(16);
-// $tabs-navigation-bg-color: $silver ;
-// $tabs-navigation-active-bg-color: $white;
-// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
-// $tabs-navigation-font-color: $jet;
-// $tabs-navigation-active-font-color: $tabs-navigation-font-color;
-// $tabs-navigation-font-size: rem-calc(16);
-// $tabs-navigation-font-family: $body-font-family;
-
-// $tabs-content-margin-bottom: rem-calc(24);
-// $tabs-content-padding: $column-gutter/2;
-
-// $tabs-vertical-navigation-margin-bottom: 1.25rem;
-
-// 32. Thumbnails
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control border styles
-// $thumb-border-style: solid;
-// $thumb-border-width: 4px;
-// $thumb-border-color: $white;
-// $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
-// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-
-// Radius and transition speed for thumbs
-// $thumb-radius: $global-radius;
-// $thumb-transition-speed: 200ms;
-
-// 33. Tooltips
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tooltip-classes: $include-html-classes;
-
-// $has-tip-border-bottom: dotted 1px $iron;
-// $has-tip-font-weight: $font-weight-bold;
-// $has-tip-font-color: $oil;
-// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
-// $has-tip-font-color-hover: $primary-color;
-// $has-tip-cursor-type: help;
-
-// $tooltip-padding: rem-calc(12);
-// $tooltip-bg: $oil;
-// $tooltip-font-size: rem-calc(14);
-// $tooltip-font-weight: $font-weight-normal;
-// $tooltip-font-color: $white;
-// $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: rem-calc(10);
-// $tooltip-close-font-weight: $font-weight-normal;
-// $tooltip-close-font-color: $monsoon;
-// $tooltip-font-size-sml: rem-calc(14);
-// $tooltip-radius: $global-radius;
-// $tooltip-rounded: $global-rounded;
-// $tooltip-pip-size: 5px;
-// $tooltip-max-width: 300px;
-
-// 34. Top Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$include-html-top-bar-classes: true;
-
-// Background color for the top bar
-$topbar-bg-color: $color-gray;
-$topbar-bg: $topbar-bg-color;
-
-// Height and margin
-$topbar-height: rem-calc(45px);
-$topbar-margin-bottom: 0;
-
-// Controlling the styles for the title in the top bar
-$topbar-title-weight: normal;
-$topbar-title-font-size: rem-calc(17);
-
-// Style the top bar dropdown elements
-$topbar-dropdown-bg: $color-gray;
-$topbar-dropdown-link-color: #f7f2ea;
-$topbar-dropdown-link-bg: $color-gray;
-$topbar-dropdown-link-weight: normal;
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: #f7f2ea;
-$topbar-dropdown-toggle-alpha: 0.4;
-
-// Set the link colors and styles for top-level nav
-$topbar-link-color: #f7f2ea;
-$topbar-link-color-hover: #fff;
-$topbar-link-color-active: #fff;
-$topbar-link-color-active-hover: #fff;
-$topbar-link-weight: normal;
-$topbar-link-font-size: rem-calc(13);
-$topbar-link-hover-lightness: -10%; // Darken by 10%
-$topbar-link-bg-hover: #272727;
-$topbar-link-bg-active: $color-red;
-$topbar-link-bg-active-hover: scale-color($color-red, $lightness: -14%);
-$topbar-link-font-family: $body-font-family;
-// $topbar-link-text-transform: none;
-// $topbar-link-padding: $topbar-height / 3;
-// $topbar-back-link-size: $h5-font-size;
-// $topbar-link-dropdown-padding: 20px;
-
-// $topbar-button-top: 7px;
-
-$topbar-button-font-size: 0.75rem;
-
-$topbar-dropdown-label-color: #777;
-$topbar-dropdown-label-text-transform: uppercase;
-$topbar-dropdown-label-font-weight: bold;
-$topbar-dropdown-label-font-size: rem-calc(10);
-$topbar-dropdown-label-bg: #333;
-
-// Top menu icon styles
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: rem-calc(13);
-$topbar-menu-link-weight: bold;
-$topbar-menu-link-color: #fff;
-$topbar-menu-icon-color: #fff;
-$topbar-menu-link-color-toggled: #888;
-$topbar-menu-icon-color-toggled: #888;
-
-// Transitions and breakpoint styles
-$topbar-transition-speed: 300ms;
-// Using rem-calc for the below breakpoint causes issues with top bar
-$topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
-$topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";
-
-// Divider Styles
-$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
-$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
-
-// Sticky Class
-$topbar-sticky-class: ".sticky";
-$topbar-arrows: true; //Set false to remove the triangle icon from the menu item
-
-// 36. Visibility Classes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-visibility-classes: $include-html-classes;
-// $include-table-visibility-classes: true;
-// $include-legacy-visibility-classes: true;
-// $include-accessibility-classes: true;
diff --git a/site/templates/api-documentation.hbs b/site/templates/api-documentation.hbs
deleted file mode 100644
index 667329542..000000000
--- a/site/templates/api-documentation.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: content
-side-nav: api-side-navigation
-page-class: api-documentation
-title: Chartist - API Documentation
-description: Detailed documentation of the Chartist.js code and API
-preventIndent: true
----
-{{#each (doxTransform apidox)}}
- {{>dox-section}}
-{{/each}}
diff --git a/site/templates/examples.hbs b/site/templates/examples.hbs
deleted file mode 100644
index 6f1f230a9..000000000
--- a/site/templates/examples.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: content
-page-class: examples
-title: Chartist - Examples
-description: Demos and examples of Chartist.js with live editing functionality
-preventIndent: true
----
-{{#each page.sections}}
- {{>section}}
-{{/each}}
diff --git a/site/templates/getting-started.hbs b/site/templates/getting-started.hbs
deleted file mode 100644
index 7e0e2816e..000000000
--- a/site/templates/getting-started.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: content
-page-class: getting-started
-title: Chartist - Getting started
-description: Learn how to use Chartist.js
-preventIndent: true
----
-{{#each page.sections}}
- {{>section}}
-{{/each}}
diff --git a/site/templates/index.hbs b/site/templates/index.hbs
deleted file mode 100644
index 518f31c22..000000000
--- a/site/templates/index.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: landing
-page-class: full
-title: Chartist - Simple responsive charts
-description: Create responsive, scalable and good looking charts with chartist.js.
-preventIndent: true
----
-
You may think that this is just yet an other charting library. But Chartist.js is the product of
-a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds
-of other great charting libraries but after using them there were always tweaks you would have wished for that were not
- included.
-
-
Get awesome Dashboard Templates by Creative Tim
-
Are you planning to use Chartist to create a nice Dashboard or Admin UI? Don't loose any time and kickstart your development using the awesome templates by Creative Tim. They include Chartist and come with awesome chart styles!
-```
-
-**Recommended**
-```
-
-```
-
-**Recommended**
-```
-
- See the square next to me?
-
-```
-
-**Recommended**
-```
-
-
- See the square next to me?
-
-
-```
-```
-// We use a :before pseudo element with a background image to solve the problem
-.text-box:before {
- content: "";
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background: url(square.svg) no-repeat;
- background-size: 100%;
-}
-```
-
-***
-
-### Type attributes
-
-Omit type attributes for style sheets and scripts. Do not use type attributes for style sheets (unless not using CSS)
-and scripts (unless not using JavaScript). Specifying type attributes in these contexts is not necessary as
-HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.
-
-**Not recommended**
-```
-
-
-```
-
-**Recommended**
-```
-
-
-```
-
-***
-
-### General Accessibility
-
-If you use proper HTML5 semantics a lot of accessibility issues are already solved. ARIA is using some default roles
-for most of the semantic elements which, if used correctly, solves a lot of the issues already. If you use `nav`,
-`aside`, `main`, `footer` etc. ARIA will use some related default roles. For more details you can reference the
-[ARIA specification](http://rawgit.com/w3c/aria-in-html/master/index.html#recommendations-table) recommendation table
-which contains the defaults for the HTML semantic elements.
-
-Additional roles can be used to give more accessibility context (i.e. `role="tab"`).
-
-***
-
-### Tab Index for Accessibility
-
-Check your document for tab order and assign tabindex values in order to change the tab flow based on priority. You
-can disable the tab index of an element by setting `tabindex="-1"` on any element.
-
-If you add functionality to a element that is not focusable by default, you should always add a `tabindex` in order to
-make the element focusable. This will also enable the CSS pseudo selector `:focus`. Choose an appropriate index value
-for `tabindex` or use `tabindex="0"` to group elements into one tab order level and enforce ordering in natural reading
-order.
-
-***
-
-### Microdata for SEO and Accessibility
-
-If the SEO relevance and / or accessibility environment is given then you should consider to use microdata where
-possible. Microdata is a way to annotate your data in your markup that follows some specific semantics.
-
-Google, Microsoft and Yahoo! have more or less agreed on how to use this additional data and using it correctly has
-great influence on your searches.
-
-You can visit [schema.org](http://schema.org/) for more details.
-
-Simple example of a movie on a web page:
-
-**Without microdata**
-```
-
-```
-
-**With microdata**
-```
-
-```
-
-***
-
-### IDs for anchors
-
-It's generally a good practice to give all headings on a page a ID. With these ID's on headings you can use the
-browsers default behavior and include the ID names as hash tags in the URL. By default this causes the browser to scroll
-to the position this element.
-
-If you'd enter the URL `http://your-site.com/about#best-practices` in your browser then the browser would scroll down
-so that the H3 below would be scrolled into the view.
-
-```
-
+