🎨 CSS Framework Support

ContentBuilder.js works seamlessly with popular CSS frameworks like Bootstrap, Tailwind, Foundation, and more. It allows you to define grid classes so the editor generates markup compatible with your chosen framework — without modifying individual snippets.

You can specify the CSS classes used for rows and columns using the row and cols options when initializing ContentBuilder.

Bootstrap Example

const builder = new ContentBuilder({
    container: '.container',
    row: 'row',
    cols: [
        'col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6',
        'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'
    ]
});

This tells ContentBuilder to use Bootstrap's grid system when building content.

Tailwind Example

const builder = new ContentBuilder({
    container: '.container',
    row: 'flex flex-col md:flex-row',
    cols: [
        'w-full md:w-1/12 px-4',
        'w-full md:w-2/12 px-4',
        'w-full md:w-3/12 px-4',
        'w-full md:w-4/12 px-4',
        'w-full md:w-5/12 px-4',
        'w-full md:w-6/12 px-4',
        'w-full md:w-7/12 px-4',
        'w-full md:w-8/12 px-4',
        'w-full md:w-9/12 px-4',
        'w-full md:w-10/12 px-4',
        'w-full md:w-11/12 px-4',
        'w-full px-4'
    ]
});

Here, we're using Tailwind’s utility classes to create a responsive flex-based grid layout.

Benefits of This Approach

• Snippets automatically adapt to your framework’s grid system.
• No need to modify content.js or other snippet files when switching frameworks.
• Works with any CSS framework that supports a grid or flexbox system.

Notes

While ContentBuilder supports most CSS grid frameworks, some may require additional CSS adjustments to ensure full compatibility.