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.min.css or 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.

Basebase.min.css and base.cssThis module contains normalized CSS styles and some basic features needed for the framework.
Typographytypography.min.css and typography.cssThis module contains typographical styles.
Gridgrid.min.css and grid.cssThis module contains styles for the grid.
Linkslinks.min.css and links.cssThis module contains styles for the links.
Buttonsbuttons.min.css and buttons.cssThis module contains styles for the buttons.
Form componentsfrom-components.min.css and from-components.cssThis module contains styles for the form input fields.
Tablestables.min.css and tables.cssThis module contains styles for the tables.
Utilitiesutilities.min.css and utilities.cssThis module contains utility styles.
Phiphi.min.css and phi.cssThis module contains all the features specified in the above modules, except dark mode.
Dark modephi-dark.min.css and phi-dark.cssThis 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 sass/_variable.scss file.

Modifying the variables

Base variable

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 $phi variable.

$phi: 1.618

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 $light and $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

Font families

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;
Transition variable

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.

Other variables

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.

> gulp

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 ./dist folder 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 ./dist folder in the root directory.