Core Concepts

While Clutch has some features you’re familiar with from other visual builders, there’s a lot that makes our tool unique. This article reviews the core concepts behind Clutch. With an understanding of how thing are organized in Clutch, you’ll be able to build your ideas easily.

Workspaces

What is a Workspace?

A Workspace is the highest-level organizational entity in Clutch, acting as a container for your Projects, Members, and Collaborators.
Workspaces allow you to separate different initiatives, ensuring projects and teams remain organized and manageable. This is especially useful when managing multiple clients or products under the same account.
Within a Workspace, you can invite both team members and external collaborators to work on specific projects, making it ideal for cross-functional collaboration.

How to use Workspaces

Creating a Workspace

Navigate to the dashboard and click the ➕ icon at the top-right of the Workspaces area in the left-hand pane. Name your Workspace and add any initial details to define its scope.
Workspaces can be tailored with custom permissions to control access levels for team members and collaborators.

Removing a Workspace

Removing a Workspace is irreversible and will delete all the associated projects and data. Before deletion, ensure you've exported or backed up critical information.
To delete a Workspace, select the Workspace from the left-hand pane in your Dashboard, then select the “Workspace profile” tab at the top-right, and choose "Delete Workspace".

Inviting Members to a Workspace

A Member is someone who has access to your Workspace and its projects, typically someone internal to your team.
Members are assigned roles such as Admin or Team Member to control their access and permissions within the Workspace.
Members are a part of a paid-tier membership with Clutch. For more information on how to upgrade, check out our Pricing page.
To invite a Member to your workspace, select the desired Workspace, click "Members" tab at the top-right, and invite users via email or by sharing a unique invitation link.
You can pick to assign a role during the invitation process, such as Administrator or Team Member, to ensure proper access levels.

Removing Members from a Workspace

Go to the Members tab in your Workspace, locate the member you want to remove, and click "Remove".
Removing a member will revoke their access to all projects within the Workspace but will not impact the projects themselves.

Modifying the Role of Members from a Workspace

In the Members tab of your Workspace, locate the member you want to modify access to and select the dropdown menu to adjust their permissions. The effects will be immediate.

Folders

What is a Folder?

A Folder is a way to group related projects within a Workspace, helping you keep everything organized.
Use Folders to categorize projects by client, team, or initiative, streamlining the structure of a particular Workspace.

How to use Folders

Creating a Folder

To create a Folder, navigate to a Workspace, at the top-right of the screen next to the New Project button click the Folder icon.
You can also nest Folders within each other for deeper levels of organization. You can see this nesting on the left-hand pane in your Workspaces area.

Renaming a Folder

To rename a Folder click the ellipses to the right of a folder and click “Rename”.

Deleting a Folder

Deleting a Folder will automatically delete all projects contained within it, so ensure you no longer need those projects or have backed them up.
To delete a Folder click the ellipses to the right of a folder and click “Delete”.

Projects

What is a Project?

A Project is the primary unit of work within Clutch, where you design, build, and manage your application or site.
A single project is actually a single NextJS application under the hood. Clutch is a visual layer that sits on top of a NextJS project.

How to use Projects

Creating a Project

To create a Project, navigate to a Workspace, at the top-right of the click the “New Project” button. By default Clutch will create a new project based on the Blank Project Template and automatically open the Project for you.

Renaming a Project

Click the ellipses on the Project card and select “Rename”.
You can also edit the name of a Project by opening it and clicking the Project name in the top bar of Clutch.

Deleting a Project

To remove a Project, click the ellipses on the bottom-right of a Project card in your Dashboard and click “Delete Project”. This is irreversible and cannot be resurrected.

Sharing a Project with a Collaborator

A Collaborator is someone invited to work on specific projects within a Workspace, typically external partners, contractors, or clients.
Collaborators have limited access, ensuring they only interact with the projects they are assigned to.
To share a Project with a collaborator click the ellipses on the Project card and select “Share”. You can then invite users via email.
You can set specific permissions for Collaborators to limit their access to certain features or data. A Collaborator can either “View & Edit” or “View & Clone”.
Another way to share a project is to make the project link public and share the link with a Collaborator.

Removing a Collaborator

Go to the Collaborators tab within a Workspace, select the user, and click "Remove".
Once removed, the Collaborator will no longer have access to the project.

Moving a Project to a different Workspace

To move a Project to a different Workspace click the ellipses on the Project card and select “Transfer Ownership”. From there you will select the Workspace you want to transfer the Project to.

Moving a Project to a Folder

You can move a Project to a Folder by either dragging the Project card to a Folder you’ve created or you can click the ellipses on the Project card and select “Move to folder”. From there you will select the Folder you want to move the Project to.

Favoriting a Project

Marking a Project as a favorite makes it easier to access from the dashboard, helping you quickly jump to your most important work.
To Favorite a Project click the star icon on the Project card in your Dashboard.

Spaces

Monosnap_SWAPI_Playground_-_Clutch_Creator_2024-10-17_04-54-36.png

What is a Space?

A Space is a contextual environment within Clutch that organizes different aspects of your project development workflow.
Spaces allow you to focus on specific tasks or stages by providing dedicated areas for building sites, managing components, and brainstorming ideas.
Clutch offers three primary Spaces: Site Space, Components Space, and Boards Space, each tailored to streamline different parts of your development process.
You can switch between these Spaces within a Project by clicking the dropdown menu at the top-left of your Clutch window.

Site Space

The Site Space is where you build and manage your app or website, structuring pages, layouts, and sections to create a cohesive user experience.
In this Space, you can design your site's architecture, implement SEO strategies, and integrate various components to bring your project to life.
The Site Space provides tools for visual editing, ensuring you can construct your site efficiently without needing to dive deep into code.

Components Space

The Components Space is dedicated to creating reusable components that can be utilized across different projects.
Here, you can design, test, and refine components and variants, ensuring they meet your design standards and function correctly.
By centralizing component management, the Components Space promotes consistency and reusability, saving time and resources in your development process.

Boards Space

The Boards Space serves as a playground for ideas, allowing teams to brainstorm, plan features, and test out design and functionality concepts.
Use Boards to sketch out wireframes, create mood boards, or outline user flows, fostering collaboration and creativity among team members.
This Space is ideal for initial project planning and ongoing ideation, keeping all your conceptual work in one accessible place.

Site Space

The Site Space is where your the pages of your application or website is built, encompassing layouts, pages, sections, components, and primitives.

Layouts

Layouts remain consistent across multiple pages, providing a persistent structure that enhances user experience.
By reusing the same layout structure, you improve site performance and reduce redundancy in your design efforts.
A common structure of a Layout would include a header and a footer. Layouts can be nested within each other for easy flexibility across page types, like a Product Details page that has a breadcrumb section, or a Contact Page that would not have a breadcrumb section. Both would have the same header and footer, however.
In Clutch’s interface, layouts are outlined in green, making them easy to identify and distinguish from the page content within them.

Sections

A Section is a pre-designed part of a page, like a hero banner or a testimonial slider, sourced from the Clutch library, or custom-built.
Sections accelerate the building process by providing ready-to-use blocks that can be customized to fit your design.
Creating and reusing custom sections ensures a consistent look and feel across different pages and projects.
Sections can be dragged and dropped into pages, reducing the need for repetitive design tasks.

Components

A Component is a self-contained, reusable UI element or functionality that can be incorporated into pages and projects.
Components can be simple, like buttons or input fields, or complex, like carousels and modal dialogs.
Using components reduces development time and ensures a consistent user interface across your projects.
With components you can create multiple variants allowing you to have flexibility in design and still apply the constraints of your design system.

Elements

Elements are combinations of primitives that form more complex UI parts, like form fields, buttons with icons.
They are reusable within your project and can be customized to fit different contexts.
Elements are essential when creating custom components, allowing for modular and maintainable UI elements.

Primitives

Primitives are the most fundamental UI elements, such as text, images, and basic shapes.
They serve as the foundation upon which more complex elements and components are built.
Primitives come with default styling and behaviors, ensuring consistency and adherence to design principles.
For more detailed information check out the Primitives Overview document.

Themes

A well-defined design system facilitates scalability, making it easier to onboard new team members and expand projects.
Start by setting up global variables for colors, typography, spacing, and other stylistic elements.
Apply the design system to your projects to ensure consistency and efficiency.

Global Variables

Global variables allow you to maintain consistent values for design attributes like colors and font sizes across your entire project.
Changing a global variable will automatically update all instances where it's used, simplifying the process of making widespread design changes.

Global Selectors

Global selectors apply styles to all elements of a certain type, such as all headings or paragraphs, without needing to style each one individually.
They enable you to override default browser styles or third-party component styles to match your design system.
Define global selectors in your main stylesheet or design system settings, and they will automatically apply to matching elements.

Libraries

What is a Library?

A Library is a curated collection of components, sections, styles, and assets that can be reused across multiple projects. You can create your own, share them with your team, or publish them to the Marketplace.
Libraries help maintain a consistent design language and functionality, especially when working on multiple projects or with large teams.
Like templates, libraries are cloned when installed, so they don't receive automatic updates, giving you control over when and how to update components.

How to Create a Library

Collect the components, sections, and styles you wish to include in your library within a Project.
At the top-right of your Clutch window click the Publish button and under the “Library” area, click Publish.
Type in the version and a brief description and click Publish.
This will generate a shareable link to your Project’s Library.
Your team members can use this link to install the contents of your Library into their Projects.

Project Templates

What is a Project Template?

A Project Template is a pre-configured project setup that includes layouts, pages, components, and settings, serving as a more complete starting point for new Projects compared to Libraries.
Project Templates are cloned from their source upon installation, so they do not receive automatic updates, allowing you full control over any modifications. This also gives the creator of the Project Template the freedom to update it without affecting any other projects it was cloned from.
Project Templates are ideal for creating similar types of projects repeatedly, such as blogs, portfolios, or e-commerce sites, saving time on initial setup.
To create a Project Template you would configure a project with the desired layouts, pages, components, and settings you want to reuse.

Project Templates can be published to the Clutch Marketplace or shared with your Workspace and Team.
Within your Project click the Publish button at the top-right of your Clutch window, and within the Project Template section, click “Publish”.
Your team members can use this link to install the contents of your Library into their Projects.

Components Space

The Components Space is where you create, modify, and organize all your components and elements for use across projects.
Create and manage different variants of components, making it easier to stay consistent with brand guidelines.

Boards Space

The Boards Space is an infinite canvas for teams to brainstorm, plan, and visualize ideas collectively.
Use boards to create wireframes, design mockups, user flows, or to map out project timelines and tasks.
Elements from Boards can be directly implemented into your projects, bridging the gap between planning and execution.
By default every Project has a board called “Project Cover”. The contents of this board is what shows up in your Dashboard for your Project card.

How to Create a Board

Navigate to the Boards Space from within your Project.
Click on the ➕ icon next to the Spaces dropdown to start a fresh canvas.
Give your board a descriptive name that reflects its purpose.

Next steps

Check out our Start Guide to put these concepts in action.