# Extra

## Some Extra Classes

### Utility Classes

- A few additional classes have been defined in `assets/css/less/utility.less` that may be useful.

### Font & Color

- Headings:
  - `.smaller` makes font size smaller
  - `.bigger` makes font weight bigger

  ####

       Bigger H4

- Font weights:
  - `.lighter` makes font weight light
  - `.bolder` makes font weight bold

  ###

       Lighter Text

- Text colors:
  - `.dark`
  - `.white`
  - `.red`
  - `.red2`
  - `.light-red`
  - `.blue`
  - `.light-blue`
  - `.green`
  - `.light-green`
  - `.orange`
  - `.orange2`
  - `.light-orange`
  - `.purple`
  - `.pink`
  - `.pink2`
  - `.brown`
  - `.grey`
  - `.light-grey`

       Blue Text

- - `.bigger-110`
  - `.bigger-120`
  - ...
  - `.bigger-290`
  - `.bigger-300`
  - ...
  - `.bigger-125`
  - `.bigger-175`
  - `.bigger-225`
  - `.bigger-275`

- - `.smaller-90`
  - `.smaller-80`
  - `...`
  - `.smaller-30`
  - `.smaller-20`
  - `...`
  - `.smaller-75`
  - `.smaller-25`

       Smaller Text

### Layout & Alignment

- - `.inline` applies `display: inline-block`
  - `.block` applies `display: block`
- - `.pos-rel`
  - `.position-relative`
  - `.pos-abs`
  - `.position-absolute`
  As an example `.inline` and `.position-relative` can be used to add a dropdown inside a `DIV` element without the need to define a new class:

         Show Menu

- - `.center`
  - `.align-center`
  - `.align-left`
  - `.align-right`
- - `.middle`
  - `.align-middle`
  - `.align-top`
  - `.align-bottom`
  which applies vertical alignment
- `.no-float`

### Box Model

- - `.no-padding`
  - `.no-padding-right`
  - `.no-padding-left`
  - `.no-padding-top`
  - `.no-padding-bottom`
- - `.no-margin`
  - `.no-margin-right`
  - `.no-margin-left`
  - `.no-margin-top`
  - `.no-margin-bottom`
- - `.no-border`
  - `.no-border-right`
  - `.no-border-left`
  - `.no-border-top`
  - `.no-border-bottom`
- - `.width-100`
  - `.width-90`
  - ...
  - `.width-20`
  - ...
  - `.width-75`
  - `.width-25`
  - ...
  - `.width-auto`
  - `.height-auto`

          ...

          ...

### Space & Separator

- Add `.spaced` and `.spaced2` to `ul` and `ol` lists for more spacing:

        ...
        ...

- Space classes to add vertical spacing:
  - `.space`
  - `.space-0`
  - `.space-2`
  - `.space-4`
  - ...
  - `.space-30`
  - `.space-32`

- Spacing that is only visible on specific widths:
  - `.vspace-2-xs`
  - `.vspace-4-xs`
  - ...
  - `.vspace-30-xs`
  - `.vspace-32-xs`
  - `.vspace-2-sm`
  - `.vspace-4-sm`
  - ...
  - `.vspace-2-md`
  - `.vspace-4-md`
  - ...
  - `.vspace-2-lg`
  - `.vspace-4-lg`
  - ...

- Horizontal line:
  - `.hr`
  - `.hr.hr-2`
  - `.hr.hr-4`
  - ...
  - `.hr.hr-30`
  - `.hr.hr-32`
  - ...
  - `.hr.hr-dotted`
  - `.hr.hr-double`

### Header

- `.header` with same text colors as above:

  ### Header Text

  ###

        Header Text

### Other

- `.action-buttons`:

- `.grid2` `.grid3` `.grid4` elements are less responsive and good for small pieces of content and have a border line separating them: