DOCSEARCHbyAlgolia
Submit Docs

water.css Documentation

repository·master·Indexed 27 days ago

https://github.com/kognise/water.css

A tiny, responsive, and classless CSS framework designed to make simple websites look professional without requiring custom HTML classes. Version 2.1.1 supports installation via CDN, theme customization using CSS Custom Properties, and custom theme compilation for legacy browser support.

Tokens
405
Snippets
2
Records
4
Agent score
44%

What's inside water.css

  1. Compile a custom Water.css theme

    master

    If you need to support legacy browsers like Internet Explorer that do not support CSS Custom Properties, you must compile your own theme from the source code.

    1. Clone the repository.
    2. Run yarn to install dependencies.
    3. Modify the desired variables in src/variables-*.css.
    4. Run yarn build to compile the CSS files.
    5. Use the resulting files from the out/ directory in your project.
    yarn
yarn build

  2. Customize Water.css using CSS Variables

    master

    Water.css is built using CSS Custom Properties (variables). You can override these variables in your own <style> block or external stylesheet. Ensure your stylesheet is loaded after Water.css so your values take precedence.

    Note: Runtime theming via CSS variables is not supported in Internet Explorer.

  3. Install Water.css via CDN

    master
    Water.css is a classless CSS framework. To use it, include the desired stylesheet link in your HTML <head>. You can choose between an automatic theme that respects system preferences, or a fixed light or dark theme.

  4. Reference: Water.css Themeable Variables

    master

    The following CSS variables are available for customizing the Water.css theme:

    --background-body
--background
--background-alt
--selection
--text-main
--text-bright
--text-muted
--links
--focus
--border
--code
--animation-duration
--button-hover
--scrollbar-thumb
--scrollbar-thumb-hover
--form-placeholder
--form-text
--variable
--highlight
--select-arrow