Design with Inheritance

By Shelly Wilson on Wednesday 30th of May 2012

In brief, our new inheritance feature lets you define the body before you specify your other styles.

To set the body, just click ‘body’ on the tool box and define its properties. Once that’s done, you’ll see the other elements inherit those properties. Then you can move on to individual elements, amending only those properties that you want to be different than the body, instead of setting every single property on every single element.

That means less repetition for you and cleaner, more semantic, code for your developer to work with.

If you’re already into CSS, then the mere mention of inheritance will set you aquiver and the behaviours will make sense. But if you’re not as comfortable with code, here’s a good summary of how inheritance works. 

Preset styles are gone

Until now, each time you created a new project in Typecast it contained default styles. For example, an H1 was 68px Arial with 81px line-height and 68px margins, and so on. Although we tried to make it easy for you to change these, you told us you’d prefer to set your styles yourself. Knowing how smart you all are, we abided. Plus, it makes controlling inheritance easier.

Now when you create a project, you’ll see your choice of elements, but they’ll remain incomplete until you either 1) set the body or 2) specify the properties you want each to have.

 
Starting with a blank slate ensures that all styles will be your styles. This means no more stowaways in your style guide or surprises in your CSS. If you don’t specifically style an element, it won’t appear in your outputs. Period.

Plus a CSS reset

Your sleek inheritance and amazing design will be worthless if a browser mucks it up. So we’ve added a CSS reset to safeguard your typography. This should help ensure that what you set is what visitors get, no matter which browser ushers them to your site.

Ours is a mini reset that we based on Eric Meyer’s CSS reset. It only resets these few properties – the ones most likely to affect your typography:

• margin: 0;
• padding: 0;
• border: 0;
• %;
• font: inherit; and
• vertical-align: baseline;

This instruction is contained in your project’s CSS downloads. All you need to do is pass it over to your front-end developer.

If you do your own development and want a broader reset, there are plenty available online. In fact, you probably already have a favourite. But if you’d like to know more about CSS resets, this article offers a good explanation of what resets are and how they came to be.

Login now to try it all out.