css-framework/README.md

TODO

• css - body line heights, margins (what happened to these??)
• documentation regarding the CSS files - e.g., .text-component ???
• Eslint errors - do not stop compilation, just emit warnings?
• CSS linting (needs to be postcss compatible)

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:

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

The unusual loader string syntax is due to this issue.

(uses workaround for issue).

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 for configuration.

Example includes

HTML:

<img src="./my-image.png" />

However, in ejs template files we need to use:

<img src="<%=require('../img/my-img.jpg');%>">

CSS:

url('../img/my-image.png')

JavaScript:

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