Move away from Bootstrap

fessehaye commented 3 years ago

Decide whether we want to move to Tailwind. If so, migrate and get rid of SASS
(look into whether we want mixins or other SASS-like features in PostCSS)

Once we decide on what we are using some additional tasks that toward intergrating the new framework:

Updating SteamBlocks with new classes
Updating React Components
Updating styling related to wagtail templates and layouts
Removing mofo-bootstrap from our stylings and packages
If we decide we are not going to use SASS, remove unused SASS files or renaming them to CSS files and relying on solely POSTCSS
Updating config file for chosen framework to reflect atomic design system
Add documentation for using the new framework

Tips for converting existing styles to tailwind

Converting spacing units

Use this table when converting margin/padding/widths

Tailwind Unit	Bootstrap Unit	Size (rem)
2	1	0.25rem
4	2	0.50rem
8	3	1rem
12	4	1.5rem
24	5	3rem

Converting column classes

When you replace a class like col-sm-4, use tailwind breakpoints to replace the middle section then use tw-w-[col]/12 to replace the width and then add tw-px-8 tw-relative to replace the padding/position

Removing SASS files

If the component you are working on does not have a wagtail template, it might be best to create a tailwind component using the plugin API in CSS-in-JS

https://tailwindcss.com/docs/adding-custom-styles#writing-plugins

You can also use tailwind.component.js for further examples on the how we did it on the repo

Wagtail block issue

You need to make sure there is a space between any tailwind classes and wagtail blocks

This would not parse properly: tw-w-[120px]{% endif %}

Reverse engineering bootstrap classes and elements

Due to the amount of mixins and sass functions with bootstrap usage, I would not always recommend try to step through the sass files and it would easier to step over if you just inspected the elements with dev-tools

┆Issue is synchronized with this Jira Story

jamilasnell commented 3 years ago

Made this into an epic Simon!

mmmavis commented 1 year ago

@fessehaye are the spacing units in the ticket description still valid? If not, could you please help update them? Thank you!

data-sync-user commented 3 weeks ago

➤ Simon Acosta Torres commented:

Is any of this work something you would like to handle this year? Seems like a pretty extensive update in the midst of other higher priority extensive changes pertaining the brand.

MozillaFoundation / foundation.mozilla.org