CSS Grumbles: We Have All Been There

Developers and designers alike, have all felt the frustrations of styling with CSS at one time or another.

Yeah, yeah so what do you know?

I am a full-stack developer with a passion for front-end development. I enjoy the finer points to pixel perfect layouts and I care about the user experience of my products.

Ok, so you know a little something, what else you got?

I have many tools at my disposal for programming languages. From IDE’s (integrated development environments) like Visual Studio and Eclipse to editors such as Atom and Visual Studio Code.

Sure, each of these tools and many others have some kind of measures for handling CSS built in but there are few to none, real tools, dedicated to CSS. That has changed! UglyDawgTools has released a dedicated CSS tool for the Mac named, Vogue.You got my attention a little. Tell us more.

You got my attention a little. Tell us more.

Vogue works in a similar fashion to a browser inspector in that you can show or hide properties and add or delete properties. What really gives Vogue the edge here, is all of the property information readily available right in front of you instead of having to go search the web.

Sure, there is tons of CSS information scattered across the web and there are even various CSS generators that can be used. Vogue has brought a lot this together into one simple tool. With HTML element templates, CSS generators, and the ability to save templates that you customize, Vogue delivers as a nice playground or can be easily used to create serious designs.

Interesting but I need more.

After you have perfected your CSS design, Vogue gives you the ability to extract everything from just the CSS itself to the actual HTML page.

On top of just the mechanics, Vogue has almost all of the existing CSS properties from specifications 1 through 3. Mobile and desktop compatibility information, property descriptions, property examples, and property values all built in to the tool. Each property also has information links to Mozilla for deeper dives into each property for further info and in most cases even more examples.

Any bonuses here?

Yeah, since you asked, this tool makes designing far easier because it has instant hot reload of property and value changes right in a webview versus, changing code and having to refresh a page.

There you have it. A new dedicated CSS tool! Check it out in the MacOS App Store.

Also published at https://medium.com/design-bootcamp/css-grumbles-f94d7452a95