css-framework/README.md

## Included

* ejs templating
* js transpilation (babel)
* eslint
* postcss
* sass
* HMR development server

## Usage

### Templating

`ejs-compiled-loader` is used to load `ejs` templates. Templates are found in `src/templates/`. The template entry point is `index.ejs`. Partials can be placed in `src/templates/partials/`.

Partials may be included with:

```html
<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
```

The unusual loader string syntax is due to this [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46).

(uses workaround for [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46)).

### CSS

CSS in `src/css/` is processed by **postcss**.  
CSS in `src/sass/` is processed by **SASS**.

`src/postcss/` contains **postcss** JavaScript defined mixins and functions.

### Image Assets

Supported file types are: `png`, `svg`, `jpg`, `jpeg`, and `gif`.

These are loaded using webpack 5's inbuilt asset modules.

* Path to the asset file is relative to the source file.
* Assets are automatically inlined or exported as a resource based on the file size.  
  Default size is 8kb - see [docs](https://webpack.js.org/guides/asset-modules/) for configuration.

#### Example includes

HTML:
```html
<img src="./my-image.png" />
```

However, in `ejs` template files we need to use:
```html
<img src="<%=require('../img/my-img.jpg');%>">
```

CSS:
```css
url('../img/my-image.png')
```

JavaScript:
```
import myImg from '../img/1.jpg'; // returns the URL of generated asset as a string
```