📄️ 1. General Overview
Toucaan is a stack-agnostic vanilla styling framework. Meaning, it's just plain CSS to boot, install, and design your applications with. Toucaan can be used with any frontend development framework of your choice without having to rely on a specific package manager (like npm of node) that may come with the web framework.
📄️ 2. The Architecture
Toucaan's Design Principle: "Everything that is used by an app, lives within the app!"
📄️ 3. The Design Space
Intrinsic Approach to design is very different from a responsive one.
📄️ 4. The CSS Router
Toucaan uses a simple router written in plain css to prioritize and load the correct stylesheet for a given class of device. Among other goals, Toucaan's css router splits one massive stylesheet into several smaller device-specific stylesheets according to the matched route, which in turn relies on the axis of orientation, other capabilities, and the intrinsic size of the viewport.
📄️ 5. Baseline Assets
Unlike traditional css frameworks, Toucaan does not use a normalize.css or reset css file to override browser defaults. Toucaan baselines on a very small set of pre-opted rules to ensure a starting point for cross-browser consistency.
📄️ 6. Scaling Content
More documentation w.r.t typesetting, typography, and scaling components to come here later.
📄️ 7. DIY Framework
Let us create a new folder named toucaan somewhere in your project using the following command: