Stardom Admin UI Documentation Update Information

The Stardom Admin UI theme was designed to be one of the most balanced, well structured, and ideal solutions available to developers. Please feel free to contact as if you have any further questions regarding this theme. We're here to help!

Mastering the Basics

The Stardom UI theme was developed using several libraries and platforms. It's vital that you understand a great deal about these technologies as it will allow you to fully understand the techniques, methodologies, and structures found in this theme. Fully understanding Bootstrap and the other platforms listed below is vital.

Important Bootstrap Changes

The Stardom theme is currently updated for use with Bootstrap 3.03. However, to accommodate the full-width nature of Admin themes the default Bootstrap package was modified. Please take great note of this if you plan on updating the theme on your own.

Bootstrap core changes are:

Container Class Change - Via theme.css
- ".container" was modified from default 1170px to width: 100%;

Default Font Size Change - Via theme.css
- "body" font-size was modified from default 14px to font-size: 13px;

The Importance of Custom.css and Custom.js

The Stardom theme will often experience updates which are designed to implement new features, fix bugs, or improve code. A theme update will often result in overwriting many, or ALL of the pages included within Stardom. This means that you will need to take precautions which allow you to preserve all of the changes you have made. The best way to do this is to make ALL of your changes in a location seperate from the themes primary files.

Stardom already includes two documents which can be used to store your changes in. These documents aretitled custom.css and custom.js and can be found in their respective CSS and JS directories. This way when Stardom releases a new update you can simply drop your "custom" documents from the previous version into the new updated directory. Effectively saving all of your valuable changes.

The Grid System

Stardom includes a Bootstrap powered responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

• Rows must be placed within a .container for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

HTML Helper Classes

Helper classes can assist you in changing the appearance of an element quickly and easily directly through its HTML, rather than CSS. This prevents having to create endless custom classes when making routine changes such as Padding, Margin, or Borders.

Stardoms Color System

Stardom adds another level of customizability and sophistication to Bootstraps already outstanding color system. It makes great strides to improve the overall appearance of Bootstraps buttons, text, widgets and so on.

For those wishing to extensively use the Stardom theme we recommend that you become very familiar with not only Bootstraps color system but ours as well. Don't worry they are almost identical!

Example of Bootstrap Color Setup:

                        <button class="btn btn-info" type="button">..</button>
                        <button class="btn btn-primary" type="button">..</button>
                     

Outputs:

Primary Btn Danger Btn

Example of Stardoms Color System:

                        <button class="btn btn-blue" type="button">..</button>
                        <button class="btn btn-blue2" type="button">..</button>
                        <button class="btn btn-blue3" type="button">..</button>
                        <button class="btn btn-blue4" type="button">..</button>
                     

Outputs:

Blue Btn Blue2 Btn Blue3 Btn Blue4 Btn

So what does all of this mean?

It means two wonderful things. You can continue using the Bootstrap way of styling that you know and love. And that by following a near identical html/class structure you can add an additional 30+ colors to your color tool belt. All you have to do is replace .btn-danger with .btn-red or .btn-success with .btn-green

Do they all have gradients?

You bet! All 30+ colors have a gradient and hover style. We even added custom gradients for the 6 default Bootstrap colors: primary, info, success, warning, danger, and default.

Great! Did you add any additional colors to Bootstrap?

We added one color/class to the default Bootstrap way of styling. This can be accessed with the class Alert. For example - .btn-alert. The class was designed to flow perfectly with Bootstraps existing color scheme.

Can I use these colors anywhere?

You sure can! We conformed to Bootstraps naming convention of ".btn-color", ".text-color", and so on. However, all Stardom colors were designed to use only one style (color/background-color) which allows them to be used absolutely anywhere!

For example .text-blue is perfect for using not just on text but font-icons! And .btn-green can be used as background color anywhere because it carries no other style attributes like borders, shadows, etc (it gets those elsewhere, like .btn).

Buttons

Based on Bootstrap

Buttons follow the default Bootstrap 3 structure and formatting. It's important that you become very familiar with Bootstraps structure as it will be reflected in not only this theme but most.

HTML Structure and Classes

Panels

A Vital Theme Element

Panels or "Portlets" are one of Stardoms most important theme elements. They have been created using Bootstraps native "panel" system. However, Stardom adds a great deal of extra functionality to the Bootstrap panel system. As a result panels are used on virtually every page and are the ideal element to create widgets and present data. It's recommended that you become very familiar with their structure and functionality.

Panel Structure - Basic Addons

                        <div class="panel">..</button>
                            <div class="panel-heading">...</div>
                            <div class="panel-body">...</div>
                        </div>
                     

Panel Structure - All Addons

                        <div class="panel">..</button>
                            <div class="panel-heading">...</div>
                            <div class="panel-menu">...</div> <!-- Extra Stardom Addon -->
                            <div class="panel-sidemenu">...</div> <!-- Extra Stardom Addon -->
                            <div class="panel-body">...</div>
                            <div class="panel-footer">...</div>  <!-- Extra Stardom Addon -->
                        </div>
                     

Understanding Each Addon

                            <div class="panel-heading">
                            
                                <!-- Panel Title - Icon added before text via font icon "i.fa" -->
                                <div class="panel-title"><i class="fa fa-pencil"></i>Example Title</div>
                                
                                <!-- Panel Tray - Div used only to house and align elements right -->
                                <div class="pull-right">
                                    <button class="btn btn-blue" type="button">Blue Btn</button>
                                </div>
                                
                            </div>
                            

                            <div class="panel-menu">
                            
                                <!-- Button 1 - Inside Menu -->
                                <button class="btn btn-default" type="button">Default Btn</button>
                                
                                <!-- Button 2 - Inside Menu -->
                                <button class="btn btn-default" type="button">Default Btn</button>
                                
                            </div>
                            

                            <div class="panel-sidemenu">
                               <ul class="nav">
                                
                                 <!-- Nav Title -->
                                 <li class="nav-title">..</li>
                                  
                                 <!-- Nav Items -->
                                 <li>..</li><li>..</li>
                                  
                               </ul>  
                            </div>
                            

                            <div class="panel-body">
                                <p> Put all the content you can dream of here...</p>
                            </div>
                            

                            <div class="panel-footer">
                            	
                              <!-- Desired Footer Content - Often Floated -->
                              <span class="panel-title-sm pull-left"> A Panel Footer! </span>
                              <button class="btn btn-warning pull-right"> A Footer Btn </button> 
                              
                              <!-- Clear Floats -->
                              <div class="clearfix"></div> 
                              
                            </div>
                            

Elements

Tabs and Accordions

Tabs and accordions are animated widgets built with Bootstrap Panels and are great for organizing large amounts of content. You can learn about their various styles, structures, and options below!

Tabs - Basic Structure

                    <div class="tab-block">
                    
                        <!-- Tabs Navigation -->
                        <ul class="nav nav-tabs">
                           <li><a href="#tab1">Tab1</a></li>
                           <li><a href="#tab2">Tab2</a></li>
                        </ul>
                        
                        <!-- Tab Content -->
                        <div class="tab-content">
                           <div id="tab1" class="tab-pane">..</div>
                           <div id="tab2" class="tab-pane">..</div>
                        </div>
                            
                     </div>
                     

Tabs - Navigation Positions

                            <div class="panel-body">
                                <p> Put all the content you can dream of here...</p>
                            </div>
                            

Accordion - Basic Structure

                        <div class="panel-group accordion" id="example1">
                        
                            <!-- Panel Item 1 - With Example Contents -->
                            <div class="panel" id="panel-item1">
                               <div class="panel-heading">..</div>
                               <div class="panel-collapse collapse">
                                  <div class="panel-body">Content Here</div>
                               </div>
                            </div>
                            
                            <!-- Panel Item 2 -->
                            <div class="panel" id="panel-item2">..</div>
                                
                         </div>
                         

Accordion - Styles

Icons

Understanding Font Based Icons

All of the icons used in Stardom were created using font based icon libraries. The icons are created with small html snippets rather than with the use of an <img> tag. This allows you to select from hundreds of icons by simply changing a class name. Another great feature of font icons is that you can style the icons using common text based styling. Such as color, font-size, etc. Stardom includes three separate font-icon libraries.

Available Icon Libraries

Animations

You're Gonna Love Them

Stardom includes a CSS based animation library which allows a developer to easily add transitions and effects to virtually any html element. Simply include the required CSS stylesheet on the page you desire animations and then follow some incredibly simple and frustration-free syntax.

Developers Website

Stylesheet Requirements

               // Execute on button click
               $('#example-button').click(function() {
               
                  // On button click add required CSS classes. Remove classes upon animation complete
                  $(this).addClass('animated fadeIn').one('webkitAnimationEnd oAnimationEnd', function() {
                     $(this).removeClass('animated fadeIn');
                  });
                  
               });
                

Page Options

• Page Layouts
• Header
• SideBar
• Breadcrumbs

3rd Party Plugin Resources

A Full List of Theme Plugins!

With how many great plugins there are avaliable to developers it can become difficult to keep track of them all. Use this list to sort, find, and better your understanding of each plugin. You can never have enough good reference sheets.