CSS Classes - UI Styling

Webframe uses class names defined in CSS stylesheets to style application interfaces. This way, your app can support multiple UI themes without doing extra work.

To style a component, simply add and compose CSS class names until you get the desired look and feel.

With Webframe Editor you can easily style reusable components, design UI Templates and build application screens with a drag & drop GUI (graphical user interface).

Preview Intellisense

Example CSS class preview in Webframe Editor

Webframe Editor features CSS intellisense, similar to Tailwind Intellisense for VSCode or WebStorm, but with comprehensive CSS previews.

This is great for team collaboration, because designers can browse available styles in the project without searching docs or digging in the source code.

How Does It Work?

Behind the scene, Webframe Compiler automatically creates CSS preview for all CSS classes found in your project. This includes Tailwind utility classes, Webframe Styles, and your own custom written CSS classes.

In the demo above, .bg-primary is a custom CSS class from Webframe UI Styles. It has CSS preview generated by the compiler.