css-framework/README.md

TODO

• better documentation regarding the CSS files
• 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

Default Text Spacing Styles

There are no default base text spacing styles. However, there are default styles that are applied when textual elements are child elements of a .text-component class.

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