rontea/theme_3_v1

A command-line interface (CLI) tool to manage and build web projects efficiently.

theme_3

Warning This is a Beta version 0.0.0-beta version You can test this release.

A command-line interface (CLI) tool to manage and build web projects efficiently.

Warning This build is currently on Beta.

Version 2.0.0-dev.1 What's New

• ** Under Development Documentation **
• CLI th3
• Gulpfile.js removed
• Extend list of keys in config.js
• Manipulate config.js
• Expand gulpfile for extend commands

NPM :

• npm

GitHub :

• git

Installation

npm init
npm i theme_3
npm install
th3 - List all commands

Link CLI if needed

npm link

Updated Commands

• Move to CLI and set gulpfiles optional for commands

th3 <cmd> [args]

Commands

Command	Description
th3 version	Check current version
th3 new-project	Create new Project folder [html, src]
th3 set-config	Create config for edit [config/config.js]
th3 clean-build	Clean build folder
th3 clean	Clean build folder
th3 dir-check	Check DIR's Enviroment
th3 css-compile	Compile list of CSS and SCSS
th3 css-build	Build CSS
th3 scss-build	Build SCSS
th3 css-watch	Watch CSS
th3 js-compile	Compile list of JS
th3 js-build	Build JS
th3 js-watch	Watch JS
th3 html-build	Build HTML
th3 html-watch	Watch HTML
th3 img-build	Build images
th3 img-watch	Watch images
th3 icons-compile	Compile icons
th3 build-init	Build HTML, SCSS, CSS, JS, and Images
th3 watch	Watch HTML, Images, CSS, and JS
th3 icons-fontawesome	Compile icons fontawesome
th3 icons-bootstrap	Compile icons bootstrap
th3 move-res	Move resources folder or file to build based on dest

Samples

Check DIR's Environment

th3 dir-check [args]

Option	Description
-e, --env	Check Environment
-c, --config	Check config
-d, --dirchk	Check filelister dir set in config
-i, --dir	Check DIR of current project
-r, --dircomp	Compare Dir's from source A and B

Samples

CSS Compilation Commands

th3 css-compile [args]

Key	Description
--css	Compile CSS on [src/css]
--scss	Compile SCSS on [src/scss]
--bootstrap	Compile Bootstrap to CSS
--bootstrapIcon	Compile Bootstrap Icon CSS
--fontawesome	Compile FontAwesome Icon CSS
--bulma	Compile Bulma to CSS
--prism	Compile Prism CSS

CSS Utilities

th3 css-compile [args] [utilities] [value]

Key	Description
--dest	Alter Destination
--compress	Compress CSS
--autoprefixer	Add autoprefixer value (1-5)
--list	List available keys

Samples

JS Compilation Commands

th3 js-compile [args]

Key	Description
--js	Compile JS on [src/js]
--jquery	Compile jQuery
--popper	Compile Popper JS
--tether	Compile Tether JS
--bootstrap	Compile Bootstrap JS
--fontawesome	Compile FontAwesome icons JS

JS Utilities

th3 js-compile [args] [utilities] [value]

Key	Description
--dest	Alter Destination
--uglify	Uglify JS
--list	List available keys

Samples

Icons Compilation Commands

th3 icons-compile [args]

Key	Description
--fontawesome	Compile FontAwesome icons fonts
--bootstrap	Compile Bootstrap icons fonts

Icons Utilities

th3 icons-compile [args] [utilities] [value]

Key	Description
--dest	Alter Destination
--list	List available keys

Samples

More Resources

th3 move-res [args]

Key	Description
--dest	Source of file or folder
--src	Destination of file or folder
--list	List available keys

Help options

th3 [args]

th3 <cmd> [args]

Option	Description
--version	Show version number
-h, --help	Show help

Samples

Getting Started

Samples

Build Folder

• This folder will be created once compile has been made

 . /build
 ├── css                     # CSS includes
 ├── img                     # images
 │── js                      # JS
 │
   Pages       

• Src : Edit CSS/SASS , JS , Images
• html : organize your html codes using "panini"
  • layout (html): default html initial
  • pages (body): resides the index.html and other pages
  • partials : blocks of your page
    • Panini Syntax "Link"

Link to Coding Standards

• https://en.bem.info/methodology/
• https://google.github.io/styleguide/htmlcssguide.html#HTML_Formatting_Rules
• https://github.com/xfiveco/html-coding-standards/blob/master/README.md
• https://cssguidelin.es/#the-importance-of-a-styleguide
• https://github.com/necolas/idiomatic-css#general-principles

Resources

• gulp
• jQuery
• Bootstrap
• node
• npm
• gulp
• panini
  • Playlist
• Bulma
• Prism

Other

• Readme.md Guide Template Readme.md
• Readme.md Format https://guides.github.com/features/mastering-markdown/

Bugs and feature requests

Error logs are created under logs/log.log , you can report error/bugs here

theme_3_v1's Issues

Warning on Old Project using theme_v3

With existing project using this Do not run "node node_modules/theme_3_v1/init-package.js", it will override the existing code you have.
Instead copy gulf.js for the new update and update package.json for new package update.

Enhancement

Enhancement on going updating dependencies and restructure of gulp commands.