SiteStyles.md

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

• SBAC styleguide
• Flex cheatsheet
• More flex css-tricks

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>