[openstreetmap/openstreetmap-website] RFC Use Bootstrap components for styling (#2452)

[Andy Allan]

I'm interested to hear what people think about this idea. I've discussed using bootstrap to guide our design in #2386 and also using the card components to spruce up the help page in #2321. 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.

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.

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.

I'm not sure why autoprefixer-rails was constrained in https://github.com/openstreetmap/openstreetmap-website/commit/7c7ff4fdf71ae8f450299ddfdcfc4aa137338d28 so any comments on that are welcome too.
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/2452

-- Commit Summary --

  * Rename bootstrap-tooltips file
  * Add bootstrap 4
  * Custom bootstrap with all components disabled
  * Use bootstrap cards to spruce up the help page
  * Use bootstrap typography

-- File Changes --

    M Gemfile (3)
    M Gemfile.lock (10)
    A app/assets/stylesheets/_bootstrap-custom.scss (44)
    R app/assets/stylesheets/bootstrap-tooltips.css (0)
    M app/assets/stylesheets/common.scss (27)
    M app/assets/stylesheets/screen-ltr.css (2)
    M app/assets/stylesheets/screen-rtl.css (2)
    M app/views/site/help.html.erb (34)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/2452.patch
https://github.com/openstreetmap/openstreetmap-website/pull/2452.diff

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/2452
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20191204/1ff707c2/attachment.html>