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.
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 sectionConstants.less
includes all static constants to be shared (sbac constants can be used)
- SBAC styleguide
variables.less
githubcolors.less
github
- SBAC styleguide
- Flex cheatsheet
- More flex css-tricks
All pages must have a container class. Content needs to align with the navbar content. Page app must include a page container.
<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>
<div className="container {page}-container">
<div className="section section-light" style={style}>
<p>Test Body...</p>
</div>
</div>
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>