pba-content
pba-content copied to clipboard
Polkadot-Blockchain-Academy
Replace or refactor `<pba-*>` elements to use `tailwind`
Presently <pba-*> elements are OK but inflexible for tweaking slides as needed and style is global. There are many "edge cases" that don't work well here, and it's hard or impossible to express common patterns used in WYSISYG slide editors. Content creators should have more freedom to style their slides, at least in div size to accommodate content better.
Likely a lot of custom stuff could be removed if we introduced a flexible column system.
Perhaps we should just bring in bootstrap as the main css for the project:
- https://getbootstrap.com/docs/5.3/layout/grid/
- https://getbootstrap.com/docs/5.3/layout/columns/
WDYT @wirednkod ? something we could try and refactor for during UCB and adjusting slides along the way? If not easy to do we can wait till we are done with Berkeley to impl this.
As discussed tailwindcss: #675 comes with some nice grid system that we can apply in the repo (see here: https://tailwindcss.com/docs/grid-template-columns for more info)
Now that this is merged we support through tailwind, by default, 12 column grids this this issue can close
I agree we support it now :tada:
but we can use this issue to track the implementation of actually using it and replacing <pba-cols> as that is now possible IIUC?
We also need some examples in the copy&paste templates that are minimal and ideally do not encourage a ton of micro-styling that tailwind does allow (for readability and maintainability of the slides markdown)
Not that I think about it - maybe we can make some handy shortcuts for <pba-*> elements that use the "right" settings (biased ones) so style "just works" for most cases.... :thinking: so abstraction tailwind from content creators, but of course allowing overrides using tailwind syntax on those elements of course from how CSS works :nerd_face:
Not that I think about it - maybe we can make some handy shortcuts for
<pba-*>elements that use the "right" settings (biased ones) so style "just works" for most cases.... :thinking: so abstraction tailwind from content creators, but of course allowing overrides using tailwind syntax on those elements of course from how CSS works :nerd_face:
Absolutely. Actually now creating tags will be easier