Newlyweds Proposing Marriage

    ebs-design
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-beta.126 • Public • Published

    EBS Design System

    A React-based UI toolkit for enterprise grade applications

    NPM version NPM downloads Discussions

    Elements

    🔥 Motivation

    First of all, ebs-design started as an internal tool to be a single pattern for enterprise application development, improving the experience of users in our products by using enhanced components. Now designers and developers use the same style for applications such as Administration panels, CRMs, HRMs, Finance and Accounting Apps, Analytics Dashboards, etc.

    We are focused on creating rich components like forms, tables, modals, etc that add an exceptional experience in the most sophisticated apps.

    ⚠️ WARNING

    The UI Kit is UNDER DEVELOPMENT, we don't recommend using it in production projects until at least RC will be released. We are working on improving and refactoring. If you find a problem, please create an Issue or PR with your change, will be glad to help.

    Click Watch and Star to get breaking news about project development.

    🧾 Documentation

    For more usage details visit Storybook

    Features

    • Designed for enterprise apps.
    • Modern design and exceptional user experience.
    • Fully customizable components using variables.
    • Written in TypeScript with predictable static types.
    • High-quality and performant React components.
    • 100% Open Source.

    📦 Installation

    Use the package manager yarn or npm to install library.

    npm install ebs-design
    

    ⚠️ Peer Dependencies

    Package's name Version
    react >= 16.8
    react-dom >= 16.8
    node-sass >=4.0.0 <5.0.0

    🏗️ Usage guide

    import { Button } from 'ebs-design';

    Import styles scss into a src/App.(js|tsx)

    import 'ebs-design/dist/styles/index.scss';

    Or create and import your scss to customize variables

    import './variables.scss';
    // Main colors
    $primary-color: #3366ff;
    $success-color: #2ac952;
    $info-color: #3bc0f9;
    $warning-color: #ffd83d;
    $danger-color: #ff3a30;
    $normal-color: #a5a5a5;
    
    // Primary colors
    $primary-000: #eef5ff;
    $primary-100: #d6e4ff;
    $primary-200: #adc8ff;
    $primary-300: #85a9ff;
    $primary-400: #6690ff;
    $primary-600: #254eda;
    $primary-700: #1a39b6;
    $primary-800: #102693;
    $primary-900: #0a1a7a;
    
    @import 'ebs-design/dist/styles/index.scss';

    Additional styles import

    import 'ebs-design/dist/styles/default.scss';
    // Default styles
    $font-size-base: 14px;
    $font-size-desktop: 12.5px;
    $font-size-small-desktop: 10px;
    
    $line-height-base: 1.414;
    $text-color: #494f7d;
    
    $h1-font-size: $font-size-base * 2.5;
    $h2-font-size: $font-size-base * 2;
    $h3-font-size: $font-size-base * 1.75;
    $h4-font-size: $font-size-base * 1.5;
    $h5-font-size: $font-size-base * 1.25;
    $h6-font-size: $font-size-base;
    import 'ebs-design/dist/styles/scrollbar.scss';
    // Default base size & colors of scrollbar
    $scrollbar-size: $gutter-size / 2;
    $scrollbar-track-background-color: $background-content;
    $scrollbar-thumb-background-color: $border-color;
    $scrollbar-thumb-hover-background-color: var(--primary-color);

    ❤️ Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please make sure to update tests as appropriate.

    License

    MIT

    Z-Indexes

    1. Mask 990
    2. Select dropdown 999

    Install

    npm i ebs-design

    DownloadsWeekly Downloads

    75

    Version

    0.0.1-beta.126

    License

    MIT

    Unpacked Size

    6.08 MB

    Total Files

    292

    Last publish

    Collaborators

    • nicolae-godina
    • marcellefter