Theme_3_v1 NPM

theme_3_V1 Template

Version 1.2.5d

Simple and easy to use theme template creator for small scale project

NPM

npm i theme_3_v1 -npm

installation

npm init
- node node_modules/theme_3_v1/init-package.js
- npm i theme_3_v1
- npm install
- select option 1New Project 2 4

Check update

$npm outdated
$npm update or $npm @latest

Getting Started

$gulp
$gulp compile-html
$gulp compile-scss
$gulp compile-js
$gulp compile-img
$gulp watch-default

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"

Commands Available

$gulp 'cmd'

  $gulp compile-js

cmd

hello
clean

JS

  - compile-js
  - compile-jquery
  - compile-popper
  - compile-tether
  - compile-bootstrapjs
  - compile-prismjs

Fontawesome

  - addon-fontawesome
  - addon-fontawesome-font

CSS

  - compile-bootstrap
  - compile-bootstrapIcon
  - compile-prismcss
  - compile-bulma
  - compile-scss

Under SCSS > Styles uncomment the css framework that you want to use or include it

HTML

compile-html

watch real time update

watch-default

Add Prefix CSS

compile-prefixscss last 5 version default
gulp compile-compscss --num-version=2 set to last 2 version

Compress CSS

compile-compscss

Pipe to Production

testing

Uglify/Compress JS

no yet available

see more function on gulp.js

=========== Archived =================

Updates 4.15.22 update sass

1.0.4a1 update the dir of theme_2_v1 to theme_3_v1
1.0.4a2 added sass

Updates 1.7.22 using bootstrap 5

1.7.22 remove jspaths.bootstrap, jspaths.popper, jspaths.tether, jspaths.jquery on compile JS

Updates package

$npm install --save-dev gulp gulp-postcss gulp-sass sass postcss gulp-postcss autoprefixer cssnano gulp-sourcemaps browser-sync gulp-environments gulp-uglify panini gulp-html fs-extra
$npm install --save-dev gulp gulp-postcss gulp-sass gulp-sourcemaps gulp-uglify gulp-environments autoprefixer cssnano browser-sync bootstrap panini gulp-html fs-extra

Optional package (popper need by bootstrap)

$npm install --save-dev jquery @popperjs/core tether

Optional package (bootstrap icon)

$npm i bootstrap-icons

Added 1.7.22

$gulp compile-bs-min

Process reminder

$gulp compile-scss
$gulp compile-js
$gulp compile-html

$gulp compile-img

theme folder

 . drupal main folder /themes
 ├── contrib
 ├── custom                  # custom folder
 │   ├── xxx                 # Project folder
 │       ├── css             # Project folder
 │       ├── js              # Project folder
 │       ├── images          # Project folder
 │       └── design          # Design folder of this project
 |       └── templates       # Project folder
 |       └── config          # Project folder 
 └──

***Design folder will host all the document

Version

Version 1.0.4e fix issue on project_src folder with updated items

=========== Archived =================

Theme Template

Theme template using panini to divide and sub-divide each html document to a more clean coding. This is define on gulp.js.

Theme template is use in Drupal project theming folder.

Added to NPM npm

Requirements:

node
npm install gulp-cli -g
npm init

Task to copy on folder (Until Better Solution)

npm init
npm install gulp-cli -g
npm install --save-dev fs-extra
npm install --save-dev theme_2_v1
node node_modules/theme_2_v1/init-package.js
Design Folder execute: content for the work enviroment will be copied
```
$ node node_modules/theme_2_v1/init-package.js
```
Test by Runnig gulp to activate browsersync on http://localhost:3000/

Build Asset Using drupal command to publish on theme folder

theme folder

. drupal main folder /themes
├── contrib
├── custom                  # custom folder
│   ├── xxx                 # Project folder
│       ├── css             # Project folder
│       ├── js              # Project folder
│       ├── images          # Project folder
│       └── design          # Design folder of this project
|       └── templates       # Project folder
|       └── config          # Project folder 
└──

***Design folder will host all the document

Cont :

npm install --save-dev gulp gulp-postcss gulp-sass gulp-sourcemaps gulp-uglify gulp-environments autoprefixer cssnano browser-sync jquery popper.js bootstrap tether panini rimraf gulp-html

$npm install gulp-cli -g
$npm init
$npm install --save-dev gulp gulp-postcss gulp-sass gulp-sourcemaps gulp-uglify gulp-environments autoprefixer cssnano browser-sync jquery popper.js bootstrap tether panini rimraf gulp-html

Install all Dependencies with Fontawesome

$npm install --save-dev gulp gulp-postcss gulp-sass gulp-sourcemaps gulp-uglify gulp-environments autoprefixer cssnano browser-sync jquery popper.js bootstrap tether panini rimraf gulp-html @fortawesome/fontawesome-free

Adding Vue.js and Bulma CSS

bulma additional installation

  $npm install --save-dev bulma

Bulma task

watch-bulma-min (deploy all bulma css)
watch-bulma (to use bulma in includes under scss)

Fontawesome additional installation

install fontawesome on npm

  $npm install --save-dev @fortawesome/fontawesome-free

Task:

Add the JS of fontawesome

  $gulp addon-fontawesome

Add the webfont to the build document so that font-awesome can be added on SCSS as class

  $gulp addon-fontawesome-font

Add both JS and webfont

$gulp addon-fontawesome-all

Add Prism

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

Download CSS and JS "Prism"
JS Add to folder src/js
CSS Add to folder src/css
Add Reference JS and CSS to HTML code
Run gulp task

  $gulp addon-prism

update prism by overriding the code on src/js and src/css

Gulp Tasks

default
clean : clean the /build/* directory
compile-js
compile-jquery
compile-popper
compile-tether
compile-bootstrapjs
bootstrap-optionaljs (run add jquery, popper, bootstrapjs)
compile-bootstrap
compile-bulma
compile-scss
compile-html
compile-img
compile-nobs
watch
watch-bulma-min
watch-bulma
addon-fontawesome
addon-fontawesome-font
addon-fontawesome-all
addon-prism

Task on Drupal Theme

drupal-compile-scss
drupal-compile-bootstrap
drupal-compile-prismcss
drupal-compile-bulma
drupal-js-compile
drupal-compile-js
drupal-compile-prismjs
drupal-compile-fontawesomejs
drupal-fontawesome-webfont
drupal-compile-img

Combination Task

drupal-prism-compile
drupal-fontawesome-compile
drupal-build

Default task

compile bootstrap , optional js of bootstrap , watch , scss , js

Using gulp-enviroments

gulp task --env development : do not minify js , css and other
```
$gulp 'task' --env development
```
gulp task --env production : minify js , css and other
```
$gulp 'task' --env production
```

Deployment

The compiled version of the codes is available under ./build

gulp default task

The data will be compiled on build folder

$gulp 'task' --env development

Clean the build folder

$gulp clean

Version

Version 1.0.3b

Change log

Update 5.21.20

documentation update
Re-arrange document folder to project_src **fix issue

Update 5.20.20

Added init-package.js to copy from node_modules > theme_2_V1 to Main Directory
Added to NPM Link
Update new task in Theming folder of Drupal

Update Older

Update 3.6.20 Added Prism
Update 3.3.20
Update added fontawesome Copy font to include fontawesome on SCSS Update 10.22
Update added fontawesome URL and JS task

Update 9.27

Update src/style.scss to have an option to add bulma, bootstrap and google font
Added gulp task compile-bulma
seperate task for Jquery, popper , tether and bootstrap JS
Added gulp task bootstrap-optionaljs
Added gulp task compile-jquery
Added gulp task compile-popper
Added gulp task compile-tether
Added gulp task compile-bootstrapjs
Remove js-compile task
Added gulp task watch-bulma-min
Added gulp task watch-bulma

Add the following to import individual component of each framework

@import "google/google_font";
@import "bootstrap/bootstrap";
@import "bulma/bulma";
@import "fontawesome/fontawesome";

Add the following link on default page or selected page

Font Awesome

<script src="js/inc/all.min.js"></script>

Gulp Tasks Update

compile-nobs : Compile without Compiling Bootstrap
compile-bulma
- *note that bulma and bootstrap do not work if imported in scss at the same time
compile-img : no image minify yet