Office HTML and CSS Style Guide

CORE uses Bootstrap for Office pages. See [Bootstrap Tips] for some basic pointers.

Pages shall include the standard header and footer. The easiest way to do this is by by subclassing FanniePage and setting the $themed property to true. Other approaches may work at developer discretion. Exceptions to this rule will be maintained here and fairly limited.

• The reprint receipt does not include a menu or footer. Justification: this is frequently printed.
• HTML report output does not include a menu or footer. Justification: javascript for sorting results doesn't play nice with bootstrap. This exception is currently being debated and may be removed in a future release.
• Pages displayed in a lightbox or overlay on top of another page may omit menus and footers.
• Pages that have not yet been updated to support Bootstrap may use an old-style left-hand menu. Updating these pages is highly encouraged.

HTML should not use inline styles (i.e., a style attribute on a tag). CSS should be applied via stylesheets. Use CSS classes defined in:

• Bootstrap
• fannie/src/css/core.css
• fannie/src/css/configurable.php CORE reserves the right to put into place more formal processes for updating project stylesheets in the interest of consistency.

Form <input>s and <select>s should use the Bootstrap CSS class form-control for standard appearance. If screen space is constrained, the input-sm CSS class may be used to decrease the size of input elements. Form buttons should use the <button> tag with CSS classes btn and btn-default.