### Install Water.css via NPM Source: https://github.com/kognise/water.css/blob/master/_autodocs/01-overview.md Install Water.css using NPM and link to the stylesheet from your node_modules directory in your HTML. ```bash npm install water.css ``` ```html ``` -------------------------------- ### Install Water.css via NPM Source: https://github.com/kognise/water.css/blob/master/_autodocs/00-index.md Install Water.css using NPM for projects that have a build step. This allows for better dependency management. ```bash npm install water.css ``` -------------------------------- ### Details and Summary Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Provides examples of using the `
` and `` elements to create collapsible content sections for FAQs or other information. ```html
How do I reset my password?

Click the "Forgot Password" link on the login page and follow the instructions sent to your email.

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers.

Is there a free trial?

Yes, we offer a 14-day free trial with full access to all features.

``` -------------------------------- ### Link Local Water.css Installation Source: https://github.com/kognise/water.css/blob/master/_autodocs/14-quick-reference.md Link the Water.css stylesheet from your local node_modules directory after installing via npm. ```html ``` -------------------------------- ### Complete HTML Page Example with Water.css Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md This snippet shows a full HTML document structure utilizing Water.css. It includes examples of various semantic elements used for code, variables, keyboard shortcuts, and program output, demonstrating their styled appearance. ```html

Code Example

Variables

In mathematics, we often use x and y for unknowns.

Code Snippet

To run this command, type npm start in your terminal.

Full Example


// Calculate the square of a number
function square(x) {
  return x * x;
}

console.log(square(5));  // Output: 25

Keyboard Shortcut

Save your file with Ctrl + S.

Program Output

After compilation, you'll see: Build successful

``` -------------------------------- ### Color Input Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Demonstrates how to use the color input element with a predefined value. ```html ``` -------------------------------- ### Usage Example for Select Dropdowns Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Demonstrates the HTML structure for single and multi-select dropdowns that can be styled by the provided CSS. ```html ``` -------------------------------- ### HTML Usage Example for samp Element Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Demonstrates how to use the samp element to display sample program output within a paragraph. ```html

When you run the command, you'll see output like: $ processing complete in 1.23s

``` -------------------------------- ### Dialog Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Demonstrates how to open, display content within, and handle the close event of a modal dialog. ```html
Confirm Action

Are you sure you want to proceed?

 ``` -------------------------------- ### Footer Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Provides an example of a typical HTML structure including a header, main content, and a footer with copyright and links. ```html

My Website

Welcome

Welcome to my website.

``` -------------------------------- ### Yarn Dev Command Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md Use this command to start the development server with file watching. ```bash yarn dev ``` -------------------------------- ### Usage Example for Linked Code Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Shows how to embed code elements within anchor tags for API documentation or guides. The styling ensures the code text matches the link color. ```html

Read the API documentation for details.

Check the installation guide.

``` -------------------------------- ### Button Usage Example - HTML Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Demonstrates the usage of various button types, including standard, submit, reset, and disabled buttons. ```html ``` -------------------------------- ### Image and Media Usage Examples Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Demonstrates the HTML structure for embedding responsive images and a video player. Ensure `src` and `alt` attributes are provided for images, and `controls` for videos. ```html A descriptive caption System architecture diagram ``` -------------------------------- ### Usage Example for Highlighted Text Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Shows how to use the mark tag to emphasize a section of text with a background highlight. ```html

This text contains a highlighted section for emphasis.

``` -------------------------------- ### Placeholder Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Illustrates the use of placeholder text in both input and textarea elements. ```html ``` -------------------------------- ### Usage Example for Keyboard Input Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Demonstrates how to use the kbd HTML element to represent keyboard input in various contexts. This helps users identify key combinations or single key presses. ```html

Press Ctrl + C to copy.

To open the developer console, press F12.

Use Cmd + Z to undo on macOS.

The keyboard shortcut is: Alt + Shift + S

``` -------------------------------- ### Comprehensive Form Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md Demonstrates various form elements including text inputs, textareas, radio buttons, checkboxes, and select dropdowns, all styled with Water.css. ```html Contact Form

Contact Us

Personal Information
Message
Preferences
``` -------------------------------- ### Basic Table Structure Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Example of a standard HTML table with a header and body, suitable for displaying data. ```html
Name Email Status
Alice Johnson alice@example.com Active
Bob Smith bob@example.com Inactive
``` -------------------------------- ### Typography Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Demonstrates the usage of various heading elements and paragraphs. ```html

Main Page Title

Introduction paragraph.

Section Heading

Section content.

Subsection

More detailed content.

``` -------------------------------- ### Label and Input Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Shows a common pattern of using a label associated with a text input field. ```html ``` -------------------------------- ### Text Input Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Demonstrates the usage of various text input types with placeholders. These elements will be styled by the provided CSS selectors. ```html ``` -------------------------------- ### Implement Skip-to-Content Link Source: https://github.com/kognise/water.css/blob/master/_autodocs/08-links-styling.md Add a skip-to-content link for improved keyboard navigation. This example includes basic CSS for positioning and focus states. ```html
``` -------------------------------- ### Full Page Layout Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/09-layout-structure.md A complete HTML document demonstrating a typical page structure with header, navigation, main content, sidebar, and footer, styled by water.css. ```html My Page

Page Title

Main Content

This is the main content area, centered and constrained to 800px width.

Section

Content in a section.

Footer content with copyright and links.

``` -------------------------------- ### HTML Link Hover Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/08-links-styling.md An example of a hyperlink that will gain an underline when hovered over, due to the CSS defined for the `:hover` state. ```html Learn more about us ``` -------------------------------- ### Usage Example for Inline Code/Strong in Links Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Demonstrates using code and strong elements within anchor tags for consistent link styling. ```html

See the documentation for details.

Visit our about page.

``` -------------------------------- ### Semantic HTML Styling Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/09-layout-structure.md Demonstrates the correct usage of semantic HTML elements for styling with Water.css, avoiding unnecessary class-based markup. ```html

Page Title

Introduction paragraph.

Page Title
Introduction paragraph.
Click me
``` -------------------------------- ### Combine Water.css with Prism.js for Syntax Highlighting Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md This example demonstrates how to include Water.css and Prism.js in an HTML document to achieve syntax highlighting for code blocks. Ensure Water.css is loaded before Prism.js. ```html Code Examples

Code Examples

JavaScript


function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

Python


def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))

HTML




  
    Example
  
  
    
Hello
``` -------------------------------- ### Strong and Bold Text Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Shows how to use strong and b tags for emphasized text, and how they are styled. ```html

This is very important information.

This is bold text.

Bold Heading

``` -------------------------------- ### Display Address Information Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Example of how to structure contact information within the address HTML element. ```html
Acme Corporation
123 Main Street
Anytown, ST 12345
contact@acme.example
``` -------------------------------- ### CI/CD Build Integration Commands Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md Standard commands for installing dependencies, running validation, and building for distribution in a CI/CD environment. The build output is located in the `out/` directory. ```bash # Install dependencies yarn install # Run validation yarn validate # Build for distribution yarn build # Output is in out/ directory ``` -------------------------------- ### Fieldset and Legend Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Provides examples of how to structure fieldsets with legends to group form elements logically, including text inputs, email inputs, and checkboxes. ```html
Personal Information
Preferences
``` -------------------------------- ### HTML Link Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/08-links-styling.md Demonstrates how to use anchor tags in HTML to create hyperlinks. Water.css will automatically apply styling to these elements. ```html

Visit our homepage for more information.

Read the documentation and guide.

``` -------------------------------- ### Usage Example for Checkboxes and Radio Buttons Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Shows how to structure HTML for checkboxes and radio buttons within label elements for accessibility and styling. ```html ``` -------------------------------- ### Blockquote and Quote Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Illustrates the use of blockquote with a footer and the q element for inline quotes. ```html

The early bird gets the worm, but the second mouse gets the cheese.

— Steven Wright

As they say, innovation distinguishes between a leader and a follower.

``` -------------------------------- ### HTML Usage Example for time Element Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Shows how to use the time element for dates and specific times, styled for accessibility. ```html

This article was published .

Meeting scheduled for

``` -------------------------------- ### Usage Example for Special Link Prefixes Source: https://github.com/kognise/water.css/blob/master/_autodocs/03-typography-elements.md Demonstrates the use of mailto, tel, and sms links with their respective emoji prefixes. ```html

Email: contact@example.com

Call us: +1-555-0100

Text: +1-555-0100

``` -------------------------------- ### Textarea Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/04-form-elements.md Shows different ways to use textarea elements, including a basic textarea, one with specified rows and columns, and a disabled textarea. ```html ``` -------------------------------- ### Horizontal Rule Usage Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md Demonstrates the use of the `
` tag for visual separation between content sections. ```html

Section 1

Content for section 1.

Section 2

Content for section 2.

``` -------------------------------- ### Static Site with Navigation using Water.css Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md An example of a multi-page static site structure styled with Water.css. It includes header, navigation, main content with articles, and footer elements. ```html My Blog

My Blog

Thoughts on code and design

Latest Post

Posted on

Article content goes here...

Earlier Post

Posted on

Article content goes here...

``` -------------------------------- ### Install Water.css via CDN Source: https://github.com/kognise/water.css/blob/master/_autodocs/01-overview.md Include the Water.css stylesheet in your HTML using a CDN link. Choose between automatic theme switching, light theme only, or dark theme only. ```html ``` ```html ``` ```html ``` -------------------------------- ### Mobile-Optimized Landing Page with Water.css Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md A basic landing page styled with Water.css, including mobile-first adjustments via CSS media queries. This example requires no build process. ```html Awesome Product

Awesome Product

The easiest way to solve your problems.

Features

Pricing

Plan Price Action
Starter $9/month
Pro $29/month

Get Started

© 2024 Awesome Product. All rights reserved.

``` -------------------------------- ### Complete HTML Table Example Source: https://github.com/kognise/water.css/blob/master/_autodocs/07-tables-lists-content.md A full HTML table structure including caption, header, body with data rows, and footer. Includes a button in the action column. ```html

Product Inventory

Current stock levels by warehouse
SKU Product Warehouse A Warehouse B Action
001 Widget 42 18
002 Gadget 27 33
003 Doohickey 15 9
Total: 84 60
``` -------------------------------- ### Complete HTML Invoice Example for Print Source: https://github.com/kognise/water.css/blob/master/_autodocs/10-print-styles.md A full HTML document demonstrating an invoice structure, designed to be styled by Water.css for both screen and print. It includes basic document structure, headings, paragraphs, tables, and footer elements. ```html Invoice

Invoice

Invoice Number: #2024-001

Date:

Bill To:

John Doe
123 Main Street
Anytown, ST 12345
john@example.com

Items:

Item Qty Price Total
Product A 2 $50.00 $100.00
Product B 1 $75.00 $75.00
Total: $175.00

Terms:

Payment due within 30 days of invoice date.

Thank you for your business!

``` -------------------------------- ### HTML Usage Example for var Element Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Illustrates the use of the var element to denote variables in mathematical expressions, function signatures, and environment variables. ```html

Let x = 5 and y = 10.

The function signature is: function f(x, y)

Set the environment variable API_KEY to your token.

``` -------------------------------- ### Watch Task Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md This Gulp task starts the development server with file watching. It runs an initial build and then watches for changes in CSS and documentation files, rebuilding and live-reloading the browser on any modification. ```javascript const watch = gulp.series(build, startDevServer) ``` -------------------------------- ### Water.css in a Single Page Application (SPA) Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md Implement Water.css in a basic SPA structure. This example uses JavaScript to toggle the visibility of different sections to simulate page navigation. ```html Simple SPA

My App

Welcome

This is the home page.

``` -------------------------------- ### Interactive Color Picker with Range Inputs Source: https://github.com/kognise/water.css/blob/master/_autodocs/05-range-input.md An example using three range sliders to control RGB color values, updating the background color of the page dynamically. ```html ``` -------------------------------- ### Semantic HTML Document Structure Source: https://github.com/kognise/water.css/blob/master/_autodocs/09-layout-structure.md This example demonstrates a well-structured HTML document using semantic elements like header, nav, main, article, aside, and footer. It includes essential meta tags and links to Water.css. ```html Page Title

Site Title

Site tagline

Article Title

Article content...

© 2024. All rights reserved.

``` -------------------------------- ### Runtime Theming: Dark Mode Link Color Source: https://github.com/kognise/water.css/blob/master/README.md Apply theme variations based on user preference using media queries. This example sets a default link color and a different color specifically for dark mode. ```html ``` -------------------------------- ### Yarn Build Command Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md Use this command to compile styles and documentation. ```bash yarn build ``` -------------------------------- ### Runtime Theming with Water.css Source: https://github.com/kognise/water.css/blob/master/_autodocs/00-index.md Apply Water.css and customize theme variables like link color and background color directly in HTML. ```html ``` -------------------------------- ### Run CSS Linting Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md Executes stylelint to check all source CSS files and demo page styles. Configuration is managed by .stylelintrc.json. ```bash yarn lint:css ``` -------------------------------- ### File Structure Overview Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md Provides a visual representation of the project's directory and file organization, including source files, build outputs, and documentation assets. ```tree src/ ├── builds/ # Theme entry points │ ├── water.css # Auto-switching theme │ ├── light.css # Light theme │ └── dark.css # Dark theme ├── parts/ # Component CSS modules ├── variables-*.css # Theme variables └── assets/ └── select-arrow.svg out/ # Build output (generated) ├── water.min.css ├── dark.min.css ├── light.min.css └── docs/ # Demo site (generated) docs/ # Source files for demo ├── index.html ├── script.js ├── style.css └── icons/ gulpfile.js # Build configuration package.json # NPM configuration ``` -------------------------------- ### Integrate Highlight.js for Syntax Highlighting Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Includes Highlight.js for Python code block syntax highlighting. Ensure you link the Highlight.js CSS and JS files, and call highlightAll() to initialize. ```html 

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
``` -------------------------------- ### Link Water.css from Local File Source: https://github.com/kognise/water.css/blob/master/_autodocs/00-index.md Include Water.css by linking to a local copy of the stylesheet. Ensure the path is correct relative to your HTML file. ```html ``` -------------------------------- ### Basic Link Structure Source: https://github.com/kognise/water.css/blob/master/_autodocs/08-links-styling.md Demonstrates how to structure navigation and article content with multiple links. Water.css applies default styling to these links. ```html ``` -------------------------------- ### Custom Print Styles Source: https://github.com/kognise/water.css/blob/master/_autodocs/14-quick-reference.md Example of using @media print to customize the appearance of the page when printed. Hides elements with the 'no-print' class and sets a base font size. ```css @media print { .no-print { display: none; } body { font-size: 12pt; } } ``` -------------------------------- ### Override Max-Width for Wider Content Source: https://github.com/kognise/water.css/blob/master/_autodocs/09-layout-structure.md To adjust the maximum content width on larger screens, override the default `max-width` property of the `body` element. This example sets it to 1200px. ```css body { max-width: 1200px; /* Wider content area */ } ``` -------------------------------- ### Markdown Documentation Site with Water.css Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md Integrates Water.css with a Markdown renderer (marked.js) to create a styled documentation site. Fetch and render Markdown content dynamically. ```html Documentation

Project Documentation

Last updated:

``` -------------------------------- ### Use Combined Code and Pre Elements with Language Class Source: https://github.com/kognise/water.css/blob/master/_autodocs/06-code-blocks-syntax.md Illustrates using `
` and `` together, with a language class for potential syntax highlighting integration. The `
` element ensures correct monospace text rendering.

```html


// This is a code block
const greeting = "Hello, World!";
console.log(greeting);


```

--------------------------------

### Water.css Build Commands

Source: https://github.com/kognise/water.css/blob/master/_autodocs/14-quick-reference.md

Use these yarn commands for building, developing, linting, and validating the Water.css project.

```bash
yarn build      # Compile CSS
```

```bash
yarn dev        # Watch + dev server
```

```bash
yarn lint       # Check code style
```

```bash
yarn validate   # Full quality check
```

--------------------------------

### Common HTML Elements with Water.css

Source: https://github.com/kognise/water.css/blob/master/_autodocs/14-quick-reference.md

Examples of various HTML elements styled by Water.css, including headings, text formatting, links, code, lists, tables, forms, details, and dialogs.

```html


Main title


Subtitle

```

```html

Bold text
Italic text
Highlighted
```

```html

Home
Email us
Call us
```

```html

Use npm install to install.

const greeting = "Hello, World!";

```

```html


    
  
  • Item 1
    • 
  
  • Item 2
    • 




    
  
  1. First
    2. 
  
  2. Second
    3. 


```

```html



  
    
Header 1Header 2

  
  
    
Cell 1Cell 2

  


```

```html






```

```html



  Click to expand
  
Hidden content here.



```

```html



  
Modal Title

  
Modal content

  

```

--------------------------------

### Custom Body Margins and Padding

Source: https://github.com/kognise/water.css/blob/master/_autodocs/09-layout-structure.md

Adjust the spacing around the main content by overriding the `margin` and `padding` properties of the `body` element. This example adds more vertical space and horizontal padding.

```css
body {
  margin: 40px auto;  /* More space at top/bottom */
  padding: 0 20px;    /* More horizontal padding */
}
```

--------------------------------

### Build Task

Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md

This Gulp task compiles styles and documentation. It runs the style and docs tasks in parallel.

```javascript
const build = gulp.parallel(style, docs)
```

--------------------------------

### Build Custom Water.css Theme

Source: https://github.com/kognise/water.css/blob/master/_autodocs/02-css-variables-reference.md

Compile a custom version of Water.css with fixed variable values for optimization or IE11 compatibility. This involves cloning the repository, modifying source files, and running the build script.

```bash
git clone https://github.com/kognise/water.css.git
cd water.css
yarn install
# Edit src/variables-light.css and src/variables-dark.css
yarn build
# CSS in out/ is ready to use
```

--------------------------------

### Basic HTML Template with Water.css

Source: https://github.com/kognise/water.css/blob/master/_autodocs/13-integration-examples.md

A minimal HTML document demonstrating the basic inclusion of Water.css for immediate styling. This is suitable for simple web pages where no custom styling is needed.

```html



  
  
  
  Page Title
  
  
  


  
Welcome

  
This page is styled with Water.css, no custom CSS required.

  
  
  


```

--------------------------------

### Custom Print CSS Override Example

Source: https://github.com/kognise/water.css/blob/master/_autodocs/10-print-styles.md

While Water.css handles most print styles, you can override them using a @media print block in your CSS. This is typically only needed for custom elements or specific styling requirements.

```css
/* Usually not needed */
@media print {
  .custom-element {
    color: #000;
    background: white;
  }
}
```

--------------------------------

### Custom Print Styles with @media print

Source: https://github.com/kognise/water.css/blob/master/_autodocs/10-print-styles.md

Extend the @media print rule to define styles that apply only when printing. This example hides navigation, sets backgrounds for highlighted elements, and controls page breaks.

```html

```

--------------------------------

### Run Complete Quality Validation

Source: https://github.com/kognise/water.css/blob/master/_autodocs/11-build-system-reference.md

Executes a comprehensive quality check that includes ESLint validation, stylelint validation, and an accessibility audit via Pa11y. All checks must pass before publishing.

```bash
yarn validate
```