v5 Docs followup #29048
v5 Docs followup #29048
Conversation
XhmikosR
force-pushed
the
docs-followup
branch
2 times, most recently
from
cf050a8
to
1813707
Compare
|
@mdo how about moving all icons to a new folder in partials? This way we could automate their optimization etc. |
I'm unsure how we'll package these up just yet, but I am obvi in favor of scripts to automate optimization, property order, etc. I don't want them optimized for Hugo btw, but I do want them optimized for easy use in HTML. |
|
@XhmikosR Just pushed up changes to add all the SVGs (sorry, I know it's the wrong directory) and embed them that way. I'm unsure how Hugo handles things I can loop over from a directory, so I need to revisit that. Any pointers would be great, I'd love to better understand how to use Hugo :). Additionally I'm hoping to add some scripts to handle the SVGs better. |
|
I'm gonna rebase and clean the branch and see what I can do later. |
|
Is the subnav supposed to be shown in the homepage and everywhere? I will look into automating the icons inclusion later. |
|
@mdo check out the last patch. Don't merge this yet, I really want to make sure the nav changes are OK this time. Ideally they should be split in a separate PR and the same for the iconic removal. |
|
Also, the folder you have the icons currently copies the SVGs in the dist folder which I believe is redundant. Also, maybe we shouldn't inline the icons? We have http/2 so it should be pretty fast anyway. |
|
And I'm unsure if we should add |
|
So, @mdo how about we split the nav changes to a separate PR and most importantly for this PR, move the icons folder somewhere outside of content? |
| @@ -10,6 +10,21 @@ toc: true | |||
|
|
|||
| Meet the Bootstrap icons, a limited set of icons designed first and foremost to work with Bootstrap's components. From form controls to navigation, these icons are the perfect complement to our toolkit. They're SVGs, so they'll scale quickly and easily to any size, they can be easily recolored with CSS, and more. They're also included in Bootstrap under the MIT license. | |||
|
|
|||
| <div class="bd-bi-grid d-flex flex-wrap mb-5"> | |||
There was a problem hiding this comment.
Need to check if we can reuse the shortcode
| {{- $filename := index $filenameWithExt 0 -}} | ||
| {{- $name := humanize $filename -}} | ||
| <div class="p-3 mr-2 mb-2 border rounded"> | ||
| {{ readFile (printf "%s%s" $dirName .Name) }} |
There was a problem hiding this comment.
Maybe we should add tooltips with the class names?
- Moves the extend/icons/ page content to components/icons/ for now (still needs work to rewrite) - Moves the extend/approach/ page into the getting-started/ section
…a new simple shortcode
- More new icons - Add their classes - Fix property order - More customizing docs
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.
Changes
Here's some clarification and additional fixes (including todos) to follow-up:
<ol>and<ul>in Reboot. I addedpadding-rightoriginally by mistake thinking I needed to reset that, but really I only neededpadding-leftredone..table.Look intobox-shadows support on icons with custom form controls::beforeper Doc tweaks #29029 (comment) Done in @XhmikosR's PR.booticonto.bibecause it's shorter and comes with fewer jokes, and remove unused styles in docs CSS.roleorfocusable="false"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, c8d1a0e, and f9f9e45.
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-sizeor 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.