More Semantic Markup

[matthewlarkin]

Hi @lovasoa and SQLPagers,

I wonder if there's interest in making default components in SQLPage more semantic in regards to element, class names, and IDs.

I recently found myself wanting more padding in the footer, so I wrote CSS that felt fragile and maybe unintuitive for future reference:

/* page footer */

body > div:last-of-type {
	font-size: 0.76rem !important;
	padding: 40px 0;
}

I could also adjust the shell component, but that seems like overkill.

{{!--  [...]  --}}

<footer class="[...]" id="sqlpage_footer"> {{!-- <<< modified element type + added id --}}
    {{#if footer}}
    {{!-- [...] --}}
    {{/if}}
</footer>

{{!--  [...]  --}}

---

I'm inspired by the natural semantic-ness of web components and their use of meaningful slot names (see Shoelace (soon to be Web Awesome), etc). It'd be nice to have a similar level of semantic code to latch onto and build with in SQLPage.

If you think this is worth pursuing, @lovasoa, I'd like to contribute some light touch (but semantic) class names, change of elements, IDs, etc where warranted in the default SQLPage components. For instance, I think the footer example above would be an easy place to start.

--

Have you considered this yourself or have any thoughts?

[lovasoa]

Hi Matthew,

I'm all for it ! Can you open some small pull requests ?

This should be a footer element, agreed: https://github.com/lovasoa/SQLpage/blob/v0.23.0/sqlpage/templates/shell.handlebars#L111

[matthewlarkin]

Awesome! I'll consider some approaches and get on it 👍