# Tana website

## Requirements

* `node` and `npm` which can be installed from [HERE](https://nodejs.org/en/)

## Installation

* Navigate to `project_root/frontend`
* Run `npm install` to install all dependencies

## Scripts

* **All scripts must be ran from `project_root/frontend`**

* Start the development server using `npm start` (this also builds and opens the styleguide, more on that later)
* To build the project and minify scripts use `npm run build`

## Development server

Development server offers hot loading capabilities and refreshes the page automatically on file change (sass, js, html/nunjucks).

## Build process

Build process minifies all JavaScript files and runs the script **ONCE**, unlike development server which remains active and watches for changes to files.

## Styleguide

* Run `npm run styleguide` to build the project files and styleguide files. It automatically opens the styleguide in your default browser.

## Frontend guidelines

* Since the styleguide is being generated from CSS (SASS) using KSS, some comments are needed to describe elements that the styleguide will display.
* Refer to "Styleguide" section on how to build the styleguide and open it.

### KSS Comment example

```
// Component Title
//
// Large, **in charge**, and centered. This is the description.
//
// Markup (define the markup to be used in your styleguide):
// <h1 class="post-title {{{modifier_class}}}">A Post Title</h1>
//
// Add {{{modifier class}}} if the element has different classes that change its state.
//
// .btn--primary - Primary button type used throughout the site. (modifier class)
//
// Styleguide Components.article.post-title
// (ꜛ this controls the organization of your style guide. Here, I'm filing this component inside Components / Article / Post Title)
.post-title {
  font-size: 3em;
  text-align: center;
}
```