generated from o/repo-template
106 lines
2.0 KiB
Markdown
106 lines
2.0 KiB
Markdown
# Website blueprint
|
|
Blueprint to build a simple website
|
|
|
|
## Features
|
|
|
|
### HTML
|
|
|
|
Basic index.html file
|
|
|
|
### CSS
|
|
|
|
- Preprocessor: [SASS](https://sass-lang.com/)
|
|
- Naming conventions: [BEM](http://getbem.com/)
|
|
- Code structure: inspired by [SMACSS](http://smacss.com/)
|
|
|
|
```
|
|
./css/scss
|
|
style.scss // imports of all styles
|
|
|
|
/base // general styles, font-face, helpers
|
|
/layout // styles defining the layout of the page
|
|
/modules // independent modules, that can be re-used
|
|
```
|
|
|
|
### JavaScript
|
|
|
|
- [TypeScript](https://www.typescriptlang.org/) support
|
|
- Modular JS (imports & exports)
|
|
|
|
```
|
|
./js
|
|
script.ts // imports all necessary TS files
|
|
|
|
/modules // re-usable modules as classes
|
|
```
|
|
|
|
### Tools
|
|
|
|
|
|
#### Taskrunner
|
|
|
|
[gulp](https://gulpjs.com/), different tasks are defined within the ```gulptasks``` folder.
|
|
|
|
Available tasks:
|
|
```
|
|
gulp // default task for development (build dist and watch src)
|
|
build // production ready build in dist
|
|
|
|
assets // copy assets folder
|
|
clean // clean dist folder
|
|
html // move .html files to dist
|
|
styles // compile SASS
|
|
webpack // compile TypeScript
|
|
watch // watch src and handle changed files
|
|
```
|
|
|
|
#### Webpack
|
|
|
|
Typescript is compiled and bundled with [webpack](https://webpack.js.org/). Config: ```webpack.config.js```
|
|
|
|
#### Linter & formatter
|
|
|
|
[eslint](https://eslint.org/) to find and fix problems within JavaScript and [prettier](https://prettier.io/) to format code.
|
|
|
|
configs:
|
|
```
|
|
.eslintignore
|
|
.eslintrc.json
|
|
.prettierrc
|
|
```
|
|
|
|
npm scripts:
|
|
```
|
|
lint
|
|
lint:fix
|
|
```
|
|
|
|
---------
|
|
|
|
## Installation
|
|
|
|
Prerequisite: Have node.js and npm installed.
|
|
|
|
1. Clone or download this repository
|
|
2. Install dependencies
|
|
|
|
```
|
|
npm install
|
|
```
|
|
|
|
---------
|
|
|
|
## Usage
|
|
|
|
1. Start watcher ```npm run dev```
|
|
2. Make changes within the ```src``` folder
|
|
3. Generated files will be in ```dist```
|
|
|
|
### Deploy for production
|
|
|
|
```npm run build```
|
|
|
|
---------
|
|
|
|
## License
|
|
[MIT License](./LICENSE) |