diff --git a/phpgwapi/templates/default/README-less-css b/phpgwapi/templates/default/README-less-css new file mode 100644 index 0000000000..4f50c1deae --- /dev/null +++ b/phpgwapi/templates/default/README-less-css @@ -0,0 +1,119 @@ +/** + * How EGroupware loads images and style-sheets + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Ralf Becker + * @package phpgwapi + * @version $Id$ + */ + +EGroupware uses following directory structure: +============================================= + +Applications: +------------ + +$appname/ + +- inc/ directory containing PHP classes (class.$appname_$something.inc.php) + +- lang/ directory with translations egw_*.lang + +- js/ directory containing JavaScript + | +- app.js get automatically loaded by eTemplate and should extend phpgwapi/js/jsapi/app_base.js + | + +- setup/ information about installing (setup.inc.php, tables_(current|update).inc.php, ... + +- templates/ + +- default/ directory containing templates eg. eTemplate *.xet files + | +- images/ directory with app specific images, used by all templates not incl. image in own directory + | | +- navbar.png application icon shown in navigation bar + | +- app.css app specific styles automatic loaded, if template does not include own one + | +- app.less (optional) source for CSS preprocessor less, from which app.css is generated + | + +- $template/ directory containing template-set specific templates + +- images/ template-set and app specific images, overwriting these in default, incl. navbar.png + +- app.css template specific CSS file, get prefered over default/app.css NOT loaded additinal + +- app.less (optional) soucre for above app.css +API: +--- + +phpgwapi/ (basic layout as for an application) + +- inc/ directory containing PHP classes (new ones should use class.egw_$something.inc.php) + | +- $module/ directory containing external modules + +- js/ + | +- jsapi/ JavaScript clientside API + | +- jquery/ directory with jQuery, jQuery-UI and jQuery plugins + | +- ... other Javascript modules like ckEditor, dhtmlxtree, ... + | + +- setup/ information about installing (setup.inc.php, tables_(current|update).inc.php, ... + +- templates/ + +- default/ containing templates files for all template-sets + | +- images/ containing images automatic found by all apps and template-sets + +- idots/ old idots template (new templates can use different structure, see below) + +- class.jdots_framework.inc.php extending egw_framework class + +- images/ images specific of idots template-set, overwriting the ones in default + +- css/ themes for idots template file (automatic detected by preferences) +New template-sets: +----------------- + +$template/ + +- inc/ contains PHP files + | +- class.$template_framework.inc.php required PHP class extending egw_framework class + | + +- js/ Javascript files of template + +- images/ template specific images for all apps, overwriting images in phpgwapi/templates/default/images + +- css/ themes of template + | +- $template.css required default theme of template, get automatically loaded, if no other theme specified in prefs + | +- $template.less (optional) source of $template.css + +- less/ (optional) directory containing files for CSS preprocessor less included by .less files in $template/css/ + +Automatic image loading order: +============================= +1. Instance specific directory defined configuration +2. app's template specific directory, eg. addressbook/templates/$template/images/navbar.png +3. app's default image directory, eg. addressbook/templates/default/images +4. templates image directory, eg. phpgwapi/idots/images or for newer templates $template/images +5. API default image directory phpgwapi/templates/default/images + +Images lower down in above hierarchy are NOT to be copied to more specific directories, unless they should be overwritten! + +Automatic loading of CSS styles: +------------------------------- +a) theme from template, eg. phpgapi/templates/idots/css/idots.css +b) etemplate/templates/default/etemplate(2).css (only for eTemplate applications) +c) either: + - apps template specific app.css eg. $appname/templates/$template/app.css or + - apps default $appname/templates/default/app.css + +CSS preprocessor less: +===================== +More information about syntax can be found under http://lesscss.org/ +EGroupware requires at least version 1.4 as we use @include (require) syntax to fetch just definitions +from phpgwapi/templates/default/def_*.less. + +Currently commiter is responsible to generate all CSS files depending on a change .less file +and also to made changes in .less file not .css file, if a .less file exits. + +One way to do so is automatic with NetBeans 7.4: +----------------------------------------------- +1. install a current node.js and npm (node package manager) follwoing this tutorial + + https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager + + a) for Mac OS X eg. use: port install node npm + You need to symlink node to default location: ln -s /opt/local/bin/node /usr/bin/ + b) Ubuntu 13.10 still includes too old node version (at least for less v. 1.5.0), + so follow above tutorial using Chris Lea's node repository + +2. install lessc via npm: npm install -g less + +3. Got to: NetBeans preferences >> Miscellanceous >> CSS Preprocessor and set: + Less path: /usr/bin/lessc or /opt/local/bin/lessc depending on your way of installing lessc + Uncheck "Generate extra information (debug)" + +4. Open EGroupware project configuration in NetBeans (right click on project >> properties) + >> CSS Preprocessor + >> LESS + - check "Compile LESS Files on Save" + - Watch: change default "css/" "less/" to "." "." (generate css file in same directory) + - no compile options used currently + +--> after that NetBeans compiles LESS files automatic to CSS files (you have to commit both!) \ No newline at end of file