#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 [email protected]: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 |