Site Styles¶

This project utilizes bootstrap and the sbac-global style overrides for buttons, typography, form-controls, and custom button group. However, don't use the bootstrap grid system instead use flex when you can.

Less¶

All project specific less files are included in Assets/Styles

Custom.less includes any overrides to the imported bootstrap and/or sbac-global. Includes shared custom less for the project that can be shared.
Layout.less includes custom layout classes such as container and section
Constants.less includes all static constants to be shared (sbac constants can be used)

SBAC Global style¶

SBAC styleguide
variables.less github
colors.less github

Useful Links¶

Layout¶

All pages must have a container class. Content needs to align with the navbar content. Page app must include a page container.

With Page Title¶

<div className="container {page}-container">
    <h2 className="page-title">Page Title</h2>
    <div className="section section-light" style={style}>
      <p>Test Body...</p>
    </div>
</div>

With No Page Title¶

<div className="container {page}-container">
    <div className="section section-light" style={style}>
      <p>Test Body...</p>
    </div>
</div>

With Full Body Styles¶

Helpful for Sample Items Website full page background

<div className="page-container {page}-page">
    <div className="container {page}-container">
        <div className="container section-light" style={style}>
        <p>Test Body...</p>
        </div>
    </div>
</div>