shapla-css

2.6.7 • Public • Published

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.

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

Readme

Keywords

Package Sidebar

Install

npm i shapla-css

Weekly Downloads

82

Version

2.6.7

License

MIT

Unpacked Size

418 kB

Total Files

114

Last publish

Collaborators

  • sayful