picasso-pkg v1.0.11

Welcome to Picasso

Picasso is the official design system for ReifyHealth's family of digital products. The system consists of atomic UI components, tools and resources. The goals of the system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

Using the Package in Salk and beyond!

Prerequisites

To run Gallery locally, you will need: brew install yarn pip install simple_http_server

Install the package

To use the picasso-pkg library, you'll need to add the package by running: npm install https://github.com/reifyhealth/picasso-pkg.git

or if you're using yarn: yarn add https://github.com/reifyhealth/picasso-pkg.git

or include "picasso-pkg": "ssh://git@github.com:reifyhealth/picasso-pkg.git" in the dependencies section of your package.json file.

NOTE: Manual process

The package requires that some files are located in your /public directory. For example, the Ant theme CSS and the FontAwesome stack. To accommodate this, run:

(This script assumes your public dir is resources/public)

cp -r node_modules/picasso-pkg/dist/stylesheets/themes/*.css resources/public/themes/ cp -r node_modules/picasso-pkg/dist/stylesheets/fontawesome/fonts/webfonts resources/public/fonts/

Finally, include the theme css file in your HTML template. <link rel="stylesheet" href="css/themes/antd.spruce.css"/>

TODO Create a script to handle this. Something like, picasso install

Inside the package

The picasso-pkg ships with all the Ant Design atomic level UI components, foundational SCSS bundle and Font Awesome Pro 5 icons.

The Atomic Components are

Layout

Divider Grid Layout Space

Buttons and Navigation

Affix Breadcrumb Button Dropdown Menu Steps PageHeader Pagination

Data Entry

AutoComplete Checkbox Cascader DatePicker Form InputNumber Input Mentions Rate Switch Slider Radio Upload

Data Display

Avatar Badge Comment Collapse Carousel Card Calendar Description Empty List Popover Statistic Tree Tooltip Timeline Tags Tabs Table

Feedback

Alert Drawer Modal Message Notifications Progress Popconfirm Result Spin Skeleton

Using the SCSS from the package

To use the foundational SCSS provided by Picasso. Import the following SCSS files from the package into your SCSS files.

// Picasso SCSS
@import 'node_modules/picasso-pkg/dist/stylesheets/picasso.base.scss';

// App specific SCSS will go here
@import 'components/app-component';

Using the UI components in ClojureScript

To use the Picasso components in ClojureScript, we'll have to require the namespace. Note This instruction assumes you are using Reagent.

// Require the ns
(:require
  [reagent.core :as r :refer [atom]]
  ["picasso-pkg" :as pui :refer [Button Layout Layout.Content]])

// Use the components
[:> Layout
  [:> Layout.Content
    [:> Button "Click me!"]]]

Local Development Quickstart: Running the Gallery from your project

You have the option to run the gallery from your project. To do this, run: cd node_modules/picasso-pkg/public/ && python -m SimpleHTTPServer http://localhost:8000/storybook-static/

Local Development Quickstart: Running the Gallery

Install the packages via yarn with: yarn install

The Gallery is powered by Storybook. To run the Storybook part of this project, run: yarn storybook

To build the Storybook part of this project, run: yarn build-storybook

The output will be:

public/*
public/storybook-static/*

Building the project for distribution

To build the project, run: yarn build-pui

The output will be:

dist/stylesheets/**/*.scss
index.js

Creating a theme

1. Be sure you have less installed globally by running npm install less -g.
2. Once you have Less installed, you can run: lessc src/ant-theme/antd-sites-alt.less src/stylesheets/themes/antd-sites-alt.css --js

Alternatively, you can run: ./scripts/themes.sh. This will compile all the .less files in the stylesheets/themes directory and output .css files of the same name.

Ant variables are here: https://raw.githubusercontent.com/ant-design/ant-design/master/components/style/themes/default.less

Special thanks to SCSS Export

sass-export

Scans an SCSS file containing variables and exports JSON. Very helpful! sass-export src/stylesheets/_colors.scss colors.json

Picasso Partner Bundle

To accommodate third-parties that need CSS assets, we have created two files:

• ./dist/stylesheets/picasso.partner-bundle.scss
• /public/picasso.partner-bundle.scss

This file imports a limited set of CSS classes and can be dropped into any project. To compile the bundle, run:

node-sass src/stylesheets/picasso.partner-bundle.scss public/picasso.partner-bundle.css

To see what styles are available in the Picasso Partner Bundle, run yarn storybook and navigate to the:

• Colors
• CSS Utils