lote-design-system

Lote Design System

ui-kit

Lote Design system is a design system which contains set of different components that will make it easier for us to create websites by clear standards and best practices for accessibility, internationalization, and responsive web design.

What it includes?

Some knowledge about Logo and word Lote

Lote Lote comes from the Lote Tree a location that marks the end of the seventh heaven, the boundary which no creation can pass. It is a symbol of solidarity and determination; it reminds us that the goals of this world are not incompatible with the goals of the spiritual spirit.

Logo Life is started with the water and water is divided into the ocean. King of the ocean is a whale.

Getting started

From the start, I have a goal to help developers to build any kind of site in less amount of time. So I have divided this whole design-system to separate packages and consider this design system as one monorepo for all the packages.

For example, if you only want to use core components (Theme (Default Color scheme), Reset styles, GridSystem, Button, and Input fields etc) of design system you have to install only the core package and if you only want to use icons then install icons package. Make sure you have little understanding of the tech stack what I am using to build this design-system.

Technology stack

Back to the point. The following table will explain to you what is the purpose of each package.

Package name Description Storybook & Docs Installation
core Main core components comes with Theme, Typography, ColorScheme, GridSystem, Buttons, Pagination & Input etc. Demo & Docs yarn add @lote-design-system/core
icons Iconography assets from the design system Demo & Docs yarn add @lote-design-system/icons
marketing-blocks all the main components used inside the modern Landing pages Demo & Docs yarn add @lote-design-system/marketing-blocks
gallery-blocks helps to create masonry or justified grid of photos Demo & Docs yarn add @lote-design-system/gallery-blocks
map-blocks integrate mobile-friendly interactive maps Demo & Docs yarn add @lote-design-system/map-blocks

Motivation

Initially, the purpose of this design system is to create any kind of website that we see in our normal life, such as. (Marketing / Agency Website), (Ecommerce Website) and Admin Dashboard. Therefore, the main purpose is to save the developer’s time and create a complete set of components so that the developer does not have any difficulty in creating such a website.

Note

You can use the whole design system without installing all other packages. But remember the whole design-system is written with the Css-In-Js approach. It is necessary to import ThemeProvider and theme, if you want to consume components & blocks inside your website.

Either you can take ThemeProvider from external Css-In-Js library like styled-components or you can import this from our core package which also comes with the predefined theme.

Tip #1

To use this design-system with an enhanced experience, I highly recommend using browser defaults and typography from our core package.

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import {
  reset,
  typography,
  ThemeProvider,
  Button
} from '@lote-design-system/core';

const GlobalStyle = createGlobalStyle`
  ${reset};
  ${typography};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider>
        <Button color="secondary">Hello World</Button>
      </ThemeProvider>
    </>
  );
}

Tip #2

If we want to use marketing blocks on our website, we need to import special theme!

marketing blocks are dependent upon the special theme which is crafted only for marketing blocks. To use marketing-blocks properly please take this example seriously.

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import {
  reset,
  typography,
  ThemeProvider,
  Button
} from '@lote-design-system/core';
import { theme } from '@lote-design-system/marketing-blocks';

const GlobalStyle = createGlobalStyle`
  ${reset};
  ${typography};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <Button color="secondary">Hello World</Button>
      </ThemeProvider>
    </>
  );
}

Goals

The core goals of this project are to:

We hope to accomplish these goals by:

Contributing

I’m always looking for contributors to help us build new features or help us improve the project documentation. Please clone this repo and feel free to make a PR.

License

MIT

This site is open source. Improve this page.