Posts Tagged ‘css’
Keys Software Must Haves: CSSEdit by MacRabbit
Posted in Software, on April 20th, 2010 by Carlos.
There are tools that I use so frequently that I don’t even realize that I’m using them anymore. They integrate themselves into my workflow practically to the point as to which they ARE my workflow. One of these tools is CSSEdit by MacRabbit.
CSSEdit makes laying out your web templates as comfortable as it possibly can be (thanks IE, you do suck, as per the CSSEdit icon pictured above). As the app’s official site suggests, it truly is an app for CSS newbies and power users. In fact, I would take it one step further and say it turns CSS newbies into power users. CSSEdit takes a different approach from other web design packages like Coda, Espresso (also from MacRabbit) and Dreamweaver in that it strictly focuses on CSS file editing. There are a few features that really make this app shine.
Live Preview Live preview let’s you override a site’s current CSS file with one that you specify. Then, with its built-in Webkit based browser, you can see live changes to your layout as you edit your CSS file. You don’t have to hit save, you don’t have to refresh. It happens right before your eyes as you type.
X-Ray Inspector This nifty feature let’s you view CSS elements on a given website, and tells you what styles are applied to it, and even the parent CSS elements that it belongs to. I find this tool specifically useful for beginners who want to understand how the various CSS elements interact with each other to create a layout. I also find it useful to see what is broken on a layout I’m working on. Identifying the ‘broken’ element with the X-Ray Inspector saves time hunting for the pesky DIV box that isn’t cooperating.
Group Styles When you start getting familiar with CSS, you will quickly realize how large CSS files can become, and just how much of a pain in can be to find a particular style in a swamp of lines of code. CSSEdit allows you to create groups and sub-groups that help you manage your styles a lot easier.
Milestones Ever try to fix one CSS problem only then to realize you broke another? CSSEdit will let you save Milestones so that you can quickly go back to a version of your CSS file that was working.
These are only a handful of the features that make CSSEdit a powerful tool. As I mentioned at the beginning of the post, this is a tool that really defines my workflow. I have found it to be an indispensable tool. Even as I get more and more comfortable with CSS, there are still problems that CSSEdit helps me debug with ease. Sorry Windows users, CSSEdit is Mac only. It retails for $41.30 CAD, and a trial version is available. Check it out! [CSSEdit on MacRabbit]
Margins, Padding & The Box Model
Posted in Web, on March 16th, 2010 by Carlos.
Here’s a good article from spyrestudios explaining the roles margins and padding plays in CSS layout development and their effect on the box model. Recommended read for CSS beginners! [spyrestudios via Chris Spooner]
CSS: Best Practices to Improve Your Code
Posted in Web, on December 14th, 2009 by Carlos.
Webdesigner Depot has put together a list of 10 best practices you can use to help clean up your CSS code. While I don’t agree with all of them*, there is one in particular that I would like to highlight as it is very useful. They suggest including a commented section in your CSS file to list out your swatch colours that are used throughout the file. I usually have to jump around to different styles to copy/paste colour hex values (and usually copying the wrong one in the process), when you could just have them in one spot as an easy reference.
The one item I don’t agree with is that they suggest designing for Gecko-based browsers (Firefox, Camino, etc.) first, then Webkit (Safari, Chrome, etc.) and Internet Explorer. While I don’t disagree with the principal of it, I have found that designing for Webkit support first, results in less overall headaches later on. I’ve found if it works in Webkit, it works in Gecko. IE, on the other hand… well… you know. [Webdesigner Depot]
Advanced CSS Type Techniques
Posted in Web, on December 5th, 2009 by Carlos.
1stwebdesigner has compiled a list of advanced CSS typography techniques to bring more style to your websites without having to use images. I’d be interested to see how these effects behave across the various browsers. I’m looking forward to trying these out in my upcoming site designs. [via 1stwebdesigner]
2 Comments »