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.)
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.