Fonts

Hellenic Wide is used for the main page heading (in the navigation) and for the home page headings.

Futura PT is used for navigation and standard content headings throughout.

Noto Serif is used for all other body text, etc.

Headings

Heading styles, per bootstrap will be applied to the <hN> tags as well as any other tag adorned with a class by that name. E.g. <span class="h2">Heading 2</span>.

heading 1

Per web semantics <h1> shouldn't be used outside of the standard page headers.

heading 2

Unless locally over-ridden the text within both <h1> and <h2> will be transformed to upper case regardless of the case in which it's typed out with.

heading 3

heading 4

heading 5
heading 6

Node page headings can have sub-headings by inserting a "-" to seperate main from sub

Main Headingsub heading

Body Text

Standard paragraph text <p> where ever it's found.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae cursus odio, eu convallis purus. Nullam nisl neque, cursus eget risus in, malesuada aliquet risus. Nullam eleifend, lectus eu viverra sollicitudin, nulla purus vestibulum augue, at tincidunt eros neque at tortor. Nunc nulla nulla, rutrum ut turpis quis, sollicitudin elementum nibh. In eu rutrum ante. Fusce nibh nisl, varius a diam sit amet, molestie malesuada elit. Quisque cursus dui eu placerat ultrices. Donec lorem leo, viverra id neque ac, facilisis fermentum arcu. Cras tincidunt et elit id tincidunt. Ut vel euismod mi. Nunc sit amet euismod enim.

Other Elements

a.btn.btn-default

default button

 

ul.two-colum

Views can output results in an HTML List with the class two-column set to have the results displayed in an adaptive grid two elements wide.  If teasers are placed in the list then their display is updated to inline-block (so they can properly wrap) and text is centered.  For an example see our team.

  • Element #1
  • Element #2
  • Element #3
  • Element #4
  • Element #5

Notes

Within teasers all headings are downsized using em sizing.

additional mixins

_bgimg($img,$sz:cover,$pos_x:center,$pos_y:center)

Can be used to attach a background image to an element and properly setup the vendor prefixes for background-size.

_devadaptiveborders()

Can be used when working on adaptive layout to indicate what breakpoint you're in.  At each major breakpoint a different colored border will be used and the breakpoint id (e.g. lg, md, sm, xs) will be displayed above the element.