# 01. Welcome to __jComponent__ library [![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com) __jComponent__ is a client-side library for creating reausable UI components. This library contains everything what you need for creating Single Page Applications or parts for your web sites, web applications or e-commerce. jComponent library is built on top of jQuery. [__Total.js products__](https://www.totaljs.com/products/) use jComponent library. - [Homepage](https://componentator.com/jcomponent/) - [__Download free UI components__](https://componentator.com/) ## Library I have prepared several implementations of jComponent for different cases. The base point of jComponent is to create reusable components without complicated tools and dependencies. [jQuery](https://www.jquery.com) is the only one dependency for jComponent. - [Download](https://github.com/totaljs/jComponent) ### Type of libraries | Filename | Contains | |------------------|-----------------------------------------------------| | `jc.min.js` | jComponent + Helpers | | `jcta.min.js` | jComponent + Tangular + Helpers | | `jctajr.min.js` | jComponent + Tangular + jRouting + Helpers | | `spa.min.js` | jQuery + jComponent + Tangular + jRouting + Helpers | | `spa.min.css` | Bootstrap Grid System + Font-Awesome | - __jComponent__ contains a core of library ([docs](@17092508010002yge0)) - __Helpers__ contain `String`, `Date`, `Number`, `Array` prototypes and much more - [__Tangular__](@17092508520003lex1) is a template engine like Angular.js v1 template engine ([docs](@17092508520003lex1)) - [__jRouting__](@17092509030002lex0) is a simple library for manipulating of HTML 5 History API ([docs](@17092509030002lex0)) __I recommend__ to use latest version of jComponent from our [CDN hosted on KeyCDN](https://www.keycdn.com/?a=41841): __v18__: | CDN | |-------------------------------------------------------| | https://cdn.componentator.com/spa.min@18.js | | https://cdn.componentator.com/spa.min@18.css | __v17__: | CDN | |-------------------------------------------------------| | https://cdn.componentator.com/spa.min@17.js | | https://cdn.componentator.com/spa.min@17.css | __v16__: | CDN | |-------------------------------------------------------| | https://cdn.componentator.com/spa.min@16.js | | https://cdn.componentator.com/spa.min@16.css | ## `spa.min@16.css`, `spa.min@17.css` `spa.min@18.css` classes This CSS library contains: - Bootstrap Grid System - Bootstrap tables - Font-Awesome 5 Free - Preddefined styles: - `b` font-weight `bold` - `m` margin-bottom `15px` - `np` padding `0` - `npt` padding-top `0` - `npb` padding-bottom `0` - `nmt` margin-top `0` - `nmb` margin-bottom `0` - `mt5` margin-top `5px` - `mt10` margin-top `10px` - `mr5` margin-right `5px` - `table-small` a small table - `padding` padding `20px` - `link` a link class (can be used for `` too) - `help` a simple small info message, e.g. `

Field is required

` - `ui-dark` preddefined `` class with dark background and light foreground color - `red` foreground red color - `blue` foreground blue color - `green` foreground green color - `silver` foreground silver color - `noscrollbar` hides vertical scrollbars `+v17` - `hellip` crops the string with hellip `...` `+v18` added the classes below automatically when the document is ready: - __Browser detection:__ - `jc-chrome` - `jc-opera` - `jc-edge` - `jc-firefox` - `jc-safari` - `jc-ie` - `jc-electron` - `jc-samsungbrowser` - __OS detection:__ - `jc-mac` - `jc-linux` - `jc-windows` - `jc-webos` - `jc-ios` - `jc-android` - __Device detection:__ - `jc-desktop` - `jc-mobile` - `jc-table` - `jc-tv` - __Display__: - `jc-lg` large display - `jc-md` medium display - `jc-sm` small display - `jc-xs` extra small display - __Other:__ - `jc-nocookies` disabled `cookies` - `jc-nostorage` disabled `localStorage` - `jc-touch` device supports touches - `jc-standalone` standalone app ## Helpers - [Array operations](@17092508390005lex1) - [Cookies](@17092512460002hib0) - [Date operations](@17092508390003lex1) - [jQuery extensions](@17092508570002lex0) - [Navigation for SPA](@17092509030002lex0) - [Number operations](@17092508390004lex0) - [Responsive UI](@17092508530002lex0) - [String operations](@17092508520002lex0) - [Tangular template engine](@17092508520003lex1)