Frugal-on-Javascript themes?

Using Themes
1

Hi folks,

First-time user here, so I am not sure whether the behaviour I am seeing is even addressable via theming, so feel free to direct me into a more useful direction.

I have a nonnegotiable requirement that the site must work reasonably well if the visitor has Javascript switched off.
“Reasonably well” means: Show the same content regardless of whether JS is available or not.
E.g. I am not seeing the top bar or the sidebar if I switch off JS with the “polymer” theme.

Is there a way to select themes that “work resonably well” without JS?
Or just a single theme that somebody happens to know - I should be able to work my way from there.

2

I don’t know of a better way than looking at each theme’s source code and/or giving it a test run with JS turned off.

1 Like
3

@zwbetz thanks for thinking about it.
Looking at the sources will not help me much, it all depends on what it’s used for.

Running each theme without JS - oh dear, that’s a lot of work.
Two questions for that:

  1. Is there a way to just download and install them all, so I don’t have to do more than change the config? That would speed up the testing tremendously.
  2. What features should I have in the site to actually exercize all (or at least most) aspects?
4

The only way would be to look through the source code. I’m sure there are some themes that don’t require much JS.

What kind of site are you looking for? I am sure there are plenty of blog themes that doesn’t use JS at all.

5

See https://github.com/gohugoio/hugoThemes/blob/master/README.md#installing-all-themes

1 Like
6

It’s going to have two areas: blog posts, organized by date; and articles, organized by topic.

7

That Polymer theme (built with an older version of Google Polymer) is web component-based. JS is critical for the function of web components, due to the nature of how they work. So that one is a definite no-go.

I’ve installed and experimented with probably ~80% of the themes in the list, so let me save you the pain. :wink: The majority of themes in the list are largely HTML and CSS oriented. I’ve only come across a handful that seemed significantly dependent on JS.

I consider “significant” to be when large sections of page content are entirely hidden and inaccessible, as well as broken navigation that prevents any sort of click depth within a site.

The main things that will be problematic are any dynamic features like:

  • Tabs, accordions (hover or click)
  • Dropdown navigation (hover or click)
  • Mobile menu nav (hamburgers/expanding navs)
  • Forms and input fields (except anything handled server-side)
  • Carousels (UX performance usually terrible on these anyways)
  • Modals, popovers, tooltips
  • Scrollspy, sticky/fixed components

For example, Bootstrap dropdown navs use jQuery by default, on hover or on click. Without JS, they just become unusable. For small sites, you don’t even need dropdowns anyways, and can probably just go with static links in the header. Main issue would be tweaking those for mobile.

@toolforger, based on your latest post, it sounds like it will be a relatively small/simple site. You probably won’t need most of the features I mentioned above.

A good starting place might be checking out the Bootstrap-based Hugo themes. At least with those, they’ll be based on a consistent framework, so you can refer to the official Bootstrap docs. That way you can pick and choose components that’ll meet the requirements.

This barebones Bootstrap theme made by @zwbetz looks pretty solid, simple, and keeping with current Hugo coding standards from what I can tell.

3 Likes
8

Thanks Travis, that was exactly spot on.
I wish I could put a dozen hearts on this post :wink: