Projekt

Allgemein

Profil

Joomla Less - compiling css with JProofLess-libarary

Getting started right now

Automatically Render Joomla Less Files to Css

JProofLess Library helps Joomla Developers/Designers (components, modules, plugins, templates) to compile full automatically less files into css files.
The library does not corrupt any joomla stuff and does not collide with other lessc implementations.

Features Less compiling Joomla

  • No console or external script required to compile less files
  • Safe mechanism to render less files into css files
  • Compiler Strategies - automatic detect changes in less files
    • do nothing - just bind the target-css into joomla head
    • missing target css
    • changes in directory where the master less file is located
    • force compiling on each load (developers/designers for developing process)
  • efficient rendering without caching (it's not needed)
  • adding style vars (from template, component or other config panels)
  • automtic adding to joomlas Head-Tag without extra writing html or other annoying stuff
  • multiple less folders and rendered-less files works with the JProofLess independent
  • no plugins needed
  • no hacks
  • Works with Multiple LessC Versions in one Joomla installation and has no Collision
  • Joomla template, components, modules, plugins supported
  • Backend configurable for any kind of publishers (template designers, component developers)
  • painless installation

Complex rendering detection and execution
I.e. you have an basic less (template-master.less) file which contains a lot of imports, grids, mixins and styles and from Template-Config you will change some styles or have some style (custom-template-styles-green.css) versions. Then the compiler renders only the changed styles and adding the already stable template-master.less in top of the custom-template-styles-green.css.
If the template-master.less was changed it will be also compiled before.

KickOffCss

option prevents css files from adding to joomla head tag

Installation

The installation of this Joomla-Library is quite simple. You are working with the Joomla On-Board installer.
If your component requires JProofLess install it from the public download channel.

Latest Joomla Less version from http://wiki.jproof.de/download-jproofless-library

Download specific Version
http://wiki.jproof.de/download-jproofless-library-1.0.7

  • Joomla-Developer knows the alpha, beta, rc channels
  • Note, check the Tickets or personal information on development states
  1. -> login into Joomla Backend (login as Super-Admin)
  2. -> Extensions
  3. -> Install from Url
  4. -> install

Now we you are able to use the JProofLess library

Update

Joomla typical Update-Channel on http://public.jproof.de/jproofless/extension.xml

Usage

Usage/Example in Joomla Template

  1. You have already installed the JProofLess Library open your template index.php
  2. paste the following snippet somewhere obove the html
Minimal example
if (JLoader::import('jproofless.jproofless'))
{
    $joomlaLess = JProofLess::getInstance();
    $joomlaLess->setLessFile(JPATH_THEMES . '/' . $this->template . '/less/template.less');
    $joomlaLess->setCssFile(JPATH_THEMES . '/' . $this->template . '/css/template.css');
    $joomlaLess->autoCompile();
}
Safe example if you don't know the JProofless was shipped and installed. So Page-Owner will get an notice
if (JLoader::import('jproofless.jproofless'))
{
    $joomlaLess = JProofLess::getInstance();
    $joomlaLess->setLessFile(JPATH_THEMES . '/' . $this->template . '/less/template.less');
    $joomlaLess->setCssFile(JPATH_THEMES . '/' . $this->template . '/css/template.css');
    $joomlaLess->autoCompile();
}else{
    // adding an Log message if it is an good choice to install the JProofLess
    JLog::add('JProofLess is missing: ' . __FILE__ . ' @see <a target="_blank" href="http://wiki.jproof.de/projects/joomla-library-jproof-less/wiki"><b>Wiki</b></a>',
          JLog::NOTICE);

    // Adding each time the regular already rendered css into the template if the LessCompiler not found
    JFactory::getDocument()->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
}
 

More Complex Joomla Less Template Rendering

Save rendering Time while rendering less-variables-based css files and statical less files separatly and merge the output css file into 1 joomla-template.css
Use Case: Joomla Less-Dependencies Rendering Css:
  • You have an Joomla Template for your own Component which is complex or has a lot of Css/Less Code.
  • Prebuild an Static Css File Put the statical Lesscode into a couple of well structured files such as
    • template-menu.less
    • template-box.less
  • create an less file that @imports the lessfile snippets from above and name it like imports.less
@import "template-menu.less";
@import "template-box.less";
@import "something-from-joomla-media.less" 
  • set the Lessfile into the JProofLess Instance
  • set the output-css File
    • we will currently only render the less file into css, so the target css file can be put somewhere. We only grab the file content later if needed
    • set the setAddStyle Flag as false, so the output css file will not be puhsed to the Joomla JFactory::getDocument()->addStyleSheet
    • use an compression or not.
    • autoCompile compiles the settings above to an output css file if need
  • This Rendering-Strategy is more effizient then rendering each time all files becaus the "statical" less files will not be often change.
  1. first check
<?php
if(!JLoader::import('jproofless.jproofless')){

    /** Template called One-Time to remove the css **/
    $removeCss = $this->params->get('jproofless.removeCss', false);

    // Your Less Folder
    $dependingLess = JProofLess::getInstance()
                   ->setLessFile(JPATH_THEMES . '/' . $this->template . '/less/imports.less')
                   ->setCssFile(JPATH_THEMES . '/' . $this->template . '/css/imports.css')
                   ->setAddStyle(false)
                   ->setCompression('compressed')
                   ->autoCompile();

    JProofLess::getInstance()
          ->setLessFile(JPATH_THEMES . '/' . $this->template . '/less/template.less')
          ->setCssFile(JPATH_THEMES . '/' . $this->template . '/css/template.css')
             /**
         * Remove the Css file(if exists) before rendering
         **/
          ->removeCss($removeCss)
          ->setVariables(array())
          ->setExtraContent($dependingLess->getCssFileContent())
          ->setCompression('compressed')
            /**
         * The $dependingLess (Pre-build) Css file tells that we force the rendering only if needed
         **/
          ->autoCompile($dependingLess->isHasParsed());

}
else{

    // adding an Log message if it is an good choice to install the JProofLess
        JLog::add('JProofLess is missing: ' . __FILE__.' @see <a target="_blank" href="http://wiki.jproof.de/projects/joomla-library-jproof-less/wiki"><b>Wiki</b></a>', JLog::NOTICE);

    // Adding each time the regular already rendered css into the template if the LessCompiler not found
    JFactory::getDocument()->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
}

Getting direct access to LessC

$jproofLess = JProofLess::getInstance();
$realLess=$jproofLess->getLess();

// or
$jproofLess->getLess()->{executeAnMethodFromLessc}();

Example for LessC registerFunction

You can also get direct access to the selected/choosen less version to use the registerFunction()

$jproofLess = JProofLess::getInstance();

// other config stuff

// register function
$jproofLess->getLess()->registerFunction("jproofDouble", function ($arg){
            list($type, $value, $unit) = $arg;

            return array($type, $value * 2, $unit);
        });

the Less Code snippet which executes the registered function above


.joomla-less {

    color : red;
    width : jproofDouble(400px);
}


For more informations to registerFunction with JProofLess see http://leafo.net/lessphp/docs/#custom_functions

Usage in Joomla Components

Usage/Example in Joomla Custom Components

Usage/Examples in Joomla Modules

Usage/Examples in Joomla Plugins