TS Commerce Developers

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

Body background #FAFAFA
Sections background #FFF
Text color #555
Main color #5697DE (Links, titles, buttons, information alert)

Success color #ADCD71
Error color #D83E3E

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: