Recommended Tool: Stylizer 5

CS-Cart in detail Store Design & Templates
#1

Hi folks,



I just wanted to offer a recommendation for this tool. If you are a designer with a good handle on how CSS works and would like a tool that will help you pinpoint ‘gotchas’ in complex stylesheet arrangements, I can’t recommend this tool highly enough:



[url]http://www.skybound.ca/[/url]



It is not a WYSIWYG editor per se - you still have to really know how CSS works to benefit, but these have been my observations:


  1. Bullseye mode - provides instant editing access to any element on the page, highlighting which css files have relevant rules applying to the element and filtering each css file so that only the relevant css rules appear. Navigating and tweaking is extremely fast - with immediate visual feedback.


  2. Quickly change views between 8 browsers without additional installations.


  3. Despite reviews to the contrary, there is full CSS3 comands at your disposal.


  4. Seamless integration of industry hacks/techniques - very cool positioning methods, cross-browser initialization styles, clearfix, etc. This includes optional shorthand editing of CSS3 features that then get extrapolated in the CSS into webkit and moz rules. Can you input moz and webkit rules by hand still? Sure.


  5. If you bullseye an element that needs a specific rule to override, you can easily create a brand new rule in the currently visible stylesheet in a few well placed clicks.



    I have found that in terms of reduced time, reduced stress and client satisfaction this product has paid for itself over the course of my trial.



    In fact, in about 15 minutes I was able to repair many CSS problems I had run into with our current customer skin - I had spent at least two hours with firebug trying to isolate the style conflict/override that was giving me headaches.



    They advertise it as a tool to learn CSS because even with the controls visible, you always see the code (except in the case of hacks, where it isn’t terribly helpful). I don’t really agree - I consider this tool a real timesaver if you do a lot of repair work for customers and want the ultimate CSS diagnostic tool.



    I wish I could say I get money for promoting this, but I don’t… I just really was sold on the tool after using it on three client projects. I think that with the complexity of the cs-cart stylesheets it makes taming things a whole lot faster.



    The videos give a really great overview of the mechanics of it - if you have ever slaved over confusing pages with 3-5 stylesheets you will immediately see the benefit.



    Well worth the $80. Comes in Mac and Windows flavors… they are working on fixes for folks who have anti-virus software that picks up the software’s browser utilization as false positives. I think the latest v5 beta solved these problems for most people. I run BitDefender and had no problems from day one.
#2

How is bullseye mode different than firebug?

#2 would be a definite advantage.



Trouble is my problems always come from IE and it’s not usually a css change that’s required to fix it!

#3

They go through it very quickly on the videos but it really makes more sense when you try it…



When you first load up a site URL - the page opens and the stylesheets called by the page appear along the top of the right hand side as buttons in application order L-to-R.



If you click on one of these buttons, the stylesheet contents expand beneath it - the rule, the buttons for ease of use, the rules themselves.



You can quickly move between sheets. Just click the buttons.



When you engage bullseye mode, it is much like firebug, however:


  • The css files that impact the element are highlighted at the top right. No question as to whether there is a phantom style you forgot about in another file.


  • The css shown when editing a CSS file is automatically filtered based on the element you have selected as well as any parent styles it is nested in - very easy to trounce the hierarchy and fudge and nudge. No hunt and peck to find relevant styles.


  • The breadcrumb DOM indicators at the bottom of the browser window are actually toggles. You can pick whichever descriptors you wish, move to whatever stylesheet to wish, click ‘Make Rule’ and it sets up a new rule at whatever granulation level you wish and in that CSS file.



    In the end you save and can directly FTP with creds (FTP SFTP FTPS)



    It does incorporate IE fixes by the book, as far as I have had to use them - when CSS is able to.



    The trial is not crippled beyond usefulness - check it out. Modal timeout window and you only get to preview within the program in Chrome by default. Registering unlocks the other browser preview toggles and of course removes the timeout.