Comprehensive Guide on Using Bootstrap for Accessible Front-End Development

Slide Note

Bootstrap is a free and open-source CSS framework designed for responsive and mobile-first front-end web development, making it faster and easier. Learn about using the Yale UI Component Library, which offers accessible and Yale-branded components based on Bootstrap. Follow the installation steps and Bootstrap documentation to start creating accessible, responsive designs with Bootstrap.

caliban Follow

Uploaded on Jul 12, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Using Bootstrap to Make Accessible Front-Ends Sarah Lynch, Accessibility Engineer

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)

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/

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.

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.

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.

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/

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

Bootstraps 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).

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]

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.