Skip to content

bdolly/kf-uikit

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

UIKit

Kids First UI Kit

A design system and component library for Kids First projects.

Getting Started

Create React App

Get started with the UIKit in a new react application in just a couple steps:

create-react-app my-app
cd my-app
yarn add https://kf-uikit.kids-first.io/1.0.0/kf-uikit/kf-uikit.tar.gz


// src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import 'kf-uikit/dist/styles.css';
import { Button } from 'kf-uikit';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button color='primary'>Hello</Button>
      </div>
    );
  }
}

export default App;

CSS Only

Include the stylesheet in your head to get started started styling any webpage.

<link href="https://kf-uikit.kids-first.io/styles.css" rel="stylesheet">

Development

Use the storybook for development of new components and styles:

yarn storybook
// -> open localhost:9001 in the browser

Adding new components

Start by reading the Design Process Docs

New components should have a layout as seen below:

src/
└── components
 Β Β  β”œβ”€β”€ Button
 Β Β  β”‚   β”œβ”€β”€ __tests__/
 Β Β  β”‚   β”œβ”€β”€ Button.jsx
 Β Β  β”‚   β”œβ”€β”€ Button.story.jsx
 Β Β  β”‚   └── Button.css
 Β Β  └── index.js

Using Tailwind @apply helper

When composing utility classes to bulid a component the following order should be followed when declaring properites

  • layout/box styles
    • position (z-index)
    • display
    • dimension (width, height)
    • margin/padding
    • background styles
    • border styles
  • typography styles
    • font family
    • font-size
    • font style (italic, bold, etc)
    • font color
    • font alignment
  • pseudo selectors
  • child selectors

example:

 @apply
  block
  w-1/2
  h-3
  m-3
  p-4
  bg-primary
  border-grey
  border-2
  rounded
  font-heading
  text-2xl;

About

🎨 Design System for Kids First

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 90.0%
  • CSS 9.6%
  • HTML 0.4%