This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit ezplatform.com

eZ Community » Forums » Setup & design » ezdemo site, twitter bootstrap and...
expandshrink

ezdemo site, twitter bootstrap and .less css

ezdemo site, twitter bootstrap and .less css

Saturday 16 June 2012 10:02:44 am - 5 replies

Hi all,

I recently watched the etna release webinar which made me keen to check out the ezdemo site templates.

So with this in mind I've got myself an installation of 2012.5 with ezdemo site and have been fiddling around with it.

Firstly I have to say that I quite like it and am loving the new page layouts and responsive css. Which brings me to my point.

The ezdemo site is using the twitter bootstrap js/css it seems. I've found the "less" folder and all the .less files and I'm hoping that someone can point me to some info about how all this comes together. It's probably me being a newbie but I don't seem to be able to work out how the.less files are being compiled for use on the site.

For example I was trying to add an icon as mention in the bootstrap documentation and also in the sprites.less file in /extension/ezdemo/design/less/.

Any info to get me in the right direction on this would be greatly appreciated. As I am trying to work out how to implement all this new cool stuff for my team so we can start developing and using these awesome tools happy.gif Emoticon

Thanks in advance for any help you can give! It will be greatly appreciated! big-smile.gif Emoticon

Saturday 16 June 2012 11:07:22 am

Hi Daniel,

Actually less is not fully integrated into eZ Publish, so if you change something in a .less file, you have to recompile the less files to generate your stylesheet. To do this, you have to install a less compiler (from Github or with your favorite package manager) and then you can run the lessc compiler against the boostrap.less file (this is the central file that includes the others .less file), something like:

$ path/to/lessc extension/ezdemo/design/ezdemo/less/bootstrap.less > path/to/your/custom/stylesheets.css

There are also some GUI if you don't like the command line.

Cheers

Sunday 17 June 2012 3:43:10 am

Thanks for the reply Damien!

I was starting to think that was the case. It would be cool if it could compile the .less when ezjscore builds the the css cache.

I might have a fiddle and see what I can come up with.

Thanks again. I really appreciate it! happy.gif Emoticon

Tuesday 26 June 2012 1:40:52 pm

You may also find http://www.ezless.org/ useful.

Saturday 11 August 2012 11:29:21 am

Hi Daniel, if you've solved your problem, please mark this issue as resolved, by clicking the speech bubble next to the issue title.

Thanks!

Thursday 27 September 2012 3:55:44 pm

Hi Daniel,

 

until there is a out of the box solution, you can use http://www.ezless.org/ , and if you want a fast solution

copy all .less files directly into the folder extension/ezdemo/design/ezdemo/stylesheets

add in extension/ezdemo/design/ezdemo/templates/page_head_style.tpl

after or as a replacement of

 {if is_unset( $load_css_file_list )}
    {def $load_css_file_list = true()}
{/if}
 
{if $load_css_file_list}
  {ezcss_load( array( 'bootstrap.css',
                      'responsive.css',
                      'debug.css',
                      'websitetoolbar.css',
                      ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ),
                      ezini( 'StylesheetSettings', 'FrontendCSSFileList', 'design.ini' ) ) )}
{else}
  {ezcss_load( array( 'bootstrap.css',
                      'responsive.css',
                      'debug.css',
                      'websitetoolbar.css' ) )}
{/if}
 
<link rel="stylesheet" type="text/css" href={ezini('StylesheetSettings','ClassesCSS','design.ini')|ezroot()} />
<link rel="stylesheet" type="text/css" href={ezini('StylesheetSettings','SiteCSS','design.ini')|ezroot()} />
<link rel="stylesheet" type="text/css" href={"stylesheets/print.css"|ezdesign} media="print" />

this code:

 {"bootstrap.less"|ezless_add()}
 
{ezless()}

and play.

A good start to play is variables.less and change there colort, typo, grid size ...

Greetings,

 

ekke

Modified on Thursday 27 September 2012 4:00:06 pm by Ekkehard Dörre

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from