Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamesgeorge007/scaffold-static

Scaffolding utility for vanilla-js
https://github.com/jamesgeorge007/scaffold-static

boilerplate-template cli commander css-framework css-frameworks es6 hacktoberfest javascript node-cli nodejs scaffolding static-site static-site-generation static-site-generator static-website vanilla-js website-generation

Last synced: about 4 hours ago
JSON representation

Scaffolding utility for vanilla-js

Awesome Lists containing this project

README

        


scaffold-static logo





Build Status
npm version
Downloads
PRs Welcome


Buy Me a Coffee

`scaffold-static` lets you automate the local development environment setup and build static sites (vanilla-JS) with ease.

## Installation
`npm install -g scaffold-static`

## Usage
If you have installed `scaffold-static` globally,

```sh
scaffold-static new
```

or, you could use it with `npx`
```sh
npx scaffold-static new
```

- Supply `--use-npm` to use `npm` as the package manager.

## How it works

* Choose your favourite CSS framework to work with.

> Currently the following CSS frameworks are supported:-

* [Bootstrap-3](https://getbootstrap.com/docs/3.3/)
* [Bootstrap-4](https://getbootstrap.com/)
* [Materialize css](https://materializecss.com/)
* [Foudation css](https://foundation.zurb.com/)
* [Semantic-UI](https://semantic-ui.com/)
* [Bulma css](https://bulma.io/)

* `scaffold-static` generates the bare minimum boilerplate template with necessary `webpack` configurations to build the project for production.

A `webpack.config.js` file is made available which depends on the following packages:-
- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin): Simplifies creation of HTML files to serve your webpack bundles.
- [css-loader](https://github.com/webpack-contrib/css-loader) - interprets `@import` and `url()` like `import/require()` and will resolve them.
- [style-loader](https://github.com/webpack-contrib/style-loader) - Injects CSS into the DOM.

* Leverage the advantages put forward by `webpack-dev-server` such as [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) essentially adding it to the DX.

## Contributing
Please see the [contributing guidelines](.github/CONTRIBUTING.md)

## License
> GNU GPL V3

## Credits
- Created by [James George](https://twitter.com/james_madhacks)
- Logo by [Caneco](https://twitter.com/caneco)