I started to use Bracket as my IDE. I like it...
When I edit a CSS file there is great auto-complete, but when I edit less file there is no CSS auto-complete and it would be very useful.
Is there a way to turn CSS auto-complete for less files?
For some reason there isn't any built-in support for this yet but it can easily be hacked in and works quite well.
Open C:\Program Files (x86)\Brackets Sprint 32\www\language\languages.json (or whatever path you have it installed to) and scroll down to the CSS-key. Then just add "less" to the fileExtensions-array, save it and reload Brackets.
"css": {
"name": "CSS",
"mode": "css",
"fileExtensions": ["css", "less"],
"blockComment": ["/*", "*/"]
}
For some reason this isn't enabled by default but I haven't discovered any problems with it this far. Works fine with nested declarations which I initially thought would be a problem.
Updated answer:
Autocomplete in LESS files is now enabled automatically in Brackets Sprint 36 and newer (along with the Quick Docs command). The workaround in the answer above is no longer needed.
Original answer:
There's not a way to do it yet. Brackets has a public backlog, which
includes a user story for LESS code hinting
support.
You can upvote the user story if you sign in with a (free) Trello
account.
Brackets recently added
support for CSS-like code hinting in SCSS files, but that was much
easier to do. Because the SCSS tokenizer in
CodeMirror shares code the CSS one, the two
produce very similar streams of tokens, allowing much of Brackets'
existing CSS-analysis logic to be reused. The LESS tokenizer, on the
other hand, produces different token information that would require
larger code changes to support.
But it's certainly doable -- just a matter of prioritization. That's
where backlog upvoting and/or pull requests come in :-)
Related
I am new to Plone and I'm just learning how to change stylesheets.
I successfully changed the ploneCustom.css in /Plone/portal_skins/custom/ and saved it.
But when I tried to take a look at the site, I realised that the ploneCustom.css stylesheet isn't even loaded.
According to my research a template is broken...
But what do I do with that information?
Where do I fix it and how?
Thanks for your help in advance!
50 ways of styling Plone, four of them explained:
1.) Customize ploneCustom.css
A relict of the skin-folder-times, by now it is recommended to use browser-based resources, instead.
The reason is, when you have a lot of resources registered, it's hard to keep a correct order of the skin-layers and that can lead to unwanted overrides. Nevertheless, if you don't have a complex setup, or for quick testing, it is feasible to use skin-layers and ploneCustom.css, the exact steps are:
Go to "http://yourhost.net:8080/yourPloneSiteId/portal_skins/sunburst_styles/ploneCustom.css/manage_main".
Click on "customize".
Enter some style for testing, e.g. "body { background: red }", save.
Make sure, CSS-debug-mode is on at "http://yourhost.net:8080/yourPloneSiteId/portal_css/manage_cssForm" also make sure that ploneCustom.css is actually on the list and enabled, meaning the checkbox on the left is checked. It should be the last entry in order to override all other stylesheets.
2.) Use a site's page as style-source
Alternatively you can have a look at "adi.ttw_styles" (disclaimer: I'm the author), which provides you with a stylesheet living in the site as an ordinary item of type "Page" and is registered as a browser-based resource, so naming-conflicts are impossible. Still, the stylesheet lives in the site then, which wouldn't be suitable for cases, where you want to have a reproducable theme.
3.) Include browser-based resources in your addon (f.k.a. "Product")
Well documented.
An addon-generator, which allows you to create an addon holding a browser-based stylesheet and javascript, is "adi.devgen" (disclaiming again: I'm the author), after installation simply execute devgen addBrowserSkel your.addonname of the commandline.
4.) Diazo
The widely promoted state-of-the-art-way-of-theming. Well documented, have fun learning XLST :-)
Doxygen's html file extensions default to .html. I'm not so concerned about what the filenames are on disk--but the internal links in the pages will still have the extension. This runs counter to the recommendations of Cool URIs Don't Change.
I did discover that there is a HTML_FILE_EXTENSION, which theoretically lets you change the extension to anything you want. You can get it as far down as .--but you can't give them no extension. Leaving it blank causes it to default back to .html. :-/
It's of course easy that when you get ready to publish, you can switch the extension to .strip-me-from-docs-for-publication. Then do a search/replace of that with nothing (or / if you believe in trailing slashes in URLs, which I think I do). In the meantime you'll be able to take advantage of browsing the generated docs locally without pushing them to the server.
I'm wondering if there's any kind of smoother way to approach the problem, skipping the search/replace step?
I guess using a script to rename doxygen output files and then search and replace the links within these files is the straight forward option.
Another way could be to use mod_proxy_html and its ProxyHTMLURLMap feature.
See http://httpd.apache.org/docs/current/mod/mod_proxy_html.html
Maybe it has to be used in combination with mod_rewrite. See http://httpd.apache.org/docs/current/mod/mod_rewrite.html and http://httpd.apache.org/docs/current/rewrite
What command line tool can I use to automatically insert mtimes into urls in my css files for the purposes of breaking the cache?
/* before */
.example { background: url(example.jpg); }
/* after */
.example { background: url(example.jpg?1271298451); }
Also, I would like this tool to spit out the latest mtime as the css files mtime. (If the css file is still cached then the new urls will not get to the client.)
In searching the web, I have found very few tools that can do this. I am even considering rolling my own, but have found very little in the way of css parsers that are actively maintained. A candidate should be:
fast (I don't want to wait 30 seconds on deployment)
command line accessible (something like "cat foo.css bar.css | cssmtime > out.css")
What I've found so Far
yui compressor - initially I thought I would extend the yui compressor to do this, but found that it is implemented as a bunch of regex's and not a parser.
csstidy - last release was in 2007 and development has been suspended, but does have an option for inserting mtimes (also written in php, something I have no experience in)
cssutils - python sac implementation - seems to be actively maintained, but also seems like overkill for my needs. Also, written in python which I have experience with
csspool - ruby sac implementation - I don't know much ruby, but would like to learn
other sac implementations - There are several java implementations, and a c implementation neither of which I know much about
What's your experience?
Have you used any of these libraries? Was the experience positive? Would you recommend I go with them for my purposes?
If rolling your own is an option, you could make it a simple find/replace, no need for complex parsing here. For example if you specified which files need re-caching by adding the querystring yourself, you would do this:
.example { background: url(example.jpg?<MTIME>); }
Then your code just needs to find <MTIME> and replace. It would be about as fast as you could get and give you control over images that need re-caching and ones that don't.
Task is simple. Have a tool which will parse CSS on network website, read the links to images from there and download all of them to structured folders to local disc.
The important is that tool should ready to use, and designer should be able to use. Answer "you can write the tool itself is OK", but not acceptible for ready tool .
You can get urls from css manually with regular expressions.
To accompany Roman's answer:
/\burl\(['"]?([^'"\)]+)['"]?\)\b/g
will match as $1 almost all images (almost all meaning, that the central part ['"\)] is a bit too strict and will not match URLs with either of these characters in it).
Note that you might get external stylesheets ('#import'), too, with this regexp.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)