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

Add bin of theme_3 on package.json so that the CLI will work

  "bin": {
    "th3": "./node_modules/theme_3/bin/cli.js"
  }

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