Support Article

Integrating Chalk to existing projects

Learn how to integrate Chalk into existing projects with the best results.

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 ->

Integrate Chalk to Existing Projects.

When using Chalk, we recommend beginning from the starter project for the most seamless development experience. However, we know that's not always possible, so here are some tips on integrating Chalk into your existing project.

1. Starting from an existing project (non Client-First)

If you plan to add Chalk components to an existing project that is not Client-First, then you will need to setup some styles. 

Chalk components have some dependences in the form of global classes which should be added to your project prior to pasting them in. The following steps out all the requirements before pasting into a non-client-first project.

  1. Install the Finsweet Chrome Extension and add the Client-First Spacing System to an empty page on your project
  2. Navigate to the margin spacing section and add three new custom margin spaces with the class names and values as outlined below
    1. margin-custom1 = 0.75rem
    2. margin-custom2 = 1.5rem
    3. margin-custom3 = 2.5rem
  3. Install the xAtom Chrome Extension and turn it on
  4. Copy the starter project style guide into the empty page

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?