Support Article

Getting Started with Chalk

Learn how to get started building with Chalk, our all-in-one design and development system.

Back to Support Centre
View Support Center
View articles to common problems to solve issues.
Support Center ->
Chat with us
Still need help? Please get in touch with our team!
Get in Touch ->

Introduction to Chalk UI development

Chalk UI is a design and development system built for Webflow, Figma & Framer. It offers a complete solution to create and build enterprise quality projects from design in Figma through to development with Webflow & Framer. This article is designed to help you get started building with Webflow, and steps out the simple requirements before starting your project development.

πŸ‘‰ Browse Components
πŸ‘‰ Clone Starter Project
πŸ‘‰ Get Figma Version

1. Starter Project

Chalk is a system based project, and it is required that you follow these two basic steps to ensure the best experience during development.

πŸ‘‰ Clone Starter Project
πŸ‘‰ Install xSync for Webflow

Chalk is built with Client-First and with this starter project, all the basic Client-First classes have been provided. This will also serve as a central location to update styles across all components when you paste them into your project. If you're new to Client-First they offer detailed documentation and videos to help you get started building.

2. Chrome Extensions

Additionally, before you start development we recommend you install some Chrome extensions to power-up your workflow. Although these extensions are not required, we highly recommend them for ease of use and to simplify your process of adding components and the handling of duplicate classes.

πŸ‘‰ Flowbase Chrome Extension will allow you to access all of Chalks' components from directly inside your Webflow designer. It also comes with a suite of tools and features to improve your workflows.
πŸ‘‰ xSync Chrome Extension will monitor your projects and merge incoming classes to existing classes when a match is found. This is useful to reduce class duplication issues when pasting components from the library into your project, as if the class exists (eg. text-small) the component will automatically match your design.

3. Update Starter Project

Before you start adding components, we recommend you establish your project foundations through the Style Guide on the Starter Project. Here you can adjust the colors, typography and font styles, padding variables and so much more.

You can always adjust these on-the-fly, but it is typically recommended that you explore the style guide and set up some core foundations for your project before you start adding components.

4. Browse & Paste Components

That's it, you're ready to start building. Simply browse the Chalk library and copy any component you want into your projects.

These components are designed to be customized, so get creative and start adjusting them for your own needs. New components will be added regularly so check back often.


Asked Questions

Everything you need to know about the product and billing.

What is Flowbase
What products do you offer?
How does it work?
What are components?
What happens to my site after I cancel?
Are templates included in the premium membership?
Can I use Flowbase components to create websites for my clients?
How often are new components added?
Does copying components work with Safari?
Can we copy unlimited components?
What is the difference between a premium subscription vs free?
What payment methods do you accept?
Do you offer a free trial?
Do you offer refunds?