Visually building websites

My name is Aaron and I've been writing web applications since 2011. In that time I've worked with Java, Javascript, Python, XSLT, React, Knockout.js, Backbone.js, Rails, Elixir/ Phoenix, Next.js, Remix.js and more.

In all the frameworks, I kept running into the same issues...

The Problem

Writing HTML and CSS by hand requires a lot of:

• Domain knowledge
• Troubleshooting
• Open Documentation tabs
• Time

While writing user interfaces can be very fun and rewarding, I found that too much of my time building new applications was spent re-learning the same patterns and re-writing the same HTML. Not only that but after talking with peers, I found many software developers didn't feel confident making good looking web pages because of the HTML and CSS knowledge barrier. Many would write the code, but always get confounded when the browser gave them different results than what was expected ("How do I vertically center this thing???").

Existing tools

After some research, I found tools that were visual (like Elementor) and had templates for code re-use, but lacked tools that made them useful for my web development workflow. I wanted a tool that:

• Has templates and a drag and drop page builder
• Works with my CSS framework of choice
• Exports clean code (No unnecessary inline styles or machine-generated classes)
• Is configurable and grows with my project

The Solution

I started work on ProductDiv in July of 2021. It went through many design iterations to finally become a productive tool for web development.

ProductDiv is an open-source library for developing web applications quickly, with any CSS framework. It accomplishes this by running entirely on configuration!

Has templates and a drag and drop page builder

In ProductDiv, you can write re-usable templates and include them in your configuration. A simple template definition is a simple as:

const myTemplate = {
  name: 'Test',
  htmlTemplate: '<h1>Hello World!</h1>',
  tags: ['Test'],
}

Any template can be previewed inside your page, meaning if you make changes in your CSS, they are reflected in your template!

Works with my CSS framework of choice

The real magic of ProductDiv is in its configuration. Since more and more CSS frameworks have moved towards using utility classes, I wanted to design an experience for easily selecting and applying them to existing elements. With a little configuration, you can encapsulate any utility class like so:

const themeBreakpoints = "sm|md|lg|xl|xxl";

export const MarginStart = {
  name: "Margin Start",
  type: "selectMany",
  classes: [
    "ms-(0|1|2|3|4|5|auto)",
    `ms-(${themeBreakpoints})-(0|1|2|3|4|5|auto)`,
  ],
  tags: ["Spacing", "Margin"],
  selectors: ["h1"]
};

This example configuration is what is needed to encapsulate all of Bootstrap 5's Margin End classes. Its name is shown in the editor, many of them can be selected at once, and the shorthand classes syntax is expanded at runtime to save time. For example m-(1|2) will be expanded to: m-1 and m-2. The selectors option allows you to match utility classes to elements! In this exmaple, if you clicked a h1 tag, it would show our Margin Start utility class at the top. In the ProductDiv editor, now you can apply these classes to any element you want. Hovering over any of the options applies it to the element you're editing so you never have to second-guess which class you need!

Exports clean code (No unnecessary inline styles or machine-generated classes)

The beauty of ProductDiv and its configuration allows you to generate code at the same quality you would write it by hand. Templates copy out exactly as they came in, and utility classes help you avoid inline styles everywhere and lead to a more consistent code base.

Is configurable and grows with my project

Since ProductDiv is entirely configuration-based, it grows as you do. Need to encapsulate a new design element? Make a template. Pull in an icon library? Write a simple utility class definition. ProductDiv's easy to use interface lets you spend more time designing and less time digging through documentation.

How do I get started?

To learn more about the editor, take a look at the tutorial.Check out the ProductDiv documentation for instructions on how to add ProductDiv to your project. If you would like to save time on your next application, please check out our Bootstrap PRO project that includes everything you need for building your next application quickly with Bootstrap 5!