![More Utilities: Position, Display,
Spacing
• https://codepen.io/YaleA11y/pen/RwNyGKb
• Position/Display. Position classes: fixed-top, fixed-bottom, sticky-top
Warning: sticky-top is not well supported (check caniuse.com). Make sure the DOM is ordered to
match the visual order
• Basic display: mimics CSS
d-BP-TYP (where BP is sm, md, lg, xl and TYP is none, inline, inline-block, block, table, table-row,
table-cell, flex, inline-flex)
** don’t use class=“d-table”! If you’re creating a table, use <table>!
• Inline elements lose ability to specify a width and height, but inline-block you can specify width
and height
• Print display: d-print-[none, inline, inline-block, block, table, table-row, table-cell, flex-inline-flex]
you can combine the types of display, ex: d-none d-print-block (nothing display, but if printed, it
displays as a block)
• Spacing: Margin & Padding
{property}{sides}-{breakpoint}-{size}
property: m (margin) or p (padding)
sides: t, r, b, l, x, y
breakpoint: sm, md, lg, xl
size: 0, 1, 2, 3, 4, 5, auto](https://image.slidesharecdn.com/usingbootstraptomakeaccessiblefront-ends2-250729232244-738f1e82/85/Using-Bootstrap-to-Make-Accessible-Front-Ends-2-pptx-8-320.jpg)
![Containers, Rows, and Columns
• https://codepen.io/YaleA11y/pen/RwNyGKb
• Containers can be responsive fixed-width that snap to certain breakpoints or
completely fluid containers that take up 100% of the width
• These grid containers give a little padding (“gutters”) on each side
• Structure: containers (can be used with or without the grid), row/columns inside
containers
• Adjusts to breakpoints: xs, sm, md, lg, xl
Bootstrap breakpoints: 0, 576px 768px 992px 1200px
Our breakpoints: 0, 500px, 740px, 980px, 1220px (based on yale.edu)
• Alignment: https://codepen.io/YaleA11y/pen/vYEjqWj
Vertical alignment: use in rows (align-items- [start, center, end]). Works on
nested cols
Individual alignment: use in cols (align-self- [start, center, end])
Horizontal alignment: use in rows. Need col width. Must specify how many
columns these take up. Justify-content- [start, center, end, around, between]](https://image.slidesharecdn.com/usingbootstraptomakeaccessiblefront-ends2-250729232244-738f1e82/85/Using-Bootstrap-to-Make-Accessible-Front-Ends-2-pptx-10-320.jpg)
Using Bootstrap to Make Accessible Front-Ends(2).pptx
- 1. Using Bootstrap to Make Accessible Front-Ends Sarah Lynch, Accessibility Engineer
- 2. What is Bootstrap? • https://getbootstrap.com/ • Free and open-source CSS framework directed at responsive, mobile- first front-end web development. • Makes front-end web development faster and easier. • Includes design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many others • Find examples at https://getbootstrap.com/docs/4.4/examples/ • Compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
- 3. The Yale UI Component Library • https://yale-a11y.gitlab.io/ui-component-library/ • An accessible, Yale-branded version of Bootstrap. We don’t implement all of Bootstrap. Some components have our own styles (such as Tables). • Created to look like yale.edu • Dependencies: Bootstrap, Ally.js (adds a focus style to the parent element), Focus-within (adds focus outline to all keyboard interactive elements), Sass, Gulp • Because Bootstrap depends on jQuery and Popper.js, so do we – must include those in your project if using any of the functional components that we provide See the components that require JS at https://getbootstrap.com/docs/4.4/getting-started/introduction/
- 4. Installing the Yale UI Component Library • Download the compiled assets OR install the compiled assets via npm with npm install yale-ui-component-library • Include the CSS and JS as part of your project. (Note: You’ll have to also include jQuery and Popper.js) • The UI Component Library uses the Mallory and YaleNew fonts, with Verdana being the fallback font for Mallory and Georgia being the fallback font for YaleNew. Instructions for including these are on the documentation site. Mallory is the standard sans-serif font for Yale websites and is used mostly for body text. YaleNew is the official serif font for Yale websites and is used mostly for headings.
- 5. Getting Started • Follow the Bootstrap docs https://getbootstrap.com/docs/4.0/getting-started/introduction/ • Once you have included the CSS and JS in your project, you can begin to create an accessible, responsive, mobile-first design. • Add the responsive viewport meta tag to your <head>: <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no"> Do not set a minimum or maximum value — these can disable the user’s ability to zoom the viewport, potentially causing accessibility issues.
- 6. Reboot.css • Bootstrap builds upon Normalize.css to ensure styles are consistent across different browsers and platforms. • Bootstrap uses rems. 1 rem=16px. • Bootstrap uses border-box (this takes padding and borders into account). content-box vs border-box: https://codepen.io/YaleA11y/pen/ZEYRoBK • In CSS vertical margins can collapse and that means it is confusing to calculate the proper spacing in between something like a heading and a paragraph. To avoid this, Bootstrap only adds margin at the bottom of an element (avoids the margin-top property). Easier to remember and easier to update.
- 7. Content & Utilities • https://codepen.io/YaleA11y/pen/qBEoorx • Text: alignment, flow, styles, capitalization, lists, blockquote • Borders, Colors: text, background • Figures, Images: thumbnails, fluid, alignment • Float and center: float-left, float-right, or to center: If it is an inline element, center with text-center on the parent element. If it is a block, center with mx-auto + a set width. • Screen readers: Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Ex: <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a> • <a href=“” class=“stretched-link”>Stretched Link</a> Makes parent container clickable. Good for cards, cols, or media objects (but only use with one link). Always follow the documentation! https://getbootstrap.com/docs/4.4/utilities/stretched-link/
- 8. More Utilities: Position, Display, Spacing • https://codepen.io/YaleA11y/pen/RwNyGKb • Position/Display. Position classes: fixed-top, fixed-bottom, sticky-top Warning: sticky-top is not well supported (check caniuse.com). Make sure the DOM is ordered to match the visual order • Basic display: mimics CSS d-BP-TYP (where BP is sm, md, lg, xl and TYP is none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex) ** don’t use class=“d-table”! If you’re creating a table, use <table>! • Inline elements lose ability to specify a width and height, but inline-block you can specify width and height • Print display: d-print-[none, inline, inline-block, block, table, table-row, table-cell, flex-inline-flex] you can combine the types of display, ex: d-none d-print-block (nothing display, but if printed, it displays as a block) • Spacing: Margin & Padding {property}{sides}-{breakpoint}-{size} property: m (margin) or p (padding) sides: t, r, b, l, x, y breakpoint: sm, md, lg, xl size: 0, 1, 2, 3, 4, 5, auto
- 9. Bootstrap’s Grid System • https://getbootstrap.com/docs/4.0/layout/grid/ • Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. • Check out the “Flexbugs” list: https://github.com/philipwalton/flexbugs and “known issues” on Can I use? https://caniuse.com/#feat=flexbox • In a grid layout, content must be placed within columns and only columns may be immediate children of rows. • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large. • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
- 10. Containers, Rows, and Columns • https://codepen.io/YaleA11y/pen/RwNyGKb • Containers can be responsive fixed-width that snap to certain breakpoints or completely fluid containers that take up 100% of the width • These grid containers give a little padding (“gutters”) on each side • Structure: containers (can be used with or without the grid), row/columns inside containers • Adjusts to breakpoints: xs, sm, md, lg, xl Bootstrap breakpoints: 0, 576px 768px 992px 1200px Our breakpoints: 0, 500px, 740px, 980px, 1220px (based on yale.edu) • Alignment: https://codepen.io/YaleA11y/pen/vYEjqWj Vertical alignment: use in rows (align-items- [start, center, end]). Works on nested cols Individual alignment: use in cols (align-self- [start, center, end]) Horizontal alignment: use in rows. Need col width. Must specify how many columns these take up. Justify-content- [start, center, end, around, between]
- 11. Flexbox Container Options • https://codepen.io/YaleA11y/pen/bGNMXWp • d-(BP)-(inline)-flex: Flex items are blocks by default so if you want to make it inline, you must add the inline keyword • d-flex on container and inside elements can then be controlled by flex classes • Direction: flex-(BP)-(DIR) where DIR is either row or column • Wrap: flex-wrap or flex-nowrap (nowrap is default) • Check out the full documentation on flexbox options: https://getbootstrap.com/docs/4.4/utilities/flex/ • Warning: do not use the order property on flex items or the reverse property of flex-direction. This will cause a disconnect between the visual order and the DOM order. • Warning: do not use the flex property on <table> elements. Overrides its native semantics, rendering it useless to a screen reader.
- 12. Questions? Comments? • You can always email accessibility@yale.edu