sme-theme

SME Theme

Usage no npm install needed!

<script type="module">
  import smeTheme from 'https://cdn.skypack.dev/sme-theme';
</script>

README

SME Theme

This is a BETA module and is exclusive to ReactJS.

Installation

npm i sme-theme

How To Use

Importing the JS

The sme-theme has over 30 components, but you can only import as many as you need into your page, as follows: import { Text, Title, Button, etc } from "sme-theme". The list of available components is below.

After importing a component, use it as follows: <Component attribute={value}>{content}</Component>

Each component has its own characteristics, such as specific attributes and some has no child content.

  • Component example with content: <Text className="my-text" tag="span">{content}</Text>

  • Component example without content: <Image className="my-image" src="logo.svg"/>

The components were developed with minimal changes to the html tags and the tags proposed by ReactJS.

Importing the SCSS

To import scss into your project, use in your scss: @import "../node_modules/sme-theme/src/theme.scss";

You can import the default theme or create your own in your application. Just follow the steps:

  • Check which variables will be modified in: node_modules/sme-theme/src/vatiables.scss
  • In the default application scss reset the variables, example: $ font-family: Montserrat! default;
  • Immediately after that, import the main theme scss: node_modules/sme-theme/src/theme.scss

List of components:

Attributes are listed in square brackets: []

Basics

  • Bg [className, image, color, overlayerImage, overlayerColor]
  • Breadcrumb [children, className, tag]
  • Button [children, to, href, className, target, active, disabled, plugin, ga, loading, type, onClick, behaviour]
  • Card [children, className]
  • Counter [step, interval, max, activ, endValue, onComplete]
  • Divider [children, className]
  • Form [children, onSubmit, className]
  • Icon [name, className]
  • Image [src, className, alt]
  • Input [id, children, type, mask, options, className, name, imageSrc, imageClass, buttonClass, buttonText, helpText, errorText, focus, after, plugin, disabled]
  • Progress [className, progress]
  • Slide [children, className]
  • Slider [children, className]
  • Spinner [children, className]
  • Status [children, className, success, error]
  • Tab [children, render, className]
  • Tabs [children, className]
  • Text [children, className, tag]
  • Title [children, className, tag]
  • Video [className, url]

Layout

  • Cell [children, size, className]
  • Collapse [children, className, show]
  • Container [children, className]
  • Grid [children, className]
  • Page [children, name, className, loading, footer, title, header]
  • Table [children, className]
  • Template [children, condition]
  • Wrap [children, className]

Modules

  • Alert [children, className, title, type, iconName]
  • Menubar [children, className, collapse, header]
  • Modal [children, className]
  • Navbar [children, className]
  • Pagination [className, size, page, step]
  • Titlebar [children, className]