This document will guide you through the use of gx-admin.css, a premade and already tested stylesheet that is available in the admin section of Gambio GX2 shop.
Before version v2.3.1.0 the shop's administration user interface was defined by multiple unstructured CSS files that was very hard to manage and use. That led to the creation of newer files every time a new page was about to be developed. This is not required any more because of the new gx-admin.css file, which is backwards compatible with the existing stylesheets but also provides new and easy to use styles that will help you build an admin page without the need of an extra stylesheet.
Gx-admin.css was designed with semantic logic, inspired by major CSS frameworks like Bootstrap, Foundation etc. It implements more or less the same concept except from the fact that it is simpler and easier to use because it only contains the styling utils that a GX admin page would need. That said, every developer is always able to add his own custom CSS to a page when needed.
The file was created with the use of SCSS and Compass and consists of multiple, well-structured sub-files that handle a different section of the admin section.
The gx-admin.css will be already included in every admin page that contains the "header.php" file the only thing required to get it working is to set the "gx-container" class to a parent element which will contain your HTML markup.
Since v2.5.1.0 the shop implements a compatibility mode that will automatically style old pages (with the help of JavaScript). You do not need to worry about compatibility when implementing new pages.
Continue reading in order to learn how to use the gx-admin.css through the provided examples and demos. Keep in mind that you will need to place the "gx-container" class only once in your page and not for every container element as shown in the examples. The "gx-compatibility" class will be automatically added into old pages that use the "header.php" file.
The gx-admin.css file is working closely with the JS Engine which is shipped with the project's source code. For more complex UI widgets take a look at the "JavaScript Engine" documentation.
The stylesheet defines simple typography rules that will make your content fit smoothly with the rest of the UI elements. Heading sizes, line heights and margins as well as color are already defined.
With the grid system you can easily define width for your forms and other content without setting hard coded with values. The full page is divided into 12 sections and you can get grab some space by choosing one of the span# classes as shown in the following example.
Styling for table elements is predefined and you do not need to do anything. Once you create a table element with the complete structure (thead & tbody) your table will be styled like the rest of the administration section. Apply the "highlight" class to the highlighted row element.
You can easily structure and align form elements so that they look pretty and consistent within your various pages. All you have to do is to define small divs with label - input element pairs that have the "control-group" class. Optionally you can add the "block" class in order to get vertical alignment between the controls.
The form sumbit elements can be structured as in the following example.
The stylesheet includes some useful helpers that will help you define some custom properties like margin or padding, colors or custom components. Take a look at the following examples.