Kushy Design
A human-centered design framework and UI system based on Semantic UI.
Getting Started
npm install kushy-design && semantic-ui-react --save
You can find this package on NPM here
Using CSS
- Import the master CSS file:
import 'kushy-design/semantic/dist/semantic.css'
- Or import any component CSS needed:
import 'kushy-design/semantic/dist/components/button.css'
Using Components
- Import the component: `import { Button } from 'kushy-design'
- Use it:
<Button />
Using SUI React Components
Use any SUI React components as needed. Make sure to import CSS (either compiled/master file or component-based CSS).
{ const headerItemsCollection = 'topicals': 'Name' 'List Price' 'Sales Price' const headerItems = headerItemsCollectionsection return <ReactFragment> <TableRow> <TableHeaderCell colSpan= headerItemslength > section </TableHeaderCell> </TableRow> <TableRow> headerItems </TableRow> </ReactFragment> }
Development
Quick Start
git clone https://github.com/kushyapp/kushy-design.git
cd kushy-design
npm install
npm install gulp-cli -g && npm install gulp -D
Gulp is required by Semantic UI to build the CSS and JS files after modifying with new properties.
Modifying CSS
- Change any CSS overrides/variables in the SUI theme (
semantic/src/themes/kushy-v1
) - Build CSS -
cd semantic && gulp build
- Commit changes to master + push to repo
Documentation
All the documentation for this design system is locally based. You can find all the raw documentation in Markdown format in the /docs/
folder. These files are imported into another project that handles the build process, since documentation theming can be fickle - and will be dramatically changed over time.
NPM
To publish to NPM, run these commands inside project:
npm login
npm version <update_type>
npm publish