FED for BED
Shlomi Toussia-Cohen
FED
3 years in Wix
<UI Infra/> Team Leader
Formerly a Guild Master
Kickstart 4.0 FED Course Manager
A cloud-based folder that consists of all the designed/styled parts of a website or piece of software. (aka NPM module)
A Kit of reusable, Interconnected React components that conform to the UX Backoffice Design System
Slack: #wix-style-react
Our design system offers
Visual style, accessible UI components, UX patterns
Released as
React components via npm and Sketch symbols
Documented at
https://wix-wix-style-react.surge.sh
Produced by
A system team and community contributors
In order to serve
Wix dashboard and complimentary products (tens of products)
1. Foundation
2. Layout
3. Inputs
4. Selection
5. Buttons
6. Navigation
7. Tooltips
8. Notification Bars
9. Modals
10. Tables
heading, text
inputs, selection, buttons...
notifications, helpers, modals
Table
12 column Grid with Cards
your one stop shop for all FED projects
https://github.com/wix-private/fed-handbook
Slack: #fed-infra
Cherrypicking (most of the components)
import Button from 'wix-style-react/Button';
Named exported components (few components)
import {Container, Row, Col} from 'wix-style-react/Grid';
Compound components
import Card from 'wix-style-react/Card';
render(<Card.Header/>)
Tree-shakable (works, but we don't suggest it yet on our docs)
import {Button, Row, Card} from 'wix-style-react';
Not everything sits on the outer Grid components
However, the design system is 6px based system
Need to space two items? use margins
6px 12px 18px
6*1px 6*2px 6*3px
<Box/> component for the rescue!
Text typographies are predefined in the following components
<Text/>
<Heading/>
Find out more about these components here
Create custom CSS Using SCSS and CSSModules
import styles from './App.scss'; ... const App = () => ( <div className={styles.root}></div> );
making asynchronous network requests in the wix stack
import axios from 'axios'; const res = await axios.get('/my-endpoint'); const data = res.data;
In the header
1. Page (a bit tricky)
2. Button
In the content
1. Grid
2. Card
3. FormField
4. Input
5. InputArea
6. Dropdown
7. Checkbox
8. Text
1. Make sure
2. Page need an extra custom div (with sizes) on top of it
3. Create the margins between the buttons with some span.
4. Make sure you're familiar with the Controlled/Uncontrolled pattern
making asynchronous network requests in the wix stack
/** src/server.js */ const colors = [ { id: 'Red', value: 'Red' }, ]; app.get('/colors', (req, res) => { res.send(colors); });