diff --git a/docs/content/recipes.md b/docs/content/recipes.md new file mode 100644 index 0000000..08d611f --- /dev/null +++ b/docs/content/recipes.md @@ -0,0 +1,173 @@ ++++ +title = "Recipes" +description = "Practical patterns built with Oat primitives." ++++ + +Small, composable patterns built from semantic HTML + Oat styles. + +## Grouped accordion (single-open) + +Use native `
` elements with the same `name` to make a group where opening one closes the others. + +{% demo() %} +```html +
+

FAQ

+ +
+ What is Oat? +

Oat is a tiny semantic CSS + WebComponents UI library.

+
+ +
+ Does this need JavaScript? +

No. The single-open behavior comes from native HTML details grouping.

+
+ +
+ Can I keep multiple open? +

Yes. Remove the shared name attribute.

+
+
+``` +{% end %} + +### Notes + +- This is progressive enhancement friendly and works without custom JS. +- Keep summary text short and descriptive for accessibility. + +## Slider patterns (without a custom component) + +Use native `` for performance and accessibility. + +### Simple range slider + +{% demo() %} +```html +
+
+ + +
+ +
+ + +
+ +
+ +
+ +
+
+
+``` +{% end %} + + +### Range (min-max), multiple slider range + +{% demo() %} +```html +
+ $20 - $80 + + + + + + +
+``` +{% end %} + +### Range (min-max), multiple thumbs single slider + +{% demo() %} +```html +
+
+ $20 + $80 +
+ +
+
+
+ + + + +
+ + +
+``` +{% end %} + +### Notes + +- Standard `` attributes like `min`, `max`, `step`, and `disabled` are fully supported. +- Vertical sliders created using a CSS `rotate()` transform. +- Multi-thumb sliders achieved by stacking two range inputs, providing a lightweight alternative to complex custom libraries. diff --git a/docs/templates/base.html b/docs/templates/base.html index 520e81e..6da32df 100644 --- a/docs/templates/base.html +++ b/docs/templates/base.html @@ -49,6 +49,7 @@
  • Customizing
  • Other tiny libs
  • Extensions
    • +
  • Recipes