Visually building websites – DEV Community

My identify is Aaron and I have been writing net functions since 2011. In that point I’ve labored with Java, Javascript, Python, XSLT, React, Knockout.js, Spine.js, Rails, Elixir/ Phoenix, Subsequent.js, Remix.js and extra.

In all of the frameworks, I stored working into the identical points…



The Drawback

Writing HTML and CSS by hand requires quite a lot of:

  • Area data
  • Troubleshooting
  • Open Documentation tabs
  • Time

Whereas writing person interfaces will be very enjoyable and rewarding, I discovered that an excessive amount of of my time constructing new functions was spent re-learning the identical patterns and re-writing the identical HTML. Not solely that however after speaking with friends, I discovered many software program builders did not really feel assured making good trying net pages due to the HTML and CSS data barrier. Many would write the code, however at all times get confounded when the browser gave them totally different outcomes than what was anticipated (“How do I vertically middle this factor???”).



Present instruments

After some analysis, I discovered instruments that had been visible (like Elementor) and had templates for code re-use, however lacked instruments that made them helpful for my net improvement workflow. I wished a software that:

  • Has templates and a drag and drop web page builder
  • Works with my CSS framework of alternative
  • Exports clear code (No pointless inline types or machine-generated lessons)
  • Is configurable and grows with my undertaking



The Answer

I began work on ProductDiv in July of 2021. It went by means of many design iterations to lastly grow to be a productive software for net improvement.

ProductDiv is an open-source library for growing net functions shortly, with any CSS framework. It accomplishes this by working totally on configuration!

Has templates and a drag and drop web page builder

In ProductDiv, you possibly can write re-usable templates and embrace them in your configuration. A easy template definition is a straightforward as:

const myTemplate = {
  identify: 'Take a look at',
  htmlTemplate: '<h1>Hiya World!</h1>',
  tags: ['Test'],
}
Enter fullscreen mode

Exit fullscreen mode

Any template will be previewed inside your web page, that means should you make adjustments in your CSS, they’re mirrored in your template!

Works with my CSS framework of alternative

The true magic of ProductDiv is in its configuration. Since increasingly more CSS frameworks have moved in the direction of utilizing utility lessons, I wished to design an expertise for simply deciding on and making use of them to current components. With slightly configuration, you possibly can encapsulate any utility class like so:

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

export const MarginStart = {
  identify: "Margin Begin",
  kind: "selectMany",
  lessons: [
    "ms-(0|1|2|3|4|5|auto)",
    `ms-(${themeBreakpoints})-(0|1|2|3|4|5|auto)`,
  ],
  tags: ["Spacing", "Margin"],
  selectors: ["h1"]
};
Enter fullscreen mode

Exit fullscreen mode

This instance configuration is what is required to encapsulate all of Bootstrap 5’s Margin Finish lessons. Its identify is proven within the editor, lots of them will be chosen directly, and the shorthand lessons syntax is expanded at runtime to avoid wasting time. For instance m-(1|2) might be expanded to: m-1 and m-2. The selectors possibility lets you match utility lessons to components! On this exmaple, should you clicked a h1 tag, it will present our Margin Begin utility class on the prime. Within the ProductDiv editor, now you possibly can apply these lessons to any factor you need. Hovering over any of the choices applies it to the factor you are enhancing so that you by no means must second-guess which class you want!

Exports clear code (No pointless inline types or machine-generated lessons)

The great thing about ProductDiv and its configuration lets you generate code on the similar high quality you’d write it by hand. Templates copy out precisely as they got here in, and utility lessons aid you keep away from inline types all over the place and result in a extra constant code base.

Is configurable and grows with my undertaking

Since ProductDiv is totally configuration-based, it grows as you do. Have to encapsulate a brand new design factor? Make a template. Pull in an icon library? Write a easy utility class definition. ProductDiv’s straightforward to make use of interface helps you to spend extra time designing and fewer time digging by means of documentation.



How do I get began?

To study extra concerning the editor, check out the tutorial.Take a look at the ProductDiv documentation for directions on learn how to add ProductDiv to your undertaking. If you want to avoid wasting time in your subsequent software, please take a look at our Bootstrap PRO undertaking that features the whole lot you want for constructing your subsequent software shortly with Bootstrap 5!

Add a Comment

Your email address will not be published. Required fields are marked *