Structure of the Flexberry ASP.NET

Themes

Initially themes Flexberry ASP.NET represent an unordered set .css-files from which it was hard to understand what is responsible for what. This led to the fact that the process of finalizing the third-party projects is complicated. It was necessary to structure the topic and to simplify the process of finalizing their plans.
In order to achieve this goal, it was decided to use a dynamic language styles LESS. It allows you to group styles, as well as move some style rules in variables, and then import them in the right .less-files.
This approach allows us to create a separate file group, which is styles used in all subjects. More on that described in article basic theme Flexberry ASP.NET and its connection with other themes. And also “collect” General styles for all themes and transfer them to separate .less file, create variables and import them as needed.
This reduces the amount of unnecessary code, but themes take a common structure. In addition, it improves the possibility of revision topics on applied projects. This is discussed in article Revision themes on applied projects.

structure of a topic

By default, the structure looks like the following:

Controls

__DateTimePicker__

Images

_Settings.less

_Variables.less

DateTimePicker.less

__DefaultInputs__

Images

_Settings.less

_Variables.less

DefaultInputs.less

__Lookup__

Images

_Settings.less

_Variables.less

Lookup.less

_Variables.less

__ShowHideDiv__

Images

_Settings.less

ShowHideDiv.less

__TableControls__

AjaxGroupEdit

_Settings.less

_Variables.less

AjaxGroupEdit.less

WebObjectListView

Images

WebObjectListView-Settings

Images

_Variables.less

WebObjectListView-HierarchySettings.less

WebObjectListView-LimitEditSettings.less

WebObjectListView-ViewColumnProvider.less

_Variables.less

_Settings.less

WebObjectListView-captionToolbar.less

WebObjectListView-contextMenu.less

WebObjectListView-pager.less

WebObjectListView-tableToolbar.less

WebObjectListView-toolbar.less

WebObjectListView.less

Forms

__Messages__

AlertMessage

_Settings.less

_Variables.less

AlertMessage.less

__ModalWindows__

ModalWindowContent

Images

_Settings.less

_Variables.less

ModalWindowContent.less

ModalWindowWrapper

Images

_Settings.less

_Variables.less

ModalWindowContent.less

__Pages__

EditPage

Images

_Settings.less

_Variables.less

EditPage.less

ExceptionPage

_Settings.less

_Variables.less

ExceptionPage.less

LoginPage

_Settings.less

_Variables.less

LoginPage.less

MainPage

Images

_Settings.less

_Variables.less

MainPage.less

Images

Libraries

__jQueryUI__

Images

jQueryUI.Base.less

jQueryUI.DateTimePicker.less

jQueryUI.less

jQueryUI.Settings.less

BaseStyles.css

BaseStyles.less

Theme.skin

Web.config

Folder and file Controls

Standard structure

In the Controls folder contains files and folders that are associated with controls. By default, this is: standard controls: DateTimePicker, ShowHideDiv, Lookup and WebObjectListView (WOLV) and AjaxGroupEdit (AGE). Each control is contained in a separate folder. By default, each folder has three files and a folder with pictures Images (WOLV structure is a little different). An example is provided below.

DateTimePicker

Images is the folder that contains the pictures, is dedicated to this control.

_Settings.less file that is used to add style rules applied by developers. How it exactly works is described below.

_Varaibles.less file that contains any variables for this control.

DateTimePicker.less - the main file that contains the styles for this control.

Note: file _Variables.less and _Settings.less will be encountered repeatedly. Their purpose is the same everywhere, so for each element of the structure will not be considered.

The structure of the control WOLV is slightly different. This control, like AGE, is contained in the folder TableControls responsible for table controls. The number of files WOLV much more than the other controls.
The structure is logically divided into two levels:

the file responsible for part of the WOLV

the file responsible for settings WOLV.

Following the example of other controls, WOLV has its own folder Images, files _Variables.less and _Settings.less. As styles for WOLV very much, they were broken into several files.
In the folder WebObjectListView-Settings also contain Images folder and file _Variables.less. The contents of this folder is dynamic because the number of settings grows WOLV.
At the moment, separately presented three of them:

WebObjectListView-HierarchySettings.less

WebObjectListView-LimitEditSettings.less

WebObjectListView-ViewColumnProvider.less.

The details of the structure is presented below.

TableControls

WebObjectListView

Images

WebObjectListView-Settings

Images

_Variables.less

WebObjectListView-HierarchySettings.less file that contains styles for hierarchical display of data