Skip to content
This repository has been archived by the owner on Jul 22, 2020. It is now read-only.
/ gen-project Public archive

Project template for building static (without integrated backend) html-projects, heavily driven by productivity and optimisation necessities

License

Notifications You must be signed in to change notification settings

unit137/gen-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gen-project (generic-project)

Project template for building static (without integrated backend) html-projects, heavily driven by productivity and optimisation necessities.

Features

  • local dev-server with autoreload on change and no-reload style injecting via BrowserSync;
  • HTML templating with json-data for elements reuse, easy content output in loops and other via Nunjucks;
  • SCSS compiling/minifying/autoprefixing with a lot of usefull base styles/mixins included;
  • modular js structure also with compiling/minifying;
  • automatic images optimization.

Gulp-tasks

  • default/watch — development task, starts localhost server with hot-reloading (note: needs to be stopped before git rebase);

  • build — task for creating production build, everything will be outputted to /dist folder.

Project structure

  • /dist — compiled files with minified styles/scripts and optimized images, gitignored;
  • /src:
    • css, data, html, js — intermediate non-minified files, used only for production build and by local dev-server, gitignored;
    • img — all images;
    • fonts — self-explanatory;
    • scss — style files;
    • sdata — json files with content;
    • sjs — source scripts and js-libs;
    • templates — html-templates;
    • index.html — static helper page, used to list all available pages, needs to be edited manually (dynamic index.php file located in root of project, automatically lists pages from /dist folder)

Assets details

Images

Automatically optimized on build, so no-need for preoptimize while developing. Formats to be optimized — jpg/jpeg, png, gif, svg.

Styles

Not minified while development, minified and autoprefixed on build.

  • base — global styles, each file has self-explanatory name, some details:
    • _global — global classes prefixed by '_g', all global classes should be added here;
    • _includes — global variables (produces no ouput css), this file should be included in every module from /modules;
    • _settings — key/value variables and configs;
  • modules — style-files for BEM-blocks, file names should always match block class name, these files should not be imported anywhere, style-compiler will pick them up automatically (file names must not be prefixed with underscore);
  • vendor — styles for 3rd-party css/js libs. Should be prefixed with underscrore, renamed to scss if not already in scss-format and be imported in default.scss to ensure proper order in result css;
  • default.scss — includes everything from base folder, placed first in result css (so before modules).

JSON data

Content used by html-templater. Files can have any name, but root-level keys inside each should be unique overall, as every json will be merged in single file, so all content will be available for all pages.

Scripts

  • modules — js-modules declared as global variable and called in init.js (check any file inside for example of structure). Everything will be concatted in single defaults.js file and wrapped in self-executed function on build, so global visibility will be removed;
  • vendor — 3rd-party js-libs, should not be included on pages manually, as everything will be concatted in single vendor.js file;
  • init.js — some kind of project entry point, all scripts initialized here.

HTML

Nunjucks used as template engine.

  • modules — reusable html-elements;
  • modules/layout.html — unified layout for every page;
  • root files — result pages files (btw, page-example.html will be excluded from build, as it used only for quick page cloning).

About

Project template for building static (without integrated backend) html-projects, heavily driven by productivity and optimisation necessities

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published