CSS convention in ImpressPages CMS
Follow the following rules when developing theme or plugin for ImpressPages CMS.
camelCase
In ImpressPages CMS we use camelCase structure for CSS classes, ie. ipWidget.
First character goes in lowercase, then each logical part (ie. word) starts with uppercase.
Combination
To make CSS as reusable as possible we use combination of the CSS classes. For example, ipAdminButton (global admin class) defines basic styles for all buttons in administration area. To make confirm button such element gets additional ipaConfirm (defines inner element) class.
To style such element you group CSS classes like this:
.ipAdminControls .ipAdminButton.ipaConfirm { ... }
Prefix
Each class used in ImpressPages CMS core, widgets, plugins should have prefix (there are a few exceptions).
- For default elements we reserved "ip".
- Default rich text editor (tinymce) has reserved prefix "mce".
If you don't want to break something accidentally when developing your own plugin create you own unique prefix.
CSS classes in the themes can be without prefix, as it usually is. That's why everything else is required to have it. Just be aware of global classes that should behave as intended and shouldn't be overridden.
Dash
When CSS classes are generated automatically they contain "-" (dash). The part before dash is static and the part after dash is dynamic. For example, ipWidget-IpText.
Global classes (without prefix)
Currently there are 2 CSS classes that core and widgets depend on (they must be correctly defined in each theme):
- clearfix
- clear
CSS classes in use
Blocks
Each block has default CSS class "ipBlock" and block id. We used id instead of class because there should be only one block on the page with the same name. Element id should be unique both for HTML and for ImpressPages CMS.
Block id is structured in the same way as CSS classes. For example, ipBlock-main, where "ipBlock-" is static part and "main" is the code name of the block.
Widgets
Each widget automatically gets 4 classes:
- ipWidget - default classes for every widget.
- ipPreviewWidget or ipAdminWidget - defines whether widget content is for preview or in the administration mode.
- ipWidget-IpTitle - defines the type of the widget. "ipWidget-" is a static part and "IpTitle" is the code name of the widget.
- ipLayout-default - defines the layout of the widget. "ipLayout-" is a static part and "default" is the code name of the layout.
Public classes
| CSS class / prefix | Description |
| ipBlock | for defined area that can contain widgets |
| ipWidget | for installed widgets, e.g. ipWidget (for default styles throught the system), ipWidget-IpText, ipWidget-MyWidget |
| ipw | for inner elements within ipWidget container, shouldn't be targeted directly |
| ipLayout | for layouts of widgets, most of the times should be targeted together with a widget class |
| ipModule | for html content from modules (none draggable elements) |
| ipm | for inner element within ipModule container, shouldn't be targeted directly |
| ipPreviewWidget | same as ipWidget but specifically used when widgets are not in edit mode |
Administration classes
| CSS classes / prefix | Description |
| ipAdmin | for all administration elements, e.g. ipAdminButton (default style for all buttons used) |
| ipa | for inner elements within ipAdmin element/container, shouldn't be targeted directly |
| ipAction | for action elements, used for targeting from Javascript, e.g. ipActionSave, ipActionPublish |
| ipg | prefix for all global elements used in administration, e.g. ipgLeft (floats left) |
| ipUpload | for image and file upload |
Write a comment
You must be logged in to comment.