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.
| Module | File | Feature |
|---|---|---|
| Base | base.min.css and base.css | This module contains normalized CSS styles and some basic features needed for the framework. |
| Typography | typography.min.css and typography.css | This module contains typographical styles. |
| Grid | grid.min.css and grid.css | This module contains styles for the grid. |
| Links | links.min.css and links.css | This module contains styles for the links. |
| Buttons | buttons.min.css and buttons.css | This module contains styles for the buttons. |
| Form components | from-components.min.css and from-components.css | This module contains styles for the form input fields. |
| Tables | tables.min.css and tables.css | This module contains styles for the tables. |
| Utilities | utilities.min.css and utilities.css | This module contains utility styles. |
| Phi | phi.min.css and phi.css | This module contains all the features specified in the above modules, except dark mode. |
| Dark mode | phi-dark.min.css and phi-dark.css | 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.gitOpen 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.618Colors
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.
> gulpThis 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.