Repository: kognise/water.css Branch: master Commit: d950cbc9f860 Files: 39 Total size: 65.8 KB Directory structure: gitextract_rdd9wpy1/ ├── .changeset/ │ ├── README.md │ ├── config.json │ └── six-owls-punch.md ├── .editorconfig ├── .eslintrc.json ├── .github/ │ ├── CODE_OF_CONDUCT.md │ └── CONTRIBUTING.md ├── .gitignore ├── .huskyrc.json ├── .prettierignore ├── .stylelintrc.json ├── .vscode/ │ └── extensions.json ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── accessibility.js ├── bookmarklet/ │ └── original.js ├── docs/ │ ├── icons/ │ │ └── browserconfig.xml │ ├── index.html │ ├── script.js │ ├── site.webmanifest │ └── style.css ├── gulpfile.js ├── index.js ├── package.json └── src/ ├── builds/ │ ├── dark.css │ ├── light.css │ └── water.css ├── parts/ │ ├── _base.css │ ├── _code.css │ ├── _core.css │ ├── _forms.css │ ├── _links.css │ ├── _misc.css │ ├── _print.css │ ├── _range.css │ └── _typography.css ├── variables-dark.css └── variables-light.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .changeset/README.md ================================================ # Changesets Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package repos, or single-package repos to help you version and publish your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets) We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) ================================================ FILE: .changeset/config.json ================================================ { "$schema": "https://unpkg.com/@changesets/config@1.1.0/schema.json", "changelog": "@changesets/cli/changelog", "commit": false, "linked": [], "access": "restricted", "baseBranch": "master", "updateInternalDependencies": "patch" } ================================================ FILE: .changeset/six-owls-punch.md ================================================ --- "water.css": patch --- Added a theme toggle button to the bookmarklet ================================================ FILE: .editorconfig ================================================ root = true [*] quote_type = single indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = false insert_final_newline = false [*.md] indent_size = 4 ================================================ FILE: .eslintrc.json ================================================ { "env": { "browser": true, "es6": true, "node": true }, "extends": [ "standard" ], "parserOptions": { "ecmaVersion": 11, "sourceType": "module" }, "plugins": [ "html", "markdown", "prefer-arrow" ], "overrides": [ { "files": [ "**/*.md" ], "processor": "markdown/markdown" } ], "rules": { "prefer-arrow/prefer-arrow-functions": [ "error", { "disallowPrototype": true, "singleReturnOnly": false, "classPropertiesAllowed": false } ], "func-style": ["error", "expression"], "arrow-parens": ["error", "always"] } } ================================================ FILE: .github/CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hi@kognise.dev. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq ================================================ FILE: .github/CONTRIBUTING.md ================================================ # Contributing to Water.css Water.css becomes better for everyone when people like you help make it better! Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request. Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). Also, you agree that your contributions will be licensed under this project's [MIT License](../LICENSE.md). ## Overview Please take a moment to read through the following guidelines: - [Get started](#get-started) - [Find issues to work on](#find-issues-to-work-on) - [Add or change styles](#add-or-change-styles) - [Create your pull request](#create-your-pull-request) - [Project structure](#project-structure)
> **Quickstart**: > 1. `yarn install` – install dependencies > 2. `yarn dev` – start the dev server, make your changes > 3. `yarn validate` – make sure your changes pass all tests > 4. `yarn changeset` – describe your changes for the changelog
## Get started 1. Get a copy of the repository. It is recommended to [fork](https://github.com/kognise/water.css/fork) it first and clone to your machine using `git`. 2. Make sure that you have [yarn installed](https://classic.yarnpkg.com/en/docs/install/), then install dependencies by running: ``` yarn install ``` 3. Start the development server with live reload: ``` yarn dev ``` 4. Now you can visit [localhost:3000](http://localhost:3000) and start playing around with the framework – when you make changes to Water.css, the site will reload automatically so you can see what changed. *Note:* A script that builds distribution ready files is also available but it is not the part of development workflow. It is designed to be triggered automatically while publishing a new version of Water.css, but if you want to inspect the minified assets meant for production, you can run it manually: `yarn build` > Alternatively, you can develop in Repl.it, a supercool in-browser IDE! Just click this button: [![Run on Repl.it](https://repl.it/badge/github/kognise/water.css)](https://repl.it/github/kognise/water.css) ## Find issues to work on If you are new to contributing open-source software, you can start by picking any relevant issue that is [tagged with **`good first issue`**]( https://github.com/kognise/water.css/contribute). Also, everyone is welcome to contribute on issues [tagged with **`help wanted`**, you can find it filtered here](https://github.com/kognise/water.css/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). ## Add or change styles There are a few rules for working in the Water.css source code: 1. The styles must not use any classes or IDs. Water.css is made entirely of basic style rules that only target HTML elements. 2. Don't specify colors directly in the source files (`src/parts/*`). Only use named variables there, which are declared in `src/variables-*.css`. ❌ Bad: ```css color: #fff; ``` ✔ Good: ```css color: var(--text-bright); ``` 3. Reuse existing colors where possible. Before introducing a new color to our palette, check if one of the existing colors fits your needs. 4. If you introduce a new variable, make sure to declare it both in `variables-dark.css` and `variables-light.css` so it's available in both themes. Also, add the new variable to the list of variables available for theming in the [README](../README.md#theming). ## Create your pull request Once you're happy with your changes, you need to **commit** them, create a **changelog** and **submit a pull request**. A few general rules of thumb about what makes a good pull request: - Make sure that your pull request covers a small and well defined scope - Make small commits with clear and explainful messages - Provide a clear description about your contribution on GitHub ### Commit When you commit code, Water.css will run some checks to make sure that your changes have no errors and match the project's coding style – a process called [**Linting**](https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time). It will also verify that all **colors are accessible**, which means they need to have enough contrast to be easily readable. If the code you introduced has errors or some of the colors aren't accessible, you'll see an error and the commit will abort. You can check whether your changes pass all tests before committing them by running: ``` yarn validate ``` If there are errors, you can try to fix them automatically by running: ``` yarn lint ```
ℹ A note about puppeteer and WSL
The accessibility checks use puppeteer, a tool that uses Chrome to render websites "headlessly", without a visible interface. In some environments like the Windows Subsystem for Linux, you'll need to manually configure and run an X-Server in order for puppeteer to work.

### Changelog Now that your changes are commited, you'll need to **generate a changelog**: We use a tool called [Changesets](https://github.com/atlassian/changesets) to keep track of what changes have been made between versions. Make sure to create a changelog before creating your pull request! Just run this command for each change you made, and then answer a few questions: ``` yarn changeset ``` If you're not sure what kind of change you're making, pick "patch". ### Submit a Pull Request Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare). Be sure to provide a clear description of what your pull request includes. If your pull request will close an existing issue, make sure to write `Closes #[id]` in the pull request description, where `[id]` is replaced by the issue your pull request will close. After submitting a pull request, it will need to be reviewed by a maintainer of the project before being merged. You may be asked to make some changes to your pull request. After your change has been reviewed and merged, you can celebrate as the newest contributor to the Water.css project! 🎉 ## Project structure ``` . ├── out ├── dist └── docs └── icons └── src ├── assets ├── builds └── parts ``` - **`out`** is ignored by git – it contains built assets for distribution - **`dist`** contains old assets, for backwards compatibility - ignore this - **`docs`** contains the documentation and demo page - **`docs/icons`** contains water.css favicons used in the documentation - **`src`** contains all the source stylesheets grouped into folders and variables - **`src/assets`** contains images/icons used for UI element styling - **`src/builds`** contains entry files for the different versions water.css comes in: auto, dark and light - **`src/parts`** contains the water.css source code organized in separate files by its kind, like "forms" or "typography" ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test # parcel-bundler cache (https://parceljs.org/) .cache # next.js build output .next # nuxt.js build output .nuxt # vuepress build output .vuepress/dist # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ # IntelliJ IDE .idea/ # Output of yarn build out/ dist/ ================================================ FILE: .huskyrc.json ================================================ { "hooks": { "pre-commit": "yarn validate" } } ================================================ FILE: .prettierignore ================================================ * ================================================ FILE: .stylelintrc.json ================================================ { "extends": "stylelint-config-standard", "rules": { "no-descending-specificity": null } } ================================================ FILE: .vscode/extensions.json ================================================ { "recommendations": [ "dbaeumer.vscode-eslint", "stylelint.vscode-stylelint" ] } ================================================ FILE: CHANGELOG.md ================================================ # Water.css ## 2.1.0 ### Minor Changes - 567d2ec: Add styles for element ### Patch Changes - ebb4e23: Add style for color input field - 21e1e5d: Remove sourcemap references from built files - c23d65c: Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82 - 1f1168c: Added styling for Input type Reset - 84b57fd: Update button colors for better contrast, especially in tables - 2fff00c: Update main package entrypoint - 881022a: Fix color of `` and `` tags inside links ## 2.0.0 ### Major Changes - Published to npm If you're using an old version of Water.css, you **must** see the README or you won't get new changes - Added sourcemaps, autoprefixing, and minification - Cleaned up the structure of sourcemap files - Compatible with all major browsers including IE - Added support for `prefers-color-scheme` to automatically set light and dark theme - The default theme color is light mode - Internet Explorer does not support this so the automatic version will always show up as light mode in IE - If you want to force a color scheme, use `light.css`, or `dark.css` * Added CSS variables to allow for changing theme colors at runtime instead of build time IE does not support this either, but nothing should break because we provide fixed fallback colors. It is possible to compile your own theme if you must have custom colors in IE. * Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md) * Restructured `.scss` file locations and variable names * Added `height: auto` to `img` elements to keep aspect ratio ### Minor Changes - Added radio and checkbox styles - Added styles for prepending emojis to `href='mailto'`, `href='tel'`, and `href='sms'` - `table` no longer has outer borders and `tr` elements use color striping for alternating backgorund colors - Added `min-height` and respect `cols`/`rows` attributes on `textarea` - Use `system-ui` font when available - Added styles for `samp`, `time`, `var`, and `kbd` elements - Added styling for `blockquote`, `q`, and `mark` elements - Added print styles - Custom scrollbar styles - Added `cursor: not-allowed` to `select:disabled`, `button:disabled`, `textarea:disabled` - Added styles for `::selection` ### Patch Changes - Fixed padding, alignment, and colors on several elements - Modified some colors to fix accessibility issues - `table` elements no longer overflow - Added linter and linted entire codebase - Fixed `max-width` of `video` element to prevent overflowing ================================================ FILE: LICENSE.md ================================================ # The MIT License (MIT) Copyright © 2019 Kognise Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

NPM page On Product Hunt Contributors MIT license


Water.css

🌊 A drop-in collection of CSS styles to make simple websites just a little nicer

[![Water.css](assets/logo.svg)](https://watercss.kognise.dev/)
## Goals - Responsive - Themeable - Good browser support (works on my old kindle's browser :P) - Tiny size - Beautiful - No classes ## Why? I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles. Water.css is a CSS framework that doesn't require any classes. You just include it in your `` and forget about it, while it silently makes everything nicer. ## Who? You might want to use Water.css if you're making a simple static page or demo website that you don't want to spend time styling. Although it originally wasn't built for more complex websites, many developers have used Water.css as a base stylesheet and creatively applied custom styles to build out an entire app. Nothing is stopping you from doing the same! ## How? Just stick this in your ``: ### 🌙/☀ Automatic Theme: `` ### 🌙 Dark Theme: `` ### ☀ Light Theme: ``
A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡ #### How the "Automatic Theme" works The main `water.css` file automatically switches between light and dark mode depending on the system preferences of a user's device. This detection is made possible through a CSS media query called [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). In browsers where the preference can't be detected, `water.css` will stick to the light theme. If you want to avoid this behavior, use either `dark.css` or `light.css`. #### Supporting Internet Explorer All three distributions of Water.css support Internet Explorer 11, but the main `water.css` file **doesn't respect the user's color scheme** and will be locked to light mode due to lack of `prefers-color-scheme` support. Be aware that IE also doesn't support [runtime theming](#theming), and fixed fallback values will be used. If you want to override the Water.css theme in a way that's compatible with IE, we recommend that you [compile your own theme](#compiling-your-own-theme). #### Unminified builds All versions are also available as unminified stylesheets, which can be handy during development. Simply remove the `.min` from the file name. ## Theming Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do! Here's a list list of all the variables you can change to your liking: - `--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` ### Runtime theming > ⚠ If you use a version with support for legacy browsers like Internet Explorer, skip to [Compiling your own theme](#compiling-your-own-theme)! Water.css uses Custom Properties (_"CSS variables"_) to define its base styles such as colors. These can be changed and overwritten right in the browser. Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Water.css in the HTML, your values will override the default ones and your theme is applied! This short example will use Water.css, but color all links red: ```html ``` If you want to change a value for dark or light mode only, use a media query like this: ```html ``` ### Compiling your own theme If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following: - Clone the repository to your machine - Run `yarn` to install dependencies - Make the theming changes you want in `src/variables-*.css` - Run `yarn build` to compile the CSS files - Use the compiled files in the `out/` directory on your site You also might want to check out the [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md) as it contains further information about the build setup. ## Contributing Water.css becomes better for everyone when people like you help make it better! Check out our [Contributing Guide](.github/CONTRIBUTING.md) to learn how to get started. And thanks for taking the time to contribute! :) ================================================ FILE: accessibility.js ================================================ const pa11y = require('pa11y') const chalk = require('chalk') const puppeteer = require('puppeteer') const check = async (browser, theme) => { console.log(chalk`{bold Checking {blue ${theme}} theme...}`) const page = await browser.newPage() page.emulateMediaFeatures([ { name: 'prefers-color-scheme', value: theme } ]) const results = await pa11y('./out/docs/index.html', { ignore: [ 'WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2' // Ignore "this form does not contain a submit button" ], browser, page }) if (results.issues.length === 0) { await page.close() console.log(chalk`{green No issues found!}`) return false } for (const issue of results.issues) { console.log() console.log(chalk`{red Error:} ${issue.message}`) console.log(chalk`{gray -> ${issue.code}}`) console.log(chalk`{gray -> ${issue.selector}}`) console.log(chalk`{gray -> ${issue.context}}`) } await page.close() return true } const go = async () => { try { const browser = await puppeteer.launch() const lightResult = await check(browser, 'light') console.log() const darkResult = await check(browser, 'dark') await browser.close() if (lightResult || darkResult) process.exit(1) } catch (error) { console.log() console.log(chalk`{red An unexpected error occured!} ${error.message}`) } } go() ================================================ FILE: bookmarklet/original.js ================================================ // Water.css Bookmarklet // --------------------- const $$ = (selector) => document.querySelectorAll(selector) const createElement = (tagName, properties) => Object.assign(document.createElement(tagName), properties) // Remove all CSS stylesheets, external and internal $$('link[rel="stylesheet"],style').forEach((el) => el.remove()) // Remove all inline styles $$('*').forEach((el) => (el.style = '')) const linkElm = createElement('link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' }) // Add water.css and responsive viewport (if necessary) document.head.append( linkElm, !$$('meta[name="viewport"]').length && createElement('meta', { name: 'viewport', content: 'width=device-width,initial-scale=1.0' }) ) // Theme switching icons const moonSVG = '' const sunSVG = '' // Theme toggling logic const toggleBtn = createElement('button', { innerHTML: sunSVG, ariaLabel: 'Switch theme', style: ` position: fixed; top: 50px; right: 50px; margin: 0; padding: 10px; line-height: 1; ` }) let theme = 'light' const toggleTheme = () => { if (theme === 'light') { theme = 'dark' toggleBtn.innerHTML = moonSVG linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' } else { theme = 'light' linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' toggleBtn.innerHTML = sunSVG } } toggleBtn.addEventListener('click', toggleTheme) document.body.append(toggleBtn) ================================================ FILE: docs/icons/browserconfig.xml ================================================ #00aba9 ================================================ FILE: docs/index.html ================================================ Water.css

Water.css

Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer.

Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

Get it already!
GitHub
Water.css - Make your tiny website just a little nicer | Product Hunt Embed

Installation

Options

Version info
File
Size (min + gzip)
Theme

Goals

  • Responsive
  • Good code quality
  • Good browser support
  • Small size (< 2kb)
  • Beautiful
  • No classes

Is it responsive?

Heck yeah! It doesn't include any fancy styles so it's easily mobile responsive. Just add the famous responsive viewport tag and you'll be good to go!

In fact, try resizing this page. Everything flows super nicely as you'll see.

Bookmarklet

A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar.

The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:

Waterize

Element demos

This is supposed to be a demo page so we need more elements!

Form elements


Code

Below is some code, you can copy it with Ctrl-C. Did you know, alert(1) can show an alert in JavaScript! 

// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')

Other

Here's a horizontal rule and image because I don't know where else to put them.

Example kitten

And here's a nicely marked up table!

Name Quantity Price
Godzilla 2 $299.99
Mozilla 10 $100,000.00
Quesadilla 1 $2.22
Some summary/details can't hurt!

Lorem ipsum dolor sit blah blah.

The dialog (form, and menu) tag

This is a sample dialog

What is your favorite pet animal?

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.

"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element."
MDN, "The Block Quotation element"
  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Addresses are also styled to be awesome!

john.doe@example.com
778-330-2389
666-666-6666

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
================================================ FILE: docs/script.js ================================================ 'use strict' const localBase = './water.css/' const fileSizes = { dark: 2.57, light: 2.55, auto: 3.27 } const themeForm = document.getElementById('theme-form') const stylesheet = document.getElementById('js-stylesheet') const startupStylesheet = document.getElementById('js-startup-stylesheet') const productHunt = document.getElementById('product-hunt') const copyButton = document.getElementById('copy-button') const copyButtonFeedback = document.getElementById('copy-button-feedback') const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre')) const table = { fileName: document.getElementById('table-file-name'), fileSize: document.getElementById('table-file-size'), theme: document.getElementById('table-theme') } const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)') const updateProductHunt = (theme) => { theme = theme || (prefersColorScheme.matches ? 'light' : 'dark') productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily` } const updateTheme = () => { const theme = themeForm.querySelector('input[name="theme"]:checked').value const fileName = `${theme === 'auto' ? 'water' : theme}.min.css` const localUrl = `${localBase}${fileName}` stylesheet.href = localUrl for (const snippet of linkSnippets) { snippet.hidden = snippet.id.indexOf(theme) === -1 } table.fileName.innerText = fileName table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb` if (theme === 'auto') { updateProductHunt() table.theme.innerHTML = ` Respects user-defined theme settings using prefers-color-scheme.
Light in browsers where the theme settings can't be detected. ` } else { updateProductHunt(theme) table.theme.innerText = `Theme is forced to ${theme}.` } } themeForm.addEventListener('change', updateTheme) updateProductHunt() prefersColorScheme.addListener(() => { if (themeForm.theme.value !== 'auto') return updateProductHunt() }) updateTheme() startupStylesheet.parentElement.removeChild(startupStylesheet) copyButton.addEventListener('click', () => { const clipboard = navigator.clipboard || window.clipboard const theme = themeForm.querySelector('input[name="theme"]:checked').value const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent clipboard.writeText(snippetText) .then(() => { copyButtonFeedback.textContent = '✔' }) .catch(() => { copyButtonFeedback.textContent = '❌' }) .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000)) }) document.getElementById('dialog-trigger').addEventListener('click', () => { document.getElementById('dialog-result').innerText = '' document.getElementById('dialog').showModal() }) document.getElementById('dialog').addEventListener('close', (event) => { document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}` }) ================================================ FILE: docs/site.webmanifest ================================================ { "name": "Water.css", "short_name": "Water.css", "start_url": "./", "icons": [ { "src": "./icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } ================================================ FILE: docs/style.css ================================================ html { scroll-behavior: smooth; } #product-hunt { margin-top: 1rem; } #link-snippet-headline { margin: 1rem 2.5rem 1rem 0; } /* Make the feedback Emoji appear next to the button */ #copy-button { position: relative; margin-right: 2px; overflow: visible; } #copy-button-feedback { position: absolute; left: -2rem; display: inline-block; transform: scale(1.3); } #link-snippet-container { overflow: hidden; display: grid; display: -ms-grid; -ms-grid-columns: 1fr; } #link-snippet-container > pre { overflow: auto; grid-column: 1; grid-row: 1; transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms; } #link-snippet-container > pre[hidden] { display: block; visibility: hidden; transform: scale(0); transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms; } #theme-form > label:not(:last-of-type) { margin-right: 1rem; } #version-info th { width: 35%; } body > footer { text-align: right; } .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } ================================================ FILE: gulpfile.js ================================================ const gulp = require('gulp') const postcss = require('gulp-postcss') const autoprefixer = require('autoprefixer') const cssnano = require('cssnano') const sourcemaps = require('gulp-sourcemaps') const bytediff = require('gulp-bytediff') const browserSync = require('browser-sync').create() const chalk = require('chalk') const rename = require('gulp-rename') const filter = require('gulp-filter') const flatten = require('gulp-flatten') const babel = require('gulp-babel') const terser = require('gulp-terser') const posthtml = require('gulp-posthtml') const htmlnano = require('htmlnano') const sizereport = require('gulp-sizereport') const postcssCssVariables = require('postcss-css-variables') const postcssImport = require('postcss-import') const postcssInlineSvg = require('postcss-inline-svg') const postcssColorModFunction = require('postcss-color-mod-function').bind(null, { /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */ stringifier: (color) => color.toRGBLegacy() }) const paths = { docs: { src: 'docs/**', dest: 'out/docs' }, styles: { src: 'src/builds/*.css', dest: 'out', watch: 'src/**/*.css' } } // https://stackoverflow.com/a/20732091 const humanFileSize = (size) => { const i = Math.floor(Math.log(size) / Math.log(1024)) return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i] } const formatByteMessage = (source, data) => { const prettyStartSize = humanFileSize(data.startSize) let message = '' if (data.startSize !== data.endSize) { const change = data.savings > 0 ? 'saved' : 'gained' const prettySavings = humanFileSize(Math.abs(data.savings)) let prettyEndSize = humanFileSize(data.endSize) if (data.endSize > data.startSize) prettyEndSize = chalk.yellow(prettyEndSize) if (data.endSize < data.startSize) prettyEndSize = chalk.green(prettyEndSize) message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})` } else message = chalk`kept original filesize. ({bold ${prettyStartSize}})` return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}` } const style = () => { const startDiff = () => bytediff.start() const endDiff = (source) => bytediff.stop((data) => formatByteMessage(source, data)) return ( gulp .src(paths.styles.src) .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()])) .pipe(startDiff()) .pipe(postcss([postcssCssVariables({ preserve: true })])) .pipe(endDiff('css variables')) .pipe(startDiff()) .pipe(postcss([autoprefixer()])) .pipe(endDiff('autoprefixer')) .pipe(flatten()) // Put files in out/*, not out/builds/* .pipe(gulp.dest(paths.styles.dest)) // .pipe(startDiff()) .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) .pipe(endDiff('minification')) .pipe(rename({ suffix: '.min' })) // .pipe(gulp.dest(paths.styles.dest)) .pipe(gulp.dest(paths.docs.dest + '/water.css')) .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) .pipe(browserSync.stream()) ) } const docs = () => { const htmlOnly = filter('**/*.html', { restore: true }) const jsOnly = filter('**/*.js', { restore: true }) const cssOnly = filter('**/*.css', { restore: true }) return ( gulp // Exclude all HTML files but index.html .src(paths.docs.src, { ignore: '**/!(index).html' }) // * Process HTML * .pipe(htmlOnly) .pipe(posthtml([htmlnano()])) .pipe(htmlOnly.restore) // * Process JS * .pipe(jsOnly) .pipe(sourcemaps.init()) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(terser({ toplevel: true })) .pipe(sourcemaps.write('.')) .pipe(jsOnly.restore) // * Process CSS * .pipe(cssOnly) .pipe(sourcemaps.init()) .pipe(postcss([autoprefixer(), cssnano()])) .pipe(sourcemaps.write('.')) .pipe(cssOnly.restore) .pipe(gulp.dest(paths.docs.dest)) ) } const browserReload = (done) => { browserSync.reload() return done() } const startDevServer = () => { browserSync.init({ server: { baseDir: './out/docs' } }) gulp.watch(paths.styles.watch, gulp.series(style, browserReload)) gulp.watch(paths.docs.src, gulp.series(docs, browserReload)) } const build = gulp.parallel(style, docs) const watch = gulp.series(build, startDevServer) module.exports.build = build module.exports.watch = watch ================================================ FILE: index.js ================================================ const gulpfile = require('./gulpfile') gulpfile.watch() ================================================ FILE: package.json ================================================ { "name": "water.css", "version": "2.1.1", "description": "A drop-in collection of CSS styles to make simple websites just a little nicer", "main": "out/water.css", "scripts": { "build": "gulp build", "dev": "gulp watch", "lint:js": "eslint bookmarklet/original.js docs/script.js docs/index.html gulpfile.js", "lint:css": "stylelint src/**/*.css docs/style.css", "lint": "yarn lint:js --fix && yarn lint:css --fix", "accessibility": "yarn build && node accessibility.js", "validate": "yarn lint:js && yarn lint:css && yarn accessibility" }, "repository": { "type": "git", "url": "git+https://github.com/kognise/water.css.git" }, "publishConfig": { "access": "public" }, "keywords": [ "css", "css-framework", "simple", "minimal" ], "author": "Kognise", "license": "MIT", "bugs": { "url": "https://github.com/kognise/water.css/issues" }, "homepage": "https://github.com/kognise/water.css", "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@changesets/cli": "^2.7.2", "autoprefixer": "^9.5.1", "browser-sync": "^2.26.3", "chalk": "^2.4.2", "cssnano": "^4.1.10", "eslint": "^7.1.0", "eslint-config-standard": "^14.1.1", "eslint-plugin-html": "^6.0.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-markdown": "^2.0.0-alpha.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prefer-arrow": "^1.2.1", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "gulp": "^4.0.0", "gulp-babel": "^8.0.0", "gulp-bytediff": "^1.0.0", "gulp-filter": "^5.1.0", "gulp-flatten": "^0.4.0", "gulp-postcss": "^8.0.0", "gulp-posthtml": "^3.0.4", "gulp-rename": "^1.4.0", "gulp-sizereport": "^1.2.1", "gulp-sourcemaps": "^2.6.5", "gulp-terser": "^1.2.0", "htmlnano": "^0.2.3", "husky": "^4.2.5", "pa11y": "^5.3.0", "postcss-color-mod-function": "^3.0.3", "postcss-css-variables": "^0.12.0", "postcss-import": "^12.0.1", "postcss-inline-svg": "^4.1.0", "puppeteer": "^3.2.0", "stylelint": "^13.5.0", "stylelint-config-standard": "^20.0.0" }, "browserslist": [ "defaults" ], "files": [ "out/*.css", "LICENSE.md" ] } ================================================ FILE: src/builds/dark.css ================================================ /** * Forced dark theme version */ @import '../variables-dark.css'; @import '../parts/_core.css'; ================================================ FILE: src/builds/light.css ================================================ /** * Forced light theme version */ @import '../variables-light.css'; @import '../parts/_core.css'; ================================================ FILE: src/builds/water.css ================================================ /** * Automatic version: * Uses light theme by default but switches to dark theme * if a system-wide theme preference is set on the user's device. */ @import '../variables-light.css'; @import '../variables-dark.css' (prefers-color-scheme: dark); @import '../parts/_core.css'; ================================================ FILE: src/parts/_base.css ================================================ html { scrollbar-color: var(--scrollbar-thumb) var(--background-body); scrollbar-width: thin; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; line-height: 1.4; max-width: 800px; margin: 20px auto; padding: 0 10px; word-wrap: break-word; color: var(--text-main); background: var(--background-body); text-rendering: optimizeLegibility; } button, input, textarea { transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } ================================================ FILE: src/parts/_code.css ================================================ code, samp, time { background: var(--background); color: var(--code); padding: 2.5px 5px; border-radius: 6px; font-size: 1em; } pre > code { padding: 10px; display: block; overflow-x: auto; } var { color: var(--variable); font-style: normal; font-family: monospace; } kbd { background: var(--background); border: 1px solid var(--border); border-radius: 2px; color: var(--text-main); padding: 2px 4px 2px 4px; } ================================================ FILE: src/parts/_core.css ================================================ @import '_base.css'; @import '_typography.css'; @import '_forms.css'; @import '_range.css'; @import '_links.css'; @import '_code.css'; @import '_misc.css'; @import '_print.css'; ================================================ FILE: src/parts/_forms.css ================================================ button, select, input[type='submit'], input[type='reset'], input[type='button'], input[type='checkbox'], input[type='range'], input[type='radio'] { cursor: pointer; } input, select { display: block; } [type='checkbox'], [type='radio'] { display: initial; } input, button, textarea, select { color: var(--form-text); background-color: var(--background); font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px; padding: 10px; border: none; border-radius: 6px; outline: none; } button, input[type='submit'], input[type='reset'], input[type='button'] { background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } button:hover, input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover { background: var(--button-hover); } input[type='color'] { min-height: 2rem; padding: 8px; cursor: pointer; } input[type='checkbox'], input[type='radio'] { height: 1em; width: 1em; } input[type='radio'] { border-radius: 100%; } input { vertical-align: top; } label { vertical-align: middle; margin-bottom: 4px; display: inline-block; } input:not([type='checkbox']):not([type='radio']), input[type='range'], select, button, textarea { -webkit-appearance: none; } textarea { display: block; margin-right: 0; box-sizing: border-box; resize: vertical; } textarea:not([cols]) { width: 100%; } textarea:not([rows]) { min-height: 40px; height: 140px; } select { background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; padding-right: 35px; } select::-ms-expand { display: none; } select[multiple] { padding-right: 10px; background-image: none; overflow-y: auto; } input:focus, select:focus, button:focus, textarea:focus { box-shadow: 0 0 0 2px var(--focus); } input[type='checkbox']:active, input[type='radio']:active, input[type='submit']:active, input[type='reset']:active, input[type='button']:active, input[type='range']:active, button:active { transform: translateY(2px); } input:disabled, select:disabled, button:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.5; } ::placeholder { color: var(--form-placeholder); } fieldset { border: 1px var(--focus) solid; border-radius: 6px; margin: 0; margin-bottom: 12px; padding: 10px; } legend { font-size: 0.9em; font-weight: 600; } ================================================ FILE: src/parts/_links.css ================================================ a { text-decoration: none; color: var(--links); } a:hover { text-decoration: underline; } ================================================ FILE: src/parts/_misc.css ================================================ img, video { max-width: 100%; height: auto; } hr { border: none; border-top: 1px solid var(--border); } table { border-collapse: collapse; margin-bottom: 10px; width: 100%; table-layout: fixed; } table caption { text-align: left; } td, th { padding: 6px; text-align: left; vertical-align: top; word-wrap: break-word; } thead { border-bottom: 1px solid var(--border); } tfoot { border-top: 1px solid var(--border); } tbody tr:nth-child(even) { background-color: var(--background); } tbody tr:nth-child(even) button { background-color: var(--background-alt); } tbody tr:nth-child(even) button:hover { background-color: var(--background-body); } ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-track { background: var(--background); border-radius: 6px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } ::selection { background-color: var(--selection); color: var(--text-bright); } details { display: flex; flex-direction: column; align-items: flex-start; background-color: var(--background-alt); padding: 10px 10px 0; margin: 1em 0; border-radius: 6px; overflow: hidden; } details[open] { padding: 10px; } details > :last-child { margin-bottom: 0; } details[open] summary { margin-bottom: 10px; } summary { display: list-item; background-color: var(--background); padding: 10px; margin: -10px -10px 0; cursor: pointer; outline: none; } summary:hover, summary:focus { text-decoration: underline; } details > :not(summary) { margin-top: 0; } summary::-webkit-details-marker { color: var(--text-main); } dialog { background-color: var(--background-alt); color: var(--text-main); border: none; border-radius: 6px; border-color: var(--border); padding: 10px 30px; } dialog > header:first-child { background-color: var(--background); border-radius: 6px 6px 0 0; margin: -10px -30px 10px; padding: 10px; text-align: center; } dialog::backdrop { background: #0000009c; backdrop-filter: blur(4px); } footer { border-top: 1px solid var(--border); padding-top: 10px; color: var(--text-muted); } body > footer { margin-top: 40px; } ================================================ FILE: src/parts/_print.css ================================================ @media print { body, pre, code, summary, details, button, input, textarea { background-color: #fff; } button, input, textarea { border: 1px solid #000; } body, h1, h2, h3, h4, h5, h6, pre, code, button, input, textarea, footer, summary, strong { color: #000; } summary::marker { color: #000; } summary::-webkit-details-marker { color: #000; } tbody tr:nth-child(even) { background-color: #f2f2f2; } a { color: #00f; text-decoration: underline; } } ================================================ FILE: src/parts/_range.css ================================================ input[type='range'] { margin: 10px 0; padding: 10px 0; background: transparent; } input[type='range']:focus { outline: none; } input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 9.5px; transition: 0.2s; background: var(--background); border-radius: 3px; } input[type='range']::-webkit-slider-thumb { box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; height: 20px; width: 20px; border-radius: 50%; background: var(--border); -webkit-appearance: none; margin-top: -7px; } input[type='range']:focus::-webkit-slider-runnable-track { background: var(--background); } input[type='range']::-moz-range-track { width: 100%; height: 9.5px; transition: 0.2s; background: var(--background); border-radius: 3px; } input[type='range']::-moz-range-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; height: 20px; width: 20px; border-radius: 50%; background: var(--border); } input[type='range']::-ms-track { width: 100%; height: 9.5px; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type='range']::-ms-fill-lower { background: var(--background); border: 0.2px solid #010101; border-radius: 3px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } input[type='range']::-ms-fill-upper { background: var(--background); border: 0.2px solid #010101; border-radius: 3px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } input[type='range']::-ms-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; border: 1px solid #000; height: 20px; width: 20px; border-radius: 50%; background: var(--border); } input[type='range']:focus::-ms-fill-lower { background: var(--background); } input[type='range']:focus::-ms-fill-upper { background: var(--background); } ================================================ FILE: src/parts/_typography.css ================================================ h1 { font-size: 2.2em; margin-top: 0; } h1, h2, h3, h4, h5, h6 { margin-bottom: 12px; margin-top: 24px; } h1, h2, h3, h4, h5, h6, strong { color: var(--text-bright); } h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 600; } q::before { content: none; } q::after { content: none; } blockquote, q { border-left: 4px solid var(--focus); margin: 1.5em 0; padding: 0.5em 1em; font-style: italic; } blockquote > footer { font-style: normal; border: 0; } blockquote cite { font-style: normal; } address { font-style: normal; } a[href^='mailto\:']::before { content: '📧 '; } a[href^='tel\:']::before { content: '📞 '; } a[href^='sms\:']::before { content: '💬 '; } mark { background-color: var(--highlight); border-radius: 2px; padding: 0 2px 0 2px; color: #000; } a > code, a > strong { color: inherit; } ================================================ FILE: src/variables-dark.css ================================================ :root { --background-body: #202b38; --background: #161f27; --background-alt: #1a242f; --selection: #1c76c5; --text-main: #dbdbdb; --text-bright: #fff; --text-muted: #a9b1ba; --links: #41adff; --focus: #0096bfab; --border: #526980; --code: #ffbe85; --animation-duration: 0.1s; --button-base: #0c151c; --button-hover: #040a0f; --scrollbar-thumb: var(--button-hover); --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%)); --form-placeholder: #a9a9a9; --form-text: #fff; --variable: #d941e2; --highlight: #efdb43; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef); } ================================================ FILE: src/variables-light.css ================================================ :root { --background-body: #fff; --background: #efefef; --background-alt: #f7f7f7; --selection: #9e9e9e; --text-main: #363636; --text-bright: #000; --text-muted: #70777f; --links: #0076d1; --focus: #0096bfab; --border: #dbdbdb; --code: #000; --animation-duration: 0.1s; --button-base: #d0cfcf; --button-hover: #9b9b9b; --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%)); --scrollbar-thumb-hover: var(--button-hover); --form-placeholder: #949494; --form-text: #1d1d1d; --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); }