Skip to content

oscarmarcelo/bengal

Repository files navigation

Bengal

A scaffolding generator for front-end projects.

Bengal is opinionated, which might not be for everyone, but it will be a helpful tool if your project has the following assumptions.

Assumptions

Common to all flows

  • Project contents are inside a src folder, which are built into a build folder, and distributed to a dist folder;
  • Views:
    • Views are inside a views folder;
    • Rendered using Pug or PHP;
      • If using PHP, development server is composed with Docker, using Nginx as webserver;
  • Styles:
    • Styles are inside a styles folder;
    • Preprocessed with Sass (Optional);
      • If using Sass, all styles are organized using the 7-1 Pattern;
    • Vendor prefixes are managed by Autoprefixer;
    • Compressed when distributed;
  • SVG Symbols (Optional):
    • Symbols are inside a symbols folder;
    • All symbols in the same direct folder are concatenated into a single file and named after that folder;
  • Images (Optional):
    • Images are inside an images folder;
    • All PNG, JPEG, GIF, and SVG images are optimized;
  • Fonts (Optional):
    • Fonts are inside an fonts folder;
  • Scripts (Optional):
    • Scripts are inside a scripts folder;
    • ECMAScript 2015+ is converted using Babel (Optional);
    • Linted using XO (Optional);
    • Uglified when distributed;
  • All assets are built into a common assets folder and organized by type using subfolders (styles, images, scripts...);
  • Uses Gulp to manage tasks;
  • Uses BrowserSync to live reload;
  • Uses Git and follow GitHub standards (contribution files...);
  • Uses EditorConfig;
    • 2 spaces for indentation;
    • lf for EOL;
    • An empty newline at the end of the file when saved;
    • Trailing whitespace trimmed when saved (except Markdown);

Website flow

  • All views are built into root build folder;
  • The assets folder is also in the root build folder;
  • Deploy is made to server via SSH;

Electron App flow

🚧 Coming soon.

Requirements

  • Node.js;
  • Yeoman installed globally: npm install --global yo;
  • Gulp CLI installed globally: npm install --global gulp-cli;
  • XO installed globally (if using XO): npm install --global xo;
  • Docker (if using PHP);

Installation

Run the following command on your terminal:

npm install --global generator-bengal

Usage

With your terminal in your project directory, run the following command, and follow the instructions:

yo bengal

Happy coding! 😼