Posts for : April 2019

Elegant Themes Coupon Codes

Elegant Themes Coupon Codes

While we’re no CouponLynx.org, we realized that regular visitors to Aloe Studios are web developers that use tools like the Divi Theme, CSS Ignitor and more. So we’ve created these coupon pages with exclusive promotions that you can use to save money on tools that you likely need to buy anyway for your business. About Elegant Themes Elegant Themes started ten years ago. Initially, it was run by one person in Nick’s college apartment. The company is located in San Francisco, USA. Today, the company has grown into not only a diverse but also a distributed team of WordPress enthusiasts from different parts of the world. The team at Elegant Themes do not see the facility as just a company but as a community. As…

Read More
 Coupons
Dear Print Designer Doing Web Design

Dear Print Designer Doing Web Design

Great graphic design and great typography will always be great graphic design and great typography no matter what the medium. And print design and web design are two mediums which have a great deal in common. But there are some differences in the mediums. Switching from print design to web design can reveal some limitations and constraints along with some new freedoms I’ve worked almost exclusively in the field of web design (and development) and very little in print design. Not much as someone who “does design” but very heavily as someone who “implements designs” with (X)HTML and CSS. Over the years, I’ve seen patterns emerge with print designers doing web design. Little web design details that are often overlooked that don’t usually apply to…

Read More
 Web Design
Pixel Precision with Diagnostic CSS

Pixel Precision with Diagnostic CSS

Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness. The idea is to take the page that you’re developing in HTML and CSS and overlay it on top of the design mockup you’re working from. And you can do this inside of any browser. The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer by using a few extra classes. First I take the design file and save it (save for web) as a flat PNG-32 into a directory that’s easily accessed by the css file I’m developing.  Then I open the HTML…

Read More
 CSS
Saying Goodbye to the Overflow: Hidden Clearing Hack

Saying Goodbye to the Overflow: Hidden Clearing Hack

I’ve been thinking of this for a while now, and it’s finally time to part ways with the overflow: hidden (and overflow: auto) clearing hack. Jeff Starr’s recent and excellent post – The New Clearfix Method – and the ensuing comments were enough to finally prompt me to write about it here. (And since I started writing this, Jonathan Snook has started a Twitter dialog about overflow vs. clearfix). While the  clearfix method is a tried and true hack, I’ve always disliked muddying up my HTML markup with crufty “clearfix” classes strewn about. So I ended up using overflow: hidden as much as I could. But overflow: hidden is not without its drawbacks. Although there is no extra class to apply in the HTML (win!), there may be situations when you want to have child elements positioned partially…

Read More
 CSS
EM Chart

EM Chart

Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad. Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). You can check the actual font-size in pixels using Firebug by checking “Show Computed Style” in the Options menu in the upper right corner of the CSS/Style panel while viewing in HTML mode. You’ve checked the design comp and measured exactly 9 pixels of bottom margin under the H3 until the…

Read More
 CSS