ArtDesignUI - All In One
Instalation
Documentation
Skins
Releases

ArtDesignUI (v1.0.0)

jQuery PlugIns for responsive web elements with skin support
All in One (9 jQuery PlugIns in 1)

DESCRIPTION:

ArtDesignUI (7127 lines code, 730 options) is a jQuery library for style control web elements (button, input, textarea, radio, checkbox, tab, layout, icons) that include 9 jQuery PlugIns * (All In One) - ArtDesignButton, ArtDesignInput, ArtDesignTextArea, ArtDesignRadio, ArtDesignCheckBox, ArtDesignSelect, ArtDesignTabs, ArtDesignLayout, ArtDesignIcons

Support    ** and all major browsers (Safari etc)

All elements are responsive - resize browser () to view effect

Skin support

Class prefix to prevent conflict with classes from other CSS files

Full style control with JS - no need CSS: width, height, margin, padding, border, gradient, shadow, animation, icons, fonts, colors etc

Overwrite options and Multiple overwrite options

Multiple instances

*In the next editions will be included additional PlugIns - ArtDesignDate (February 2015), ArtDesignSlider (March 2015), ArtDesignStep (April 2015), ArtDesignConfirm (May 2015), ArtDesignPopUp (Juny 2015), ArtDesignToolTip - integration with all other PlugIns (July 2015)
**Limited support for IE 7 and IE 8 (shadow and border radius)
Download
- or view this project on GitHub
Also support install with bower and npm:
bower install artdesign-ui
npm install artdesign-ui
- and Donate -
- or Share -
WE ARE
and can help you if you need a
WebSite Design PHP Code jQuery Code
- or -

EXAMPLES:

ArtDesignButton #1

ArtDesignInput #2

ArtDesignTextArea #3

ArtDesignRadio #4

ArtDesignCheckBox #5

ArtDesignSelect #6

ArtDesignTabs #7

Tab
Tab with icon
Tab with custom width (300px)
Content1
Content1
Content1
Content1
Content1
Content1
Content1
Content1
Content1
Content2
Content2
Content2
Content3
Content3
Content3
Content3
Content3

ArtDesignLayout #8

Main Panel Layout:
max-width: 1200px;
Resize when width = 420px

Left Panel Layout:
min-width: 200px;
max-width: 200px;
margin-right: 20px
Main Panel Layout:
max-width: 1200px;
Resize when width = 420px

Right Panel Layout:
min-width: 200px;
max-width: 980px;

ArtDesignIcons #9

2122 font icons




ArtDesignUI

ArtDesignUI - Base Instalation

LOAD FILES:

First method

Load ArtDesignUI/ArtDesignUI.js?BasePath=ArtDesignUI/ with param BasePath were BasePath is path to folder ArtDesignUI.

html

<script type="text/javascript" src="ArtDesignUI/ArtDesignUI.js?BasePath=ArtDesignUI/"></script>

ArtDesignUI.js automatically Load all the necessary files to run PlugIns.

Then initialize PlugIns with function window.ArtDesignUI.Ready().

javascript

window.ArtDesignUI.Ready(function() {
	$("body").ArtDesignButton();
	$("body").ArtDesignInput();
	$("body").ArtDesignTextArea();
	$("body").ArtDesignRadio();
	$("body").ArtDesignCheckBox();
	$("body").ArtDesignSelect();
	$("body").ArtDesignTabs();
	$("body").ArtDesignLayout();
	$("body").ArtDesignIcons();
});

Second method

Load all the necessary files to run PlugIns.

html

<link rel="stylesheet" href="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIcons.css">
<link rel="stylesheet" href="ArtDesignUI/ArtDesignUIPlugIns/ExternalPlugIns/JScrollPane/JScrollPane.css">
<script type="text/javascript" src="ArtDesignUI/JQuery/JQuery.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/Browser/Browser.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/ShadowAnimation/ShadowAnimation.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/ColorAnimation/ColorAnimation.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/WaterMark/WaterMark.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/Mask/Mask.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/JScrollPane/MouseWheel.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/JScrollPane/JScrollPane.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/AutoSize/AutoSize.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/Settings/Settings.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIconsCode.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIcons.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignButton/ArtDesignButton.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignInput/ArtDesignInput.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignTextArea/ArtDesignTextArea.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignRadio/ArtDesignRadio.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignCheckBox/ArtDesignCheckBox.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignSelect/ArtDesignSelect.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignTabs/ArtDesignTabs.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignLayout/ArtDesignLayout.js"></script>

Then initialize PlugIns.

javascript

$(document).ready(function() {
	$("body").ArtDesignButton();
	$("body").ArtDesignInput();
	$("body").ArtDesignTextArea();
	$("body").ArtDesignRadio();
	$("body").ArtDesignCheckBox();
	$("body").ArtDesignSelect();
	$("body").ArtDesignTabs();
	$("body").ArtDesignLayout();
	$("body").ArtDesignIcons();
});

SETUP WEB ELEMENTS:

For ArtDesignButton

Create <a> or <button> and add attr data-plugin-ad-button="ad-button" to <a> or <button>.

html

<a href="#" data-plugin-ad-button="ad-button">Button</a>
<--! or -->
<button data-plugin-ad-button="ad-button">Button</button>

For ArtDesignInput

Create <input> and add attr data-plugin-ad-input="ad-input" to <input>.

html

<input type="text" data-plugin-ad-input="ad-input">

For ArtDesignTextArea

Create <textarea> and add attr data-plugin-ad-text-area="ad-text-area" to <textarea>.

html

<textarea rows="4" cols="50" data-plugin-ad-text-area="ad-text-area"></textarea>

For ArtDesignRadio

Create main <div> and add attr data-plugin-ad-radio="ad-radio" to <div> and data-ad-radio-label="Radio 1, 2, 3, etc. (For example)" to children <input>.

html

<div data-plugin-ad-radio="ad-radio">
	<input type="radio" name="Radio" id="Radio1" value="Radio1" data-ad-radio-label="Radio 1" checked="checked"/>
	<input type="radio" name="Radio" id="Radio2" value="Radio2" data-ad-radio-label="Radio 2"/>
	<input type="radio" name="Radio" id="Radio3" value="Radio3" data-ad-radio-label="Radio 3"/>
</div>

For ArtDesignCheckBox

Create main <div> and add attr data-plugin-ad-check-box="ad-check-box" to <div> and data-ad-check-box-label="CheckBox 1, 2, 3, etc. (For example)" to children <input>.

html

<div data-plugin-ad-check-box="ad-check-box">
	<input type="checkbox" name="CheckBox" id="CheckBox1" value="CheckBox1" data-ad-check-box-label="CheckBox 1" checked="checked"/>
	<input type="checkbox" name="CheckBox" id="CheckBox2" value="CheckBox2" data-ad-check-box-label="CheckBox 2"/>
	<input type="checkbox" name="CheckBox" id="CheckBox3" value="CheckBox3" data-ad-check-box-label="CheckBox 3"/>
</div>

For ArtDesignSelect

Create <select> with <option> and add attr data-plugin-ad-select="ad-select" to <select>

html

<select data-plugin-ad-select="ad-select">
	<option value="Select1" selected="selected">Select 1</option>
	<option value="Select2">Select 2</option>
	<option value="Select3">Select 3</option>
</select>

For ArtDesignTabs

Create main <div> with two children <div> (first for navigate, second for content) and add attr data-plugin-ad-tabs="ad-tabs" to main <div>

html

<div data-plugin-ad-tabs="ad-tabs" class="Example">
	<div>
		<div>Tab 1</div>
		<div>Tab 2</div>
		<div>Tab 3</div>
	</div>
	<div>
		<div>Content 1</div>
		<div>Content 2</div>
		<div>Content 3</div>
	</div>
</div>

For ArtDesignIcons

Create <span> and add attr class="icon-NAME-ICON" to <span>

html

<span class="icon-NAME-ICON"></span>

ArtDesignUI - Documentation

ArtDesignUI is under ArtDesignCreative License
ArtDesignUI is based on jQuery
ArtDesignUI use external PlugIns:
1. Browser
2. AttrChange (MIT and GPL License)
3. ColorAnimation (MIT and GPL License)
4. ShadowAnimation (MIT and GPL License)
5. WaterMark (MIT License)
6. MaskIt (License)
7. AutoSize (MIT License)
8. MouseWheel (MIT License)
9. jScrollPane (MIT and GPL License)

Files structure:

  • ArtDesignUI
    • ArtDesignUIPlugIns
      • ArtDesignButton
        • ArtDesignUI.js
      • ArtDesignCheckBox
        • ArtDesignCheckBox.js
      • ArtDesignIcons
        • Fonts
          • ArtDesignIcons.eot
          • ArtDesignIcons.svg
          • ArtDesignIcons.ttf
          • ArtDesignIcons.woff
        • ArtDesignIcons.js
        • ArtDesignIconsCode.js
      • ArtDesignInput
        • ArtDesignInput.js
      • ArtDesignLayout
        • ArtDesignLayout.js
      • ArtDesignRadio
        • ArtDesignRadio.js
      • ArtDesignSelect
        • ArtDesignSelect.js
      • ArtDesignTabs
        • ArtDesignTabs.js
      • ArtDesignTextArea
        • ArtDesignTextArea.js
    • ExternalPlugIns
      • AutoSize
        • AutoSize.js
      • Browser
        • Browser.js
      • ColorAnimation
        • ColorAnimation.js
      • JScrollPane
        • JScrollPane.css
        • JScrollPane.js
        • MouseWheel.js
      • Mask
        • Mask.js
      • ShadowAnimation
        • ShadowAnimation.js
      • WaterMark
        • WaterMark.js
    • JQuery
      • JQuery.js
    • ArtDesignUI.js

For more details see Documentation for all PlugIns.

ArtDesignUI - Skins

Send us Your skin style

CLEAN WHITE
 
 
 

Author:

ArtDesign Creative Studio

Description:

Style for all ArtDesignUI elements
(Default skin without outer shadow)

NIAGARA
 
 
 

Author:

ArtDesign Creative Studio

Description:

Style for all ArtDesignUI elements

CRIMSON
 
 
 

Author:

ArtDesign Creative Studio

Description:

Style for all ArtDesignUI elements

GREEN RED RADIO
 
 
 

Author:

ArtDesign Creative Studio

Description:

Style for ArtDesignRadio
(Default skin without outer shadow)

ArtDesignUI - Releases

02.01.2015 - Initial Release