Unify Template FAQ

This document lists frequently asked questions about the Unify Template designed by HTMLStream, which is used in the bSup websites.

This document is intended for the bSup development team. If you are interested in Website solutions, please contact us through the Website Design Services page.

Q) What version of unify to use?

Answer: For each website, a different version of the Unify template might be used.

Unify v2.6.2 is used for https://bsuite365.com/
Unify v2.6.2 is used for https://bsuperiorsystem.com/

Q) How to change the font color?

Answer: Font colors in Unify template is defined by classes in unify-globals.css,such as

.g-color-white
.g-color-blue
.g-color-black

Q) How to set the font weight and size?

Answer: Font weights in Unify template are defined by classes in unify-globals.css,such as

.g-font-weight-600
.g-font-weight-500

Font sizes in Unify template are defined by classes in unify-globals.css,such as

g-font-size-16
g-font-size-18

For <p>, the font is also set by class “lead”. Removing class “lead” decreases the font size of a paragraph. For example <p class=“lead”>Sample Paragraph</p>

For headers like H1 and H2, the font size can be adjusted by classes like h2, h3, h3 etc. For example, <h2 class=“h4 text-uppercase”>BSUPERIOR</h2>

Q) How to set font case sensitivity?

Answer: Class “text-uppercase” makes a text uppercase like

<h2 class=“h4 text-uppercase”>BSUPERIOR</h2>

Q) How to make text normal or italic?

Answer: Use the following classes in unify-globals.css

.g-font-style-normal
.g-font-style-italic

Q) How to align text?

Answer: Class “text-left” and “text-center” align the text.

Q) How to set margins?

Answer: Margins in Unify template is defined by classes in unify-globals.css,such as

.g-mb-40 (bottom margin)
.g-mb-45 (bottom margin)
.g-mt-32 (top margin)

Q) How to set paddings?

Answer: Paddings in Unify template is defined by classes in unify-globals.css,such as

.g-py-100 (both top and bottom padding)
.g-py-105 (both top and bottom padding)
.g-pt-100 (padding top)
.g-pb-70 (padding bottom)

Q) How to set background colors?

Answer: Paddings in Unify template is defined by classes in unify-globals.css,such as

.g-bg-gray-light-v5
.g-bg-gray-dark-v1

Q) How to set icons?

Answer: The template is using the free version of Font Awesome. Please search for your font in https://fontawesome.com/.

Q) How to set Unify classes to a specific media? For example, how to set a margin for the desktop version of the website?

Answer: In the Unify CSS libraries, you can find classes specific to a media for example,

.g-brd-around–sm is for @media (min-width: 576px)
.g-brd-x–md is for @media (min-width: 768px)
.g-brd-around–lg is for @media (min-width: 992px)
.g-brd-around-none–xl is for @media (min-width: 1200px)

Q) What types of @media to use in your css?

Answer:

@media (min-width: 576px) {


}


@media (min-width: 768px) {


}


@media (min-width: 992px) {


}


@media (min-width: 1200px) {


}

Useful Links

Blog (coming soon)
Related Google Docs (access is required)
Website design services (coming soon).