css-framework/README.md

1.8 KiB

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