How to edit CSS with Concrete 5.7

Permalink
Hi

Could someone tell me the best way of editing CSS in 5.7 nearly all the themes us .less which I'm not a big fan of as I try to spot the class I need using FIrebug and then update the CSS in the normal way. With .less it seems to put the .main.less into files/cache and then you can't update it.

Not sure if I'm missing something here but could someone help me understand the new workflow please? If the core file is main.less how do I edit this so it shows on the page and is there a way of using a Firebug equivalent for .less so I can see what line to update in the CSS.

chassa2556
View Replies:
WillemAnchor replied on at Permalink Reply
WillemAnchor
Why not use the .less files ? I can see the changes perfectly with firebug. And less gives more functionality.
You can always put your theme specific css at the end of main.less

Maybe you can't see the line number, but you can still search for classnames and indexes.

Remember to turn of cache for css and less when developing, or clear your cache after a change.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I agree with WillemAnchor, once you learn more about Less, you will come to appreciate what can be done with it.

Less is a compiled preprocessor. The main.less file is compiled into main.css. The main.css file you see in the cache is not something you should edit (any changes made to it will be lost when the cache is cleared or rebuilt). If you want CSS changes to be permanent, you will want to change main.less.

To make CSS debugging easier when using Less, there is an additional resource called a source map that can be generated. It allows you to see where a style originates in a Less file. Currently concrete5 doesn't support source maps, but it is possible this feature could be added.

Here is an article about source maps:
http://robdodson.me/debug-less-with-chrome-developer-tools/...
chassa2556 replied on at Permalink Reply
chassa2556
Thanks for your help when you say C5 doesn't support source maps does this mean that they won't be recognised? This would help find my way to find the correct CSS to update which is the key issue.
MrKDilkington replied on at Permalink Reply
MrKDilkington
When the Less files are compiled to CSS, source maps are not created.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Update:

I posted a GitHub issue feature request for source maps this morning. Within hours core contributor mlocati had enabled Less source map creation and created a checkbox control to enable it during development.

Feature Request - Less source maps #2862
https://github.com/concrete5/concrete5/issues/2862...

Screenshot of the control to enable source map creation:
https://cloud.githubusercontent.com/assets/928116/9064322/4a438bee-3...

The feature should be available in the upcoming 5.7.5 release.

This is a great example of the hard work and time put in, not just by the core team, but also all the core contributors. These core contributors are vital to the success of concrete5. Remember that as an open source project - "many hands make light work". The more people who find time to contribute, even if it is something small, it helps make concrete5 that much better.