iQDesk Engine v.2.0 has responsive HTML markup and related styles. The base of every responsive markup is columned type of representing data. The columns put in one line, and few lines together being merged into the grid. Exactly about this kind of the grid we would like to talk in this chapter.
The single entity of the grid is the column. iQDesk Engine v.2.0 has 12-columns structure of the grid, and presents following classes to define columns:
.column-18.33% of parent width.
.column-216.66% of parent width.
.column-325% of parent width.
.column-433.33% of parent width.
.column-541.66% of parent width.
.column-650% of parent width.
.column-758.33% of parent width.
.column-866.66% of parent width.
.column-975% of parent width.
.column-1083.33% of parent width.
.column-1191.66% of parent width.
.column-12100% of parent width.
You no need to define the columns classes for the different device screens, because the classes above,
automatically changes dimensions accordingly the screen size. Also, you no need to wrap around the columns
in some element with special class, all what you need is to wrap columns in one tag, and after the last column
put the clearing tag
column-4"> </div> <div class="
column-4"> </div> <div class="
column-4"> </div> <div class="
clearfix"></div> //define the clearing tag </div>
With columns classes, in iQDesk Engine v.2.0 exist the classes which can define the side margins for the each element, basing on the parent width. Below is the list of supported classes to adjust left and right side margins of the elements.
.margin-left-1defines left-side margin for 8.33% of parent width.
.margin-left-2defines left-side margin for 16.66% of parent width.
.margin-left-3defines left-side margin for 25% of parent width.
.margin-left-4defines left-side margin for 33.33% of parent width.
.margin-left-5defines left-side margin for 41.66% of parent width.
.margin-left-6defines left-side margin for 50% of parent width.
.margin-left-7defines left-side margin for 58.33% of parent width.
.margin-left-8defines left-side margin for 66.66% of parent width.
.margin-left-9defines left-side margin for 75% of parent width.
.margin-left-10defines left-side margin for 83.33% of parent width.
.margin-left-11defines left-side margin for 91.66% of parent width.
.margin-right-1defines right-side margin for 8.33% of parent width.
.margin-right-2defines right-side margin for 16.66% of parent width.
.margin-right-3defines right-side margin for 25% of parent width.
.margin-right-4defines right-side margin for 33.33% of parent width.
.margin-right-5defines right-side margin for 41.66% of parent width.
.margin-right-6defines right-side margin for 50% of parent width.
.margin-right-7defines right-side margin for 58.33% of parent width.
.margin-right-8defines right-side margin for 66.66% of parent width.
.margin-right-9defines right-side margin for 75% of parent width.
.margin-right-10defines right-side margin for 83.33% of parent width.
.margin-right-11defines right-side margin for 91.66% of parent width.
These built in classes will help you to organize all your content in responsive columns, which will change own width accordingly the allowed width. These classes are used now in all built in modules and you can see in live how it works.
In iQDesk Engine v.2.0 used the font family
Dosis from the Google Fonts library. It's pretty
narrow font, which allows to display more info. This fint family has two different weights of letters: 700 and 400.
700 looks bold, 400 looks regular. The default size of all text in the system is
The heading tags and special classes has the predefined relative font sizes, so if you will want to change
the font family of your system, or default size, it will affect all the headings and predefined classes, which
have the font-size rule. So let's take a look on the predefined font-sizes of the heading tags:
h1is 160% of default font size. Font-weight 700.
h2is 150% of default font size. Font-weight 700.
h3is 140% of default font size. Font-weight 700.
h4is 130% of default font size. Font-weight 700.
h5is 120% of default font size. Font-weight 700.
h6is 110% of default font size. Font-weight 700.
In iQDesk Engine v.2.0 exist the predefined classes
.h6, which have the same styles as appropriate heading tags. So you can use this classes
with any elements you want, and be sure, it will look like a heading. Also, the system has the helpers classes to adjust the
font-size of the elements on the fly. Let's take a look on them.
.font-110defines the font-size of the element as 110% of the default value.
.font-120defines the font-size of the element as 120% of the default value.
.font-130defines the font-size of the element as 130% of the default value.
.font-140defines the font-size of the element as 140% of the default value.
.font-150defines the font-size of the element as 150% of the default value.
.font-160defines the font-size of the element as 160% of the default value.
Organizing Work Space
Talking about works space, means the space intended for your module content view. iQDesk Engine v.2.0 has built it the classes to define so general elements like: Tabs, Main Header, Main Content and etc. So let's take a look how to correctly mark up the given space to get useful interface. In this chapter we're going to show only the general structure of the module's view layout, all the internal elements will be explained in this section in other chapters, or you can define your own classes for your own control elements. We already gave you an example of the view's layout in chapter "View" of the section "Server-Side Coding". But now we would like to pay your attention on the classes it uses.
General Work Space Structure
content"> //define the main container for the content <div class="
content-inner"> //define the internal container which has side margins //and has fixed width for large screens //put here the tabs HTML markup <div class="
content-header"> //define the main header of your view //put here control buttons, or the title of current action, using <h1> tag </div> <div class="
content-body"> //define the body of your content, which displays right below the header //in this place you can define the sidebar render //or the rest space can be just splitted into the columns <div class="
content-action"> //define the main wrapper of active content <div class="
content-action-inner"> //define the internal wrapper of active content <div class="
content-action-header"> //define the current action header box //put here everything you want, it can be some control elements or the text </div> <div class="
content-action-subheader"> //define the current action sub-header box //put here everything you want, it can be some control elements or the text </div> //put here your main module content //it can be table, or forms or anything elase oyu want //also you can split this pace into the columns, to place here //few forms or few tables </div> <div class="
clearfix"></div> //define the clearing tag for the internal content wrapper </div> <div class="
clearfix"></div> //define the clearing tag for the outer content wrapper <div class="
content-footer"> //define the content footer //put here the pagination or anything else you want </div> </div> </div> </section>
Well, as you can see the general structure of your module's view layout is pretty simple, and to remember it better, let's repeat what you should do to get correct view:
- Define the main container
- Define the internal container
- Define the tabs wrapper
- Define the header
- Define the main wrapper of active content
- Define the footer
Don't forget that for user's convenience of using, you can decide to split the given zones into the columns as we explained in the "Grids" chapter of this section. And don't forget, that it's just an official recommendations, how to create view layout, but you, as developer, can leave the right to change it fully, if it's required to make your module more useful.
The useful feature of iQDesk Engine v.2.0 are the built in classes for quick creating tabs structure in your module view. We already took a quick look on the HTML markup of the tabs in chapter "Tabs" of "JS Implementing" section, but now we're going to pay your attention on the used classes.
tabs-wrapper"> //define the tabs wrapper <ul class="
tabs-list"> //define the list of tabs <li class="
active"> //define the tab <a href="#tab_name_1"> //define the tab link [tab_title_1] </a> </li> <li> <a href="#tab_name_2"> [tab_title_2] </a> </li> //......... <li> <a href="#tab_name_n"> [tab_title_n] </a> </li> </ul> <div class="clearfix"></div> //define the clearing tag for the list of the tabs </div>
That's the general structure of the HTML markup of the tabs in your module view. As you can see
nothing difficult is here. But be careful with classes, all of them should be here, in other case
it will work wrong. Pay attention on the important class of one of the tabs
This class defines that this tab is currently active. You should to define it once on the loading your
Now let's see how the tab container structure looks.
tab-container"> //define the tab container //put here the content related to the according tab </div> <div id="tab-[tab_name_2]" class="
tab-container"> </div> //......... <div id="tab-[tab_name_n]" class="
To define the element on your module view as tab container, all what you need is to setup ID attribute of this tab container
and add the special class
.tab-container which you're going to use as container. Important that
you no need to define the element as
it will automatically hide inactive tab containers. But be careful, if you're going to change the way
how the Tabs class works, please, don't forget that inactive tabs should be hidden. Now you can ask what to wrap by tab container,
well, we guess the best would be wrap around the
a single tab container element. In this case all you action buttons and etc. will be related to the one tab. Or if you
need to leave the same header for all tabs, you can just add class
and define the unique ID of this element.
to hide/show some elements, but here we're going to change the display state of the different elements with only
CSS, according the user's device screen size. Let's imagine, your element is defined as
so how, to force it be hidden on the small screens. For these purposes, iQdesk Engine v.2.0 has 2 built in
.xs-static-hide. This classes makes your element hidden accoringly
the screen size. The class
.s-static-hide hides your element on the screens width lower than
and the class
.xs-static-hide hides your element on the screens width less than
Let's take a look on the simple example.
xs-static-hide"> </div> <div id="element_2" class="
In given example, we defined two elements
#element_2. If user opens
the system form the desktop, both elements will be visible. If user takes the new smartphone, and opens
the same page in the system, the element
#element_2 will be hidden for him, if the screen size
of his smartphone is less than 768px. Then user takes an old smartphone, and again opens the same page,
and in this case both elements will be hidden for him.
This feature allows to save the work space for more important things and prioritize the displaying of information on the different devices.
The work table element in iQDesk Engine v.2.0 is represented by a usual <table> tag. But it strongly requires using the internal tags like <thead> and <tbody>. So let's see the structure of the work table and pay attention on the defined classes.
work-table" cellpadding="0" cellspacing="0"> //define the table <thead> //define the table header <tr> <th>[column_header_1]</th> <th>[column_header_2]</th> //......... <th>[column_header_n]</th> </tr> </thead> <tbody> //define the table body <tr> <td class="
align-center">[column_value_1]</td> <td class="
align-center">[column_value_2]</td> //......... <td class="
align-center">[column_value_n]</td> </tr> </tbody> </table>
As you can see the table looks like a usual table, just few special classes are defined. Let's go through these classes one-by-one, to understand why they are here:
.work-tabledefines all the primary styles of appearing the table, and all the internal elements like the table header, body, header cells, body cells, body rows and etc.
.align-centerin this structure is given like an example. This class defines the text position inside the element.
.align-centeraligns the text middle,
.align-leftaligns the text left,
.align-rightaligns the text right. You can don't use this class at all, but we think the center aligned cells looks much better than left or right aligned. But there are few special cases when the left or right side alignment is required, in these cases uses appropriate classes.
The last important thing about the work tables. If the data set is not have any records to display, or user filtered the output so there is no records, then please check this by PHP inside the view file, and if it's really empty output, please add one row with one cell in the table body, which will say that there is no records. For example:
align-center" colspan="[number_of_table_columns]">No records found</td> </tr>
These 3 lines will take 1 min of your coding time, but the final user will know, that the system is not broken, that all works good, but for some reason there are no records.
Modal windows is the special type of content displaying in iQDesk Engine v.2.0. Read more about how to handle opening the modal windows in the chapter "Modal Windows" of the "JS Implementing" section. As long as it's the special type of the content, then it should have the specific structure of the HTML markup. Let's take a quick look on this structure and try to understand what each class means.
modal-wrapper column-4"> //in other case define other tag <div class="
modal-wrapper column-4"> <div class="
modal-header"> //define the modal header [modal_window_title] </div> <div class="
modal-content"> //define the modal body </div> <div class="
modal-footer"> //define the modal footer //if you defined the form as parent element, //then you can put here the action buttons //in other case you can place here the close button //as defined below <a href="#" class="
button medium-button secondary-button close-modal-window"> [close_button_text] </a> </div> </form> //or (related on the opened tag) </div>
Let's see on the specified classes.
.modal-wrapperdefines the primary styles of the modal window wrapper.
.column-4defines the width of the modal window. Find out more about different widths in chapter "Grids" of this section.
.modal-headerdefines the primary styles of the modal window header.
.modal-contentdefines the primary styles of the modal window content body.
.modal-footerdefines the primary styles of the modal window footer.
.secondary-buttondefines the primary styles of the system button. Find out more about buttons classes in chapter "Buttons" of this section.
.close-modal-windowdoesn't define any styles, but define the handler of the click event. By clicking on the element with class
.close-modal-window, the modal window will be closed.
As you can see the structure of the modal window HTML markup is pretty simple, all what you need is jsut define the wrapper, header, body, footer and close button. Of course, you can skip this chapter and don't use the modal windows, using only the static pages, but if you're going to sell your module online, you should to use the modal windows, for managing not big forms.
iQDesk Engine v.2.0 has buil in set of the icons, which you can use in every place you want. All the icons
presented by the special font-family, so you're able to change the size to make it bigger or smaller without
loosing the quality. To define the icon you should to put the <i> tag with specific classes
typcn-[icon_type]. The class
typcn defines the special styles, which convert the current
element into the icon-container. The class
typcn-[icon_type] defines which exactly icon will be displayed.
Let's see a little example.
The given example displays the trash icon. The font size of the icon will be inherited from the parent element. Well, you see that the defining icons in your view files is very very simple process. Much more interesting is which exactly icons presented in the system. So, let's take a look on the full list of available icons.
Default System Icons
One of the important components of the whole system is the forms. They being used overall: in filters, on the modal windows of creating records, or the modal windows of updating records and etc. So what id the structure of the form HTML markup should be to make it looks good? Firstly, we would like to pay your attention on, that all the forms in iQDesk Engine v.2.0 can be horizontal or vertical. Horizontal form means that the label of the field will be on the same line as the filed. Vertical form means, that the label will be above the field. In any case, you can manage of how the fields and labels will be placed, the primary is that you no need to specify the form class to make it horizontal or vertical. Ok, a little less conversation, a little more action. Let's take a look on the structure of the form in iQDesk Engine v.2.0.
inline-form-row"> //define the single form row <div class="
column-6"> //define the left column of the row for the label <label>[field_label_1]</label> //define the label of the field </div> <div class="
column-6"> //define the right column of the row for the field [field_1] //define the field. Every field should have the class
.full-width//to get all available width for the field </div> <div class="clearfix"></div> //define the clearing tag for the single form row </div> <div class="
inline-form-row"> <div class="
column-6"> <label>[field_label_2]</label> </div> <div class="
column-6"> [field_2] </div> <div class="clearfix"></div> </div> //......... <div class="
inline-form-row"> <div class="
column-6"> <label>[field_label_n]</label> </div> <div class="
column-6"> [field_n] </div> <div class="clearfix"></div> </div> <div class="
inline-form-row form-submit-row"> //put here the action buttons </div> </form>
In this structure of the form HTML markup are several highlighted classes. So let's go through them one-by-one.
.inline-form-rowdefines the primary style of the one form row. The one row is meaning the container for the pair label-field.
.column-6defines, that the one column of the form row will take 50% of the whole form width. If you will use the same structure in your forms, they will appear horizontal. But, for example, if you will apply the class
.column-12, it will automatically converts the form into the vertical. Cool, right? So, feel free to use the grid system inside the single form row to adjust columns as you want. But don't forget to put the cleaning tag
<div class="clearfix"></div>before close the form row.
.form-submit-rowdefines the styles for the special from row, which will contain the action buttons.
As you can see, the form definition in iQDesk Engine v.2.0 is not much different of the usual form definition. All what you need to remember, that every pair of label-field, should be wrapped around by the form row tag, and inside this row, the space should be divided on columns. Following these simple rules will make your coding process for iQDesk Engine v.2.0 quick and quality.
iQDesk Engine v.2.0 is theme based system, which means that it uses defaults styles and special styles which defines the appearing exactly of this theme. For now in the system predefined just two themes: "green" and "red". But it's pretty real case, if you would like to change the style of your system. No problems, the system is ready for these, all what you need is just create one folder and few stylesheets. Ok, let's see how we can create new theme in the system.
Firstly, go to the folder
assets/themes. You can see, there are already created two folder, they
are the folders of the predefined themes we told above. But let's leave them, and create here new folder, name
it as you wish.
Now go to the just created folder, and create there two new folders. Call them
The folder images should contain 4 files:
logout.pngis the logout icon in default state.
logout_hover.pngis the logout icon in hover state.
sort-icon-asc.pngis the active sort icon. Direction Ascending.
sort-icon-desc.pngis the active sort icon. Direction Descending.
You can create new files, or use the images from some other theme, and just adjust them.
Now let's back to the root folder of your theme. Create here new folder, and name it
ui. Open this folder
and put here all the stylesheets and images related to your jQuery UI theme, which you're going to use
with the new theme. You can download different themes from the official jQuery UI website.
Ok, back to the root folder of your theme again. And last movement, is to create here the file
style.css. It's the primary
theme stylesheet, which defines specific colors for the different elements. Open this file and write all the new styels, which you
would like to change in your theme.
We are almost there, the last what you need to do, is to open
/application/config/theme.php and redefine the variable
$theme['color_scheme']="green"; with the new value, which is the name of your theme folder. That's all, now the system uses
your new theme. During the work, you will find different things which you would like to adjust too, so don't hesitate to open the
theme stylesheet and redefine there so many classes, as you want.
The last important think, which we would like to explain about theming of your system, is the module icons.
As you can pay attention, in navigation, the system uses the icons. As you know this items being taken from
assets folder of your module. There are should be two files:
nav_icon.pngis the module icon in default state.
nav_icon_hover.pngis the module icon in hover state.
Usually, there should be placed the default icons, which will be taken if no other icons will be found. But how define different icons for different themes. For example, "green" theme uses green icons in navigation, but "red" theme uses red icons. Don't worry, give us 2 minutes and you will know how to define different icons for the different themes.
In the folder
assets, you should create new folder and name it
themes. Now open just created
folder, and create there new folder again. The name of the new folder, should match the name of the theme, for which
you would like to define icons. For example, if we're going to create icons for the "red" them, then the folder
should be named "red". Open this folder, and create here the same icons files as in the
That's all. Now when the system will use the specified theme, it will take the icons not from the assets folder of your module,
but from the path we just specified for this theme.
We believe, that the manual, which you just finished read will help you to start code with iQDesk Engine v.2.0. We tried to explain all about the system and to interest you to to code with our engine. We really hope, that you will enjoy to work with it. Happy coding, dear reader!