FrontBox

Static WWW builder tool. Connect prepared components to create hermetic website.

Table of contents

• Playground
• Preview/Status
• Information
• Requirements
  • Visual Studio Code addons
• Terminal tasks
• Projekt Tree
• Bugs

Playground

Preview/Status

Type	Badge
Productive
Documentation

Information

Author	Bartosz Piwek
Version	0.1.0
HTML	Pug
CSS	SCSS
JavaScript	TypeScript

Partial list of npm packages:

Package	Description
FrontBox-Style	Hermetic SCSS files contain helpful methods used on most websites, divided into categories: functions, generators, modules, shapes, styles, variables.
scroll-lock	Cross-browser JavaScript library to disable scrolling page
vh-check	Get reliable CSS vh sizes

Requirements

Node.js	JavaScript run-time environment
Webpack	Module bundler
Yarn	Fast, reliable, and secure dependency
Visual Studio Code	IDE

Visual Studio Code addons

Plugin	Description
Stylelint	Modern CSS/SCSS/Less linter
Prettier	Code formatter
Pug beautify	Simple Pug/Jade beautify

Terminal tasks

Task	Description
yarn start	Generate website with server and automatic update after modifying files
yarn build	Generate prod website

Projekt Tree

├─── content                          | Text content
├─── dist                             | Generated website
├─── dosc                             | Documentation
└─── src/
    ├─── components                   | Components {ts, pug, scss}
    ├─── modals                       | Modals content {ts, pug}
    ├─── pages                        | Pages {pug}
    ├─── scripts/
        ├─── abstract                 | Abstract classes
        ├─── app                      | Custom js/ts plugins folder
        ├─── bootstrap                | Framework classes
        ├─── tools                    | Framework tools
        └─── ...

    ├─── services                     | Services
    ├─── static/                      | Static assets
        ├─── audios
        ├─── fonts
        ├─── icons
        ├─── images
        └─── videos

    ├─── style/
        ├─── global
        ├─── utilities
        ├─── variables
        ├─── global.scss
        ├─── utilities.scss
        └─── variables.scss

    ├─── template                      | Pug extends files
    └─── utilities                     | Pug utilities

Bugs

Feel free to create bug issues.