create readme

This commit is contained in:
Ray Elliott 2021-02-28 14:07:06 +00:00
parent 8e6ad9fb42
commit a09166743a
2 changed files with 60 additions and 101 deletions

View File

@ -1,15 +1,65 @@
# CSS Framework ## Included
Simple CSS framework. * ejs templating
* js transpilation (babel)
* eslint
* postcss
* sass
* HMR development server
**Heavily** inspired by [GitHub - CodyHouse/codyhouse-framework](https://github.com/CodyHouse/codyhouse-framework). ## Usage
## TODO ### 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
```
* css - minified for production (cssnano should be doing this)
* Images and SVGs
* sass loader - ensure mixins don't conflict with postcss mixins
* documentation
- .text-component
- visibility.css - make notes on classes with `\:` in the selectors

View File

@ -1,91 +0,0 @@
Requirements
* html
- templating
* js
- babel transpilation
- source maps
- minification on production
- eslint
* css preprocessing
- nested selectors
- variables
- mixins
- functions
- autoprefixer
- imports
- source maps
- minification on production
- stylelint
* live server with hmr
* clean dist directories
## NOT INCLUDED
* code splitting
#### html
* html-webpack-plugin - automatically create index.html or use a template file
also takes care of templating - default templating is ejs
* ejs-compiled-loader (for use with the ejs templates)
bit of a fuck on getting it to work - [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46)
#### js
* @babel/core
- also takes care of minification in production
* @babel/preset-env
* babel-loader
* eslint
* eslint-webpack-plugin
#### css
* css-loader
* sass-loader
* style-loader - injects css into dom (defaults to style tags)
* mini-css-extract-plugin - extracts css to separate files
* postcss-loader
* postcss-preset-env
takes care of autoprefixing(?) (supposedly nesting too but i needed to install
postcss-nested)
* postcss-nested
* postcss-import
* postcss-mixins
* postcss-functions
* cssnano-webpack-plugin
* stylelint
* stylelint-webpack-plugin
#### other
* clean-webpack-plugin
#### live server
* webpack-dev-server
## Installation notes
## Notes
### assets - jpgs, svgs, etc
loaded with webpack 5's asset modules.
path to asset file is relative from the source file.
assets are automatically inlined or exported as a resource based on file size.
this default size is 8kb. - can configure see [docs](https://webpack.js.org/guides/asset-modules/).
Now, when you import MyImage from '../img/my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.
When using the css-loader, as shown above, a similar process will occur for url('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/my-image.png' path with the final path to the image in your output directory.
The html-loader handles <img src="./my-image.png" /> in the same manner.
however, in the template files need to use:
```
<img src="<%=require('../img/my-img.jpg');%>">
```
javascript is the usual:
```
```