Shapla CSS

Apply helper classes to almost any element, in order to alter their style.

This document is incomplete. Feel free to improve this document.

Why?

We need some prebuild components that are easy to customize and easy to manage. Most of the components are modified version from Bulma and Material Design Lite components. We use these css class to build React, Vue and Web components.

Features

• Easy color customization via SCSS or CSS custom property.
• All elements/components are exported via SCSS mixin, so you can use only what you need.

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-css

Usage

Color Theme Customization

// file style.scss
@use "shapla-css/src/index.scss" as shapla with (
  $color--primary: #00d1b2;

$color--secondary: #9c27b0;
$color--success: #48c774;
$color--error: #f14668;
$color--warning: #ffdd57;
)
;

@include shapla.button;
@include shapla.checkbox;
@include shapla.data-table;
// include other components as your requirement 

Check all available SCSS mixins from shapla.scss file.

List of Components

Elements: do not have nested element. Mostly one css class with modifier css class.

• Badge
• Box Shadow
• Button
• Cross/Delete Icon
• Icon Container
• Image Container

Components have multiple nested element.

• Chip
• Dashboard
• Data Table
• Dropdown
• File Uploader
• Modal
• Notification
• Pagination
• Popover
• Progress Bar
• Sidenav
• Spinner
• Tabs
• Toggles
• Tooltip

Grid System

• Columns

Form Elements

• Checkbox
• Radio
• Search
• Select
• Range Slider
• Star Rating
• Switch
• Text Field

Utilities

• Screen Reader Only
• Mini reset

List of Components support dark mode

• Cross/Delete Icon
• Spinner
• Modal

| Component | Dark Theme | Comment | |-------------------|------------|----------------------------| | Columns | - | Not related to color theme | | Cross/Delete Icon | ✅ | | | Spinner | ✅ | | | Modal | ✅ | |