Pumping Up Prototypes With Floats, Borders & More
on Monday 3rd of June 2013
Presenting sweet upgrades that’ll give you better control over elements and help you create more-detailed compositions. Boy it’s a good day to love type.
Take control of element spacing, inside and out
Now you can set width on individual elements – picking from px, % and em (yes em!) units of measure. It’s a small but important change that we think will give you a lot more design flexibility. Go with % units for more fluidity at different container widths.
You can also now set left, right, top and bottom margins and padding on elements. (If you’re new to CSS, margins control the spacing around the outside edges of the box, while padding controls the spacing around the inside edges.) That’s total dimensional control over the element, so you can get text exactly where you want it.
Set the flow with floats and clears
Use these handy dandies to change up your text flow, add shape and visual interest to your typographic composition, and create a current that glides readers down your page. (CSS Tricks has a great write up all about floats.)
Structure and emphasize text with borders
Pair margins and padding with a border and you’ve got yourself pull quotes, interface buttons, faux columns and navigation items. From the tool panel, you can set solid, dashed and dotted borders and apply color. To create more advanced borders, like inset borders or rounded edges, just pop open our CSS editor and key the values you need.
Give type added depth with text shadows, or offset it with color
Create letterpress, embossed and other text effects using actual web fonts instead of images. Plus give individual elements background color.
You focus on the look, we’ll deal with the code
Like always, while you work away on the visuals, our app will add every position, measurement and setting you apply on the canvas to your CSS and HTML. We’re nice that way!
These newbies should help you amp up the precision in your typographic prototypes and craft more realistic, robust designs. Let us know how you get on.