@cldcvr/flow-core

Flow/flow-core

Flow-core is the base library required by any flow dependecies. It consists mostly of building blocks such design + system tokens, atoms, molecules, base themes, etc.

You learn more about flow here

Getting started

For a new project

Flow has put together starter kits with basic dependencies to get you going. Each starter kit will contain Flow core, Flow system icons, Default google fonts and fully functional Flow templates (eg: top navigation, profile, left navigation, etc)

Starter kits

• Vue JS
• Aungular
• React

If you would like to contribute to an existing starter kit or write a new one for a different framework, write to [e-mail] or ping on our slack channel.

VScode Plugin: Install Flow's Plugin to access components, icons, values, etc, and documentation inside of VScode.

Browser Debugger: Chrome, Firefox, Safari

---

Existing project

Step 1: Install flow core

yarn add @cldcvr/flow-core

Note: after installation re-start your application.

Step 2 : Import CSS

Vue: Paste the below snippet after the closing <template> in your App.vue

<style>
@import "@cldcvr/flow-core/dist/style.css";
</style> 

React: Paste the below snippet in src/index.tsx or index.jsx

import "@cldcvr/flow-core/dist/style.css";

Angular: Add css file path in angular.json in styles property array.

"styles": ["@cldcvr/flow-core/dist/style.css"],

Step 3: Import flow-core into your project

Copy and import the below snippet into your startup file. In VueJS: (src/main.ts or main.js), Angular: (src/main.ts), React: (src/index.tsx or index.jsx)

import("@cldcvr/flow-core").then(async () => {
  //your application startup code
});

Step 4 : If your project is typescript enabled please include import types to

Vue: Copy paste below line in your main.ts file.

import "@cldcvr/flow-core/dist/types/vue2";

or

import "@cldcvr/flow-core/dist/types/vue3";

React Include react type in tsconfig.json like below

"include": ["src", "./node_modules/@cldcvr/flow-core/dist/types/react.ts"]

Note: after adding the snippets, re-start your application.

Flow icons

Icons are not packaged with Flow core to allow more flexibility and customization. We recommend that you install the system icon pack to get started.

Step 1: Install the icon pack

yarn add @cldcvr/flow-system-icon

Step 2: Import the icon pack

import("@cldcvr/flow-core").then(async () => {
	await import('@cldcvr/flow-system-icon');
	//add your application startup code here
});

Icon packs

• Product icons (logos of other products)
• AWS cloud
• GCP cloud
• View all

VScode Plugin and debuggers

Install Flow's Plugin to access components, icons, values, etc, and documentation inside of VScode.

Browser Debugger: Chrome, Firefox, Safari

Dependencies (coming soon)

• Tabs (coming soon)
• Form builder (coming soon)
• Pipelines (coming soon)
• Logs (coming soon)
• Tables (coming soon)
• Themes (coming soon)
• Time-series widgets (coming soon)
• Lineage (coming soon)
• Auth flow (coming soon)
• Admin flow (coming soon)

Components

• Button - documentation | Storybook
• Icon - documentation | Storybook
• Layout (f-div) - documentation | Storybook
• Icon-button - documentation | Storybook
• Typography (f-text) - documentation | Storybook
• Tooltip - documentation | Storybook
• Colors - documentation | Storybook

Resources

• Documentation
• Figma for designers
• Releases