search

farmOS / field-kit

A modular, offline-first companion app to farmOS.
https://farmOS.org
GNU General Public License v3.0
62 stars 39 forks source link

Encapsulate Bootstrap styles in Vue components #337

Closed jgaehring closed 4 years ago

jgaehring commented 4 years ago

Expanding on https://github.com/farmOS/farmOS-client/issues/263#issuecomment-571157088:

In addition, I think it would be helpful for future development to provide our own card component, even if that's just a thin wrapper around the Bootstrap card. This will act as a stable interface that we can reimplement if we choose to drop Bootstrap in the future and, say, adopt Vuetify or some other Material Design framework.

Towards that end, I'd like to take steps towards encapsulating all Bootstrap styles in Vue components, which can become part of the component library I'm building up to support Field Modules. That way, the main application code should not include any Bootstrap classes in its markup; those classes would only be applied within the components of the component library, and so would be essentially hidden to anyone using that library.

For example, we're already doing something similar with our farm-drawer-list component:

https://github.com/farmOS/farmOS-client/blob/909befe86f2727f65ec2daa2fb7fd8e7580fe7fb/src/components/FarmDrawerList.vue#L2-L4

and our farm-drawer-list-item component:

https://github.com/farmOS/farmOS-client/blob/909befe86f2727f65ec2daa2fb7fd8e7580fe7fb/src/components/FarmDrawerListItem.vue#L2-L6

Those two components combined lead to application code that is decoupled from the underlying CSS classes:

https://github.com/farmOS/farmOS-client/blob/909befe86f2727f65ec2daa2fb7fd8e7580fe7fb/src/core/App.vue#L25-L46

Now instead of exposing Bootstrap's API, we've exposed our own API, over which we have full control. Of course, there are trade-offs to that, namely that we must maintain and document* that API, but I think that is worth the ability to change the underlying implementation whenever we want, while also being able to restrict/expand what's available in Bootsrap.

* Documentation can also be aided with libraries like Storybook: https://storybook.js.org/.

jgaehring commented 4 years ago

Bumping this up to 1.1.0 because we should have a stable, component-based API for styling Field Modules before they start to proliferate. In other words, we don't want to create a bunch of Field Modules that use the Bootstrap classes directly, only to have to convert them all once we've encapsulated them in Vue components.

jgaehring commented 4 years ago

I think we can expect to remove Bootstrap entirely in the near future, so this issue will no longer need to be addressed.