Convert CSS to SASS

[gcushen]

Restructure academic.css as SASS files and process using Hugo's new SASS pipelines.

A prerequisite is to check the feasibility of converting Academic's dynamic theming system (parse_theme.css) to Hugo's SASS system.

See https://gohugo.io/hugo-pipes/scss-sass/

This issue is effectively BLOCKED for now due to Hugo's SASS compilation dependencies being dynamically linked rather than statically and Netlify not having the corresponding dependencies installed (see https://github.com/netlify/build-image/issues/183 and https://www.netlify.com/docs/build-gotchas/#hugo).

• UPDATE: As of 17/03/19, Netlify have unblocked this issue by releasing a new build image supporting Hugo's SASS pipeline: https://www.netlify.com/blog/2019/03/14/a-more-flexible-build-architecture-with-updated-linux/

Phase 1

• [x] Add latest Bootstrap v4 SASS files locally
• [x] Remove Bootstrap from Header and assets.toml
• [x] Update Bootstrap JS version to match in assets.toml or include JS locally
• [x] Convert Academic's CSS to SASS
• [x] Convert Academic's theming system to integrate with SASS
• [x] Feed resulting SASS into Hugo to convert to CSS
• [x] Minify and md5 fingerprint bundled CSS
• [x] Fix conversion issues
• [x] Check-in relevant files into Git so that Node is not required
• [x] Breakdown Academic's SASS into modules
• [x] Convert Academic's CSS overrides of Bootstrap to use SASS variables where possible
  • Primary color for buttons etc.
  • text-muted` color

[ghost]

Hugo Docs on converting Sass to CSS https://gohugo.io/hugo-pipes/scss-sass/

[ghost]

@gcushen I'm interested in looking into this ticket - could I be assigned to it?

Would plan to collaborate and get feedback on the new file structure for Sass files

[gcushen]

@ryanwhocodes sure, you're welcome to start on it :)

I have broken down the issue into some rough tasks in the issue description. It will take quite a bit of effort to complete, especially Phase 2, which requires more specialist knowledge to try to understand which parts of the current CSS are overriding Bootstrap and can be refactored to utilise Bootstrap SASS variables where possible.

[ghost]

It really helps to have this larger task broken down into smaller steps - they are very clear and well defined.

I started work on Phase 1 but there are many smaller decisions to make on the implementation and each change requires testing and could do with feedback from other contributors. How do you feel about this being done via a series of smaller issues, or through a new issue opened for the next stage of the work once the dependent steps are done first?

Would be interested in starting with the refactoring of academic.css into sass and get that working before trying to add bootstrap to the local asset processing pipeline.

[prateekkumarweb]

@ryanwhocodes Please send a PR with whatever you have made till now. As you make changes, interested people like me can test and give feedback.

[ghost]

It looks like this will require restructuring the assets and how they are processed within this theme, which is more work than I originally thought it might be to amend the color scheme of a website dynamically.

I don't have time to undertake this amount of work at the moment so would like to pass on this ticket for the time being.