Phenix Build Tools
Phenix uses npm scripts for its build system. Our package.json includes convenient methods for working with the framework, and compiling code,
after you download the source code and before using the Phenix build system you will need to Install the latest stable NodeJS version then you can install dependencies by running the command line npm install inside your phenix directory in the same path as the package.json file.
💼-your-project[phenix] 📂-dist 📂-src 📄package.json 📄etc...
phenix uses node-sass to build the CSS files which uses Libsass which is made with C/C++ to compile sass files to valid CSS files you can run the build script by command line npm run phenix-sass and it will watch any changes you make to the sass files and compile them instantly to CSS files,
💼-your-project[phenix] 📂-src 📁-sass 📁-... 📂-dist 📁-css 📁-...
Sass Main Files
in the sass directory phenix/src/sass you will find two main files for including/excluding any module and customizing RTL/LTR options like fonts, the file named phenix.scss is for LTR version options, and the phenix-rtl.scss is for RTL version,
💼-your-project[phenix] 📂-src/sass 📄phenix.scss || LTR Options 📄phenix-rtl.scss⠀|| RTL Options 📄_customize.scss 📁-assets 📁-grid 📁-integration 📁-utilities
after setting up your choices in phenix.scss, phenix-rtl.scss you will find one more file named _customize.scss you can customize the design options and CSS variables to your brand theme in it and it’s ready for your custom CSS.
💼-your-project[phenix] 📂-src/sass 📄phenix.scss 📄phenix-rtl.scss 📄_customize.scss⠀|| Custom CSS 📁-assets 📁-grid 📁-integration 📁-utilities
npm run phenix-ts and it will watch any changes you make to the typescripts files and compile it instantly to js files,
💼-your-project[phenix] 📂-src 📁-... 📁-scripts 📂-dist 📁-... 📁-js
in the typescript directory phenix/src/typescript you will find a custom-scripts.ts file for your design script you can use and extend the phenix query object and its modules there.
💼-your-project[phenix] 📂-src/scripts 📄index.ts || Phenix Query 📄custom-scripts.ts⠀|| Custom Script 📁-components 📁-features 📁-integration
npm run phenix-start and it will watch both sass and typescript files for any changes and instantly compile them.
💼-your-project[phenix] 📂-src 📁-sass 📁-scripts 📂-dist 📁-css 📁-js