<p>I'm interested to hear what people think about this idea. I've discussed using bootstrap to guide our design in <a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="505985261" data-permission-text="Issue title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2386" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/2386/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/2386">#2386</a> and also using the card components to spruce up the help page in <a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="469318059" data-permission-text="Issue title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2321" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2321/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2321">#2321</a>. I think a wider goal of replacing our custom (unmaintained) reset/style/grid system with bootstrap would be useful. I'm not suggesting here that we change our colours or layout, just that there's a lot of stuff that we can get (and easily upgrade in future) for free by using it.</p>
<p>I tried the approach of just throwing the whole of bootstrap into our stylesheet, which mostly worked but caused some glitches in rendering dropdowns and tooltips. So this approach instead has most of bootstrap disabled, and only certain components enabled, and keeps most of our styling intact. I started with the help page restyling to demonstrate how we can use one of the components.</p>
<p>The long-term goal with this would be to enable components individually, resolve any conflicts with the existing styles, and remove our custom framework/styling code for stuff that bootstrap can handle for us.</p>
<p>I'm not sure why autoprefixer-rails was constrained in <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/openstreetmap/openstreetmap-website/commit/7c7ff4fdf71ae8f450299ddfdcfc4aa137338d28/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/commit/7c7ff4fdf71ae8f450299ddfdcfc4aa137338d28"><tt>7c7ff4f</tt></a> so any comments on that are welcome too.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/2452'>https://github.com/openstreetmap/openstreetmap-website/pull/2452</a></p>
<h4>Commit Summary</h4>
<ul>
<li>Rename bootstrap-tooltips file</li>
<li>Add bootstrap 4</li>
<li>Custom bootstrap with all components disabled</li>
<li>Use bootstrap cards to spruce up the help page</li>
<li>Use bootstrap typography</li>
</ul>
<h4>File Changes</h4>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-0">Gemfile</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-1">Gemfile.lock</a>
(10)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-2">app/assets/stylesheets/_bootstrap-custom.scss</a>
(44)
</li>
<li>
<strong>R</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-3">app/assets/stylesheets/bootstrap-tooltips.css</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-4">app/assets/stylesheets/common.scss</a>
(27)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-5">app/assets/stylesheets/screen-ltr.css</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-6">app/assets/stylesheets/screen-rtl.css</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452/files#diff-7">app/views/site/help.html.erb</a>
(34)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2452.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/2452.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2452.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/2452.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2452?email_source=notifications&email_token=AAK2OLNY2X7MBVGFJQDZL73QW7HOFA5CNFSM4JVK26ZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6BQ5AA">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNPBKDRWN5HKFF45TTQW7HOFANCNFSM4JVK26ZA">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLKW6TGVT42R3YYIOHTQW7HOFA5CNFSM4JVK26ZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6BQ5AA.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/2452?email_source=notifications\u0026email_token=AAK2OLNY2X7MBVGFJQDZL73QW7HOFA5CNFSM4JVK26ZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6BQ5AA",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/2452?email_source=notifications\u0026email_token=AAK2OLNY2X7MBVGFJQDZL73QW7HOFA5CNFSM4JVK26ZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6BQ5AA",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>