Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Do you know a good code editor that supports the less syntax?
I tried Netbeans with the lesscss module and it sucks, no auto-complete, highlighting not accurate (and Netbeans doesn't even know CSS 3)...
It also needs to have good PHP, HTML and JS support:)
TextMate on MacOS, SublimeText on Linux/Windows.
Zeus is a programmer's editor for the Windows platform and its syntax highlighting is easily configurable. It should be possible to tweak it to support the less syntax?
I'm loving coding in Aptana IDE. It support up to date syntax like HTML5 tags (video, nav...) and CSS3 properties (border-radius, transform ...). It does not support Less naively but you can follow this(source) instruction to enable LESS too.
First step is to install LESS on Windows. If you already managed to install it head on over to Step 4!
Get Ruby for Windows from http://www.ruby-lang.org/ or -the easier- way: get the RubyInstaller for Windows from http://rubyinstaller.org/
Start Command Prompt with Ruby by clicking on Start --> Ruby 1.9xx --> Start Command Prompt with Ruby
Type in:
gem install less
If previous steps went fine you ready to use LESS. We just need to get Aptana to recognize our *.less fileformat. Let's go.
In Aptana, go to Window --> Preferences --> General --> Editors --> File Associations
Add a new file type named *.less
With the newly created *.less file type selected associate a editor below by clicking Add.. | Select "Aptana CSS Editor" (that one should be the one right at the top).
You're done!
Aptana is really up to date. So maybe they implemented the LESSCSS in the new build. Just check it out in their website.
Aptana Works with Mac and Windows and integrated with Git.
Espresso, Coda, Sublime and TextMate text all have plugins for less syntax highlighting on the mac.
CodeMirror has highlighting support for LESS (as well as JS, PHP, HTML). It's JavaScript (browser-based!), and has a way to add auto complete. Shouldn't be hard to add what you need if you've got the JS skills.
Brackets is a great open-source code editor from Adobe, that has built-in LESS support with autocomplete and syntax highlighting.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm searching for a list of Microsoft specific CSS attributes with mso- prefix.
Any link to an offical or unofficial source would be awesome.
I just had the same difficulties to find a list of MS Office prefixed style properties. I found this link, but it was not even well organized.
So I decided to write down a list in a Gist for everyone are looking for having these troubles as well. Still not found all things, but you may find this source helpful at least as a reference on the web.
MS Office prefixed Style properties
https://gist.github.com/webtobesocial/ac9d052595b406d5a5c1
Microsoft’s information on the topic can be found via the page Microsoft® Office HTML and XML Reference. It links to an .exe file, which when executed (on Windows, of course) installs C:\ofhtml9\ofhtml9.chm. The material is rather extensive and not particularly well organized. But search for “mso-” in the Search box, and you’ll find a long table titled “Style Attributes” and containing both standard and nonstandard CSS properties.
The table “shows the style attributes used by Microsoft Office 2000”, but I’m not aware of similar information for other Office versions.
This MSO - Style Reference Sheet link has a list of 372 Microsoft specific styles which includes common ones used in email e.g. style="mso-line-height-rule:exactly;" which prevents outlook from overwriting your line-height style line-height:20px;etc. All you have to do with the link is type mso into the filter bar and it should give you the list of Microsoft specific CSS attributes with mso- prefix.
Best list I've seen of the attributes is located at Litmus.
The real issue isn't finding a list of mso- attributes though, it's the details as to how they work.
For anyone following in my footsteps you will probably have issues opening the CHM file linked by others on this thread. There is a CHM reader for the Mac that works pretty well, though it's pointless as there is hardly any useful information contained within. You can find that reader on the App Store
The closest i can find is this list:
Link to list Archive of Link to list
I assume that a ctrl+f on mso, will quickly show you all you need? Then from there you can quickly gather your list.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
How do you guys do maintenance on CSS built with Less/Sass?
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?
Chrome Developer Tools now supports Sass debugging out-of-the-box.
Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:
Make sure you have Sass 3.3.x
Compile your Sass with the --sourcemap flag.
In Chrome/ium DevTools open settings and click general.
Turn on "Enable CSS source maps".
More info is available on the Chrome dev tools blog:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
Older versions:
1. First, you should compile your Sass with --debug-info turned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab
and check "Support for SASS".
If you're making a choice as to which you should be using, this article on css-tricks might be of interest to you.
I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:
Document areas of your stylesheet; ie /* General */, /* Header */ and /* Footer */
Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)
Learn to dissect the class/element/id selectors and think about how/where you would have written them.
Use CTRL+F, often the precise attribute or one near it is fairly easily found this way
SASS
There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
Edit: as of 2014-07-06, this plugin is no longer available for download. FireSass has been discontinued.
Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.
LESS / STYLUS
As this tweet #jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.
https://github.com/cloudhead/less.js/pull/1038
https://github.com/LearnBoost/stylus/pull/886
I rarely have issues with maintenance/debugging in LESS -- we always compile on the server end and reference only the CSS file in the HTML page. This makes it so there's always a one-to-one correspondence with the webpage and a file on disc.
And then when I have to edit the LESS file, I find that LESS, since its pretty much CSS+extra markup, it's quite easy to backtrace anything I'm confused about to the originating statement in CSS. If it's a mixin, it's pretty obvious (since I usually use mixins to prevent having to do all the vendor prefix stuff repeatedly), and then it's just a logical hierarchy since we use the class nesting feature, so finding:
div#awesome aside ul
is as easy as finding:
div#awesome{
aside{
ul{
padding: 0;
}
}
}
(although we try to not go more than 3 layers deep)
I have no real experience with SASS but I didn't like how far removed from CSS it was when I first looked at it a few years back (and haven't been back since...)
Some tips:
Include both the .sass and the .css files in version control. This way everyone has the most current changes.
If you organize your stylesheets into logical areas, maintenance is a breeze.
Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.
Ex:
$chartreuse: #7fff00
$olive: darken($chartreuse, 32%)
That way, you only have to maintain one color. And the rest will be recalculated.
Until recently, there were no in-browser SASS debugging tools.
There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)
In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.
I switched from less to sass, because of firesass.
With this you get the original sass line in firebug.
install firesass if you use sass
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm developing a small IDE, and I'm wondering where I can find a set of IDE icons. A few google searches didn't turn anything up that was too useful. I suppose that's probably because an 'ide icon set' wouldn't get very many purchases (compared to more generic icons).
In any case, does anyone know where I can get some such icons? Certain icons such as save, load, etc I can find myself. I'm looking for more debugging-related icons.
Icons I'm interested in include:
start debug
step over, step into, etc
run/debug
view dissassembly
etc.
I'd like some larger ones for the main toolbar, plus some mini's for to sit beside important actions in the dropdown menus.
I will very likely not be profiting from my humble IDE, but in the case that I 'go commercial', I'd like the icons' license(s) to not limit me that way. I have no problem with attribution in the about menu and in the code, however.
Finally, commercial icons are not at all off-limits if they're reasonably cheap, but I'd prefer free ones :)
Thanks!
Update: 100 rep bounty
Here is an example set of icons that would be perfect (size/style) if it included the actual icons I need. In fact I'll probably use some of those icons anyway, such as the cut, paste and save icons. I also might use the 'play' and 'record' buttons for start and create breakpoint respectively.
I'm especially looking for step/run-to-cursor icons. Preferred icon size: 22x22px.
EDIT: What about the Netbeans icons? They're the perfect size and look very nice, but I can't seem to find any information about whether or not I'm allowed to use them. I realize netbeans is opensource, but I can't figure out if I can take the icons.
EDIT: It turns out that using NetBeans icons is fine, so I'm going with that. Thanks everyone!
A set of icons with a liberal license can be found at http://www.famfamfam.com/lab/icons/silk/. They're not IDE specific, but there are lots of them, only 16x16 though.
You could use some of the icons from Eclipse = they are available under the same licence as the rest of Eclipse. I had a quick look at my local install of Eclipse and lots of the icons are in subfolders under configuration\org.eclipse.osgi\bundles so you could search through the .gifs under there.
About using Standard Microsoft Icons.
The vast majority of developers out there don't know that Visual Studio comes with an Image Library. So here goes two links that highlight it:
About using Microsoft Visual Studio 2010 Image Library.
About using Microsoft Visual Studio 2008 Image Library.
how about http://sekkyumu.deviantart.com/art/Developpers-Icons-63052312
"You are free to use these icons on personal and/or commercial projects without any attribution or credit. "
(source: deviantart.net)
EDIT
also look at http://lokheed.deviantart.com/art/gperfection-sup2-Icon-Set-18530981
AND
Fugue Icons
Preview(Big)
And here (BUT ITS $74.5) ->
http://www.awicons.com/stock-icons/xp-artistic-icons/
Step-over
Compile
Step-into
Run to cursor
The Crystal icons are pretty cool.
this is a nice icon set: http://p.yusukekamiyamane.com/
can find just about anything else here: http://www.iconfinder.com/
The Humanity icons from Ubuntu are awesome.
100% SVG, license GPLv2.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I am using ITextSharp to convert an HTML page to PDF.
However, ITextSharp prints the CSS in the STYLE declaration straight out, ignores stylesheets even when added programmatically and only listens to some inline styles (e.g. font-size and color but not background-color).
Is there something I am missing with ITextSharp, or is there a better (and free) way of doing this conversion?
Thanks in advance,
HTML / CSS support in iText / iTextSharp is very basic. It's just not the right tool to convert html to pdf.
Take a look at these solutions instead:
Create screenshot of the page with Watin-like tool
http://blog.taiki.be/index.php/2008/07/generating-screenshots-of-webpages-using-net/
http://www.codegod.de/WebAppCodeGod/Screenshot-of-Webpage-with-ASP-NET-AID398.aspx
These render html to an image. Then you can insert them in your PDF with iTextSharp.
Otherwise you could try converting HTML -> XSL-FO -> PDF, but including CSS there is a whole other thing.
Have a look at WKHTMLTOPDF. It is open source, based on webkit and free.
We wrote a small tutorial here.
Try PDF Duo .NET converter. You can apply for support if you need a special feature.
http://www.duodimension.com/html_pdf_asp.net/downloads/html_pdf_net.zip
ABCpdf provides two HTML rendering engines. One is based around the MSHTML version installed on the system. The other is based around the FireFox Gecko rendering engine.
So there's plenty of room for manouver if you want a particular set of features. It's very real world.
In terms of quality I would just say that we do get a lot of people settling on ABCpdf after trying a lot of different alternatives.
I work on the ABCpdf .NET software component so my replies may feature concepts based around ABCpdf. It's just what I know. :-)
Why not use online API? There are plenty of them available and they do the work well, which let you worry about your core work, not how to render a PDF correctly :)
You mention something "free". It depends on your usage, but most services offer free conversions to start with, ranging from 50 to 250 (and even more). Maybe it would be enough for you?
All you'd have to do then is a basic POST request to the service with your HTML data (or link), and you'll get a PDF in response.
Here are a list of API to convert HTML to PDF (not exhaustive):
PDFShift
HTML2PdfRocket
Web2PDFConvert
PDFonline
... (and many more :) )
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am working with some CSS that is poorly written to say the least. I am not a design/CSS expert, but I at least understand the C in CSS. While the builtin CSS support inside of VS-2008 is far improved over previous versions, it still doesn't quite do what I am looking for.
I was wondering if anyone know of a good program or utility that will help me to refactor and clean up my CSS like what ReSharper allows to do with C#.
Some features that would be nice to have:
Examine CSS files and determine ways to extract common styles like font-style, color, etc...
Plugin to VS-2008 would be awesome!
Examine markup files and make some suggestions on improving the current use of classes and styles.
The Dust-Me Selectors Firefox extension can scan a website and tell you what CSS is used and what is not. Removing unused CSS is one good first step in refactoring.
I have often found that when some section is removed from a website, the HTML is removed but the CSS is not.
TopStyle is popular and always the one I hear recommended. It has recommendations on styles etc.
I use Aptana but this doesn't do an refactoring just flags up errors and allows you to target certain browsers. Using this a a decent CSS book may help.
Firebug is a very good Firefox extension that allows you to examine which CSS declarations are active for which DOM element in your document tree.
Although it does not make any suggestions for improvements, it's a great help when debugging/simplifying CSS code by hand.
The Web Developer extension is also a great help.
If you're using ASP.NET 2.0, there's ReFactor! for ASP.NET
I've had good luck using Stylizer in the past. It's nicer and only costs 1/6 of TopStyle.
There's a Ruby gem called HAML that ships with an executable called css2sass. That executable translates CSS into SASS, which is a metalanguage on top of CSS that makes it much easier to refactor (by better illustrating the relationships among your selectors). Might be worth taking a look.
I used to use WestCiv's StyleMaster, which is a pretty good CSS editor / inspector / debugger app. Combine that with the afforementioned Firebug, and you can't help but stay on top of your CSS.
My attempt at playing around with Less for .NET.
I might be a little late but the ReSharper 6 early access preview (EAP) does this for you!
In a CSS file, entering "#" will auto-complete every ID from your project. Same with a period "." to list all your classes.
Best part: when you rename the selector it will rename it project-wide. It makes refactoring CSS much faster, if not pleasurable.
I like Expression Web's CSS facilities. But it doesn't do much for minimizing or unifying your CSS. You have to understand how CSS works to use it properly.
EditCSS for firefox is amazing.
This site at least helps to sort and minimize your rules: http://www.cleancss.com/
It doesn't get you to where you want to be, but it's a good first step.
Maybe CssTidy or CssOptimiser can help to clean-up and make smaller