Quick Prototyping kit

Demo

Documentation

https://quick-proto-kit.gitbook.io/go

Install

Quick proto Kit is based on styled-compoenents. To use it you must install all of these.

npm install --save styled-components

npm install --save quick-proto-kit

Usage

import React, { Component } from 'react'

import {View, Text, Image, Stack} from 'quick-proto-kit'

class Example extends Component {
  render () {
    return (
      <Stack horizontal mid bg={'#ffffff'} height={'200px'} >
          <View width={'100px'} height={'100px'} bg={'#f5f5f5'} />
          <View width={'100px'} height={'100px'} bg={'#efeff4'} />

      </Stack>

    )
  }
}

Documentation

Stack

Layout

Property | Meaning | Syntac ------------ | ------------- | ------------- horizontal | Align all child elements horizontally | <Stack horizontal /> vertical | Align all child elements vertically | <Stack vertical /> center | center all child element horizontaly | <Stack center /> mid | center all child element vertically | <Stack mid /> top | Top Align all child elements | <Stack top /> bottom | Bottom Align all child elements | <Stack bottom /> left | Left Align all child elements | <Stack left /> right | Right Align all child elements | <Stack right />

Alignment

Property | Meaning | Syntac ------------ | ------------- | ------------- center | center all child element horizontaly | <Stack center /> mid | center all child element vertically | <Stack mid /> top | Top Align all child elements | <Stack top /> bottom | Bottom Align all child elements | <Stack bottom /> left | Left Align all child elements | <Stack left /> right | Right Align all child elements | <Stack right />

View

Dimensions

Property | syntax ------------ | ------------- Height | <View height={'value'} /> Width | <View width={'value'} />

Colors

Property | syntax | detail ------------ | ------------- | ------------- Background color | <View bg={'value'} /> | Value: '#ffffff' or 'themeColor' Text color | <View color={'value'} /> | Value: '#ffffff' or 'themeColor'

Shadow

Property | syntax | detail ------------ | ------------- | ------------- Shadow | <View boxShadow={'value'} /> | Value: 'themeShadow'

Border Radius

Property | purpose |syntax ------------ | ------------- | ------------- specific | Add a border radius of '10px' | <View borderRadius={'10px'} /> curved | Add a border radius of 6px | <View curved /> more-curved | Add a border radius of 12px | <View more-curved /> round | Add a border radius of 100%, this will make a circle if the view is squre | <View curved /> default | No border | -

Text

Font Size

Parameter (case sensitive) | Value ------------ | ------------- default | 13px tiny | 11px xs | 13px s | 15px m | 17px l | 20px xl | 23px xxl | 27px xxxl | 34px huge | 45px

Font Weight

Parameter (case sensitive) | Value ------------ | ------------- default | regular bold | bold medium | medium light | light

Font Align

Parameter (case sensitive) | Value ------------ | ------------- default | left left | left right | right center | center

Display

Parameter (case sensitive) | Value ------------ | ------------- default | block inline | inline

License

MIT © tushar7d