SM 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
  • Standalone 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

Buttons

Buttons are used in various basic UI interactions to perform an action.

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

Carousel

To start using SM Components

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.

Checkbox

To start using SM Components

Copy

To start using SM Components

File input

To start using SM Components

Form

To start using SM Components

Submit

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