FrontBook
FrontBook copied to clipboard
morkro
:book: FrontBook is a small and modern frontend boilerplate, enabling you to write ES201* today in production-ready projects.
FrontBook is a small and modern frontend boilerplate, made for developers who miss a good starting point to write ES201 today* in production-ready projects.
⚙ Setups
FrontBook comes with different setups, npm scripts being the default:
| Setup | Version | Branch |
|---|---|---|
| npm scripts | 1.0.0 |
master |
| Grunt | 1.3.2 |
grunt |
| gulp | 1.3.2 |
gulp |
Choose one and get started!
💾 Quick Start FrontBook
1. Download the boilerplate
Choose one of the two options:
-
Download the repository as
.zip -
git clonethe repository
2. Install Dependencies
Run npm install in your terminal from the FrontBook directory. This makes sure all dependencies are installed and you won't run into any errors.
3. Build Your Project
After installing all dependencies, you want to build your project. npm run dev will generate all files from the src/ directory and move them to dist/. You can now access the build on http://localhost:9000.
npm run devwill automaticallywatchall your source files for any changes!
If you don't to watch all your files but only build the project once, npm run build is your friend.
🛠 Directory Structure
All your source files are located in src/ and structured as follows:
data/
├── meta.json
├── content.json
└── ...
images/
├── frontbook.svg
└── ...
markup/
├── partials/
│ └── head.html
└── index.html
meta/
├── humans.txt
└── ...
scripts/
├── components/
│ └── welcome.js
└── index.js
styles/
├── base/
│ └── ...
├── layout/
│ ├── header.scss
│ └── ...
├── vendors/
│ └── ...
└── index.scss
An overview of each folder:
| Folder | Description | Executable |
|---|---|---|
data/ |
Contains all required data (e.g. copy, image meta data, ...) for your views. It is passed to nunjucks when it renders a view. |
bin/html
|
images/ |
Contains all images for your project. You could also argue to move them into meta/, or rename the folder to something like assets/. I prefer them separated to have a seperate, unique build task. Currently, images are just copied to dist/ but there could also be added an additional image optimization step.
|
bin/assets
|
markup/ |
All the views. If your project is a single page application you might just keep the index.html and work with additional includes and partials. If there are more views, such as about.html, they need to be added to the build task.
|
bin/html
|
meta/ |
FrontBook keeps meta files like humans.txt or a manifest.json here. Some of them might have their own build step, but all are eventually copied to dist/. If you want to have specific modifications for any meta file, add them to bin/assets.
|
bin/assets
|
scripts/ |
Because the main reason for FrontBook is to be able to write ES201* in production, this must be the more exciting part. FrontBook doesn't force you to stick to a specific MV* architecture. It simply takes all .js files and compiles them. Hence you can choose whatever design pattern you prefer. If you want to exclude specific files, you need to specify them in the build step.
|
bin/js
|
styles/ |
FrontBook uses Sass for styling, but it can also easily replaced with any other postprocessor language. The architecture is up to you; if you don't know which architecture to use, take a look at sass-guidelin.es |
bin/css
|
🔧 Available Tasks
| Command | Description |
|---|---|
npm run build |
Generates, compiles, and transpiles all files from src/ to dist/. |
npm run dev |
Same as npm run build but watches also all your files for changes. |
npm run lint |
Uses eslint to lint all JavaScript files. |
npm run clean |
Removes all content from dist/ |
npm start |
This is the production build. It minifies the CSS and JavaScript output. |
📃 Further Documentation
🎊 Features
- Gives you the freedom to use any architectural pattern you like
- ES201* using Browserify (mainly to use modules in ES5) and Babel.
- ESLint
📊 Browser Support
- Chrome (latest 2)
- Firefox (latest 2)
- Internet Explorer 9+ (You can support IE8 by limiting yourself to a subset of ES201* features)
- Microsoft Edge (latest)
- Opera (latest 2)
- Safari (latest 2)
❤️ Contributing
Feel free to add, edit or remove anything you want. If you want to improve something or have found issues, please let me now by opening an issue here on GitHub or contact me via mail. Any help is much appreciated.
License
The code is available under MIT License.
morkro