Toucaan is a stack-agnostic vanilla styling framework for mobile apps and the web.
It is an intrinsic, mutative, and deterministic approach to styling websites and native mobile apps built using the web-stack. Toucaan has been built ground-up to diminish and ultimately remove the gap between mobile web development and native apps altogether using the powers of modern css, webassembly, and the service-worker api.
It also adds support for the new devices according to the new landscape of the web.
- Intrinsic implies that your web designs must "belong" to the device. Implement meaningful interfaces that utilize the intrinsic qualities of the medium.
The term intrinsic design was coined by Jen Simmons at Mozilla while working on flex and grid-based layouts. Here is the podcast+transcript of the original discussion if you're interested in a deep-dive.
While the term intrinsic design could mean different things to different people, it often leads to native "app-like" designs that closely fit the accessibility situation and capabilities of the medium.
-
Mutative means that the user-written styles are inserted within the framework directly. This concept borders close on the idea of low-class or almost classless architecture. Mutative also implies that there is no single heavy
resetorrebootimported to troll the browser into obedience. Toucaan uses the most current baseline method determined for different mediums instead. -
Deterministic means applying style without approximations or guesswork, such as using the "media query breakpoints" to separate mobile from desktop. The deterministic approach compels the writer to establish the type of UI container beforehand. Simply put, a style layer can "belong" to a device only when the kind of device it is on is known.
Learn more about how Toucaan uses a CSS Router to serve category-specific stylesheets (watch → mobile → tablet → desktop → television…) instead of the approximate media-queries with hardcoded widths.
The Red Goose website. (A work in progress).
The first step of setting up Toucaan on your new web project is to remove all instances of the following line from the head tag of your web app:
<link rel="stylesheet" href="path/to/app.css" />Toucaan does not use a link tag to import the stylesheet. It uses a CSS router with a prioritized @import call from within a <style> </style> block to fetch the right stylesheet for a given "device-state", like so:
<!doctype html>
<html>
<head>
<!--Regular head stuff-->
<style>
/* Toucaan CSS Router goes here: */
/* Separate the application style along */
/* the two axes of Intrinsic Design. */
/* The portrait ⇋ landscape switch. */
@import url('/toucaan/router/portrait.css') only screen and (orientation: portrait);
@import url('/toucaan/router/landscape.css') only screen and (orientation: landscape);
</style>
</head>
<body>
<!-- Add your site or application content here -->
<div id="app">Hello world! This is HTML5 Boilerplate.</div>
<script src="route/to/app.js"></script>
</body>
</html>Read about axes of intrinsic app design to visualize the router roadmap for your web app.
We are looking for help with documentation for this project. Feel free to submit a PR or write to me directly if you want to join the core team and help us expand this project further.
- Rethinking CSS frameworks
- A new baseline
- Web designing for the Apple Watch
- The new landscape of the web
- Mapping pixels to physical inches?
- Writing a Router in CSS
- Understanding Intrinsic Typography with the Magic of the VMIN units
- Switch Media Query Explained
- Understanding Intrinsic Web Design
Toucaan is all about designing "app-like" interfaces on the web. Build web apps and mobile apps using the intrinsic qualities of web-connected devices. Use HTML, CSS, JavaScript, and WebAssembly to distribute universally. 🏅
A few of its key goals are:
- Putting accessibility above everything else.
- Optimizing UX/UI according to "device-state," as in its underlying capabilities (e.g.:
pointer: coarse /fine) and other accessibility constraints such as orientation, physical size, screen type etc. - Scoping the design systems according to the new web landscape.
- Lowering technical debt by adopting Domain Driven Design instead of utility-driven.
Toucaan uses several ultramodern CSS patterns grounded in maths and the fundamentals of Intrinsic Design. It introduces some new concepts like:
- A square-fitted
vminbased font unit for block-scoped typography. Replace the old-style font units likepx,em,rem, or evenvw(or the responsive formulae that depend on these units) that do not scale properly or require safety checks in the long run. - An extensible
inch:pixelpolyfill for screen media that allows the use of the absolute --inch unit or other SI units of physical measurement like centimeters or millimeters to define your UI (this is optional and still a work in progress). - A CSS router with conditional media queries to ship and maintain only so much css necessary for a given outlet:
mobile.css,watch.css,desktop.css, and so on….
Read more about how Toucaan came about to be over here.
- Accessibile by default.
- Well-organized and clean architecture.
- Smart intrinsic typography without using a complex formula.
- Deterministic UX/UI that scales precisely the way you want.
- Support Apple Watch 5 and upwards, up to projectors & OLED TVs.
- Fewer yet classy utilities to minimize the design or technical debt.
- Lightweight Design System grounded in mathematics.
- No resetting or bulldozing vendor consistency.
- Follow native app UI patterns for mobile web and beyond.
All modern browsers that are inside of 2017 and today! The support can go further back, but check out CSS Remedy to see how much debt you are willing to undertake for backward compatibility.
If you like our work, consider sponsoring it. Or you can support me on Github or buy me a coffee.
Current sponsors of the team Toucaan are:
Feel free to join the bandwagon!
Mainly because I owned the pretty domain name and because Toucan is a beautiful bird that symbolizes both beauty and aggression.
You see if Toucaan, you-can-too! 🥳.
MIT Standard License
The Parity Public License 7.0.0.