water.css
1.0.0
? Коллекция стилей CSS, чтобы сделать простые веб-сайты немного приятнее
Я обычно делаю быстрые демонстрационные страницы или веб -сайты с простым контентом. Для этого я не хочу тратить время на то, чтобы их стилизовать, но не нравится уродство стилей по умолчанию.
Water.css - это структура CSS, которая не требует каких -либо классов. Вы просто включаете его в свой <head> и забываете об этом, в то время как это молча делает все лучше.
Возможно, вы захотите использовать water.css, если вы делаете простую статическую страницу или демонстрационный веб -сайт, который вы не хотите тратить по времени.
Хотя изначально он не был создан для более сложных веб -сайтов, многие разработчики использовали water.css в качестве базовой таблицы стилей и творчески применяемые пользовательские стили для создания всего приложения. Ничто не мешает вам делать то же самое!
Просто наклейте это в свой <head> :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
Предварительный просмотр различных тем доступен на демо -странице ! ⚡
Основной файл water.css автоматически переключается между светом и темным режимом в зависимости от системных предпочтений устройства пользователя. Это обнаружение стало возможным благодаря запросу CSS Media под названием prefers-color-scheme . В браузерах, где предпочтение не может быть обнаружено, water.css будет придерживаться световой темы.
Если вы хотите избежать такого поведения, используйте dark.css или light.css .
Все три распределения water.css поддерживают Internet Explorer 11, но основной файл water.css не уважает цветовую схему пользователя и будет заблокирован в режиме света из-за отсутствия поддержки prefers-color-scheme .
Имейте в виду, что IE также не поддерживает тематические значения времени выполнения, и будут использоваться фиксированные значения резервных перерывов. Если вы хотите переопределить тему water.css таким образом, чтобы совместимо с IE, мы рекомендуем вам собрать свою собственную тему.
Все версии также доступны в виде невиновных таблиц стилей, которые могут быть удобны во время разработки.
Просто удалите .min с имени файла.
Вы хотите внести некоторые настройки или создать свою собственную тему, совершенно отличную от официальных темных или легких тем? Поскольку water.css построен с переменными CSS, это очень легко сделать! Вот список всех переменных, которые вы можете изменить по своему вкусу:
--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Если вы используете версию с поддержкой Legacy Browsers, таких как Internet Explorer, пропустите свою собственную тему!
Water.css использует пользовательские свойства ( «переменные CSS» ) для определения его базовых стилей, таких как цвета. Они могут быть изменены и перезаписаны прямо в браузере.
Из -за этого вы можете просто добавить свою собственную таблицу стилей на страницу и установить свои собственные переменные CSS. Пока ваша таблица стилей появляется после Water.css в HTML, ваши значения переопределят по умолчанию, а ваша тема будет применена!
В этом коротком примере будет использоваться water.css, но раскрасьте все ссылки красные:
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
:root {
--links: red;
}
</ style >Если вы хотите изменить значение только для темного или легкого режима, используйте запрос на медиа
< style >
:root {
--links: blue; /* Always applied */
}
@media (prefers-color-scheme: dark) {
:root {
--links: yellow; /* Only applied in dark mode (overrides blue) */
}
}
</ style >Если вы нацелены на браузеры без поддержки пользовательских свойств CSS, таких как Internet Explorer, тема времени выполнения не является вариантом. Чтобы применить свои собственные тематические темы, вам нужно внести свои изменения в исходные файлы, а затем повторнокомпилировать файлы CSS. Это работает как следующее:
yarn для установки зависимостейsrc/variables-*.cssyarn build , чтобы скомпилировать файлы CSSout/Возможно, вы также захотите проверить руководство по содействию, поскольку он содержит дополнительную информацию о настройке сборки.
Water.css становится лучше для всех, когда такие люди, как вы, помогают сделать это лучше!
Проверьте наше руководство по содействию, чтобы узнать, как начать.
И спасибо, что нашли время внести свой вклад! :)
