DEV-Playground

A simple way to have a playground to test Javascript, SASS and HTML.

Instalation

$ npm install
$ bower install

You'll have to create the folders js and css at app/assets

Starting playground

$ gulp start

How to use it?

Playground is made to have an auto injectable dependency files. As an example to create a "example" view first we need to create the next files

app/src/html/example.html
app/src/sass/example.scss
app/src/js/example.js

Access to file

When we create an html file we can access to it by passing the ?file= param in the URL: http://localhost:8080/?file=example

SASS

When the HTML injected the file name is added as an ID to the body. This is made to prevent CSS from a file overwrite some code from another file. So the SCSS file from example.scss should look like:

#example {
  h1 {
    font-weight: 300;
    text-align: center;
  }
  p {
    text-align: justify;
  }
}

JS

The file app.js has an object of functions (for now only an empty init function) we can attach more functions from another files.

The idea is that append a function with the same name as the file to auto execute that function at the loading of the screen. The file example.js would look like that:

app.example = function () {
    console.log('example JS');
};