Skip to main content

5 posts tagged with "design"

View All Tags

路 7 min read
Marvin Danig

This article was originally featured on the The Bubblin Blog. It has since been updated and migrated to the Toucaan blog because it is relevant here.

Have you ever tried using the INCH css unit, i.e., in, in your web designs? No?

Well, let's do it today. 馃弫

I propose the following bit of code:

/* Somewhere inside the <head> element of your page, add the following: */

@import url('path/to/portrait.css') only screen and (orientation: portrait);
@import url('path/to/landscape.css') only screen and (orientation: landscape);

路 6 min read
Marvin Danig

This article was originally featured on the The Bubblin Blog. It has since been updated and migrated over to the Toucaan blog because it is relevant here.

One of the capabilities of Toucaan is prioritizing and delivering the most intrinsically suitable stylesheet for a smartwatch. Toucaan uses a css router to accomplish this.

Let's look at what it takes to design a website (or web app) for the tiniest viewport on the web鈥攖he Apple Watch.

路 5 min read
Marvin Danig

This article was originally featured on the The Bubblin Blog.

In the last chapter we floated the idea of replacing the first anti-pattern that pervades nearly all of the traditional css frameworks.

Here's a quick recap:

Hardcoded width-based MQ breakpoints that separate styles between desktop, mobile, and other category of devices is an anti-pattern.

路 3 min read
Marvin Danig

CSS has had viewport units like vw, vh, vmin, and vmax for years with a great browser support. These units work fine in nearly all the scenarios except on a mobile where the height of the viewport (unit) changes as the page is scrolled up and the browser interface hides away.

Recently, a few new level-4 css units were announced as browser standards to address this issue.