Using CSS

Grids

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-1 8.33% of parent width.
• .column-2 16.66% of parent width.
• .column-3 25% of parent width.
• .column-4 33.33% of parent width.
• .column-5 41.66% of parent width.
• .column-6 50% of parent width.
• .column-7 58.33% of parent width.
• .column-8 66.66% of parent width.
• .column-9 75% of parent width.
• .column-10 83.33% of parent width.
• .column-11 91.66% of parent width.
• .column-12 100% 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 <div class="clearfix"></div>.
For example:

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.

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.

Typography

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 14px. 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:

• h1 is 160% of default font size. Font-weight 700.
• h2 is 150% of default font size. Font-weight 700.
• h3 is 140% of default font size. Font-weight 700.
• h4 is 130% of default font size. Font-weight 700.
• h5 is 120% of default font size. Font-weight 700.
• h6 is 110% of default font size. Font-weight 700.

In iQDesk Engine v.2.0 exist the predefined classes .h1, .h2, .h3, .h4, .h5 and .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-110 defines the font-size of the element as 110% of the default value.
• .font-120 defines the font-size of the element as 120% of the default value.
• .font-130 defines the font-size of the element as 130% of the default value.
• .font-140 defines the font-size of the element as 140% of the default value.
• .font-150 defines the font-size of the element as 150% of the default value.
• .font-160 defines 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

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:

1. Define the main container
2. Define the internal container
3. Define the tabs wrapper
4. Define the header
5. Define the main wrapper of active content
6. 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.

Tabs

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.

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 class="active". This class defines that this tab is currently active. You should to define it once on the loading your module view, all subsequent events of changing active tab will be handled by built in JavaScript library.

Now let's see how the tab container structure looks.

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 display:none; because, once the Tabs JavaScript object will be created, 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 .content-header and .content-body by 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 .tab-container for .content-body element, and define the unique ID of this element.

Hiding Elements

The similar topic, we already explained in the "JS Implementing" section. There we used the JavaScript events 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 display:block;, so how, to force it be hidden on the small screens. For these purposes, iQdesk Engine v.2.0 has 2 built in classes .s-static-hide and .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 768px, and the class .xs-static-hide hides your element on the screens width less than 480px.

Let's take a look on the simple example.

In given example, we defined two elements #element_1 and #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.

Sidebar

As you know, iQDesk Engine v.2.0 has built in PHP library Sidebar for registering and rendering the sidebar on your module views. But what if you're going to write it manually, to make the adjustments, which are not provided by this Library. In this case, you should clearly know and understand the sidebar structure, so let's spend couple minutes to take a look on the HTML markup of the sidebar.

From the given example you see, that a lot of the used classes are good known, but few of them are not learned yet. So let's take a loo on the new used classes:

• .sidebar-left defines the primary styles for the sidebar, if it's placed on the left hand side. As you can imagine, instead of this class you can use .sidebar-right and your sidebar will jump on the right hand side.
• .filter-header defines the primary styles of the sidebar header.
• .hideable-box defines the element which will be hidden on the hiding the sidebar.
• .xs-hideable-box defines the element which will be hidden on the hiding the sidebar, contains the special styles for the small screen devices.
• .filter-subheader defines the primary styles of the sidebar sub-header.
• .filter-body defines the primary styles of the sidebar content body.
• .filter-form defines the primary styles of the element, which presents the outer wrapper of the sidebar content.
• .inline-form-row defines the primary styles of the single form row.
• .form-submit-row defines the special styles of the buttons container form row.

Now you know all about the structure of the sidebar HTML markup, and can use it in your module.

Work Table

Work Table is the special type of the control elements which helps you to display the multiple records from the system's database. It has own special class, which defines the view of this table. On this classes is not related no one JavaScript events, so if you want you can redefine the work table classes.

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.

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-table defines 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-center in this structure is given like an example. This class defines the text position inside the element. .align-center aligns the text middle, .align-left aligns the text left, .align-right aligns 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:

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

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.

Let's see on the specified classes.

• .modal-wrapper defines the primary styles of the modal window wrapper.
• .column-4 defines the width of the modal window. Find out more about different widths in chapter "Grids" of this section.
• .modal-header defines the primary styles of the modal window header.
• .modal-content defines the primary styles of the modal window content body.
• .modal-footer defines the primary styles of the modal window footer.
• .button, .medium-button and .secondary-button defines the primary styles of the system button. Find out more about buttons classes in chapter "Buttons" of this section.
• .close-modal-window doesn'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.

Icons

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 and 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

Buttons

In iQDesk Engine v.2.0 we included several styles, which allows you to put designed buttons on the views of your module. There are few different styels which defines different values.
Size defining:

• .big-button defines the big size of the button.
• .medium-button defines the medium size of the button.
• .small-button defines the small size of the button.

Color style defining:

• .primary-button defines the style of the primary action button.
• .secondary-button defines the style of the secondary action button.
• .delete-button defines the style of delete action button.

And the main class, which defines that given element is action button is .button, this class defines default values for all buttons. Ok let's review couple examples to see how differently you can combine all of these classes:

This example defines the big button, with primary action color style.

This example defines the medium button, with secondary action color style.

This example defines the small button, with delete action color style.

As you can see you can combine these classes as you want, and apply the styles not only to the real form buttons, like "input" or "button", but also to the links. And we can say even more, you can use these classes with every element you want.

Forms

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.

In this structure of the form HTML markup are several highlighted classes. So let's go through them one-by-one.

• .inline-form-row defines the primary style of the one form row. The one row is meaning the container for the pair label-field.
• .column-6 defines, 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-row defines 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.

Theme

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 images and ui. The folder images should contain 4 files:

• logout.png is the logout icon in default state.
• logout_hover.png is the logout icon in hover state.
• sort-icon-asc.png is the active sort icon. Direction Ascending.
• sort-icon-desc.png is 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.

Module Icons

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 the assets folder of your module. There are should be two files:

• nav_icon.png is the module icon in default state.
• nav_icon_hover.png is 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 assets folder. 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.

Epilogue

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!