Hi, I'm Pete Lada ☕

How to create an animated and stateful toggle using only CSS (no Javascript!)

I recently posted a shot on Dribbble demoing a component I worked on for a web project we’re working on internally at Guidebook. The component is a simple binary toggle, but with a caveat: it was constructed using only CSS (and HTML of course). I had some requests to show how it was done, so I’ll detail how to create your own CSS-only toggle here.

"Binary Toggle" for a web project at Guidebook. Created using only CSS and some markup.

The Markup

Let’s start with the HTML. The toggle is, at it’s core, an input checkbox. This is how we store the state of the toggle without using Javascript – the input element stores it’s checked state internally.

The markup consists of a container label, an input element of type checkbox, and some additional elements to create the toggle background and switch.

<label class="tgl">
  <input type="checkbox" />
  <span class="tgl_body">
    <span class="tgl_switch"></span>
    <span class="tgl_track">
      <span class="tgl_bgd"></span>
      <span class="tgl_bgd tgl_bgd-negative"></span>
    </span>
  </span>
</label>

Prototyping with Framer at Guidebook

I have been using Framer for prototyping for a while now, but have recently started to make a concerted effort to use it on a daily basis to improve my interaction prototypes. I have quickly found it to be an invaluable tool — something which makes communicating with, and inspiring, developers a simple task.

I wanted to share some of my work with the community, so I put together an interaction prototype the other day based off some experimental views we are working on at Guidebook. The prototype is honestly a little too complex for an actual prototype — the idea behind them is that you should be able to quickly pump them out and iterate on your existing designs, not spend huge amounts of time refining. But in any case, its fun to work on a more complete view prototype, so here you are.

"Guide search" interaction prototype for Guidebook, created with Framer.

The prototype consists of five primary interactions: searching, redeeming a code, scanning a code, pulling to refresh, and scrolling the view. The view, to give some context, is an experimental way to display your guides within Guidebook.

Download the Framer file with the button below. The code is not super organized or well documented, but hopefully it helps someone learn a bit about what you can accomplish with the tool.

Thoughts on the iPhone 6

I recently purchased an iPhone 6 (not the 6 Plus which I initially indicated I would purchase). I understand there is a general trend within the mobile phone industry to skew phone sizes larger, and initially I was an advocate for this change. I’ve recently, however, significantly changed my views on larger phone form factors.

The iPhone 6 is a nearly perfect phone. The design is beautiful. The build quality is impeccable. The camera is amazing. The screen is incredibly sharp with a simply awe-inspiring viewing angle. The size, however, is stopping me from being completely in love.

Sketch Needs Shared Style Scaling

I use Sketch on an almost daily basis now, near completely replacing Photoshop as my primary UI editing and creation tool. Overall it’s great: it’s performant, it affords context via multiple artboards in the same project, and it allows easy style sharing via linked styles and symbols.

There is one feature that would make my workflow more efficient by quite a margin which is currently missing: scaled (shared) styles.

Test Driving the Nexus 5

Seeing as how I am a mobile-first designer, and spend a good deal of time designing for Android, I thought I should sooner than later become as intimately familiar with Android’s OS and app ecosystem as I am with iOS’. I put this task off for a while, mainly due to the fact that I wasn’t in love with most of the Android hardware. With the release of the Nexus 5, however, I felt the time was right and took the plunge. My impressions follow.

###Hardware### While I am slightly baffled why Google’s premiere Android device is developed by LG (and not Motorola Mobility), the hardware is initially quite solid. The casing material has a rubbery texture to it, feels good in your hand, doesn’t smudge easily (which is awesome), and at least gives me the impression that it would be harder to accidentally drop. The build quality appears to be quite good, which was always my main complaint coming from Apple hardware – the Android device’s just felt cheap.