CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

General

Getting Started

Custom Templates

Styles Guide

Changelog New

Core

Helpers

Hooks

Components

Alert

Alert Info

Animation

BoxContainer

Charts

ClickOutside

DataTabs

DataTable

Details List

FormField

Image gallery

Modal

NavBar

PageHeader

Paginate

Popover

Profile Image

SideBar

hooks

useDataTable

useGqlQueryRequest

useGqlMutation

useApiRequest

useCometRequest

useTypeAHead

useNearScreen

useTranslate

Configs

Theme

Styles Guide

Description#

We use a simple and easy to understand style for the users, we try not to use fancy animations or shadows.

Styles Guide#

Spaces#

For spacing between Items we use 4 which is translate to 1fr, example:

Item 2

Live Example

<Grid p={4} gap={4}>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
</Grid>

<Grid p={4} gap={4}>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
</Grid>

Layout#

Althougt we can use Flex or Boxes, to structure our layouts we prefer to use Grid component as standard

Item 2

Live Example

<Grid p={4} gap={4} templateColumns='repeat(3,1fr)' justifyItems='center'>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
</Grid>

<Grid p={4} gap={4} templateColumns='repeat(3,1fr)' justifyItems='center'>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
  <Text>Item 2</Text>
</Grid>

Borders#

Every component border must be of 1px

Live Example

<Grid p={4} gap={4} templateColumns='repeat(3,1fr)'>
  <Box w='100%' h={80} borderWidth='1px' />
  <Box w='100%' h={80} borderWidth='1px' />
  <Box w='100%' h={80} borderWidth='1px' />
</Grid>

<Grid p={4} gap={4} templateColumns='repeat(3,1fr)'>
  <Box w='100%' h={80} borderWidth='1px' />
  <Box w='100%' h={80} borderWidth='1px' />
  <Box w='100%' h={80} borderWidth='1px' />
</Grid>

Buttons#

We like simplicity and small components, that's whe prefer to style our buttons xs and outiline

Live Example

<Button variant="outline" size="xs">
  Press Me
</Button>

<Button variant="outline" size="xs">
  Press Me
</Button>

The only exception is the submit button, that has a green color

Live Example

<Button colorScheme="green" size="xs">
  Press Me
</Button>

<Button colorScheme="green" size="xs">
  Press Me
</Button>