I am looking for a tool to help with some CSS editing, but I am not planning to use it in what seems to be the normal way.
I have a website that is getting a reskin, we already have the CSS files with the changes as it is already applied to a related website.
What I ideally want, is an editor of some kind that will help me to visualize the structure or hierarchy of the old CSS and the new CSS so I can more easily find the classes that will cross over nicely, the classes that require tweaking, and the classes that will need to be created from scratch.
I'm not worried auto completion, or being able to view the changes instantly or anything like that, what i really want is just the easy way to view and traverse it.
Does anyone know of anything that can do this? Ideally free or open source, but all suggestions welcome.
Try this tool: Compare CSS Stylesheet Tool
Related
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
I have been searching for and have not located (I fear it doesn't exist) a wire frame application that will use our current css for objects.
We have spent a lot of time perfecting our css to get the look we want, now I want to be able to use that css for new mockups without creating new objects each time we add something (as we would have to in photoshop).
In a perfect world, it would even handle the page layout so all that remains is the logic.
Has anyone heard of a tool that can do this?
I haven't used it, and I can't vouch for it, but https://alpha.easel.io/ might fit the bill. It's still in beta, but looks very interesting.
From their homepage: "Implement designs quickly using exact CSS properties rather than guessing from a mockup."
http://axure.com is a popular wireframing tool. There ways to make it use custom CSS: http://enterpriseux.tumblr.com/post/8972215862/an-axure-html-prototype-hack
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html
It's not really a coding question, but I don't know where to ask it elsewhere.
I'm looking for a tool to clean up unused css selectors.
I know this tool Dust-Me selectors, but I want it to clean it automaticly.
Can anyone help me with this?
Depending on the complexity of your site, I don't think it's a good idea to clean up CSS automatically. I've used those tools myself (DustMe-Selectors mostly) but as soon as it comes to dynamic pages (and sites), all of the tools lack the ability to really find out what is used and what not.
Consider a site using selectors like "item-selected", "item-soldout", "item-bargain", etc. If the site will apply selectors dynamically to e.g. items in a shop, tools may not find those selectors in your markup because they are not used at the moment but maybe used as soon as the shop-configuration changes.
So I'd suggest to go with one (or more) of the tools suggested here and carefully evaluate the suggestions for unused selectors, but rather not use something to clean my code automatically.
There's a windows based utility called CSS Cleaner available here. Obviously the issue is that it has to run through every pages in your project to determine which selectors aren't used. And it can't see into any CSS generated by your code.
Be careful with auto-clean up. If you are not 100% familiar with the site -- don't do it. There may be classes or IDs in your code that are there for JS and not CSS.
I'm terribly new to web development. I'm trying to make a pretty simple site with a friend. My friend has taken the time to design the layout for our site, and we have things looking how we want in a static HTML page.
What I'd like to do now is move over to a Content Management System like Drupal but keep the same design that we have all ready laid out.
Since I'm completely new to this field, I'm looking for some best-practices advice as to how to make this leap.
It's apparent to me that I could probably edit some existing Drupal Theme to make it give me the layout that I want, but is that the path I should go down?
Thanks!
Update: Also, is it more than just replacing my style.css with their style.css?
Update 2: The end goal is for people to be able to log in and create news entries, very similar to a blog that will then appear on the front page. There will be other items on the left- and right- but they don't need to be directly accessed by anyone, really. They'll stay pretty static.
The Zen theme is sort of a meta-theme that's designed to be fully standards compliant and make pretty much every aspect of theming readily customizable, with lots of informative commenting. It's the best place to start if you want to develop your own theme. Even if you find a theme that looks a lot like the one you want to create, it's probably still better to start with zen because it's extremely well laid out and instructive. That being said, I've never built a theme from scratch, but it sure looks like a lot of work.
Update
In general the best approach will likely end up being to use your designer's HTML and CSS as a reference, and to edit the Zen-based templates and CSS files to recreate that appearance. It's a bit magical.
You will end up breaking the styles used in your designer's layout into chunks that are part of various template files. The mostly-static stuff on the side columns will become what Drupal calls "blocks"; you'll likely use the top part of the page to refine the HTML for the header section of the main page template; and you'll use the central part to add any necessary tags to the content section of the main page template.
I tend to make liberal use of the Firebug extension for Firefox, or the developer tools built into Chrome. These tools let you quickly locate a given CSS element that you want to change, and edit it to see how the change will look. At first though it's probably better to just read through the whole CSS file to get a feel for how it works. Again, Zen's CSS is very easy to digest.
Pour your heart and soul into the Drupal Theming Guide for the next few days. Theming, like most things, is best done if followed by a gratuitous amount of time in the documentation.
Start with either Zen or Framework themes. They provide good starting points for working with the CSS to adapt to your design.
This helps too:
http://drupal.org/theme-guide
Whatever you do, don't take Garland theme as how a good drupal theme is done. I went down that path when I first started Drupal...