what do you think about about incorporating SASS into DIEM?

[niksfirefly]

guys what do you think about about incorporating SASS into DIEM?
I am in the process of converting themeCoolWater and decorating some
plugins structure with scss so that can lead me to easy template
modifications based on few scss variables.

Anybody tried that and willing to share experience,troubles,ideas?

[Thomas Ohms]

Hi niksfirefly,

We are currently discussing CSS frameworks, but the one you suggest uses Ruby - right? Well this is no option as it would mean that many users wouldn't be able to use Diem anymore as most hosting services do not support Ruby. At least from my point of view we should stay in pretty good old PHP, JS and stuff.
Maybe others in community have different poiint of view here?!

Regards,
Thomas

2011/2/23 niksfirefly <admin....@gmail.com>

[Jörg Wegner]

Hi,

i didn't dig into it, but this may be an option:

http://code.google.com/p/phamlp/

--
Viele Grüße
Jörg

[Stéphane]

We saw the LESS php/css framework.

Regards,

Before Printing, Think about Your Environmental Responsibility!
Avant d'Imprimer, Pensez à Votre Responsabilitée Environnementale!

[Stéphane]

And someone did Diem integration (look in the forum).

Regards,

Before Printing, Think about Your Environmental Responsibility!
Avant d'Imprimer, Pensez à Votre Responsabilitée Environnementale!

[niksfirefly]

Well yes Ruby - but only on developer side (very easy to install and
maintain http://compass-style.org/),
on production server you got standard css file
I see so many pros for Diem, for example:
1.easy templates based on simple 1 or 2 variables like text and link
color
2.better cross-browser compatibility for display
3.diem core widget can propose some sass mixins easily extendable for
custom widgets (some sort of object oriented css)
many more

you can check how easy is to style f.e. new extjs and sencha touch use
it
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
go to section #DEMOS

regards

On 24 Lut, 07:53, Thomas Ohms <thomas.o...@googlemail.com> wrote:
> Hi niksfirefly,
>
> We are currently discussing CSS frameworks, but the one you suggest uses
> Ruby - right? Well this is no option as it would mean that many users
> wouldn't be able to use Diem anymore as most hosting services do not support
> Ruby. At least from my point of view we should stay in pretty good old PHP,
> JS and stuff.
> Maybe others in community have different poiint of view here?!
>
> Regards,
> Thomas
>

> 2011/2/23 niksfirefly <admin.net2...@gmail.com>

[djacquel]

I've already explained how I use less with Diem here

But things are evolving so this is a new howto.
And I always think that css preprocessor is a must have for Diem.
My choise is to run less to css transform on server side because I think that is not the browser responsibility to parse less files.
sfLESSPlugin documentation explain how to do it with node.js but it's not an option for me. I decided to use 'lessphp' parser instead.

1 - Install sfLESSPlugin
from diem project root
git clone git://github.com/everzet/sfLESSPlugin.git plugins/sfLESSPlugin
Note : If you do it with a "symfony plugin:install sfLESSPlugin" you will not get the last version, I think it's better to do it with git

2 - Install lessphp parser
from diem project root
git clone git://github.com/leafo/lessphp.git plugins/sfLESSPlugin/lib/vendor/lessphp
Note : sfLESSPlugin already includes lessphp as a submodule but it was impossible to init so I do it this way.

3 - Activate sfLESSPlugin in config/ProjectConfiguration.php
  public function setup()
  {
    parent::setup();
    $this->enablePlugins(array(
      // add plugins you want to enable here
        'sfLESSPlugin'
    ));
    $this->setWebDir(sfConfig::get('sf_root_dir').'/web');
  }

4 - Modify /plugins/sfLESSPlugin/lib/config/sfLESSConfig.class.php

To take into account that Diem stores his css in a theme folder

  public function getCssPaths()
  {
    // return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) . '/css/';
    // replaced by
    $path = sfConfig::get('app_sf_less_plugin_css_path', '/css/');
    return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) . $path;
  }

  public function getLessPaths()
  {
    // return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) . '/less/';
    // replaced by
    $path = sfConfig::get('app_sf_less_plugin_less_path', '/less/');
    return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) . $path;
  }

5 - modify /plugins/sfLESSPlugin/lib/less/sfLESS.class.php

replace the callLesscCompiler method by this one :

  public function callLesscCompiler($lessFile, $cssFile)
  {
      try
      {
        $less = new lessc( $lessFile );
        $css  = $less->parse();
        file_put_contents( $cssFile, $css );
        return $css;
      }
      catch (exception $e)
      {
        return false;
      }
  }

6 - Add configuration to apps/front/config/app.yml
Add
all:
  sf_less_plugin:
    compile:  true
    use_js:   false
    check_dates: true
    css_path: /theme/css/
    less_path: /theme/less/

7 - Run a ./symfony dm:setup && ./symfony cc

8 - Make sure your web/theme/css (or wathever is your theme folder) to be writable

And you can use less preprocessor !
Just create your web/theme/less/layout.less, for example, edit it, add variables, mixins, etc and any change made will be reflected in your web/theme/css/layout.css file

Useful URLs :
- LESS css doc
- LESS php parser
- sfLESSPlugin

Thank again to the Diem team for their job.

David

[Stéphane]

Hello,

Thank you David for this new tut :)

I have forked sfLESSPlugin within diem-project organization on github to do the job : 

https://github.com/diem-project/sfLESSPlugin

Regards,

Before Printing, Think about Your Environmental Responsibility!
Avant d'Imprimer, Pensez à Votre Responsabilitée Environnementale!

On Fri, Feb 25, 2011 at 3:31 PM, djacquel <david....@gmail.com> wrote:

sfLESSPlugin

[niksfirefly]

David nice work, i think i will borrow some code from ur great plugin
when i got more exp
with sass.

I tried LESS (also less js solution) before SASS but what convince me
to SASS (scss syntax) is
compass and many more projects (aka mixins) - simply bigger response
from developers.
CLI "compass watch" is great solution for debugging scss,and real time
compiling sass scripts into css.
No need to do anything - only one line in .bashrc (screen or tmux).

Only one problem - no good support for IDE under LInux.

I also think that DIEM need css preprocessor ( read css framework )
there is symfony for php and jquery for javascript why not sth like
that for css? to ease work and speed development

David please post your problems,ideas about less/sass for DIEM, if u
got any.


On 25 Lut, 15:31, djacquel <david.jacq...@gmail.com> wrote:
> I've already explained how I use less with Diem here<http://groups.google.com/group/diem-users/browse_thread/thread/8b20c1...>

>
> But things are evolving so this is a new howto.
> And I always think that css preprocessor is a must have for Diem.
> My choise is to run less to css transform on server side because I think
> that is not the browser responsibility to parse less files.
> sfLESSPlugin documentation explain how to do it with node.js but it's not an
> option for me. I decided to use 'lessphp' parser instead.
>

> *1 - Install sfLESSPlugin*

> from diem project root
> git clone git://github.com/everzet/sfLESSPlugin.git plugins/sfLESSPlugin

> *Note* : If you do it with a "symfony plugin:install sfLESSPlugin" you will

> not get the last version, I think it's better to do it with git
>

> *2 - Install lessphp parser*

> from diem project root
> git clone git://github.com/leafo/lessphp.git
> plugins/sfLESSPlugin/lib/vendor/lessphp

> *Note* : sfLESSPlugin already includes lessphp as a submodule but it was

> impossible to init so I do it this way.
>

> *3 - Activate sfLESSPlugin in config/ProjectConfiguration.php*

>   public function setup()
>   {
>     parent::setup();
>     $this->enablePlugins(array(
>       // add plugins you want to enable here

>         *'sfLESSPlugin'*

>     ));
>     $this->setWebDir(sfConfig::get('sf_root_dir').'/web');
>   }
>

> *4 - Modify /plugins/sfLESSPlugin/lib/config/sfLESSConfig.class.php*

>
> To take into account that Diem stores his css in a theme folder
>
>   public function getCssPaths()
>   {
>     // return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) .
> '/css/';
>     // replaced by
>     $path = sfConfig::get('app_sf_less_plugin_css_path', '/css/');
>     return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) .
> $path;
>   }
>
>   public function getLessPaths()
>   {
>     // return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) .
> '/less/';
>     // replaced by
>     $path = sfConfig::get('app_sf_less_plugin_less_path', '/less/');
>     return sfLESSUtils::getSepFixedPath(sfConfig::get('sf_web_dir')) .
> $path;
>   }
>

> *5 - modify /plugins/sfLESSPlugin/lib/less/sfLESS.class.php*

>
> replace the callLesscCompiler method by this one :
>
>   public function callLesscCompiler($lessFile, $cssFile)
>   {
>       try
>       {
>         $less = new lessc( $lessFile );
>         $css  = $less->parse();
>         file_put_contents( $cssFile, $css );
>         return $css;
>       }
>       catch (exception $e)
>       {
>         return false;
>       }
>   }
>

> *6 - Add configuration to apps/front/config/app.yml*

> Add
> all:
>   sf_less_plugin:
>     compile:  true
>     use_js:   false
>     check_dates: true
>     css_path: /theme/css/
>     less_path: /theme/less/
>

> *7 - Run a* ./symfony dm:setup && ./symfony cc
>
> *8 - Make sure your web/theme/css (or wathever is your theme folder) to be
> writable*

>
> And you can use less preprocessor !
> Just create your web/theme/less/layout.less, for example, edit it, add
> variables, mixins, etc and any change made will be reflected in your
> web/theme/css/layout.css file
>

> *Useful URLs :*
> - LESS css doc <http://leafo.net/lessphp/docs/>
> - LESS php parser <https://github.com/leafo/lessphp/>
> - sfLESSPlugin <https://github.com/everzet/sfLESSPlugin/>

[djacquel]

So, I've hacked the forked sfLESSPlugin in Diem repo.
Now integrating less in Diem is a 6 steps / 5 minutes operation.
Documentation is here :
https://github.com/diem-project/sfLESSPlugin/blob/master/For-Diem-Users.markdown

Concerning my point of view on Diem and css preprocessors :

Less or Sass, it's nearly the same, so thank to sfLESSPlugin and Leafo
less php parser we can integrate Less in Diem without reinventing the
wheel or adding additional dependency (python or ruby).

My recommended setup use server side parsing, because I think that
client side parsing introduce an unnecessary performance issue.

So here is my today contribution.
Happy styling
David

[Jörg Wegner]

This is great. Thank you for sharing this!

--
Kind regards
Jörg Wegner

[Stéphane]

Next step is to get Community to move from basic CSS to LESS =)

I'll add it to the bugtracker.

Regards,

Before Printing, Think about Your Environmental Responsibility!
Avant d'Imprimer, Pensez à Votre Responsabilitée Environnementale!

[Jörg Wegner]

On Wednesday 02 March 2011 10:56:47 Stéphane wrote:
> Next step is to get Community to move from basic CSS to LESS =)

I agree. It should be part of the next major release Diem 5.4. For developers
using Diem 5.1.3 an additional blog entry about how to install and use the
LESS plugin may be helpful. Finally the Blog gets back to life ;)

--
Viele Grüße
Jörg