Metainformationen zur Seite

CSS and style for your plugin

LoxBerry's UI framework

LoxBerry uses the jQuery Mobile HTML UI framework (version 1.4.5 is used). In the main section of your plugin HTML you can use almost all of jQuery Mobiles features. 

JavaScript coding is simplified by jQuery (version 1.12.4 is used).

Where to place own CSS in my plugin

First of all: Try to reduce own CSS, as LoxBerry's inclusion of jQuery Mobile with it's CSS already does most of the styling. Layouting CSS for your plugin, of course, is ok.

As of LoxBerry V1.2.4 you can inject CSS links and JavaScript libraries to the html header.

In HTML5, a <style> tag is only allowed in the <head> element, but, as in HTML5.2 this may get allowed, modern browsers support a <style> block inside the <body> block. Therefore, we recommend to start your plugin template with the <style> block, followed by the "real" HTML.

Also inline styles <h1 style="color:blue;margin-left:30px;"> work as they are HTML5 compliant.

Creating layout for your plugin

As LoxBerry's templates are optimized for responsive design (try it on your mobile or scale your browser window), your plugin should make use of that technique as well.

This is a major development breakpoint to come from LoxBerry as an administration frontend to LoxBerry as an user's frontend, providing plugins that may be used every day.

If you are "old school" HTML developer (or even don't feel as a developer at all) try to achive the following hints:

  • Do not extra-reduce the left and right margins (or do it dynamically). On a widescreen monitor your layout may "flow away" if you use the full width. But limiting the margins will kill your layout on tablets and mobiles.
  • For styling your plugin, try to use <div>'s instead of <table>'s. HTML tables weren't made for layouting. Tables may not respond in the same way as blocks do on different media sizes. This is a nice table generator: http://divtable.com/generator/
  • Do not use "extra gimmicky super blow-away" layouts. They will break somehow or somewhere. Screens and displays are very different. 

LoxBerry pre-defined styles

LoxBerry has defined some CSS style classes that are used in the system widgets (LoxBerry's system "plugins") and that can be used also in plugins. 

class="hint"

Is used for additional explanations in form fields. It's styles with font:size: 80%. 

class="monospace"

Text inside a <div> block is displayed in monospace font ("sourcecode font") with font-size:80%. 

class="wide"

This is used for titles with a wide letter spacing and is used in a <div> block. For example, the main plugin and system page use this title style. The text is closed with a line below the text similar to an <hr> line. The font size is adjusted responsive to the display width.