- This repository has been deprecated
- I decide to separated repository into 3 pieces
- 1. FrontBox Static https://github.com/BartoszPiwek/FrontBox-Static
- 3. FrontBox Style https://github.com/BartoszPiwek/FrontBox-Style
- 2. FrontBox KSS Styleguide https://github.com/BartoszPiwek/FrontBox-KSS-Styleguide
- ... more?
Static WWW builder tool. Use prepared html templates, include necessary element style and javascript behaviors, write own code using helpfull functions, speed up work with snippets.
| Version | Status |
|
| |
|
| |
|
|
| HTML | Pug |
| CSS | SCSS |
| JavaScript | Browserify/TypeScript |
| Task runner | Gulp |
| Version | 1.5.0 |
| Node.js | JavaScript run-time environment |
| Gulp | The streaming build system |
| Yarn | Fast, reliable, and secure dependency |
| Visual Studio Code | IDE |
| scss-lint | Configurable tool for writing clean, consistent SCSS |
| Stylelint |
Modern CSS/SCSS/Less linter yarn add global stylelint stylelint-config-property-sort-order-smacss stylelint-order stylelint-scss |
| Prettier | Code formatter |
| Project Snippets | Provide workspace/project level code snippets. |
| FileOptimizer | Advanced file optimizer featuring a lossless (no quality loss) file size reduction |
| ImageMagick | Software suite to create, edit, compose, or convert bitmap images |
| iOS WebKit Debug Proxy | Debug iOS device |
| iTunes | iOS drivers |
| Chocolatey | The package manager for Windows |
| Navicat fo MySQL | Relational database management system |
| WinSCP | SFTP and FTP client for Microsoft Windows |
| Generate website with server and automatic update after modifying files | yarn start |
| Generate favicons | yarn favicon |
| Create docs (KSS) | yarn docs |
| Debug task | yarn test |
| Change version to productive | --prod |
| Watch files | --watch |
| Create server | --server |
└─── public/ | Output generated website folder
├─── prod/
└─── dev/
└─── src/
├─── audio/
├─── fonts/
└─── images/
├─── favicons/ | Generated favicons folder
├─── svg/ | SVG files folder
├─── cookies.png | Cookies image for TS Class InformationCookie
├─── favicon.png | Favicon image for Gulp gulp-real-favicon
├─── logo.png | Site logo image
└─── placeholder.png | Placeholder image for Plugin vanilla-lazyload
└─── scripts/
├─── bootstrap/ | FrontBox modules folder
├─── plugins/ | Custom js/ts plugins folder
├─── app.ts | Main script file
└─── other TS/JS files
└─── style/
├─── bootstrap/ | FrontBox style folder
├─── modules/ | Addon functions & style folder
├─── plugins/ | Custom plugins style folder
├─── utilities/ | Utilities style folder
├─── variables/ | Folder with SCSS variables
├─── style.scss | Page style concat
├─── grid.scss | Grid style concat
├─── utilities.scss | Utilities style concat
└─── other SCSS files
└─── template/
├─── includes/ | Pug includes folder
├─── partials/ | Separated Pug code
└─── other PUG files
└─── video/
└─── config.js | Main tasks config
| ngrok | Secure tunnels to localhost |
| Google Chrome | Debug Android browser (Debug USB) |
| SSL Labs | Deep analysis of the configuration of any SSL web server on the public Internet. |
| Pixel Perfect HTML | Free, super handy and light HTML vs Design comparison tool for front-end developers that will help you code pixel perfect websites with ease. |
| Lighthouse | Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. |
| META SEO inspector | Useful to inspect the meta data found inside web pages, usually not visible while browsing. |
| HTML5 Outliner | Generates a navigable page outline with heading and sectioning elements |
| WASP | Audit, validate and debug the data sent from their websites via tags and beacons |
Feel free to report: create bug issues