CSSEdit Tutorial: The Basics

January 18th, 2008    4 Comments

CSSEdit is, as the name implies, a CSS editor for the Mac. It has come on leaps and bounds in the latest version and is now one of the best apps available on the Mac for designers. CSSEdit is created by the great delopers over at MacRabbit, who are also responsible for DeskShade.

One of the strongest features of CSSEdit is the simple, easy to navigate and beautiful interface. Even people who have no experience in styling web pages can find their way around this amazing app and create some stunning web pages. In this tutorial we’re going to be looking at the interface and how to get the most out of it.

The Main Window

The main window has three main sections, the first section (on the left) is the styles section. Here you can see all the styles you have applied to your site. The middle section is the actual editor of the app, here you do all the coding of your css file all with the ever-helpful code completion feature. The right hand section is a way of styling your page without coding anything whatsoever. You can type in or select with drop down boxes how you wish to style a certain element and the code is inserted for you. This is a great feature for anyone new to CSS or anyone who isn’t sure how to code a certain technique.

The Toolbar

The toolbar of CSSEdit has some of the best features in the app and is therefore used quite a bit, especially in more advanced use, we’ll go through each toolbar icon one-by-one and I’ll explain what each one does.

Along the left hand side of the toolbar there are 5 tools, the first is the new style feature, this allows you to add a new style to your stylesheet quite easily. The second allows you to group certain styles together into a folder to make them easier to navigate through. The third is a simple of way of adding a comment into your stylesheet without having to code it in by hand. The fourth is a more advanced way of styling elements, it allows you to style a certain element wherever it appears in your stylesheet. With these four features there is no coding needed, CSSEdit does it all for you. The fifth feature is a simple search function, useful if you have a very large stylesheet.

The right hand side of the toolbar contains some of the more advanced features of CSSEdit. The first allows you to insert a link to the stylesheet into a HTML file, this assigns the HTML file the CSS file to style it. The second is a way of previewing your web page without having to open an external web browser. The third is called Milestones, it is a way of saving your current progress in the stylesheet, allowing you to revert if a mistake is made. The fourth is a way of validating your CSS and the final icon allows you to change which three columns of the main interface you can see, meaning that if you can’t code you can just edit your CSS with no coding needed.

If you don’t have this app, as a web developer I seriously suggest reading more at MacRabbit. It really is the ultimate in stylesheet creation.

GenoPal 3.0 for Mac Review

September 4th, 2007    1 Comment

You start by selecting a colour. This can be done either through a colour palette, or through an eyedropper tool which allows you to sample a colour from anywhere on the screen – really useful. The software then generates a whole selection of colours based on the one you chose. Two sliders allow you to alter the colour diversity and lightness diversity, so you can select complementary or contrasting colour comparisons.

From a designer’s point of view, another useful feature is that it is remarkably simple to copy the Hex code of any given colour on the chart for easy use in Photoshop or your CSS file. You can save a load colour palettes for different projects.

There is also a Pro version offering additional features such as the ability to drop and drop colours to create small swatches on screen and the ability to automatically import colours from a picture or a screenshot. This hasn’t yet been released for Mac so we couldn’t review it at this time, but we’ll let you know when it becomes available.

Take a look for yourself and decide whether it’s a piece of software which would enhance your design workflow. There’s also an online version so you can get a feel for how the software works.

Cross Browser Testing (Mac)

July 26th, 2007    5 Comments

Many web professionals use Apple’s OSX for design and despite what you may think, it’s not difficult to test your website in the big three browsers – Internet Explorer, Firefox and Safari. This article talks you through how to easily test your site and gain access to these browsers on a Mac.

Read More

Coda

May 3rd, 2007    No Comments

Coda is the latest application from Panic, the creater of other great apps such as Transmit – by far the most popular FTP program on the Mac. It’s aim is to combine all the tools you use regularly as a designer into one easy to use application. It combines a version of Transmit with code editing features, preview capabilities and keeps track of everything you change to make publishing your site a breeze.

Coda is the latest application from Panic, the creater of other great apps such as Transmit – by far the most popular FTP program on the Mac. It’s aim is to combine all the tools you use regularly as a designer into one easy to use application. It combines a version of Transmit with code editing features, preview capabilities and keeps track of everything you change to make publishing your site a breeze.

I’ve been using it most of today, and have found it to be incredibly useful. I’ve moved most of my projects across into Coda, and will hopefully get to grips with it more and more over the coming weeks. The only downside is that it doesn’t have any blog editing capabilities, so I’m still having to write this post in the good old WordPress control panel. Add that to the mix, and it’d be a program I could do all my web editing in. Period.

Have a look and try it for yourself – it’s really great.