create readme
This commit is contained in:
parent
8e6ad9fb42
commit
a09166743a
70
README.md
70
README.md
|
|
@ -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
|
|
||||||
|
|
|
||||||
91
notes.md
91
notes.md
|
|
@ -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:
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue