-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Fatima Gomez
committed
Mar 24, 2023
1 parent
e8356a5
commit 8252d5c
Showing
1 changed file
with
25 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,39 @@ | ||
| # Bootstrap | ||
|
|
||
| We use bootstrap in all of our apps to add consistent styles and functionality using pre-defined classes. This document is intended to primarily point to Bootstrap's excellent documentation on lesser-known bootstrap classes and functionality. | ||
|
|
||
| ## Versioning | ||
| We currently use [Bootstrap 4.6](https://getbootstrap.com/docs/4.6/getting-started/introduction/). Though Bootstrap 5 is around, it does not provide support for Internet Explorer, which we still intend to support as it continues to be an important tool for some clients. | ||
|
|
||
| ## Guiding Principles & Tips | ||
| * **Prioritize Grid over Flexbox**: Aim to only use `d-flex` and related classes in situations where you have a variable number of child elements, to space them evenly | ||
| * **Roles, not functionality**: Each Bootstrap component is intended for a specific kind of role, but there are a variety of ways to accomplish similar functionality using different classes and components. This also helps keep code DRY and accessible, as many Bootstrap components | ||
| * **Accessibility** Using Bootstrap appropriately helps keep code DRY and accessible. Keep in mind that many component subsections, particularly the ones that help structure a page or provide site navigation, contain `Accessibility` sections with tips on how to utilize [ARIA roles and labels](https://www.w3.org/WAI/ARIA/apg/) properly | ||
| * **Accessibility** The Components subsections of the Bootstrap 4.6 docs all contain a `Sass > Variables` section so you know how to override styles. Many component subsections, particularly the ones that help structure a page or provide site navigation, also contain `Accessibility` sections with tips on how to utilize [ARIA roles and labels](https://www.w3.org/WAI/ARIA/apg/) properly | ||
|
|
||
| ## Reading the Docs | ||
| The Bootstrap docs are very well-organized and thorough, but to make sure you're getting full use of them, here's an overview of the sections and when to look in each one: | ||
|
|
||
| 1. **Getting started**: downloading Bootstrap; discussion on key issues like accessibility, browser support, and Webpack; and understanding how Bootstrap works | ||
| 2. **Customize**: overriding default styles | ||
| 3. **Layout**: understanding how to use Bootstrap classes to lay out a page. Do note: we do not use the CSS Grid, but primarily use the [standard grid](https://getbootstrap.com/docs/5.1/layout/grid/) to structure our sites | ||
| 4. **Content**: fonts, tables, and figures | ||
| 5. **Forms**: forms, inputs, and validation classes | ||
| 6. **Components**: on-the-page items like buttons, cards, navs, and progress bars | ||
| 7. **Helpers**: a few classes that add desired functionality and behavior | ||
| 8. **Utilities**: closer looks at important across-the-board tools like colors and opacity; flexbox; and sizing | ||
| 9. **Extend**: build your own styling tool based on Bootstrap | ||
| 10. **About**: licensing, translations, etc. | ||
| 2. **Layout**: understanding how to use Bootstrap classes and [the grid](https://getbootstrap.com/docs/4.6/layout/grid/) to lay out a page. | ||
| 3. **Content**: fonts, tables, and code | ||
| 4. **Components**: on-the-page items like buttons, cards, navs, and progress bars | ||
| 5. **Utilities**: closer looks at important across-the-board tools like colors, spacing, and sizing, as well as funtionality like stretched links | ||
| 6. **Extend**: build your own styling tool based on Bootstrap | ||
| 7. **Migration**: info about switching to Bootstrap 5 | ||
| 8. **About**: licensing, translations, etc. | ||
|
|
||
| ### Hidden gem components | ||
| 1. [Badges on buttons](https://getbootstrap.com/docs/5.1/components/badge/#buttons) and [positioned badges](https://getbootstrap.com/docs/5.1/components/badge/#positioned) | ||
| 2. [Breadcrumb dividers](https://getbootstrap.com/docs/5.1/components/breadcrumb/#dividers) are `/` characters by default, but you can use any character or image as a divider by setting the inline style && updating a single Sass variable | ||
| 3. [Button groups](https://getbootstrap.com/docs/5.1/components/button-group/) are a major section in the `Components` part of the documentation, but we don't generally take advantage of these as a way to change up our form layouts | ||
| 4. [Card headers and footers](https://getbootstrap.com/docs/5.1/components/card/#header-and-footer) and [card navigation](https://getbootstrap.com/docs/5.1/components/card/#navigation) could be used as a way of making more complex jumbotrons or announcements | ||
| 5. [Card borders](https://getbootstrap.com/docs/5.1/components/card/#border) are a visually distinctive way of categorizing large groups of cards, similarly to the [CPS SSCE dashboard Partner directory](https://cps-ssce-dashboard-staging.herokuapp.com/community-partners/partner-list/) | ||
| 6. [Split dropdown buttons](https://getbootstrap.com/docs/5.1/components/dropdowns/#split-button) a way of including primary functionality of the main part of a button while still providing additional options in an attached dropdown | ||
| 7. [Dropup](https://getbootstrap.com/docs/5.1/components/dropdowns/#dropup), [dropleft](https://getbootstrap.com/docs/5.1/components/dropdowns/#dropleft), and [dropright](https://getbootstrap.com/docs/5.1/components/dropdowns/#dropright) | ||
| 8. [Dropdown/up/right/left content](https://getbootstrap.com/docs/5.1/components/dropdowns/#menu-content) can include anything from headers and non-anchored info text to full-on forms | ||
| 9. [List groups](https://getbootstrap.com/docs/5.1/components/list-group/) as separate from [accordion components](https://getbootstrap.com/docs/5.1/components/accordion/) | ||
| 10. [Modals](https://getbootstrap.com/docs/5.1/components/modal/) are quite fully fleshed out in their functionality, with options to control placement, how to close out of them, and pre-filling modal form information | ||
| 11. [Navs](https://getbootstrap.com/docs/5.1/components/navs-tabs/) are helpful if you want to incorporate navbar-like functionality somewhere other than the header of your site | ||
| 12. [Offcanvas](https://getbootstrap.com/docs/5.1/components/offcanvas/) refers to hidden sidebars that hold content similarly to a modal; a classic use case is a shopping cart | ||
| 13. [Placeholders](https://getbootstrap.com/docs/5.1/components/placeholders/) might be an interesting substitute for our current use of lorem text and placeholder text for things like Bootstrap cards and accordions. Placeholders retain colors and other styles to give a more accurate sense of what content will look like, and make use of a loading cursor on hover | ||
| 14. [Scrollspy](https://getbootstrap.com/docs/5.1/components/scrollspy/#example-with-nested-nav) allows you to highlight the nav item that is currently in the viewport. Very handy for helping users keep track of where they are when on a page with lots of well-organized text | ||
| 1. [Badges on buttons](https://getbootstrap.com/docs/4.6/components/badge/#example) | ||
| 2. [Breadcrumb dividers](https://getbootstrap.com/docs/4.6/components/breadcrumb/#changing-the-separator) are `/` characters by default, but you can use any character or image as a divider by setting the inline style && updating a single Sass variable | ||
| 3. [Button groups](https://getbootstrap.com/docs/4.6/components/button-group/) are a major section in the `Components` part of the documentation, but we don't generally take advantage of these as a way to change up our form layouts | ||
| 4. [Card headers and footers](https://getbootstrap.com/docs/4.6/components/card/#header-and-footer) could be used as a way of adding metadata for the info on a card | ||
| 5. [Split dropdown buttons](https://getbootstrap.com/docs/4.6/components/dropdowns/#split-button) a way of including primary functionality of the main part of a button while still providing additional options in an attached dropdown | ||
| 6. [Dropup, -left, and -right](https://getbootstrap.com/docs/4.6/components/dropdowns/#directions) | ||
| 7. [Dropdown content](https://getbootstrap.com/docs/4.6/components/dropdowns/#menu-content) can include anything from headers and non-anchored info text to full-on forms | ||
| 8. [Modals](https://getbootstrap.com/docs/4.6/components/modal/) are quite fully fleshed out in their functionality, with options to control placement, how to close out of them, and handling transitions | ||
| 9. [Navs](https://getbootstrap.com/docs/4.6/components/navs/) are helpful if you want to incorporate navbar-like functionality somewhere other than the header of your site | ||
| 10. [Scrollspy](https://getbootstrap.com/docs/4.6/components/scrollspy/) allows you to highlight the nav item that is currently in the viewport. Very handy for helping users keep track of where they are when on a page with lots of well-organized text | ||
|
|
||
| ### Helpful Helpers | ||
| 1. [Colored links](https://getbootstrap.com/docs/5.1/helpers/colored-links/) | ||
| 2. [Ratio classes](https://getbootstrap.com/docs/5.1/helpers/ratio/) to maintain certain aspect ratios regardless of screen size | ||
| 3. [Flexbox stacks](https://getbootstrap.com/docs/5.1/helpers/stacks/) allow you to quickly organize flex children vertically or horizontally | ||
| 4. [Visually hidden](https://getbootstrap.com/docs/5.1/helpers/visually-hidden/) to make certain tools accessible for assistive tech only | ||
| 5. [Text truncation](https://getbootstrap.com/docs/5.1/helpers/text-truncation/) | ||
| 6. [Vertical rule](https://getbootstrap.com/docs/5.1/helpers/vertical-rule/), this class styles a div exactly like an hr element, but vertical | ||
| 1. [Visually hidden](https://getbootstrap.com/docs/4.6/utilities/visibility/) to make certain tools accessible for assistive tech only | ||
| 2. [Text overflow and truncation](https://getbootstrap.com/docs/4.6/utilities/text/#text-wrapping-and-overflow) |