• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

Screenshot: code editor on left, browser on right. Browser contents: Heading 1: Water Water CSS library logo: the letters CSS with waves showing through them. Heading 2: What is it? Water¹ is a minimalist CSS stylesheet for semantic HTML that is responsive and has light and dark mode support. It’s convenient for quick experiments, teaching, and demos and could also be used as a good base stylesheet for your Small Web sites and apps. Heading 2: How do you use it in Kitten? Just include it in the list of libraries for your page: export default function () { return { markup: html`<h1>Hello, world!</h1>`, libraries: [WATER] } } Heading 2: View source View the source code for this example (link) Footnote: 1. Source: https://github.com/kognise/water.css ↩︎ Contents of editor: export default () => { return { markup: markdown` # Water  ## What is it? [Water](https://watercss.kognise.dev/)[^1] is a minimalist CSS stylesheet for semantic HTML … ## View source [View the source code for this example.](https://codeberg.org/kitten/app/src/branch/main/examples/trivia/index.page.js) [^1]: Source: https://github.com/kognise/water.css <style> pre { font-size: 1.25em; } </style> `, libraries: [WATER], syntaxHighlightingTheme: 'color-brewer' } }