SM Components

Getting Started

Components
Total components

Overview

Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.

Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.

Just download the components you like, link them with a script tag and drop it in HTML done!

Features

  • Native and Cross framework support
  • Encapsulated style and functionality
  • Easy styling
  • Adaptive scaling

Quick Start

  1. To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code.
  2. Now you can download or copy the source code for selected components. You might get a warning while downloading like this file is not safe, please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use.
  3. Link the downloaded js with <script src=".../components.js"></script> at bottom of your HTML file just before </body> tag.
Get minified Select all Clear all
Copy source code Download JS file

Global styling

These components use CSS variables to customize styling. they share some CSS variables that make global styling easier.

Some common CSS variables and their use

Variable Use
--accent-color Color which will be used for denoting active state
--text-color default text color for all components.
( Use comma separated rgb values. e.g 17, 17, 17 )
--background-color default background color for all components.
( Use comma separated rgb values. e.g 255, 255, 255 )
--danger-color Used for error/invalid state

Buttons

sm-button has 3 variants that define how the button looks.

Variant type Example
primary Primary
outlined Outlined
no--outline No outline

How to define variant

                    
                        <sm-button variant="primary">primary</sm-button>
                        <sm-button variant="outlined">outlined</sm-button>
                        <sm-button variant="no-outline">no-outline</sm-button>

States

Disabled

To disable the button add disabled attribute.

Disabled 
                    
                        <sm-button disabled>Disabled</sm-button>

Attributes

All the native HTML checkbox attributes are valid

Attribute Description
disabled (boolean) Button is disabled by default. all the interactions are disabled
type (string) Has values submit reset
Can only used withing sm-form to submit or reset the form.

Styling

CSS variables used to style this component

Variable Description
--background Define background of button. accepts all values of CSS background property
--border-radius Set curvature at button corners
--padding Specify padding of button

Carousel

Carousel is a very common UI component primarily used to display images or slides. This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on touch enabled devices swipe can be used.

Interactive demo

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Markup for above carousel

                    
                        <sm-carousel align-items="start" indicator> ...carousel items... </sm-carousel>

Custom attributes

These attributes cane used to customize carousel behaviour and features

Attribute Description
align-items Has values start center end Specifies how carousel items should align. default is center.
indicator (boolean) if added carousel shows dot indicators of carousel items.

Styling

CSS variables used to style this component

Variable Description
--active-indicator-color Defines background color of active slide indicator
--nav-background-color Defines background color of carousel navigation buttons
--nav-box-shadow Defines box shadow of carousel navigation buttons
--nav-icon-fill Defines fill of arrow icon on carousel navigation buttons

Checkbox

sm-checkbox supports all the attributes of native HTML5 checkbox

linking some HTML element with sm-checbox using label tag won't work.
Add the element inside the opening and closing checkbox tag.

Interactive demo

Check this box

States

Disabled

To disable the checkbox add disabled attribute.

Disabled checkbox 
                    
                        <sm-checkbox  disabled>
                            <div style="margin-left: 0.5rem;">Disabled checkbox</div>
                        </sm-checkbox>

Checked

To make checkbox checked by default add checked attribute.

Checked checkbox 
                    
                        <sm-checkbox  checked>
                            <div style="margin-left: 0.5rem;">Checked checkbox</div>
                        </sm-checkbox>

Attributes

All the native HTML checkbox attributes are valid

Attribute Description
checked (boolean) Sets checked state as default if added
disabled (boolean) Checkbox is disabled by default. all the interactions are disabled
value (string) Sets value of checkbox which can be accessed by value property with JS

Styling

CSS variables used to style this component

Variable Description
--border-radius Defines border-radius of checkbox square
--height Defines height of checkbox
--width Defines width of checkbox

Copy

To start using SM Components

File input

To start using SM Components

Form

To start using SM Components

Submit

Hamburger menu

Input

To start using SM Components

Menu

To start using SM Components

first option second option third option

Notifications

To start using SM Components

Example

push success notification push error notification push pinned notification

Popup / dialog

Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.

idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
 show popup

Radio

Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.

  On
  Off
  ðŸ¤·

Switch

To start using SM Components

Select

<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

option1 option2 something option3

Spinner

<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

Strip select

To start using SM Components

Movie TV series Video Music

Tabs

To start using SM Components

inbox sent draft spam gjdhnsrfijbgn
bdfjnbj jadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhb Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam id, molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam corrupti? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius accusamus consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique odio optio quibusdam.

Tags input

To start using SM Components

Textarea

To start using SM Components

Text field

To start using SM Components