Variable exports

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:

• 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

• Color variables

  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.

<div class="phi-full-width"></div>

Checkout this example to see how it looks like.

Display utilities

These can be used to set display property for any element in the webpage.

• .block
• .inline-block
• .hide

This doesn't contain the display: flex, check below section to know how to use flex layouts in your webpage.

Flex utilities

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.

• .flex
• .flex-column
• .flex-row-reverse
• .flex-column-reverse
• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-space-evenly
• .justify-content-space-around
• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .flex-wrap
• .flex-wrap-reverse