With #28450 (major forms rewrite) I changed the designed of the docs to get back to how we used to build this thing in v3 and earlier. v4's docs have always felt like a web app to me instead of an documentation site. Three columns of content, most of which stayed stickied was also a tad frustrating for me. More importantly though, I felt things were lacking polish, attention to detail, etc.
This PR will tackle the todos from @MartijnCuppens's comment and from @patrickhlauke's issue at #29047 (closed).
Changes
Here's some clarification and additional fixes (including todos) to follow-up:
-
Clarify and update padding changes to <ol>and<ul>in Reboot. I addedpadding-rightoriginally by mistake thinking I needed to reset that, but really I only neededpadding-leftredone. -
Add new Icons component to the migration docs (I created these myself to replace the Open Iconic ones we'd been using). More icons are planned to come, but for now it focuses on a handful for our components. -
Clarify migration docs for the changes in apperance and behavior for form components (namely checks and files). -
Add note to migration docs about table changes. -
Fix remaining tables that were lacking .table. -
Improve icons component docs with code snippets, design decisions, and usage guidelines. -
Look intobox-shadows support on icons with custom form controls -
After #29029 merges, add search form to the docs homepage -
Consider moving sidebar icon to ::beforeper https://github.com/twbs/bootstrap/pull/29029#issuecomment-511722549 Done in @XhmikosR's PR -
Fix color contrast in navbar -
Update icons one more time—add some new ones, rename the class from .booticonto.bibecause it's shorter and comes with fewer jokes, and remove unused styles in docs CSS. -
Make navbar, subnav, and sidebar work on mobile -
Move the icons to includes -
Move icons outside of content folder -
Stop inlining the SVGs; we have http/2 so it should be pretty fast anyway -
Verify if we need to add roleorfocusable="false" -
Move the nav changes to a separate PR
Explaining some other decisions...
Tables
Tables saw a redesign to simplify their CSS and overall appearance. I also took the opportunity to remove several lines of custom docs CSS that re-applied the Bootstrap table styles to Markdown tables. Doing so meant rewriting the tables to allow explicit classes, which I was fine to do given we're inconsistent in our Markdown/HTML tables usage.
See https://github.com/twbs/bootstrap/pull/28450/files#diff-e923be674b22e7e32a5d742c5a05b3ae, https://github.com/twbs/bootstrap/pull/28450/commits/c8d1a0edb5da7bf4c4e4fbe714ec9500e5774c99, and https://github.com/twbs/bootstrap/pull/28450/commits/f9f9e45ec8af2344786853d041f2a8b9bbeb5d20.
Larger form controls
This was intentional, and really only applies to the checks, radios, and switches. They're larger than the default and inconsistently styled ones each OS sees (macOS ones are quite small) and scale now to font-size or explicit dimension changes. I'll look into these not working in IE, but I thought my early tests in there showed no problems.
Icons
Still working on more here, but again, these are custom icons I've made to replace the ones we were using from external libraries. Goal is to have a toolkit focused set at launch to support our components. Maybe more icons can be added after that. In the future, this could be it's own project I suppose.
Docs design changes
While the intro to this PR covers much of it, the changes here are meant to simplify our docs and accelerate movement around the docs pages. The sidebar has been overhauled to always have all links available to each docs page vs only the ones in the group you're in (e.g., Components). Stylistically, I'm working to simplify the main navbar for usability and improve the page content design with fewer custom styles.
Preview: https://deploy-preview-29048--twbs-bootstrap.netlify.com/
@twbs/css-review Keep the questions and feedback coming.