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.

Install Node-JS

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...

Build Sass

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

Custom Theme

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

Build TypeScript

phenix uses webpack to compile the typescript files to valid JavaScript files and you can run the build script by command line 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

Custom Scripts

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