Introduction
What is Classless?
Classless is a proposal for a basic HTML layout that tries to make the less arbitrary decisions possible, along with a set of themes written only with CSS that match that basic HTML layout.
Why do we need this?
Classless eases out the pain of users who switch from CMS to CMS to static site generator to custom blog engines and lose their themes in the process; it enables developers to create new site engines without having to worry about the lack of themes; it multiplies the work of designers, who can just create a Classless theme and have it usable in multiple platforms instantaneously.
Because the Classless layout is fixed, people can change themes by just editing a CSS link; because it is easy to implement on every blog engine, people can move from Jekyll to less famous engines and keep their themes; because
it has no classes, no one has to fight on what should be the class names; because
Flexbox and
Grid exists, almost every theme can be implemented in it.
What is that HTML layout you’re talking about?
In the basic Classless layout, there are list pages and article pages. These two types are sufficient for most blogs and simple websites out there.
Article pages may include a header for the article, containing a header image, a title, date and tags, besides the article content. List pages should list a bunch of articles (with or without their metadata), and may include a header and pagination. You can also have an article followed by a list of articles.
The layout is explained in more detail here.
Why basing all themes into the same HTML structure?
Because that makes it much easier for CMS development (if you are developing a simple CMS you can let your users change themes without letting them mess up with the HTML rendering process at all); it makes it much easier for people to try out
new themes (you can just change a <link> tag and the page has a new theme); and it is much more interesting to develop new themes having this constraint in place.
What if I want to have custom stuff?
Well, if you have full control of your HTML, nothing prevents you from inserting custom elements, even using classes, and styling them individually, in the context of an article page or list page, but if you’re thinking about messing up with the basic structure of the HTML, then your site is probably not the best place to use Classless.
Why don’t you use classes?
If we’re going to have a fixed HTML structure, a lot of arbitrary choices must be made for what will be that structure. Having to choose how many classes and what would be the name of the classes would be much more complicated than choosing not to have any classes at all. Having no classes also makes it easier for the person who is writing the HTML of some page in particular in which a Classless theme will be used.
Besides not having classes, what other arbitrary decisions were made?
To make things less arbitrary and more useful, we tried to follow W3C recommendations for the HTML structure, so the HTML would have meaning. Because of that, and because having multiple element names, each one in a meaningful location
of the page, makes it easier for theme developers, the basic HTML structure uses <main>, <nav>, <aside>, <article>, <section> as the 5 main elements
of the page, all children of <body>.
Ok, I get it, the Classless ideal is inspiring, how can I help the project move forward?
Well, if you have a website, you can migrate it to Classless, port the theme you’re using in the process and contribute it; if you have a CMS or static site generator or any software that people may use to create websites, consider adding built-in support for the Classless HTML layout, along with some way for users to choose between one of the existing themes and edit the included CSS; if you’re going to write a blog theme, take this opportunity to challenge yourself and write it in pure CSS, using the Classless HTML as basis for it — depending on your development environment, you may even use livereload to develop against this site directly —, it may be a good time to learn how to use CSS Grid to achieve great designs.
Or, in any case, let’s talk!
Where is this being used?
Currently, it is being used in websites generated by sitios.xyz and Ursprung, along with some other standalone websites. Please let us know if you’re using it somewhere!
Can I see the themes?
Yes, please! But please don’t be dissapointed, we’re still young and don’t have too many good themes.
How do I start using it?
Basically you just write HTML following
the standard and include a CSS <link>. If you’re writing a CMS or static site generator,
read more here (nothing much more than this paragraph, frankly); if you’re just trying to use it on your own site,
see this.
How do I create a theme?
You just have to write a few lines of CSS. Go here for more information.
Can I have other questions?
Yes, please, open an issue or email me on [email protected]! we also accept suggestions and complaints.