@ollion/flow-core
v2.10.0
Published
Core package of flow design system
Downloads
836
Readme
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.
Table of contents
- Starter-kits
- Install for an existing project
- VScode Plugin and debuggers
- Components
- Templates
- Resources
- Figma for designers
- Get in touch
Getting started
Starter kits
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)
Kits
If you would like to contribute to an existing starter kit or write a new one for a different framework, write to [email protected] 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
Note: For Typescript, make sure you are using version >4.5
Existing project
1️⃣ Install flow core
npm i --save @ollion/flow-core
Note: after installation re-start your application.
2️⃣ 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 "@ollion/flow-core";
3️⃣ If your project uses Typescript (>4.5) please include import types
Vue:
Copy paste below line in your main.ts
file.
import "@ollion/flow-core/dist/types/vue2";
or
import "@ollion/flow-core/dist/types/vue3";
React
Include react type in tsconfig.json
like below
"include": ["src", "./node_modules/@ollion/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.
1️⃣ Install the icon pack
npm i --save @ollion/flow-system-icon
2️⃣ Import the icon pack
import "@ollion/flow-core";
import "@ollion/flow-system-icon";
VScode Plugin and debuggers
Install Flow's Plugin to access components, icons, values, etc, and documentation inside of VScode.
Browser Debugger: Chrome, Firefox, Safari
Components
Visit the Flow components Storybook
Templates
Visit the Flow templates Storybook
Dependencies
- Tables (In development)
- Logs (coming soon)
- Force graph (coming soon)
- Themes (coming soon)
- Time-series (coming soon)
Resources
Get in touch
If you would like to get in touch or contribute, please write to [email protected].