Ray Elliott 8b61f666da | ||
---|---|---|
src | ||
.eslintrc.js | ||
.stylelintrc | ||
LICENCE.md | ||
README.md | ||
package-lock.json | ||
package.json | ||
postcss.config.js | ||
webpack.config.js |
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