two-column form labels and inputs

The usual technique to maintain a two-column form (labels on the left, inputs on the right) is to put the input after the label, fix the width of both elements, and float them to the left. This works well, but I prefer to keep inputs inside of label elements when possible, just to cut down on the number of attributes. (If the input is outside of its label, the input needs an id= attribute and the label needs a matching for= attribute.)

One solution would be to put the text inside the label inside a span, but that’s still adding extra HTML. This solution works by fixing the width of the label and then absolutely-positioning the input element outside of it to the right.

label {
  position: relative;
  display: block;
  overflow: visible; /* if necessary */
  box-sizing: border-box; /* if necessary */
  width: 9em;
  padding-right: 1em;
  margin-bottom: 0.5em;
}
label select,
label input {
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
}
/* add overriding styles for radio and checkbox inputs

jsFiddle example

centering a perfectly circular frame

A StackOverflow visitor asked if it was possible to frame his webpages in a perfectly circular frame, which would resize to fill the browser window but not spill over the edges.

It was a curious problem, so I tinkered with it and found out we could, using a few modern tricks like viewport-height units (which aren’t universally supported, sadly). The result uses two divs, one inside the other:

<div class="wrapper">
  <div class="circular"><!-- content --></div>
</div>

And the following CSS:

html, body {
 height: 100%;
 padding: 0;
 margin: 0;
}
.wrapper {
 width: 100vh; /* viewport-height units */
 max-width: 100%;
 margin: 0 auto; /* for horizontal centering */
 position: relative; /* for vertical centering */
 top: 50%; /* for vertical centering */
}
.circular {
 overflow: scroll; 
 padding: 13% 13%; /* keep text within circle */
 border-radius: 50%;
 border: 10px solid #000;
 box-sizing: border-box; /* so 100% width includes border */
 height: 100vw; /* viewport-width units */
 max-height: 100vh; /* viewport-height units */
 margin-top: -50%; /* for vertical centering */
}

http://jsfiddle.net/mblase75/NzGyV/

Bootstrap 3.2.0 and jQuery UI 1.11.0 released

The latest point update adds new responsive utility classes and responsive embeds for video, along with other minor changes.

The jQuery team also released a point update to jQuery UI, adding (among other things) a selectmenu widget and deprecating support for IE7.

Other than that, not a lot to report on the project front — I’m halfway through about four different websites, but nothing’s completed yet.

Stonegate Venture Partners

Stonegate Venture Partners

Stonegate Venture Partners

A new partner site to Stonegate Advisors, this one not only uses the same design, it shares 98% of the CSS. The only big change was the conversion of the news articles from static HTML to a database-driven PHP/MySQL system, which was also copied from another recent site of mine (Vasilko Architects et al). This meant we could get the site up and running from only rough design sketches inside of a week.

Achievement unlocked: first AngularJS app

I finished my first AngularJS app today, after a couple of weeks of tinkering and re-reading the docs.

It took a little while to un-learn everything jQuery has taught me about DOM manipulation, but Angular’s two-way data binding is absolutely the way you want to go if you’re designing anything like a real web app.

Sadly, I can’t (well, shouldn’t) link to it here, since it’s for a client’s internal use only. Hopefully I’ll have something I can post about before long. (Update: now I do!)

Some good links if you’re a jQuery developer learning AngularJS for the first time: Continue reading