It's plain HTML/CSS, just... better.

🤔

Could you create an automatic grid system using pure HTML and CSS? Of course it's possible, but is it worthwhile? I started conceptualizing a way to make this happen.

I'm a huge fan of Antd, in particular the simplicity of their Row and Col components. I know they aren't the first to utilize this, but their implementation is easy to understand and powerful. Rebass has a similar setup using Flex and Box to create layouts.

Example:

import { Row, Col } from "antd"

const Sample = () => {
    return (
      <Row>
         <Col span={12}>
             <h3>Column 1</h3>
         </Col>
         <Col span={12}>
             <h3>Column 2</h3>
         </Col>
      </Row>
    )
}

Antd uses a 24 grid system, so span={12} would take up half the available space.

Being Picky

Although I'm a huge fan of these tools, I'm not a big fan of including libraries and having to import several components just to get a simple layout. I much prefer to develop with tools like Emmet and easy to understand classes, similar to Semantic UI or Bootstrap. There's got to be an easier way...

Research

I came across the concept of a "Classless CSS" framework. The specific package I found was Marx, the self proclaimed "...classless CSS reset (perfect for Communists)." The idea intrigued me. Some key features from Marx included:

• Responsive and mobile-friendly.
• Zero classes, so it already works with your HTML.
• It just works.

Say no more... I must be a Communist.

The Concept

I was hooked. I love the idea of having zero classes. Being able to just write clean HTML and have it displayed beautifully with minimal effort seemed unreal. This alleviates the need to name classes, and allows the developer to practice better semantics, rather than a <div class="whatever"> approach like Semantic UI or Tailwind.

The initial concept I had was to combine what I love most about a classless CSS package, like Marx, with what I love most about Antd's Row and Col, to create simple layout tool that just works. Seems like the beginning of a very powerful framework that would cut development time dramatically.

MVP

I wrote a basic Codepen illustrating how we can use the beginnings of a classless CSS library to easily layout an application.

Clearly more research is needed, and many other use cases tested, but a basic layout can be achieved by treating <main> as a container, <section> as Row, and <aside> as Col.

...
<main>
    <section>
    <aside>Hero</aside>
    </section>
    <section>
    <aside>Marketing Copy</aside>
    <aside>Marketing Copy</aside>
    <aside>Marketing Copy</aside>
    </section>
</main>
...

The trick is to add any basic HTML tags, and have them organized in a clean modern layout greatly decreasing engineering time.

Moving Forward

I'm going to continue working on this concept and hopefully have a full featured classless utility CSS library similar to Tailwind. Imagine Tailwind, meets Marx, meets Rebass in an extremely lightweight package.

Concerns

Concerns are primarily focused around accessibility and customization. I'm also concerned about the specific use cases for specific tags, and how that might affect the end user or the developer.

Final Thoughts

As I learn more about development, things like this excite me and I can't contain myself from trying new concepts.

If you would find this concept useful, I'd love to chat and brainstorm!

Find me on Twitter or LinkedIn