mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-01-17 19:58:13 +01:00
Code Issues Releases Wiki Activity
css-water.css/README.md
kylejrp d0201a5a7e
Fix filesize goals 
Supersedes #63, fixes #36.

Resubmitting the merge request without any `gulpfile.js` changes now that the old merge request is severely out of date.
2019-11-01 21:07:21 -07:00

5.1 KiB
Raw Blame History

Water.css

Water.css

A just-add-css collection of styles to make simple websites just a little nicer

On reddit On product hunt MIT license

Goals

  • Responsive
  • Good code quality
  • 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 <head> 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 or demo website that you don't want to spend time styling.

You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.

How?

Just stick this in your <head>:

🌙 Dark theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">

☀ Light theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">


Other options:

⚡ An interactive version selection will be available soon here

Enforce a theme and ignore (prefers-color-scheme)

For the main versions, dark or light is only treated as a default theme: if a user has a system-wide preference for either dark or light mode on their device, water.css will respect this. If you want to avoid this behavior and enforce dark or light theme, append .standalone to the theme prefix, e.g. dark.standalone.min.css.

Want to support Internet Explorer?

Sure, just extend the theme prefix with -legacy, e.g. dark-legacy.min.css. Be aware that these versions do not support runtime theming as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend you add the respective preload tags to improve load times.

Unminified builds

All versions are also available as unminified stylesheets, which can be handy during development. Simply remove the .min from the file name.

Oh, you want a demo you say? Cheeky fellah! Well, here's your demo.

Don't like how it looks? Feel free to submit an issue or PR with suggestions.

Theming

⚠ The theming guide is out of date and will be updated shortly! In the meantime, check src/variables-*.css to see your customization options.

Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:

  • $background
  • $background-alt
  • $text-main
  • $text-bright
  • $links
  • $focus
  • $border
  • $code
  • $button-hover
  • $animation-duration
  • $scrollbar-thumb
  • $scrollbar-thumb-hover
  • $form-placeholder
  • $form-text

Wanna quickly try out theming without installing anything or just explore our build environment?

Try on repl.it

Based on an existing theme

You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you.

Here's some simple Sass that'll just use the dark theme but color all links red. Of course, you can change any variables you want.

$links: #ff0000;
@import 'dark.scss';

From scratch

You can also make your theme from scratch. This is less recommended, but feel free to! You just have to define all of the variables.

For example, here's an example of a really ugly theme, made from scratch. Ouch!

$background: #ff48c2 !default;
$background-alt: #00ff00 !default;

$text-main: #dbdbdb !default;
$text-bright: #ffffff !default;

$links: #ff0022 !default;
$focus: #ffc400 !default;
$border: #00ffff !default;
$code: #001aff !default;

$button-hover: #324759 !default;
$animation-duration: 0.1s !default;

$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;

@import 'parts/core';

You can also only import parts you want, but this is not recommended. See the src/parts/ folder for a list of parts.

Contributing

Please see CONTRIBUTING for details.

Todos