search

gohugoio / hugoDocs

The source for https://gohugo.io/
Apache License 2.0
1.06k stars 1.49k forks source link

Move static styles into an asset pipe #1157

Closed davidsneighbour closed 3 years ago

davidsneighbour commented 4 years ago

I am working on https://github.com/gohugoio/hugoDocs/pull/1156 right now and found, that the stylesheets of the Hugo documentation seem to be "just" a static css file. I would propose to move that into a sass-construction so we can use variables to fix things like the above issue in the future. I have no insight into the general makings of the design of the documentation, but think it might be an optimisation of future work flows.

bep commented 4 years ago

Two comments:

  1. I do think we already use CSS variables (colours) somewhere, but I'm not intimate with this setup.
  2. I think the docs site (including the theme) need a total overhaul pretty soon.
alexandre1985 commented 4 years ago

CSS variables are native to CSS language, does not need SASS :wink:

coliff commented 4 years ago

CSS variables are native to CSS language, does not need SASS 😉

More than 5% of the current browser marketshare don't support native CSS variables though, and SASS support is built-in to Hugo - it's best to do it at build time and support 100% of browsers.

alexandre1985 commented 4 years ago

The group that agree's on supporting the 5% browsers that have no CSS variables, can push towards SASS stylesheet. It is definatly (sorry if bad English) the broader way to fix this issue. And SASS also adds other nice features. Well, there is no negative side to SASS usage, because is compatible with CSS code (does not force to rewrite the existing stylesheets).

Either way, my vote goes towards using SASS, and, as second option, use native CSS variables and not give support to the 5% browser marketshare. Send those 5% browser marketshare an email to add CSS native variables support

davidsneighbour commented 4 years ago

SASS and other post processors are there, to create a file that is small, cache-able and might be separated logically into smaller files with code that is used and loaded only on specific pages where the styles are used.

CSS variables are variables. Share settings, colours.

I don't see a connection here. SASS enables us to make a logic structured stylesheet and save code lines. Variables are good to share stuff. Let's use variables and then sass them together into a stylesheet.

I see variables more as a tool to change things browser-side. If my background is black, I can add it verbatim into the final stylesheet. If I want to have its colour grow slowly lighter, I am using a variable for the background and the text colour and let a script decide when to change the text from white to black if the contrast is bad. That's what CSS variables are for.

PS: On a side note, that 5 % are Internet Explorer, Opera Mini, Baidu Browser and QQ Browser. I think for instance Bootstrap kicked support for Internet Explorer in version 5 and to be honest, I believe if we (web workers) stop supporting old browsers too, their users will migrate. They will be used to an ugly internet. I had to look at the internet in an Internet Explorer this morning and am quite shaken still.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If you still think this is important, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

davidsneighbour commented 3 years ago

stalebot seems to have been stopped running recently.