Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

New Arrivals: CSS Columns, Quick Inserts & Reordering

on Wednesday 16th of October 2013

We’re rolling out some great stuff this autumn, and first out of the gate are these three new features to improve layout without hunting or hacking.

A while back we introduced floats, clears, borders, and shadows, to give you more control over your compositions and help you create more realistic designs. Today the trend continues with another boost to the Typecast toolbox.

Hello glorious gutters!

Our new CSS columns give you more options for achieving sound, readable measure in your designs, particularly for desktop states. You’re literally a click away from reflowed text, without the need to set floats and clears.

You’ve got total control over column spread and rules. Here’s what you can do:

  • Column count – the maximum number of columns you want: 1, 2, 4?
  • Column gap – the space between each column. (aka the gutter)
  • Column width – the minimum column width you want applied. If you set a width but not a column count, the browser will create as many columns of that specified width that it can fit in the available space. (See the video below for a demo.)
  • Rule width – how wide you want the vertical border between your columns.
  • Rule style – solid, dashed, perforated?
  • Rule color – you get the idea.

Semi-responsive column cleverness


CSS columns don’t just divide your content into pretty chunks. They also give you a peek at responsiveness without having to write media queries. Play our video (above) to see text glide between columns as the element width expands and contracts. Also notice how the number of columns changes depending on the space available.

Magic, responsive-like behaviour without a lick of code from you!

Browser support for columns

Even though the multi-column property hit the web over 10 years go, columns aren’t yet supported by all browsers. (It’s a CSS3 property and CSS3 is still not a W3C standard.)
 
The good news is that columns degrade gracefully, so worst case scenario – viewers will see your text set at full width. If you’re keen for your columned layout to appear in all browsers, you or your favorite dev will need to design fallbacks using a javascript plugin or floats. But in the Typecast editor, we hope these CSS columns will simplify your initial prototyping and help you express and share your visual intent more quickly.

Quick inserts

We’ve also expanded our insert menu. There are now 10 more styled paragraph and heading options. Flesh out your designs with preset columns, prefloated headings, bordered headings, and more to quickly build up a selection of content and element types.

We’ve also included 47 of the most commonly used unicode punctuation, arrow and shape characters. See it, then click it. Done. No need to switch windows and search online for the unicode values.

Reorder elements easily

Quickly reorganize elements within a div and restructure your design’s flow with our drag and drop bars. They eliminate the need to cut and paste content and respecify properties, which is good. It also helps with experimentation by letting you treat elements like objects that can be shuffled about till you find the right balance. Simple but effective.

Try these newbies out and tell us what you think. We’d love your feedback.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus