Concepts of SabaccUI Pro

Core Concepts

Tight Integration

SabaccUI leverages a tight integration between NuxtJS + Storyblok, utilizing its own open-source boilerplate. This integration allows developers to harness the power of both technologies effortlessly:

• NuxtJS: A powerful Vue.js framework that simplifies the development of server-side rendered (SSR) applications.
• Storyblok: A headless CMS that provides a flexible content management solution.

The tight integration ensures that bloks and templates work harmoniously with Storyblok's content structure, making it easier to create dynamic and content-driven applications.

Copy vs. Link

Unlike traditional component libraries, SabaccUI adopts a "copy" approach rather than linking components:

• Copying Components: Instead of importing components from a package, developers copy the desired components directly into their project.
• Increased Flexibility: This approach allows for greater customization and flexibility, as developers can easily modify bloks to fit their specific needs.
• Inspired by shadcn/ui: This methodology is inspired by the shadcn/ui library, which has demonstrated the benefits of this approach in terms of adaptability and maintainability.

Blok Structure

SabaccUI follows a structured approach to blok organization, inspired by atomic design principles:

1. Atoms

• The smallest possible bloks
• Examples: buttons, headlines, images
• Highly reusable and versatile

2. Molecules

• Compositions of atoms and/or more complex bloks
• Examples: Grid, card bloks, navigation bars
• Represent distinct UI sections with specific functionality

3. Organisms

• Compositions of molecules and atoms
• Examples: headers, footers, content sections
• Comparable to content elements from traditional CMS systems
• Represent larger, more complex UI bloks

This structure promotes a modular and scalable approach to UI development, allowing for easy maintenance and consistent design across the application.

Technology Stack

SabaccUI is built on a modern and robust technology stack:

• NuxtJS: For server-side rendering and efficient Vue.js development.
• TypeScript: Ensuring type safety and improved developer experience.
• TailwindCSS: For rapid and customizable styling. You're free to choose your own CSS framework or write your own CSS.
• Storyblok: As the headless CMS for content management.

Best Practices

When working with SabaccUI:

• Maintain the atomic structure when creating new bloks. This ensures consistency and reusability.
• Utilize TypeScript for type safety and better code quality.
• Leverage TailwindCSS utility classes for consistent styling. You can also extend TailwindCSS with custom classes.
• Keep bloks modular and reusable. Avoid hardcoding content where possible.
• We encourage you to commit the unmodified files imported from SabaccUI and create a commit for your modifications. So, you can easily track changes and updates.

By leveraging the concepts and structure of SabaccUI, developers can create robust, scalable, and maintainable web applications with a seamless integration between NuxtJS + Storyblok.