Public Forums 71,145 posts

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1066592

Hello JoomlArt.

The T3 leafo less compiler appears to have a sourceMap capability already built into the code, but disabled.

CSS Inspectors will point to source LESS files instead of client-side CSS files, IF a sourcemap is generated when the CSS is compiled.

A joomla+LESS framework that simplifies styling by providing sourceMaps that point Inspectors at source LESS files, that is a powerful tool.

A joomla+LESS framework with no LESS sourceMap is pretty weak.

I noticed that your competitor Joomla Monster EF4 template includes sourceMap capability.
linky

Why would anyone ever work with a joomla+LESS framework that did not have LESS sourceMap capability for Inspector?

How about you guys and gals publish a tutorial on how to enable the sourceMap capability for T3? Are there any Joomlart templates that have sourceMap enabled?
How can I get sourceMap capability for T3 now? Right now. Maybe I must abandon T3 forever on Tuesday if this is not solved.

Other comments: it looks like leafo is dead. The developer has let it go.

Thx.

• This topic was modified 7 years, 2 months ago by  dsinor.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1066719

Hi,

In T3 framework, there is an option called ‘Development Mode’ in template manager. If you want to work with LESS , simply enable this option > compile LESS to CSS.

Then when inspecting on frontend, you can see the path of which less file you need to change.

Regards

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1066840

Hi Saguaros, thanks for the reply.

With Dev Mode on, the css Inspector points to css files in the T3 assets directory.

The file path for the css file contains the source less filename. The user can then find that less file in the local directory, and then search for the appropriate variable in the local/less file.

The more common approach to utilizing less sourcemaps causes the Inspector to point directly at the source less file AND provide a line number.

Example here.

Either way is a valuable tool, but the latter method is cleaner & easier to use.

Maybe joomlart can consider this in future updates.

Thx.

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1066841

Another example.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1066920

Check this screenshot: http://prntscr.com/gvgaul

After enabling dev mode, inspect element on frontend, you can see the path to the less file: /templates/t3_bs3_blank/less/navbar.less

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1067057

Yes – your screenshot shows exactly what I described above.

The Inspector is pointing to a css file in t3 assets directory. The filename for the css file includes the name of a less file: navbar.less.

You can then open navbar.less in your local folder and do a search for the t3-mainnav variable to edit.

I don’t have much experience with this approach with T3, but I will be trying it more.

It is obviously a different approach than what is available on other joomla/less frameworks.

[Author]

Posts