Apply helper classes to almost any element, in order to alter their style.
This document is incomplete. Feel free to improve this document.
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.
- 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.
npm install --save shapla-css
// 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.
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
Form Elements
- Checkbox
- Radio
- Search
- Select
- Range Slider
- Star Rating
- Switch
- Text Field
Utilities
- Screen Reader Only
- Mini reset
- Cross/Delete Icon
- Spinner
- Modal
Component | Dark Theme | Comment |
---|---|---|
Columns | - | Not related to color theme |
Cross/Delete Icon | ✅ | |
Spinner | ✅ | |
Modal | ✅ |