Toucaan / Toucaan
Labels
Projects that are alternatives of or similar to Toucaan
Introduction
Toucaan is an intrinsic, mutative, and deterministic CSS framework for the web and mobile apps using the webView.
Definitions
-
Intrinsic implies that your app design "belongs" to the device in question naturally. The term
intrinsicwas coined by Jen Simmons of Mozilla back in 2017. While intrinsic could mean different things to different people, it really points to "app-like" interfaces that belong to the user device. -
Mutative implies that you can edit and add to baseline rules (think customized
normalize.css) yourself. Directly into the framework. This concept borders close to the idea of a classless & framework-less approach to web design. There is no single heavyresetornormalizeor an external utility included in the DOM to enforce browser consistency. -
Deterministic means without any guesswork or approximations of the UI container. Put simply, a layout can "belong" to a device only when the layout knows what device it is being viewed on.
Learn more about how Toucaan uses a CSS Router to serve category-specific stylesheets (watch → mobile → tablet → desktop → television…) instead of hardcoded media-queries.
About
Design "app-like" interfaces. Toucaan is meant for building web-apps and mobile-apps using the building blocks of the web, i.e., HTML, CSS, JavaScript, and WebAssembly. 🏅
Toucaan is about:
- Optimizing UX/UI according to a device, its underlying capabilities (e.g.:
pointer: coarse /fine), physical size, and other situational constraints. - Putting accessibility above everything else.
- Routing stylesheets according to the new landscape of the web.
Toucaan uses several ultramodern CSS patterns that are grounded in mathematics. It introduces some new concepts like:
- Using
vminfor block-scoped typography and intrinsic aspect-ratios instead of the regular units likepxemorrem, - Optionally use absolute --inch unit or any other SI unit of physical measurement like centimeters or millimeters to define your UI.
And much, much more…
Read more about how Toucaan came about to be over here.
Key features
- Intrinsic in principle and design.
- Block-scoped typography using
vmin. - Deterministic UX/UI
vminorinch: pixelmappings (Optional). - Supports Apple Watch 5 and upwards, up to projectors & OLED TVs.
- Simple yet classy utilities. It's like writing style in plain English.
- Accessibile by default.
- CSS architecture that's grounded in mathematics.
- Super customizable and themable.
- Zero resetting or bulldozing vendor consistency.
- Follows native UI patterns for mobile-app interfaces.
Basic concepts
- Rethinking CSS frameworks
- A new baseline
- Web designing for the Apple Watch
- The new landscape of the web
- Mapping pixels to physical inches.
- Intrinsic CSS Router
- Blockscoped Typography and Intrinsic Aspect Ratios
- Switch Media Query Explained
- Understanding Intrinsic Web Design
Getting started
The first step of setting up Toucaan on your project is to remove all instances of the line below from the head tag of your document:
<link rel="stylesheet" href="path/to/app.css" />
Toucaan does not use a link.rel directive to import the stylesheets. Instead it uses a singular css @import call from within a <style> </style> tag, like so:
<!doctype html>
<html>
<head>
<!--Regular head stuff-->
<style>
@import url('/route/to/app.css') only screen and ( /* Some conditions here. */ );
</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>
Head over here to get started. We are looking for help on documentation and contributors for this project.
Feel free to submit a PR or write to me if you want to join the core team.
Vendor Support
Modern browsers that are inside of 2017 and now. The support can go further back, but check-out CSS Remedy to see how much debt you're willing to shoulder for backward-compatibility.
Financial support
If you like my work please consider supporting it financially.
The Superbook
I'm writing a book on the Fundamentals of Toucaan CSS that will explain the thoughts and the reasoning behind the choices made by Toucaan and how you could override them.
Sponsors
Current sponsors of Toucaan:
Why call it Toucaan?
Only because I owned the pretty domain name.
Besides, Toucan is a beautiful bird. This aggressive little arboreal ramphastidus symbolizes both beauty and aggression. What better animal to ground our framework's central metaphor on?
You see if Toucaan, then you can too! 😉
License
MIT or PPL.