February 26, 2006

Cool things you can do with style master Part II

"Sucking in" HTML - automagic CSS creation

Because Style Master has all kinds of what we consider are pretty cool features that might not be immediately obvious when you use the application, I've started this series to detail some of the things in Style Master that can really bump up your productivity. In this installment, we'll learn about how you can create a style sheet for an HTML document with one or two mouse clicks.

The problem

Suppose someone hands you an HTML document and says "style this, oh CSS guru". Or, if like many developers I know (me included), you develop your structured HTML content then style it with CSS. Or, perhaps the content is being output by a blogging tool, or content management system. How do we go about the process of creating a style sheet for this HTML document?

Well, by hand we could find all of the elements, all of the classes and ids, and so on, then create a statement selecting each of these kinds of element. That could take some time.

Here is how Style Master can help

Step 1.
Choose New from HTML Document... from the File menu

Locate the HTML document you want to base your new style sheet on

Step 3.
Choose where you want to save your new style sheet

And Style Master creates and saves a new style sheet based on the contents of the HTML document. It creates one statement for each kind of HTML element (p, h1, and so on) which is in the HTML document. It also creates a statement for any class and id values in the HTML document.

So, for example, if your HTML document has an element like this

<div id="footer">©westciv.com</div>

Then style master will create this statement to select it

#footer {}

Style Master also creates a set of statements for selecting links in their various states.

So you are ready to start styling, rather than spend minutes or more creating your statements.

But wait, there's more. If your HTML has legacy styling with in the HTML, style master will convert that to styling in the CSS. So, for example, if your body has a bgcolor attribute, Style Master would convert something like this

<body bgcolor=#666> into

body {background-color: #666}

And does something similar for font, fontsize, border and other presentational HTML.

Many ways to skin a cat

There is actually more than one way to do this in Style Master. You can "suck in" CSS from the preview HTML document in the design pane. Just right click he preview document, and choose "New Statements from HTML". This does exactly the same thing as we saw above, but this way you can append new statements to an existing Style Sheet.

But I just want to add statements for some elements

You might want to only create statements for some elements, or you might have changed your HTML, and want to add new statements for these new elements. You can do this easily as well.

In the design pane, right click the element you want to create a statement for

In the contextual menu which opens, choose "New Matching Statement" - the submenu for this item displays a number of possible selectors for this element. If the element doesn't have a class or id value, then only one possible statement will be shown. But if the element contains a class or id value, you can choose the selector you want. For example, if we right clicked out footer element above

<div id="footer">©westciv.com</div>

Style Master will give you the option to create any of these statements

  • div {}
  • div#footer {}
  • #footer {}

just select the statement you want, and Style master will add it to the style sheet after the currently selected statement.

Hopefully this cool little part of Style Master will come in handy for you one day. I find myself using it quite a bit.

February 26, 2006 in Cool things you can do with Style Master | Permalink | Comments (2) | TrackBack

February 18, 2006

Cool things you can do with Style Master - Part I

Recently on a pretty much unrelated forum, someone attempted to insult me by suggesting that Style Master was just a glorified text editor, and that's exactly what the world needed one more of. Props for the attempt, dude, but in defence can I just say

  1. Text Mate, one very cool "glorified text editor" (henceforward known as GTE)
  2. Style Master does a lot more than just add CSS macros and syntax coloring
  3. The life

So, piqued into action, I thought I'd get back to more or less the original point of this blog, to write about Style Master and developing software, and post the first in hopefully a series of articles I've been meaning to write for a long time, "Cool things you can do with Style Master".

The difficult problem of styling online documents - blogs, CMS and other web apps

When I first started developing Style Master 8 years ago, give or take most people designed static web sites. Blogging more or less didn't exist, and those which did were hand coded static files by and large. The only people using Content Management Systems (CMS) were large organizations with deep pockets - they cost a fortune to purchase (and maintain). Webapps were hardly a twinkle in anyone's eye. In short, almost all content on the web was static.

Which made styling them with CSS easy.

  1. Write your CSS locally
  2. link it locally to your static HTML
  3. test it locally in a browser
  4. upload to the server via ftp.

The explosion of blogging, blogging apps and hosted blogging services, along with cool open source CMS like ModX means that this old model of development has more or less gone out the window for many developers. So how can we design for sites that never have a static page to begin with?

Well, we could

  1. create a locally saved version of the pages generated by the CMS
  2. include a <base> element with the href attribute being the url of the document online (or locally if using a local server for testing)
  3. style this
  4. upload the style sheet to an ftp server

Then there is the added complication of what you do with any links to images in your CSS. Make them absolute?

But Style Master provides a much cooler (and simpler) way of doing this.

You can use URLs for preview documents. These are then used locally as the preview document internally by Style Master, and also when you preview with local browsers. It's really simple to setup, and works a charm regardless of which blogging or CMS tool you use. We still have to work around an issue when the URL is behind some kind of login window, which is an issue of occasion.

But, Style Master is even more web savvy.

Recently, a Style Master user got in touch asking how they could work with this setup.

  1. Their content was in a CMS.
  2. Their Style Sheet was stored on an ftp server, and they wanted to be able to edit it live, while using the CMS generated content as preview pages.

Well, in Style Master 4 for windows (and very soon in 4.5 for the Mac, currently in closed beta, public beta soon) you can work on style sheets located on an ftp server, and save them straight to the server as you go. I'd probably suggest working on a copy, unless the site is only under development, because you can never tell when a little CSS change becomes a big change to how the page appears.

Once you've opened your css from the ftp server, working with it is the same as if it were located on your local hard drive. When you save, it saves to the ftp server.

So now, you can support all kinds of sophisticated development workflows using Style Master, without having to bend your workflow to Style Master's shortcoming.

More soon in the series "Cool things you can do with Style Master"

February 18, 2006 in Cool things you can do with Style Master | Permalink | Comments (1) | TrackBack