UIKit Structure Suggestions

I was chatting to Adrian and we thought that it didn't make sense to include a copy-pasted version of the default uikit theme folder in with surface. The uikit docs also recommends a different method (see: https://getuikit.com/docs/sass#how-to-structure-your-theme).

By importing the uikit theme we maintain an easy upgrade path when they update or add components upstream, even though we don't get full control of which modules are imported.

To make things more clear we should just import uikit and the uikit theme straight from the package as we've been doing. Then, as uikit recommends, only create files for the overrides that we need. As a base, having one variables and one mixins file in our theme folder should suffice, and if those get large we can split them into separate files per component like accordion.scss for variables and accordion-mixins.scss for mixins.

As a side note, and to be clear, I think that for figuring out which variables and mixins we need to override we should reference the uikit source files (ex: https://github.com/uikit/uikit/blob/develop/src/scss/components/accordion.scss) and not the uikit theme files.

In summary, I think we should:

remove everything currently in frontend/assets/sass/theme
move frontend/assets/sass/abstracts/_vars.uikit.scss to frontend/assets/sass/theme/_variables.scss
add palceholder frontend/assets/sass/theme/_mixins.scss
update frontend/assets/sass/main.scss something like this:

@charset "utf-8";
//
// Style manifest.
//

// 1. Config & helpers.
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/vars.color";
@import "abstracts/vars.type";

// 2. UIKit.
@import "theme/variables"; // needs to come before variables-theme
@import "uikit/src/scss/variables-theme";
@import "uikit/src/scss/mixins-theme";
@import "theme/mixins"; // needs to come before uikit-theme
@import "uikit/src/scss/uikit-theme";

// 3. Vendor & plugin styles.

// 4. Custom components & style.
@import "custom/custom";
@import "streamfields/streamfields";
@import "vendor/vendor";

// 5. Utilities & helper classes.
@import "utilities/a11y";

// Shamefile. Throw quick fixes/hacks here for later refactoring.
@import "shame";

l1f7 / surface

UIKit Structure Suggestions #21