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.
Raise your hands if you love the notched iPhones and Google Pixel. 🙋♀️🙋♂️
Okay. Not many hands went up there, but I am sure, as a web developer or designer, you wouldn't you like some extra real estate for your app?
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);
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—the Apple Watch.
This article was originally featured on the The Bubblin Blog. The literature posted below preceded the creation of the Toucaan framework originally.
In the past, like more than fifteen years ago, there used to be just one web. The desktop web. We used to design websites for interaction with the mouse.
Do you remember (or did you ever hear of) the 960 grid system? It was one of the latest and the greatest following the YUI.
We often use the terms width and height to specify the dimensions of an element. These labels, width and height, are almost second nature to the trade of sharing information about a component in web design. Knowing these terms is just as essential and fundamental as it is standardized.
However, by using these colloquial terms of web design, we also make an unwitting assumption:
Scaling the digital type across mediums has always been a difficult problem. In this post, we will talk about an intrinsically scaling typographic system that we have discovered while building our css framework.
As you'll see, this new system resolves most, if not all, of the challenges faced by a web developer. Let's start by solving this meme first:
Some of you reached out to understand how I was using the git submodules tooling as a package manager for some of my projects, a few of which are private repositories on GitHub. Well, here it is:
To start, I'm assuming that you have already installed Toucaan inside of your project (MyProject) with the following command:
$ cd MyProject/assets/stylesheets/.
$ git submodule add https://github.com/Toucaan/toucaan
This article was originally featured on the The Bubblin Blog.
In a previous chapter, we started with a blank file to test the responsiveness of an empty page. That worked well, and it was easy enough to implement.
Touch a new file on the disk and open it on a browser like Chrome:
$ touch example0.html // Create a new blank file.
This article was originally featured on the The Bubblin Blog.
Welcome to the newest chapter on Rethinking CSS Frameworks with the Toucaan. In this chapter, we will implement A CSS Router that will allow us to isolate and deliver only medium-specific stylesheets that make our apps "belong" to the device.
This css router will eventually form the backbone of the Applied Principles of Intrinsic Design, therefore, we recommend the end user to read this post carefully.
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.