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 7 years ago.
Improve this question
A web page is usually consist of several areas, header, content, sidebar, footer, and can be more detailed, navigation, logo, slider, widgets...
I use comments to mark these areas in css file, as many others do. And used to scrolling or by search to locate the area while editing the css, it is slow and inconvenient especially when css file grows big.
Is there a css editor can recognize comments and produce an index table for quickly jump from one to another?
Netbeans has CSS selector jump support.
It indexes the CSS file you're working with and lets you choose which selector you want to jump to.
When you're editing HTML you can CTRL+click on the class or id to jump to the CSS rule that styles it (if there are several you get a list).
Here's an example:
Unfortunately, these Netbeans features will completely ignore your comments. I haven't come across a tool that does exactly what you're describing for CSS files.
If you were using a programming language you would probably use Javadoc-style comments, but these aren't typically used in CSS. You may be able to find a tool that will parse them and build an index anyway, but I'm afraid I can't suggest one.
Why not using separate css-files and then glue them in one file with ant? If you are using Eclipse - ant is already there. Or you can use ant as a command line tool.
Try it. You can perform other tasks with ant. For example you can minimize your .css or .js files as well.
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 7 years ago.
Improve this question
This is hardly a programming question but I am dealing with a 3rd party CSS file that I would like to examine but it is all one line. I tried both the Sublime 2 text editor and Eclipse CSS editor but neither would split the file contents into style blocks easily consumable by the naked eye.
What are some tools that can split a single line CSS file into multi line style blocks for readability?
Download and install the code editor Brackets. (It's free)
http://brackets.io/
Once installed, open it and go to File->Extension Manger.
Search for and install "Beautify".
Once the extension is installed, close and re-open Brackets.
Now open the minified css file in Brackets and go to Edit->Beautify or press Cmd-Shift-L(Mac) / Ctrl-Shift-L(Win) key.
The css file should now be beautified and easy to read.
I have found "HTML, CSS & JavaScript Minifier/Maxifier" as a very useful on-line tool to split minified CSS contents into style blocks. Here is the link to the site.
<http://codepen.io/depthdev/pen/HKuLs>
The same tool could be used to split minified JavaScript and HTML files. And it could be used to minify HTML, CSS and JavaScript as well.
There are many different code "beautifiers" This SO question (Sublime Text 2 Code Formatting) and subsequent answers should give you a good start.
Many people who saw that post found this answer to be helpful. Basically what Sergio Morlán said is that there is a built in option in Sublime Text that can be found in Edit->Line->Reindent.
Other answers to the question include using HTML Prettify, and Sublime CodeFormatter.
SynWrite editor (free, Windows). Go to Options/AddonsManager/Install, type "css format" and install item "CSS format".
After opening css file, call menuitem "Plugins/ CSS Format".
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 7 years ago.
Improve this question
I'm looking for automated tools to help me refactor a bunch of CSS files, for example:
Remove unnecessary selectors (e.g. not used inside the page)
detect repeatable rules inside several selectors and suggest a merge
Are there any such tools?
Thanks!
Yes Google Page Speed does this CSS investigation. Link:
http://code.google.com/speed/page-speed/docs/overview.html
not totally automated, but this one works well.
I like the fact that I can see what I'm changing. While I've done UI for 15 years, there's always little things that I notice myself repeating via using this tool. In the long run, doing things a bit manually is going to make me a better developer.
Doing one that looks for unnecessary selectors is a dangerous game. You could do it, but if you ever find yourself doing dynamic and/or ajax injected divs, you'll immediately blow up your page or app using an automated tool. If you do it, make sure it's not something that works on the fly, without some sort of very good testing environment to verify the resulting output. My current corporate clients would never allow me to use any sort of point-of-request tool based on their requirements of 100% tested and verified CSS.
This tool can do automatic css refactoring, though its value in project still need to evaluate carefully.
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 8 years ago.
Improve this question
Does anyone know of a good tool that can parse and compare two CSS stylesheets in order to find which selectors have different styles?
I cannot use a standard diff-like tool because the two CSS files have very different layout. I need a tool that can parse and understand the CSS, then look for selectors that actually have different styles in the two stylesheets.
The only tool I've found is the CSS Comparer from Alan Hart, however it gets confused when there are styles that apply to multiple selectors.
Here's what I ended up doing, in case someone else has the same problem:
I used CSSTidy to "normalize" the two stylesheets I wanted to compare. Normalization in my case meant splitting multiple selectors and sorting selectors and properties. An online version of CSSTidy is available here.
After this, I used the CSS Comparer tool from Alan Hart to find out differences between the two stylesheets.
This did the job for my specific requirements.
I tried using CSS Compare. It seems to do exactly what you are looking for. However, it seems to have some issues with multiple selectors. The nice part is that it is command-line driven, so you can set up an automated process if you have lots of CSS files, or you can chain the CSS files together to compare them to one giant resultant SASS file. This tool will show you all the differences, including differences in the values of the classes.
What would be really nice if a tool showed you which styles overrode other styles in the same stylesheet. Many old sites have lots of baggage in this way and filtering it out would be great. Of course, an automated tool might cause issues, but at least something that generates a report like Firebug does, except for every selector and for the entire collection of CSS files, would be great. Sadly CSS Compare is not such a tool, and I don't know of one:(
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 5 years ago.
Improve this question
I'm developing an application using GWT. Though GWT is a JAVA based medium, the look and feel could only be enriched via CSS. I was wondering if there is some site, where I could download CSS that could make my app look better. Also I was thinking if GWT supports templates/themes unlike Drupal/Joomla. If it does support,is there some place where I could make use of existing templates? Being a developer, I feel the application is not appealing to the user. For instance, I'm using TabLayoutPanel to imitate the menus. But, they doesn't actually look like a menubar. Also the entire application would take only a little amount of screen space. I want the application to fill the entire screen size. Is there any way to solve the above problems??
Thanks in advance.
Like TxANG mentioned, you can use the theme generator. Working demo here http://gwt-theme-generator.appspot.com/
For full screen (all available browser space), use DockLayoutPanel
Im afraid there is no template/theme like in php because there is no predefined skeleton pages (in fact, there is no usual "pages"). All styling have to be done through CSS. If you want to generate a new CSS using different colors, there is a generator page that can help you.
Answer for your second question - Use RootLayoutPanel instead of RootPanel. And then add DockLayoutPanel to it. The center panel of the DocLayoutPanel occupies all available space in the browser.
Try Vaadin :)
http://vaadin.com/home
Showcase : http://demo.vaadin.com/sampler
Hope you like the look and feel, this framework build over GWT. You can extend the native GWT classes.
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 7 years ago.
Improve this question
I need a light css editor with certain functions. Already downloaded and tried a few apps but still no luck, none of them fit my requirements. Actually, there is one, CssEdit (or TextMate), but unfortunately i'm a windows user...
Already tried:
built-in NetBeans IDE css editor (btw nice editor, the one i'm using now for css)
IntelJ IDE (very good html and css editor, but using the entire ide just for this - that's crazy)
ArduoCss (very buggy in win7 environment)
Notepad
Notepad++ (it rules, but as i said, i need something more functional for css editing)
Style Master ( if i don't find anything else, probably i'll choose this one)
Stylizer ( also might be my choice, but it's black interface kills me, also extremy noob-oriented, i even couldn't find a way to see the source code)
Some of the features i am looking for:
grouping by comments like here
snippets
autocomplete,
if i type for instance f-s, it should recognize and expand it to "font-size" property
color picker
The editor must have at least the first feature that i listed above.
Sorry for my poor english.
This is the closest thing to TextMate on the windows platform that I know of:
http://www.e-texteditor.com/
Check out TopStyle v4 - excellent Windows CSS (and HTML) editor. Great product, well worth its registration price.
Have a look at Zen Coding. It's a plug-in for several diferent editors adding helpful functionality for CSS (and HTML) coding.
http://code.google.com/p/zen-coding/
You can switch Stylizer's black interface to the white interface with CTRL + F10. Also, the Stylizer philosophy is setup differently that you don't need to see the "source code"...it's interface is just a graphical representation of the source code.