sidiuskomeh/playkit-ui

Easy to use UI Kit for distribution

PlayKit UI

• We’ll be implementing this UI Kit using the atomic approach. i.e Build from atoms > Molecules > Elements. This means we’ll be designing the individual elements first, before designing the blocks then moving on to templates and full screens.

• We can also go as far as creating theme related templates such as —Ecommerce —Bot Design —Video Streaming —Social Sharing —Fintech & Digital Banking

We can distribute these across available hands for speed.

• Icon Design. The vision is to create our own custom icons but it remains up for debate. If the workload proves too much, we can ship with font-awesome and update with our local icon-pack later on Custom Icons are definitely happening! Thanks to @Flox :)

• Do we go as far as generating HTML/CSS/JS for this Kit as well as….wait for it… React Components? YES WE CAN!!!!!

Atoms

• Form fields (Text Input, Labels, Selectors, Date picker, Checkboxes, Radio, Image upload)
• Badges/Tags
• Overlays (Popups, Modals, Tooltip)
• Buttons
• Banners
• Cards
• Accordion
• Tables
• List
• Link
• Alerts / Notifications
• Pagination
• Context/Overflow menu
• Progress Indicator
• Progress Bar
• Search
• Toggle
• Loading
• Breadcrumbs
• Thumbnails

Molecules

• Cards
• List Groups
• Nav
• Page Headers
• Pagination
• Tiles

Organisms

Icons

• Home
• Mail
• Photos
• Contacts
• Info
• Chevrons (Back, Front, Left, Right)
• Arrows (Back, Front, Left, Right)
• Star
• Like
• Cart
• User Profile
• Camera
• Share
• Airtime
• Funds Transfer
• Money
• Notification
• Phones

Contributing

We are glad you want to contribute to Playkit. We are looking forward to the awesome stuff you want to add to the kit.

We can have the following Versions

• Master - Stable and Ready to Ship
• Development - gets updated constantly from WIP.
• WIP/Feature - Individual Branches we can all be working from

We update Master from Development on a weekly schedule, every Monday. If you're working on has anything you can deliver before Monday, it will be reviewed and merged. If its not ready then, you can wait till the following week, no pressure. If anyone is working on anything that will take more than a week, be ready to update your version by Tuesday.

Branch Naming

To help understand what your awesome contribution entails we'll need you to give your branch a short very descriptive name

Tag all branches with wip-Branch-Name

Commit Messages

Commit messages should be descriptive and should provide information about what was worked on.

They should be in the following format

[ Update ] Dropdowns and Checkboxes

They can be of three types

• Update
• CleanUp
• Refactor

Updates

These are additions to the existing elements on the kit

Update Commits are denoted with [ Update ] Commit Message

CleanUp

These aren't additions but chores, house cleaning, and clean ups.

CleanUp Commits are denoted with [ CleanUp ] Commit Message

Refactor

If after review, an element is highlighted to be changed. You can pick it up, do your magic and call it a refactor.

Refactor Commits are denoted with [ Refactor ] Commit Message

Pull Requests

a.k.a PR; These are created when you're done with your feature/Component and you want us to update it with your awesomeness.

To help understand what you've worked on, a jpeg or png export of your design can be used as a description of Pull Requests.

Your PR should be always be against the Development Branch

Do and Dont's

The Playbook UI-Kit wont be awesome without a couple of rules.
Here are they:

• Never Push to master