Remove edx-pattern-library from edx-platform in favor of bootstrap

Description

edx-pattern-library is deprecated in favor of edx-bootstrap. But edx-platform still uses it in several places. Let's get rid of it!

History of CSS in Platform

It seems there have been three epochs in edx-platform:

  1. The first was just direct, custom CSS. In the code, this is referred to as v1 or no name at all.

  2. The second was pattern-library. In the code, this is usually referred to as v2 or sometimes pattern library.

  3. The third is bootstrap. In the code, this is usually referred to as bootstrap or sometimes v3.

Templates usually declare which CSS entry point they want to use. In pattern-library's case, that looks like <%! main_css = "style-main-v2" %> in a mako template. This means it's relatively easy to find out which bits of code use pattern-library.

Another side effect of this history of switching CSS backends is that the templates tend to use similar class names and also tend to avoid using utility classes (things like mb-4 or list-unstyled) that are tied to specific CSS libraries. So hopefully porting is simply a matter of handling more and more classes in the bootstrap code and then switching templates over to it. (That is, hopefully we don't have to make many actual template or html changes.)

Porting a single page

This epic tracks a bunch of individual tickets for single pages. Here's a blueprint to porting a page:

  1. Load up the page in two different browser tabs.

  2. Change the header for that page's template to use css/bootstrap/lms-main.css instead of style-main-v2 (or change that page's python view code to use uses_bootstrap=True instead of False.

  3. Refresh your second tab. Now things will look broken probably.

  4. Use your browser's inspection tools to see which classes are associated with the mis-styled elements. Look for references to those class names in the pattern-library and bootstrap CSS files.

  5. Slowly add support to the bootstrap files and refresh your in-progress tab to see the changes.

    • To compile your bootstrap style changes, run paver webpack in an lms shell.

  6. Once everything looks the same in the two tabs, also make sure that they both are responsive correctly: change your browser window's size down to mobile sizes and watch how both tabs respond.

  7. Sanity check in a second browser (Firefox/Chrome/Edge).

  8. Tada! You migrated a page!

Notes

Status

Assignee

Unassigned

Reporter

Michael Terry

Labels

None

Priority

Unset

Epic Name

Remove pattern-library from Platform
Configure