download de water.css - water.css download de código -fonte

water.css

Outro código-fonte

1.0.0

Baixar

Water.css

? Uma coleção de estilos CSS para criar sites simples um pouco mais agradáveis

Metas

Responsivo
Tema
Bom suporte do navegador (funciona no meu antigo navegador do Kindle: P)
Tamanho minúsculo
Lindo
Sem classes

Por que?

Eu geralmente faço páginas de demonstração rápidas ou sites com conteúdo simples. Para isso, não quero gastar tempo estilizando -os, mas não gosto da feiúra dos estilos padrão.

Water.css é uma estrutura CSS que não requer nenhuma aula. Você apenas o inclui no seu <head> e esquece, enquanto silenciosamente torna tudo melhor.

Quem?

Você pode querer usar o Water.css se estiver fazendo uma página estática simples ou um site de demonstração que não deseja gastar tempo.

Embora originalmente não tenha sido criado para sites mais complexos, muitos desenvolvedores usaram o Water.css como uma folha de estilo base e aplicou estilos personalizados de forma criativa para criar um aplicativo inteiro. Nada está impedindo você de fazer o mesmo!

Como?

Basta enfiar isso em sua <head> :

?/☀ tema automático:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">

? Tema sombrio:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">

☀ Tema da luz:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">

Uma prévia dos diferentes temas está disponível na página de demonstração ! ⚡

Como funciona o "tema automático"

O arquivo principal de water.css alterna automaticamente entre o modo claro e escuro, dependendo das preferências do sistema do dispositivo de um usuário. Essa detecção é possível através de uma consulta de mídia CSS chamada prefers-color-scheme . Nos navegadores onde a preferência não pode ser detectada, water.css se atenha ao tema da luz.

Se você deseja evitar esse comportamento, use dark.css ou light.css .

Apoio ao Internet Explorer

Todas as três distribuições de água.CSS suportam o Internet Explorer 11, mas o arquivo principal water.css não respeita o esquema de cores do usuário e será bloqueado no modo de luz devido à falta de suporte do prefers-color-scheme .

Esteja ciente de que o IE também não suporta temas de tempo de execução e valores fixos de fallback serão usados. Se você deseja substituir o tema Water.css de uma maneira compatível com o IE, recomendamos que você compile seu próprio tema.

Construções não dinificadas

Todas as versões também estão disponíveis como folhas de estilos não infantil, que podem ser úteis durante o desenvolvimento.
Basta remover o .min do nome do arquivo.

Temas

Deseja fazer alguns ajustes ou criar seu próprio tema completamente diferente dos temas oficiais escuros ou claros? Como Water.css é construído com variáveis CSS, isso é super fácil de fazer! Aqui está uma lista de todas as variáveis que você pode mudar para o seu gosto:

--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

Tempo de tempo de execução

Se você usar uma versão com suporte para navegadores herdados como o Internet Explorer, pule para compilar seu próprio tema!

Water.css usa propriedades personalizadas ( "Variáveis CSS" ) para definir seus estilos de base, como cores. Estes podem ser alterados e substituídos diretamente no navegador.

Por esse motivo, você pode simplesmente adicionar sua própria folha de estilo à página e definir suas próprias variáveis CSS lá. Enquanto sua folha de estilo ocorrer após a água.

Este pequeno exemplo usará Water.css, mas colorir todos os links vermelhos:

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
  :root {
    --links: red;
  }
</ style >

Se você deseja alterar um valor apenas para o modo escuro ou de luz, use uma consulta de mídia como esta:

 < style >
  :root {
    --links: blue; /* Always applied */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */
    }
  }
</ style >

Compilando seu próprio tema

Se você estiver segmentando navegadores sem suporte para propriedades personalizadas do CSS, como o Internet Explorer, o tema de tempo de execução não é uma opção. Para aplicar seu próprio tema, você precisará fazer suas alterações nos arquivos de origem e, em seguida, recilomem os arquivos CSS. Isso funciona como o seguinte: