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: