Learn how to work around with Phenix Sass source code and control each piece of the framework build, customize, remove, or overwrite it.
phenix uses node-sass to build the CSS files which uses Libsass which is built 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.
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
📁-components
📁-forms
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 it and is ready for your custom CSS.
💼-your-project[phenix]
📂-src/sass
📄phenix.scss
📄phenix-rtl.scss
📄_customize.scss⠀|| Custom CSS
📁-assets
📁-grid
📁-integration
📁-utilities
📁-components
📁-forms
after learning about phenix sass and how to build it and what the main files represent it’s time to learn about phenix modules that are imported into the main files [ phenix.scss, phenix-rtl.scss ] just as assets modules and grid system and each module will be explained in its document when you need to use it.
assets directory holds a collection of functions and mixin and resets that build up everything else in PDS, we have the _reset file which is built on Normalize.css extended and modified for phenix,
and the _selectors file you will find a collection of useful sass selectors to extend and use in your custom CSS you can learn more about these selectors and how to use them in the SASS Selectors document.
💼-your-project[phenix]
📂-src/sass
📄...
📁-assets
📄_reset.scss
📄_selectors.scss
📄_mixin.scss
📁-mixin
📁-...
mixin directory inside src/sass/_assets contains a collection of helpers and functions like responsive breakpoints, logical properties utilities PX to REM converter, and you can learn more about these mixin & functions in the SASS Mixin section.
💼-your-project[phenix]
📂-src/sass
📄...
📁-assets
📁-mixin
📄_reset.scss
📄_selectors.scss
📄_functions.scss
📁-...