This framework also has some CSS variables (a.k.a CSS custom properties). If you have some requirement to utilize the existing values (To maintain consistency) and have trouble remembering all of them, so not worry, the framework will provide the CSS variables out of the box, you don't need to create any additional.
Following are the variables that are exported it contains colors, font-families and phi variables:
These variables are generally used for applying the margin and padding for an element.
--phi: 1.618; --rem-mul-phi: 1rem * $phi; --rem-div-phi: 1rem / $phi;Copy
Font family variables
By default, it uses "Playfair display" for the serif font, "Poppins" for the sans-serif font and "Fira code" for the monospace font, only if you import it using the google fonts or by hosting the font families on the server itself
--serif-font: "Playfair Display", Times, serif; --sans-serif-font: "Poppins", Arial, Helvetica, sans-serif; --monospace-font: "Fira Code", Courier, monospace;Copy
These are the colors which are being used in the framework for elements link, button, font color.
--dark: #242831; --light: #F8F8FF; --accent: #7A65FB; --accent-tint: #CCC4FD; --accent-shade: #2f2760; --info: #3EAEFF; --info-tint: #B5E0FF; --info-shade: #184261; --success: #00DD8D; --success-tint: #9EF2D3; --success-shade: #005436; --error: #FF6666; --error-tint: #FFC5C5; --error-shade: #612727; --warning: #FF9559; --warning-tint: #FFD7C0; --warning-shade: #613922; --grey: #B5B5B5; --grey-tint: #E3E3E3; --grey-shade: #454545;Copy
Full width containers
You might have faced this situation while you are working in the limited width container let say which has
max-width: 991px and you might have to create a full-width banner or a full-width hero image. You might have followed a layout in which the banner or the hero image is placed outside the container.
Well using this framework, you can avoid it entirely, you don't have to break the flow inside the container, you can include the banner or the image inside the container by adding the following class.
.phi-full-width will take up width of viewport width i.e.
Checkout this example to see how it looks like.
These can be used to set display property for any element in the webpage.
This doesn't contain the
display: flex, check below section to know how to use flex layouts in your webpage.
The framework provides flex utilities, for applying flexbox configuration by adding the following classes so that you don't have to write any additional CSS for flex layouts. These are self-explanatory if you are familiar with the flexbox layout.
Since the grid is based on the flexbox so these classes may come in handy while adjusting the elements as per requirement.