If you wish you can use the parts of the framework, if you want to utilize the grid but not interested in other features, then you need to import
grid.css. Similarly, the whole framework is modularized, so based on the requirement, you can pull up the CSS file you need. Below table represents what is included in the CSS files which are provided by this framework.
|Base||This module contains normalized CSS styles and some basic features needed for the framework.|
|Typography||This module contains typographical styles.|
|Grid||This module contains styles for the grid.|
|Links||This module contains styles for the links.|
|Buttons||This module contains styles for the buttons.|
|Form components||This module contains styles for the form input fields.|
|Tables||This module contains styles for the tables.|
|Utilities||This module contains utility styles.|
|Phi||This module contains all the features specified in the above modules, except dark mode.|
|Dark mode||This module is not included in the main file, but if you want to enable the dark mode, you can do it by pulling this file in.|
If you want to do more customizations to the framework, such as changing the color codes, changing the font families, changing the phi values then you can also do the changes to other sass files if you are confident about it. Follow the following steps to customize the framework.
Clone the repo
The very first step to customize the framework is to clone the repository by executing the following command in your terminal.
> git clone https://github.com/phi-css/phi-css.git
Open the cloned repository in your preferred code editor. Most of the modification will reside inside the
Modifying the variables
This is the most import variable among all the other variables. The whole framework is based on this single variable.
When you change the
$phi variable make sure you have done some calculations before touching this variable, because this value is used everywhere from generating color palette (based on standard colors), typography, grid, white-spacing, tables, utilities, etc. To know how this value affects the grid, palette, and other few features visit this detailed explanation on how this framework was created and utilizes this
Following are the standard colors that are used in this framework:
$dark: #242831; $light: #F8F8FF; $accent: #7A65FB; $info: #3EAEFF; $success: #00DD8D; $error: #FF6666; $warning: #FF9559; $grey: #B5B5B5;
Except for variables
$dark, tint and shades will be created for each standard colors. So if you modify these colors, tints and shades will be generated as per the specified color palette. Visit this page to know the colors that are used in this framework
Following fonts variables are set which are used within the framework, if you decide to use some different font families in your webpages, you can do the modification to these variables.
$sansSerifFont: "Poppins", Arial, Helvetica, sans-serif; $serifFont: "Playfair Display", Times, serif; $monospaceFont: "Fira Code", Courier, monospace;
This variable is generally used for state transition for links, buttons. etc.
$transition: 0.3s ease-in-out;
By default, it has value
0.3s ease-in-out, you can do the modification as per your requirement.
There are other variables available as well, but those are dependent on the above variables. These variables are computed based on the above variable so, understand how the calculations are performed before you modify these variables. Want to know more about how these variables are computed? Visit this page.
Run gulp script
After customizing the variables as per your requirement, make sure you run this command which will compose standard as well as minified CSS files from the SASS.
This command will execute the gulp script, which will create the distributable version of the framework. This gulp script executes the following steps to create a distribution:
- Clean up the existing
./distfolder in the root directory.
- Convert SASS to vanilla CSS.
- Auto-prefix the CSS properties for maintaining the consistency across different browsers.
- Minify the autoprfixed CSS files.
- After minifying the files, Save all the CSS files (both standard and minified) inside the
./distfolder in the root directory.