[Resolved] FEATURE REQUEST – CSS Organization/Quick Find

[Author]

Posts

[nedG]

I have been using TOOLSET for approximately 5 years and now I use it to develop ALL of my sites for my web development company. One of the largest sites I have done is hidden link.

I have been using LAYOUTS and LAYOUTS CSS to build and style my sites.

However, TOOLSET becomes quite cumbersome when it comes to CSS.

If I add Custom CSS to a particular View or Content Template, it
1) Becomes almost impossible to find the particular style that I am looking for at a later date and
2) These CSS styles aren't GLOBAL, so I wouild need to re-add them to other Views and Content templates if I wanted the same styles there. Then changing it becomes an issue and a headache...

So, becasue it is global and located in one central place, I began using the LAYOUTS CSS exclusively for styling. However, the problem with that is that I sometimes end up with over 3000 lines of CSS... and finding the exact line of CSS that I need when I want to edit it certainly becomes problematic.

May I suggest a few solutions?
SOLUTION #1: Add an AJAX powered CSS "text search" box at the top of the LAYOUTS CSS page that allows a user to type in any text of CSS that he is looking for and then it appears in the CSS textarea for easy editing.

OR

SOLUTION #2 : Allow the Administrator to create different "TABS" at the top and custominze the TAB names.. then he can add the particular CSS that he needs under the appropriate TAB. All of the CSS will be compiled as a single CSS sheet and applied globally. This solution could also be combined with SOLUTION #1 AJAX search.

It would make TOOLSET unbeatable in ALL aspects.

Other than that, I LOVE TOOLSET!!!

Just wish CSS was a tad bit easier for complex sites... Thanks guys!! 🙂

[Nigel]

Let me assign this to Beda who handles feature requests, and he will update you soon.

[Beda]

1. The exact intention of this feature is what you see and report. It's intended to work only where that Template is used, otherwise, you can add the Code to Toolset > Layouts CSS and JS or your theme

2. I understand this is the reason you use Layouts, which is the correct thing to do.
As you might have noticed, meanwhile you also can choose if CSS/JS shall be applied site-wide (even if no Layouts is used) or not.

3. Search and find does work in that editor with a simple cmd+f, as in any browser, so that can be used as a "workaround" to the issue you currently mention about finding specific lines of code.

4. The solution proposed is great, but it requires a proper handling of the cascade in the tabs. Will tabs to your right are "bottom" of the CSS cascade, or will we allow the cascade to be customized even?
The idea, however, is nice, for large sites - I also see the organizational issue in a normal theme's Stylesheet, for which we then add comments and other meaningful code extensions so to find the code quickly (again with simple cmd+f in a text editor or in the online editor)

I understand it would give a nice organization to the code and more power, but it is a larger project than it seems.
Especially the UX is a problematic question and how to enqueue which tab at what point.

More, you would have a better look with 2 new menus, probably, as otherwise, you will have a Tab for JS and CSS and several sub-tabs for each (and growing) chunk of Code.

Themes Style sheet work the same, and I would recommend to rather look out for a Plugin that focuses on this, as to add this to Layouts core since the main focus on Layouts is to build the front end, not the backend.
Note that interestingly almost all plugins out there handling CSS are not maintained anymore, speaking for the less and less need of developers on this kind of features.

I am not sure this is the best feature to add to Toolset, after all, for a lot of users.

If you disagree please let me know, I can file the request and see how many people would like this as well

For that, I would need as many details as possible about your ideas on how to solve the above-illustrated issues with it.

[nedG]

I appreciate and understand your reply.

Using the CSS/JS on individual Views and Content Templates is fine for small sites... but when I build a larger site with 30+ Views and associated templates, it becomes an Easter Egg hunt to find the correct CSS and edit it.

I also simply tried using the global CSS/JSS editor and using CTRL+F... but since the CSS window is small and won't contain my full text of CSS lines, it causes the inner textatrea to scroll... and the CTRL+F fails because it doesn't search the scrollable/unvisible portions of the textarea (at least my browser doesn't).

I will look around for another solution. Any simple AJAX search functionality would be useful to assist us in a quick way to find a CSS style directive... but I understand the overall goals of TOOLSET and its front-end focus.

[Beda]

My browser works well with the cmd+f if using Chrome.
If you use Safari it does not work.
But if you click inside the editor and then cmd+f, then a new search window pops up, not of the browser (not the native top bar search).
There you can search at like, and it seems to work.

This as well is available in Content Templates and other code editors.

Does this help?
I am otherwise happy to file the request.

[nedG]

Thanks for the assist. I can survive. 🙂