licoti / webpack-styleguide-builder Goto Github PK

This is a Kss-node Style-Guide builder bundeled with webpack 4. Note: This is currently a WIP.

• node ^8.9.4

Clone the project directory and npm install.

Now, you can generate the Style guide :

npm run kss

This will read the scss comments at the assets files and generate statics html files in styleguide folder. For more informations visit the KSS documentation The base theme used is : Michelangelo Styleguide

Then you can update your css & js in the assets folder.

├── public                   # Static public assets, the folder for the compiled output (ignored by git)
├── styleguide               # Html generated with the kss run command
├── templates                # Custom templates
├── assets                   # Application source code
│   ├── css                  
│   ├── js                   
│   ├── img                  
│── webpack.config.js        # Webpack configuration
└── package.json             # The list of 3rd party libraries and utilities

If you want critical css that extract code in a new generated css file, use the comment below between your declaration

/*!critical:start */
div {
  ...
}
/*!critical:end */

This use postcss-critical-split and postcss-pipeline-webpack-plugin

• https://css-tricks.com/build-style-guide-straight-sass
• https://github.com/davidhund/styleguide-generators

2018-11-06

• initial release