Redesign the docs with Tailwind CSS, removing Bootstrap#75
Open
scsmith wants to merge 3 commits into
Open
Conversation
Replaces Bootstrap 3 with a Tailwind v4 build (npm @tailwindcss/cli, brand tokens in tailwind/input.css) and redesigns the docs to match the refreshed main-site brand: docked left nav rail with the article centered in the remaining width, collapsible sidebar sections (native details/summary, current section open, expand/collapse all, everything open on the home page), redesigned code fences with a connected language tab bar, Rouge class-based highlighting, and typography aligned with the dashboard's type scale. Markdown content is styled through semantic classes in the same Tailwind entry file since generated tags carry no classes.
The redesign loaded the entire Font Awesome library (render-blocking CDN CSS plus a webfont) for four glyphs: sidebar chevrons, the nav external-link arrow and the mobile drawer icons. Inline SVGs via an icon helper drop the external request; 1em sizing and currentColor keep the existing CSS working unchanged.
The docs layouts now use named classes (docs-topbar, sidebar-items, docs-footer-grid, ...) styled in tailwind/input.css instead of utility strings in the HAML — this site is mostly markdown content styled through element selectors already, so the templates read better as semantic markup. Tailwind still provides the build, Preflight, theme tokens and palette variables the semantic rules draw on. Rendered output is unchanged (verified against computed-style baselines).
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces Bootstrap 3 entirely with a Tailwind v4 build and redesigns the docs to match the refreshed brand. The layout moves to the established docs pattern: nav rail docked left (white panel, hairline border, wider on large screens), article centered in the remaining width. Sidebar sections collapse with native
<details>— the current section opens by default, the home page opens everything, and an Expand/Collapse all toggle covers the rest; the rail pins beside the article when collapsed and flows with the page when expanded. Code fences get a connected language tab bar on a dark background with Rouge class-based highlighting, and the type scale now matches the dashboard's (.tw-application).Markdown-generated tags carry no classes, so content styling lives as semantic CSS in
tailwind/input.cssalongside the brand tokens; layout chrome uses utilities. The generated stylesheet is built by npm/@tailwindcss/cliin dev (compose watcher) and in CI.