eGroupWare PHP Cross Reference Groupware Applications

Source: /phpgwapi/templates/default/README-less-css - 124 lines - 6612 bytes - Text - Print

Description: How EGroupware loads images and style-sheets

   1  /**
   2   * How EGroupware loads images and style-sheets
   3   *
   4   * @link http://www.egroupware.org
   5   * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
   6   * @author Ralf Becker <rb@stylite.de>
   7   * @package phpgwapi
   8   * @version $Id$
   9   */
  10  
  11  EGroupware uses following directory structure:
  12  =============================================
  13  
  14  Applications:
  15  ------------
  16  
  17  $appname/
  18          +- inc/        directory containing PHP classes (class.$appname_$something.inc.php)
  19          +- lang/       directory with translations egw_*.lang
  20          +- js/         directory containing JavaScript
  21          |    +- app.js get automatically loaded by eTemplate and should extend phpgwapi/js/jsapi/app_base.js
  22          |
  23          +- setup/      information about installing (setup.inc.php, tables_(current|update).inc.php, ...
  24          +- templates/
  25                      +- default/           directory containing templates eg. eTemplate *.xet files
  26                      |         +- images/  directory with app specific images, used by all templates not incl. image in own directory
  27                      |         |        +- navbar.png  application icon shown in navigation bar
  28                      |         +- app.css  app specific styles automatic loaded, if template does not include own one
  29                      |         +- app.less (optional) source for CSS preprocessor less, from which app.css is generated
  30                      |
  31                      +- $template/           directory containing template-set specific templates
  32                                  +- images/  template-set and app specific images, overwriting these in default, incl. navbar.png
  33                                  +- app.css  template specific CSS file, get prefered over default/app.css NOT loaded additinal
  34                                  +- app.less (optional) soucre for above app.css
  35  API:
  36  ---
  37  
  38  phpgwapi/                 (basic layout as for an application)
  39          +- inc/           directory containing PHP classes (new ones should use class.egw_$something.inc.php)
  40          |     +- $module/ directory containing external modules
  41          +- js/
  42          |    +- jsapi/    JavaScript clientside API
  43          |    +- jquery/   directory with jQuery, jQuery-UI and jQuery plugins
  44          |    +- ...       other Javascript modules like ckEditor, dhtmlxtree, ...
  45          |
  46          +- setup/         information about installing (setup.inc.php, tables_(current|update).inc.php, ...
  47          +- templates/
  48                      +- default/          containing templates files for all template-sets
  49                      |         +- images/ containing images automatic found by all apps and template-sets
  50                      +- idots/            old idots template (new templates can use different structure, see below)
  51                              +- class.jdots_framework.inc.php extending egw_framework class
  52                              +- images/   images specific of idots template-set, overwriting the ones in default
  53                              +- css/      themes for idots template file (automatic detected by preferences)
  54  New template-sets:
  55  -----------------
  56  
  57  $template/
  58           +- inc/                                    contains PHP files
  59           |     +- class.$template_framework.inc.php required PHP class extending egw_framework class
  60           |
  61           +- js/     Javascript files of template
  62           +- images/ template specific images for all apps, overwriting images in phpgwapi/templates/default/images
  63           +- css/    themes of template
  64           |     +- $template.css  required default theme of template, get automatically loaded, if no other theme specified in prefs
  65           |     +- $template.less (optional) source of $template.css
  66           +- less/   (optional) directory containing files for CSS preprocessor less included by .less files in $template/css/
  67  
  68  Automatic image loading order:
  69  =============================
  70  1. Instance specific directory defined configuration
  71  2. app's template specific directory, eg. addressbook/templates/$template/images/navbar.png
  72  3. app's default image directory, eg. addressbook/templates/default/images
  73  4. templates image directory, eg. phpgwapi/idots/images or for newer templates $template/images
  74  5. API default image directory phpgwapi/templates/default/images
  75  
  76  Images lower down in above hierarchy are NOT to be copied to more specific directories, unless they should be overwritten!
  77  
  78  Automatic loading of CSS styles:
  79  -------------------------------
  80  a) theme from template, eg. phpgapi/templates/idots/css/idots.css
  81  b) etemplate/templates/default/(app|etemplate2).css (only for eTemplate applications)
  82  c) either:
  83     - apps template specific app.css eg. $appname/templates/$template/app.css or
  84     - apps default $appname/templates/default/app.css
  85  
  86  CSS preprocessor less:
  87  =====================
  88  More information about syntax can be found under http://lesscss.org/
  89  EGroupware requires at least version 1.4 as we use @include (require) syntax to fetch just definitions
  90  from phpgwapi/templates/default/def_*.less.
  91  
  92  Currently commiter is responsible to generate all CSS files depending on a changed .less file
  93  and also to modify .less files not .css files, if a .less file exits.
  94  
  95  One way to do so is automatic with NetBeans 7.4:
  96  -----------------------------------------------
  97  1. install a current node.js and npm (node package manager) follwoing this tutorial
  98  
  99        https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
 100  
 101     a) for Mac OS X using port: port install node npm
 102        You need to symlink node to default location: ln -s /opt/local/bin/node /usr/bin/
 103  
 104     b) for Mac OS X using installer from http://nodejs.org/download/
 105        You need to symlink node as follows: ln -s /usr/local/bin/node /usr/bin/
 106  
 107     c) Ubuntu 13.10 still includes too old node version (at least for less v. 1.5.0),
 108        so follow above tutorial using Chris Lea's node repository
 109  
 110  2. install lessc via npm: npm install -g less
 111  
 112  3. Got to: NetBeans preferences >> Miscellanceous >> CSS Preprocessor and set:
 113     Less path: /usr/bin/lessc, /opt/local/bin/lessc or /usr/local/bin/lessc depending
 114     on your way of installing lessc
 115     Uncheck "Generate extra information (debug)"
 116  
 117  4. Open EGroupware project configuration in NetBeans (right click on project >> properties)
 118     >> CSS Preprocessor
 119     >> LESS
 120     - check "Compile LESS Files on Save"
 121     - Watch: change default "css/" "less/" to "." "." (generate css file in same directory)
 122     - no compile options used currently
 123  
 124  --> after that NetBeans compiles LESS files automatic to CSS files (you have to commit both!)

title

Description

title

Description

title

Description

title

title

Body