CSS Preview

[RuralWeb]

When editing css in design view it is very time consuming to view the changes. Can the text view of the css be changed to show a preview of the css on a page so that changes can be seen when applied.

[jont]

Can I add 4 votes for that myself?

[cdicken]

Cheers chaps. We had a meeting in the last week to dicuss improving CSS handling in v8 - and this input was very useful.

[RuralWeb]

Good news chris - dont forget getting the css out into DW if possible as well

[jont]

Marvellous - if the CSS can be finally nailed it will make the whole package so much more cohesive for designers and programmers alike

[bentleybloke]

I add my vote. I'm going to wear out my touchpad clicking to get to css then disable the useless preview so I can see more of the css sheet, then go back to content to see how it looks, also clicking to reactivate the preview!

[RobSollars]

Seconding (sevening?) this suggestion. Switching between the stylesheet and the page is needlessly convoluted, especially since the preview window is completely redundant. Using @import isn't a particularly neat solution either, since I tend to keep all the styles in the Actinic stylesheet and delete any pre-existing ones.

[jont]

I tend to keep all the styles in the Actinic stylesheet and delete any pre-existing ones.

Started a v8 site the other week and spent 2 hours editing and compacting the actinic.css to a manageable size and structure before starting on the site proper

[pinbrook]

Started a v8 site the other week and spent 2 hours editing and compacting the actinic.css to a manageable size and structure before starting on the site proper

Me too, i do this espec if you release sites as client versions you don'thave to worry about clients swapping layouts and thus loosing css

Switching between the stylesheet and the page is needlessly convoluted, especially since the preview window is completely redundant. Using @import isn't a particularly neat solution either, since I tend to keep all the styles in the Actinic stylesheet and delete any pre-existing ones.

I now use @import and use custom css as this is infintly better than the constantly switching to preview

[RobSollars]

Started a v8 site the other week and spent 2 hours editing and compacting the actinic.css to a manageable size and structure before starting on the site proper

Ouch. I had a look at the default stylesheet and decided it would be much easier to just scrap it rather than trying to find anything in there. I did all of the design in Dreamweaver before moving it wholesale into Actinic. I then copied the variable bits out of a default theme into the relevant pages and tweaked it until it worked. The real time consuming bit was getting all the Actinic elements into the template, but since the CSS was mostly completed, there wasn't much need to keep switching to and from it in order to preview changes.

I'm not sure it was the best way to go about it, but I found the CSS theme to be pretty unusable without replacing it wholesale. Part of the issue is undoubtedly that I have a much better understanding of my own structures than I do of other people's by virtue of having written it, so writing selectors for them is much easier. The nice thing about the theme was that it wasn't cluttered with tables so I didn't need to hunt them down like with V7. However, hunting down orange text and replacing crazy table structures with more semantically accurate structures seems to have replaced the frustrating Design | Text searches. It is a far more preferable situation, though. Actinic's default themes seem to espouse tables over unordered lists for anything other than bulleted lists, resulting in the CSS themes being ruined by completely pointless tables showing up in random layouts.

I now use @import and use custom css as this is infintly better than the constantly switching to preview

I think this is probably a better way to go about it. Give the @import a link to a file somewhere useful - like an absolute path to a file on my desktop - and then do all my testing this way. Then when it's done, I can just paste the contents of the desktop file into the Actinic stylesheet and do away with the @import. This way I can also use Dreamweaver's handy auto-complete along with Actinic for the actual content, thus saving a lot of time.

[jont]

I'm not sure it was the best way to go about it.

.. think the CSS is going to be a trial and error with each new site until I find the best way of working with it.

I was tempted to scrap the stylesheet but this was a clients site so need to future proof against the posibility of the layout being changed and then re-applied again and it falling on it's knees. I saved about 150 lines of white space from the default stylesheet.

[RobSollars]

I was tempted to scrap the stylesheet but this was a clients site so need to future proof against the posibility of the layout being changed and then re-applied again and it falling on it's knees. I saved about 150 lines of white space from the default stylesheet.

I'm not sure if you caught this, but the default stylesheets completely neglect any CSS shorthand properties. I did have an excellent online utility that automatically compacted stylesheets to use shorthand, but I can't seem to find it now.

I wouldn't recommend going through it manually, but using shorthand should shave quite a bit off the file size.

Edit: http://www.cleancss.com/ does a pretty good job of this.

[jont]

I'm not sure if you caught this, but the default stylesheets completely neglect any CSS shorthand properties.

Aye - I started out changing to shorthand but got so dejected left the rest alone... will check out the online utility once the mince pies have settled - many thanks for the link, will hopefully save a bit of time.

It is a known fact that several people worked on the CSS and it shows with varying conventions. As with anything in life trying to pick up other peoples work is difficult enough let alone when several hands have been stirring the mix