SOLVED Using CodeKit with Gantry 4 LESS files
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi:
I am getting errors while trying to save/compile after modifying .less files of the gantry template.
Gor example, I followed the tutorial on gantry-framework.org to add the popup login module. The last element in there is to add the following line in less/template.less:
#rt-popuplogin {display: none;}
When I save the template.less file, CodeKit errors with:
NameError: .border-radius is undefined in /Volumes/Clients/htdocs/ergonomiq/domains/clients/sosd25/templates/gantry/less/joomla-core.less:252:3 251 list-style: none; 252 .border-radius(4px); 253 a {
It is complaining that the .border-radius mixin that is called in the file joomla-core.less isn't defined.
.border-radius is defined in libraries/gantry/assets/jui/less/mixins.less.
That file is referenced in two files:
templates/gantry/less/bootstrap.less
and
templates/gantry/less/joomla/2.5/bootstrap.less
and in both places, it is referenced with the import statement:@import "jui/less/mixins.less";
The problem is that LESS imports code using relative paths and
libraries/gantry/assets/jui/less/mixins.less
is not in the relative path hierarchy of
templates/gantry/less/bootstrap.less or templates/gantry/less/joomla/2.5/bootstrap.less
So, now that I've laid out the landscape, my question.
How does Gantry handle this situation, and how do I solve this so I can use a preprocessor such as CodeKit? - Last Edit: 11 years 10 months ago by Ali Samii.
- Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Sorry but I cant see a real benefit from using Codekit because Gantry is using it's own php compiler with the best less integration out there.
It would only be useful if Gantry wouldn't compile it itself.
For example it the gantry compiler cant find a less file in the template it looks into the gantry core.
(wich leads to issue you are describing).
As far as I know Kevin and Josh don't use a compiler app.
You could integrate a css file via gantry
gantry->addStyles(array('blah1.css',''blah2.css');
And complie less files via your app to blah1.css, 'blah2.css.
But I can't see why one should do that.
You cant expect us to give any support for Codekit, Lessapp etc ...
Personally I use Sublime/Espresso to get a little help with the syntax ... but that's really all ...
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Ali - I appreciate you might be having difficulties that you consider urgent but please don't PM unless asked to do so.
As Henning has already stated - I just don't see why your trying to use a third-party application to do you less coding when any simple text editor will do the job. Gantry has the less compiler built into it and compiles the less files as and when it detects changes in the less files.
Also, as Codekit is a third-party application I'm confused why you would expect RT to provide support on it (when I think you are aware that we don't provide support for third-party applications).
So, in conclusion just use a plain text editor to write your less - no need for anything more sophisticated than that.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Mark,
I'm not asking for CodeKit support. It is a RT support issue.
The advantage of using something like CodeKit is the ability to make changes and have the CSS injected without having to reload the page and thus invoke the compiler.
Furthermore, my question is specifically related to adjusting the Gantry code so that the paths to the less files that are outside the normal path can be used.
As regards using the built-in compiler of Gantry, I followed the tutorial for creating a pop-up login feature in gantry. www.gantry-framework.org/documentation/j...eating-a-popup-login
However, even with the compiler feature turned on in the gantry backend, codekit compiling turned off, and adding "#rt-popuplogin {display: none;}" into template.less, nothing happened.
Having the backend template processes compile the CSS from the less is good if someone is relying solely on the template. But the template and framework should have an option to specifically allow outside compiling, or at the very least, documentation should be provided that let's people know how the template/framework is structured in a way that allows them to make the necessary modifications to allow 3rd party utilities such as CodeKit.
Finally, there are a lot of other advantages to using a 3rd party preprocessor tool such as CodeKit. For example, if I want to make a modification to the positioning of something, I can use the CSS injection capabilities of CodeKit to speed up the development process enormously. I have a dial-monitor setup, and I can edit the Less, invoke the compiler in CodeKit by simply saving, and see the result in the browser instantly.
Using the built-in functionality of Gantry, the process starts the same way, edit and save the Less, then I have to switch over to the front-end in my browser and manually reload the page (or have an auto-loader that refreshes the page every X seconds/minutes, etc). So, a 2 second change takes 10 or 15 seconds to implement.
If you are making 4 or 5 changes only, that's not a big deal, but if you are implementing hundreds of modifications to the layout, you are talking about a lot of time. 500 changes taking 10 seconds longer for each change is about 84 minutes of time wasted switching back and forth.
And that is just one of the advantages of using something like CodeKit - Last Edit: 11 years 11 months ago by Ali Samii.
- Thank you.
Ali Samii
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Ok, so let's drop codekit altogether since your not asking for support on that. Let's look at why your change to one of our LESS files didn't get reflected compiled CSS after using a standard plain text editor.
Do you want to write LESS rather than CSS? Either way here is how to create a custom LESS or custom CSS file. I'm guessing you'd rather use LESS...
As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template. Unless you specifically want to use LESS then you should USE ITEM 1 below.
-
1. For older templates (pre FRACTURE
-
2. For those of you that want to use the power of
Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.
For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738 .
Put your statement in one of those, then go into template manager > advanced > less compiler and PRESS "CLEAR CACHE" to clear the less cache (so we know we're on a sound footing to start with). Then let me know the URL to your site and I will look to see if your statements are reflected in the compiled CSS.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
We always advise not to change the files in the template and to use custom files (css or less) to avoid upgrade issues. So just link your via codekit generated css-file into the template.
(in fact that is what the codekit-app was made for ... offline compilation)
The file you are talking about and wich cause you issues are loaded via the global.less file.
Just don't do that and use your own link.
The issue with relative paths via codekit is that codekit doesnt have the logic that the gantry less compiler has (the option to override bootstrap less files for example).
That is really not a RT support issue.
We don't claim to have an option to work with Codekit.
There is a workaround as I suggested above.
Wich just doesn't make real sense to be used together with the less compiler in gantry.
If you want to use codekit ... link the resulting css file just as an regular css file. Its just as simple as that. But you will loose functionality like template overrides/per-menu-item-settings, calling variables from the template-settings etc. etc. etc.
In short: we don't recommend that but feel free to do whatever you want.
There are many ways to develop a site.
What makes sense for one maybe be wrong for others.
You can always post your suggestions to our request forum.
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Mark, again, I am asking for support on how the Gantry Framework is set up so that I can then modify it so I can use CodeKit because, as you just described in your post, the process of making changes and having the Framework compile the CSS from the less is time consuming. It is fine for a few small changes, but if you are truly customising something, with hundreds or even thousands of changes to the CSS, you will really benefit from the ability to use something like CodeKit to process the LESS.
Furthermore, it would allow the developer the ability to keep the number of http requests low, rather than creating one or more additional *-custom.css files that each add to the number of http requests and slow down the page. - Thank you.
Ali Samii
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Well, I don't think I can add anymore to Hennings' excellent answer. We don't claim to be able to use codekit, we don't support it, and we don't recommend it.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.066 seconds