User Interface
This page introduce the guidelines to help you develop an application using standard UI elements.
When creating a new application, you may develop following this list of user interface guidelines.
Otherwise, your application may be rejected and it won't be published.
Basic colors
Resources
Basic styles are defined in _app.css style file, that you must include in the application.
https://static-cdn.storeden.com/_app.css
For JS functions, your application need to include jQuery and _app.js file.
https://static-cdn.storeden.com/_app.js
If you need more graphic elements to be included in your application, please contact us by e-mail providing a detailed request as we can evaluate and furthermore develop the new requested elements.
Layout
This is the main layout of your application
<!DOCTYPE html>
<html lang="it">
<head>
<link href="https://static-cdn.storeden.com/_app.css" type="text/css" rel="stylesheet" />
<script src="https://static-cdn.storeden.com/_app.js"></script>
</head>
<body>
<header>
<h1>APP title here</h1>
<h2>APP description here... </h2>
</header>
<!-- here goes the sections -->
<footer>
<article class="help">
<p>Use the footer to provide the user guied link <a href="" target="_blank"> click here </a>.</p>
</article>
</footer>
</body>
</html>
Preview:
Section
<div class="section">
<div class="section-summary">
<h1>Basic section</h1>
<p>Section purpose</p>
</div>
<div class="section-content">
<div class="section-row">
<div class="section-cell">
<p>Section content...</p>
</div>
</div>
</div>
</div>
Preview:
Buttons
<span class="btn primary" />Button Label</span>
<a href="" class="btn primary" />Button Label</a>
<!-- use the following snippet inside of a section-cell element -->
<div class="form-element submit-element text-right">
<button type="submit" class="btn primary" />Save settings</button>
</div>
Preview:
Form elements
Wrap form-element items in cell-column to create automatic columns distribution.
<div class="cell-container">
<!-- Basic input -->
<div class="form-element">
<label>Input label</label>
<input type="text" name="" value="">
</div>
<!-- Select -->
<div class="form-element">
<label>Input label</label>
<select name="">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
<!-- Textarea -->
<div class="form-element">
<label>Input label</label>
<textarea rows="5" name=""></textarea>
</div>
<!-- Checkbox -->
<div class="input-wrapper inline">
<div class="checkbox-wrapper">
<input class="checkbox" type="checkbox" name="" id="input_checkbox" value="1">
<span class="checkbox-styled"></span>
</div>
<label for="input_checkbox">Checkbox label</label>
</div>
</div>
Table
<div class="section"> <div class="section-content"> <div class="section-row"> <div class="section-cell"> <h3>Table title</h3> <table> <thead> <tr> <th>Column A</th> <th>Column B</th> <th>Column C</th> </tr> </thead> <tbody> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell C</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> <td>Cell C2</td> </tr> </tbody> </table> </div> </div> </div> </div>
Tabs
<div class="section-listing">
<div class="section-options">
<ul class="section-tabs" data-target="my-tab">
<li class="tab_link active">
<a data-target="tab1">Tab 1</a>
</li>
<li class="tab_link">
<a data-target="tab2">Tab 2</a>
</li>
<li class="tab_link">
<a data-target="tab3">Tab 3</a>
</li>
</ul>
<div class="section-content">
<div id="my-tab" class="tabs_container">
<div class="tab active" id="tab1">Tab 1 contents<br><br><br></div>
<div class="tab" id="tab2">Tab 2 contents<br><br><br></div>
<div class="tab" id="tab3">Tab 3 contents<br><br><br></div>
</div>
</div>
</div>
</div>
Preview:
Alerts
<div class="box success">
<i class="icon ico-checkmark-green"></i>
This is a success message
</div>
<div class="box warning">
<i class="icon ico-fail-red"></i>
This is an error message
</div>
<div class="box info">
<i class="icon ico-notice"></i>
This is an info message
</div>
Preview:
Language field
Sometimes you may need to provide multilanguage fields to users, please proceed as shown below.
<div class="form-element">
<label>Field label</label>
<div class="text-element-with-flag">
<input type="text" name="" >
<img src="//static-cdn.storeden.com/img/flags/it.png">
</div>
<div class="text-element-with-flag">
<input type="text" name="" >
<img src="//static-cdn.storeden.com/img/flags/en.png">
</div>
<div class="text-element-with-flag">
<input type="text" name="" >
<img src="//static-cdn.storeden.com/img/flags/de.png">
</div>
<div class="text-element-with-flag">
<input type="text" name="" >
<img src="//static-cdn.storeden.com/img/flags/es.png">
</div>
<div class="text-element-with-flag">
<input type="text" name="" >
<img src="//static-cdn.storeden.com/img/flags/fr.png">
</div>
</div>
Preview:
