Introducing the Clean Slate theme

How small is small? Clean Slate is an ultra-lightweight theme design for RapidWeaver 8 and above. This ‘concept’ theme is built purely with CSS, HTML and JavaScript. Not a single line of jQuery, no embedded fonts, no Bootstrap, no Font Awesome and not even any graphics! The end result is a clean theme design that weighs-in at a fraction over 10 KB. This means that completed webpages will load in the blink of an eyelid!

Clean Slate embraces modern web design technologies; such as CSS Flexbox and ES6 JavaScript - powerful tools that are actively reshaping the way we build for the future web. This theme is also valid HTML5.

Not only is Clean Slate an extremely interesting ‘proof of concept’ theme design, but it carries many practical uses too. Clean Slate would be perfect to use for a simple business website, an educational knowledgebase, a video gallery or a photography portfolio. It installs and functions just-like any other conventional theme for RapidWeaver.

An array of simple style settings are built into Clean Slate, so you are able to modify all the basics and make it look different to the default styling. Clean Slate gets its name from the fact it’s a very clean theme design and uses ‘dark grey slate’ as its default colour.

Learn more…

8 Likes

Really cool idea! One of the ongoing issues with Rapidweaver is page loading speed issues, because of code bloat, all the unneeded js and css files that get loaded, and the order they are loaded in really slows things down… This “theme” has none of that!

  • One feature request - if I"hide site title" it still shows up in the code AND gets tagged as “h1” Having control of the h1 tag would be really nice…

Other than that, really like this!

@Raimo thanks for the kind words. I thought it would be an interesting challenge to see just how far a theme codebase can be shrunk down, while still finishing with a modern theme that looks and behaves like a theme.

Like in my other themes the ‘hide’ option will only do display:none with CSS. It cannot physically delete that element from the page HTML.

I would suggest you always provide a site title and slogan, even if you are not setting them to display. Both elements give a website more identity and will help with SEO matters.

Being able to choose what heading level is applied is outside of my control. It is not a part of the RapidWeaver theme API. You would have to ask Realmac if you wanted to see support for something like that in themes. The theme API is still terribly weak, compared with the Stacks API.

That’s unfortunate. This does actually create a couple of SEO issues:

  • a duplicate h1 tag on every page

  • and it is considered bad practice to have multiple elements tagged h1 on any individual page

I haven’t used any RW “prebuilt themes” in years,

  • just “blank” themes like “Void” (no pre-generated h1 in the code)
  • or a builder like “Foundation” (where if you “uncheck” the “title” in the General Settings, it doesn’t appear in the generated code)

Keep up the good work - quite a few of your Stacks (like your essential “ProGallery Stack”) show up in a lot of my websites

According to Google Webmasters it’s no longer a problem to have multiple H1s if the template uses HTML5 and is marked up correctly.

I’ve used WP themes for years that have 2 H1 tags on the homepage, never had an issue. Back in the day, the “Golden Rule” was to have only one H1.

There are still people who are for and against (a bit like Brexit) multiple H1s. But this webmaster video states it’s not an issue. https://www.youtube.com/watch?v=WsgrSxCmMbM

I’m still undecided as to who is 100% correct or if there is actually a 100% correct answer to multiple H1s.

1 Like

Ms. May?

1 Like

She belongs in the Tower of London. ;)

3 Likes

The theme DOES NOT include duplicate <h1> tags. I am quite sure of that. Any duplicate must be the result of YOURSELF adding them. Perhaps share a link with us, so we can check.

If you do not want to use the theme <h1> tagline or RapidWeaver Site Title, then you are within your freedom to edit the theme accordingly. Or better still, hire me to make the modification for you, given that the theme is already graciously provided to you for free!

Don’t fall into the trap of trying to nit-pic and compare conventional themes with your preferred ‘void’ themes. Blank themes nearly always side-step the RapidWeaver Theme API and use the more powerful Stacks API instead. You can’t really use Foundry or Foundation without Stacks. Whereas Clean Slate will work with any page type.

As explained already, the Stacks API is more feature rich and updated regularly. Whereas the RapidWeaver Theme API is a lot more basic and only gets updated every few years. The RapidWeaver Theme API cannot alter the semantic markup of a webpage; unlike Stacks that can use conditional logic to decide what is written to the page.

I hope this resets perspectives and helps clear things up.

2 Likes
  • The problem isn’t having multiple h1 tags on one page (although still not, a recommended thing to do),
  • the problem is having “identical” h1 tags site wide…

The “h1 tag” is still a signal as to what is the “most important content” on the page - when you have identical h1 tag on every page of your website, and it is your “site title”…

I know, this is one of those arguments that has been going around in circles for years… I just prefer to have control of all h1 tags on a web page…

And this is why I only use RW themes (like Foundation) where I do have this control

1 Like

Multiple/duplicate H1 and header tags out of order can also cause accessibility issues with screen readers and so on.

I “guess” @Raimo is referencing following code:

<h1 id="site_title"><a href="https://themeflood.com/preview/clean-slate/">Clean Slate</a></h1>
<h2 id="site_slogan">Changing the world, one site at a time…</h2>

Yes, that’s the HTML markup for the header in this theme.

But where are the other duplicate <h1> tags? I’m not seeing them and I did not put any in the theme…

1 Like

I’m quite shocked that someone appears to be berating one of the communities most valued devs for implementing a completely standard (I believe) practice in a regular RW theme. The fact he’s offered it entirely for free just compounds the insult.

Will, I’m taking some time off at the moment but did download and have a brief play with the theme. It’s a great piece of work and I’m grateful for your effort.

3 Likes

Raimo neither “berated” or “insulted” someone.

They are just “discussing”. I think this still should be allowed, correct me if I am wrong.

4 Likes

Einstein’s definition of insanity: Repeating the exact same process over and over again, but expecting a different outcome…

She belongs in Bedlam!

4 Likes

I’m sorry if it came across as “berating” - not even close to my intention! I love @willwood work, and own and have used a ton of his Stacks (and themes) over the years. He is one of RW’s top developers, and I always check out everything he releases, and he has been very helpful to me personally over the years!

If you reread what I posted in this thread:

  • I love the idea of this new theme! Rapidweaver does have a bit of a “page speed loading issue” that is compounded by too many unneeded css and js calls. Just run a Rapidweaver page through a “Waterfall” test sometime (I like to use GTMetrix for this) and check out the results. Will’s theme goes a long way to fixing this issue!
  • I had a “feature request” - if I choose not to show a site title, is it possible that it wouldn’t show up in the generated code anyways
  • turns out, this is not possible, for technical reasons that are Rapidweaver’s fault, not Will’s

However - the thread got sidetracked by discussion about proper use of h1 tags, and their effect on SEO. All I was trying to point out is:

  • yes it is okay to have multiple things tagged “h1” on a page - search engines are generally smart enough now to discern what is important on a page
  • however, many top SEO people will still tell you this is not generally a good practice to follow, for a variety of reasons
  • and by Rapidweaver having the “Site Title” on each page hardcoded as “h1” - every page on your website, will have an identical element tagged “h1” which is not optimal either.

This is actually a discussion I had years ago with some Rapidweaver devs (and I think a Counsell or 2 chimed in as well, a few forums back…) and didn’t realize that Rapidweaver, a few major releases later, still automatically tags the “Site Title” as “h1” everywhere. I just prefer to have control of what is getting the “h1 tag” on each page, and there are some Rapidweaver themes, like Foundation and Void that give me this control.

No disrespect intended, sorry Will if it came across that way, you are one of a handful of developers I have followed (stalked?) closely for years, not just with your Rapidweaver work, but some of the other stuff you have done as well.

Keep up the great work!

3 Likes

Just for completeness:

It is the theme developers decision how to place the site title into the markup. The theme developer has full control of putting it into a h1, or just into a div or span and style it like a “site title”.

RW is not forcing the “site title” to go into a h1.

2 Likes

Apologies. I’ve had a bit of a traumatic week, I took your comments the wrong way.

Sorry.

6 Likes