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">
다른 테마의 미리보기는 데모 페이지 에서 사용할 수 있습니다! ⚡
Main water.css 파일은 사용자 장치의 시스템 환경 설정에 따라 자동으로 드림과 어두운 모드를 자동으로 전환합니다. 이 탐지는 prefers-color-scheme 이라는 CSS 미디어 쿼리를 통해 가능합니다. 선호도를 감지 할 수없는 브라우저에서는 water.css 가벼운 테마를 고수합니다.
이 동작을 피하려면 dark.css 또는 light.css 사용하십시오.
Water.css의 세 가지 분포는 Internet Explorer 11을 지원하지만 Main water.css 파일은 사용자의 색 구성표를 존중하지 않으며 prefers-color-scheme 지원이 부족하여 조명 모드로 고정됩니다.
IE도 런타임 테마를 지원하지 않으며 고정 폴백 값이 사용됩니다. IE와 호환되는 방식으로 Water.css 테마를 무시하려면 자신의 테마를 컴파일하는 것이 좋습니다.
모든 버전은 미혼 스타일 시트로도 제공되며 개발 중에 편리 할 수 있습니다.
파일 이름에서 .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-arrowInternet Explorer와 같은 레거시 브라우저를 지원하는 버전을 사용하는 경우 자신의 테마를 컴파일하는 데 건너 뜁니다!
water.css는 사용자 정의 속성 ( "CSS 변수" )을 사용하여 색상과 같은 기본 스타일을 정의합니다. 브라우저에서 바로 변경 및 덮어 쓰일 수 있습니다.
이 때문에 페이지에 자신의 스타일 시트를 추가하고 자신의 CSS 변수를 설정할 수 있습니다. 스타일 시트가 HTML의 Water.css를 뒤 따르는 한 값이 기본값을 무시하고 테마가 적용됩니다!
이 짧은 예제는 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 >Internet Explorer와 같은 CSS 사용자 정의 속성을 지원하지 않고 브라우저를 대상으로하는 경우 런타임 테마는 옵션이 아닙니다. 자신의 테마를 적용하려면 소스 파일 자체를 변경 한 다음 CSS 파일을 다시 컴파일해야합니다. 이것은 다음과 같이 작동합니다.
yarn 실행하여 종속성을 설치하십시오src/variables-*.cssyarn build 실행하여 CSS 파일을 컴파일하십시오out/ Directory에서 컴파일 된 파일을 사용하십시오.빌드 설정에 대한 추가 정보가 포함되어 있으므로 기고 가이드를 확인할 수도 있습니다.
Water.css는 당신과 같은 사람들이 더 나아질 때 모든 사람에게 더 나아집니다!
시작 방법을 배우려면 기고 가이드를 확인하십시오.
그리고 시간을내어 기여해 주셔서 감사합니다! :)
