racks-kit

Webcomponents and custom elements made easy

Usage no npm install needed!

<script type="module">
  import racksKit from 'https://cdn.skypack.dev/racks-kit';
</script>

README

Installation

Racks can be installed via Bower! If you don't have bower installed or if you want to share it to someone / something else, you can also install it by downloading a ZIP File if you'd like to use the latest (unstable!) release from the Master Branch or grab the latest Release from Racks.

Bower

$ npm install -g bower
$ bower install racks --save

Contribute and Fork

$ git clone git@github.com:janbiasi/racks.git
$ cd racks
$ git checkout -f master

Manual

  1. Go to https://github.com/janbiasi/racks/releases
  2. Download the latest Release
  3. Unpack the files into your directory

Building custom Components

Templates and Bootstrap

You can use the templates for custom components (HTML and JavaScript), located in the public GitHub Repository.

Structured Content

Create a folder e.G. in the root of your folder, called racks-custom, where you create a folder for every single component, with a revision or dist folder below it. So, the structure would look like this;

racks-custom/
   |
   + my-element/
   |   |
   |   + v1.0.0/
   |   |   |
   |   |   + my-element.html
   |   |   + my-element.js
   + my-other-element
   ....

Register the Component

To add the component to racks, you have to edit the racks.html in the dist root of the bower installation. Add the path of each custom component into the import file to grant 100% support in the latest major browsers. You can also create a custom importer at your own risk.

Racks Components

General Information

Attributes

Racks attributes are placed on top of the rack elements, such as the href attribute on the link element. For example take a look at the following code snippet;

<racks-component my-attr="my-value"></racks-component>
Required

Some attribtues can be required for working with it in the ShadowDOM factory or something like this. Please provide all required attributes while creating a racks (UI) element.

Types

There are different types of settings or parameters which can be passed to racks elements, here are most of them explained what they are and how you can use them in your code.

Type Explenation
attr Attribute type, take a look at (Attributes)(#attributes)
class Specific classes to use on the element with class=""
data Custom data attributed, starting with data-
method A function which can be called on an instanciated object

Racks Button

Definition Required Type Description
no-shadow no attr Add to prevent box-shadow
no-effect no class Disables the riffle/wave animation on tap
large no class Makes the button large
primary no class Creates a primary button
default no class Creates a default gray button
pink no class The awesome pink button
yellow no class The awesome yellow button
orange no class The awesome orange button
dark no class The awesome dark-blue button

Racks Layout

No additional information found

Racks Dialog

No additional information found

Racks Appbar

No additional information found

Racks Menu

Definition Required Type Description
horizontal no attr Used for creating traditional menus