shapla-css
v2.6.7
Published
Apply helper classes to almost any element, in order to alter their style.
Downloads
64
Readme
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
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
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 | ✅ | |