Selectors & Classes

Sure you’re getting hundreds of blocks to work with, but there may be cases when you want to build your own for special purposes. To maintain consistency, be sure to add the classes that are appropriate. Below are all the classes included with the Accelerate design set.

Phraseology

Within the classes, you will see a few examples that have an all-caps word within parentheses. This is to signify that there is a choice to be made. The following table shows the various choices that may be applied in certain circumstances.

Phrase Options Description
(COL-RANGE) Number between 1 and 12 Column range is a number out of 12 that specifies column width, i.e. using the number 3 will be 3/12 (25%) width. Because columns have horizontal margin of 1% (provided by the class ua__col), the actual width of the class will be the number divided by twelve minus 2%. For example, 3/12 = 25%, so the actual width will be 23%, plus the two 1% margins left and right.
(VIEWPORT) --d, --t, --m, --s Viewport is a notation preceded by two dashes (--) with a single letter. The letters have the following meanings:
  • d = desktop (page width)
  • t = tablet (992px)
  • m = medium (768px)
  • s = small (480px)
(STYLE) "S", followed by a number between 1 and 5 Accelerate blocks come pre-styled in five style sets, which you will style using the Accelerate template.

NOTE: All classes that come with Ukuwi Accelerate have the prefix "ua__" - that's "ua" plus TWO underscores.

General / Layout

These classes are used for layouts and responsive design.

Classes Description
ua__section No default styles
ua__col Adds a padding of 20px to a div used as a column, horizontal margins of 1%, and bottom margin of 15px.
ua__col(COL-RANGE) The column will have a specified width on all devices.
ua__col(COL-RANGE)(VIEWPORT) The column will have a specified width at a specified viewport width. (Used for responsive design.)
ua__hasCol This class is used on parent sections or divs that contain columns that will be responsively changed. It uses flexbox settings to align items horizontally, but allows wrapping so that when columns responsively change they will realign appropriately to take up multiple lines.
ua__hasCol(VIEWPORT) An alternative to ua__hasCol, this class is used on parent sections or divs that contain items that DO NOT have their own responsive settings, which should be stacked horizontally at larger screen sizes and vertically at the specified viewport width.
ua__hint General class for all basic, global hint styles. No default styles.
ua__heading General class for all basic, global heading styles. No default styles.
ua__excerpt General class for all basic, global excerpt styles. No default styles.
ua__text General class for all basic, global text styles. No default styles.
ua__button General class for all basic, global button styles. No default styles.
ua__textlink General class for all basic, global text link styles. No default styles.
ua__icon General class for all basic, global icon styles. No default styles.
ua__pushRight Default adds a small right margin of 15px.
ua__pushLeft Default adds a small left margin of 15px.
ua__feature No default styles. Used to add special styles for feature columns.

Styling

These classes are used for styled blocks and are set in the Accelerate template, which should be imported before anything else.
Classes Description
ua__section(STYLE) Default adds background color for section in (STYLE) set.
ua__hint(STYLE) Default adds color for hint in (STYLE) set.
ua__heading(STYLE) Default adds color for heading in (STYLE) set.
ua__excerpt(STYLE) Default adds color for excerpt in (STYLE) set.
ua__text(STYLE) Default adds color for text in (STYLE) set.
ua__button(STYLE) Default adds color, background color, hover color, and hover background color for primary button in (STYLE) set. Primary usage is with a link wrapper and text inside.
ua__buttonO(STYLE) Default adds color, border color, hover color, and hover border color for open button in (STYLE) set. Primary usage is with a link wrapper and text inside.
ua__textlink(STYLE) Default adds color and hover color for text link in (STYLE) set. Primary usage is with a link wrapper and text inside.
ua__icon(STYLE) Default adds color for icon in (STYLE) set.
ua__feature(STYLE) Default adds a background color for feature column in (STYLE) set.
The "--f" style suffix Added to the end of any of the above styles (except ua__feature(STYLE)) to style element within a feature column. For example, the column will use ua__feature(STYLE) and the heading will have class of ua__feature(STYLE)--f for specialized feature styling.
Accelerate your business

Take Charge of Your Content

Accelerate simplifies the design process so you can focus on creating fantastic content for your visitors. Fully responsive, with classes to change breakpoints.

© 2019 Ukuwi. All rights reserved.