Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use classless semantic HTML in the "simple" theme #3233

Closed
7 tasks done
pauloxnet opened this issue Oct 30, 2023 · 12 comments · Fixed by #3234
Closed
7 tasks done

Use classless semantic HTML in the "simple" theme #3233

pauloxnet opened this issue Oct 30, 2023 · 12 comments · Fixed by #3234

Comments

@pauloxnet
Copy link
Member

  • I have searched the issues (including closed ones) and believe that this is not a duplicate.
  • I have searched the documentation and believe that my question is not covered.
  • I am willing to lend a hand to help implement this feature.

Feature Request

Premise

Currently, in the "simple" theme there is no style sheet and it uses semantic HTML almost entirely, but not completely yet.

Proposal

I propose to remove any class references from the HTML code, which are not used anyway, and make the HTML code entirely semantic.

Feature

  • cleaner and lighter HTML code, thanks to the removal of unused parts (e.g. classes, ids, comments)
  • more accessible web pages, thanks to the use of only semantic HTML
  • responsive web pages with dark and light modes, thanks to the addition of just the URL of one of the many classless CSS frameworks available.
  • web pages more easily navigable by screen readers and assistive technologies, thanks to a correct hierarchy of components in the DOM
@avaris
Copy link
Member

avaris commented Oct 30, 2023

cleaner and lighter HTML code, thanks to the removal of unused parts (e.g. classes, ids, comments)

I get the other two but "comments"? Unused in rendering, yes, but they are not useless. Especially for a theme that's supposed to be a starter template for people to write their own.

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

I provided the working PR #3234 (yet not tests complete)

@pauloxnet
Copy link
Member Author

I tried the "simple" theme combined with some classless CSS frameworks found in this list: "Awesome Classless CSS"
https://github.com/dbohdan/classless-css

Below are some screenshots of the various versions of my website using the updated "simple" theme, simply by providing a different URL in the STYLESHEET_URL setting, as shown in the example below

STYLESHEET_URL = "https://cdn.simplecss.org/simple.min.css"

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Bamboo

STYLESHEET_URL = "https://unpkg.com/bamboo.css"
dark light
bamboo dark-min bamboo light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Holiday

STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/[email protected]"
dark light
holiday dark-min holiday light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Missing

STYLESHEET_URL = "https://unpkg.com/[email protected]"
dark light
missing dark-min missing light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Pico

STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.classless.min.css"
dark light
pico dark-min pico light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Simple

STYLESHEET_URL = "https://cdn.simplecss.org/simple.min.css"
dark light
simple dark-min simple light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

SpCSS

STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/[email protected]"
dark light
spcss dark-min spcss light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Tufte CSS

STYLESHEET_URL = "https://unpkg.com/[email protected]/tufte.min.css"
dark light
tufte dark-min tufte light-min

@pauloxnet
Copy link
Member Author

pauloxnet commented Oct 30, 2023

Water

STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
dark light
water dark-min water light-min

@pauloxnet
Copy link
Member Author

Default

Web page as rendered by Firefox with no STYLESHEET_URL.
default-min

pauloxnet pushed a commit to pauloxnet/pelican that referenced this issue Oct 30, 2023
pauloxnet pushed a commit to pauloxnet/pelican that referenced this issue Oct 31, 2023
pauloxnet added a commit to pauloxnet/pelican that referenced this issue Oct 31, 2023
pauloxnet added a commit to pauloxnet/pelican that referenced this issue Nov 11, 2023
pauloxnet added a commit to pauloxnet/pelican that referenced this issue Nov 11, 2023
pauloxnet added a commit to pauloxnet/pelican that referenced this issue Nov 11, 2023
pauloxnet added a commit to pauloxnet/pelican that referenced this issue Nov 11, 2023
@justinmayer justinmayer added this to the Pelican 4.9 milestone Nov 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging a pull request may close this issue.

3 participants