Download do system.css

system.css

Outro código-fonte

1.0.0

Baixar

Documentação

O System.CSS é uma biblioteca CSS para a construção de interfaces que se assemelham ao sistema operacional do sistema da Apple, que ocorreu de 1984-1991. Em termos de design, não mudou muito do sistema 1 para o sistema 6; No entanto, esta biblioteca é baseada no sistema 6, pois foi a versão final monocromática do macOS.

Felizmente, esta biblioteca não usa nenhum JavaScript e é compatível com qualquer estrutura front-end de sua escolha. A maioria dos estilos também pode ser substituída para permitir uma personalização mais profunda.

Começando

Existem algumas maneiras de começar com o System.css!

Importar da CDN (mais fácil)

Adicione o seguinte à sua etiqueta de cabeça:

 < link rel =" stylesheet " href =" https://unpkg.com/@sakun/system.css " />

Aqui está algum código inicial para ajudá -lo a começar:

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < title > System.css Starter </ title >
    < meta charset =" UTF-8 " />
    < link rel =" stylesheet " href =" https://unpkg.com/@sakun/system.css " />
</ head >
< body >
    < div class =" window " style =" width:30rem; " >
        < div class =" title-bar " > 
            < button aria-label =" Close " class =" close " > </ button >
            < h1 class =" title " > System.css </ h1 >
            < button aria-label =" Resize " class =" resize " > </ button >
        </ div >
        < div class =" separator " > </ div >
        
        < div class =" window-pane " >
            Hello world!
        </ div >
    </ div >

    < div class =" window " style =" width:30rem; " >
        < div class =" title-bar " > 
            < button aria-label =" Close " class =" close " > </ button >
            < h1 class =" title " > Search </ h1 >
            < button aria-label =" Resize " disabled class =" hidden " > </ button >
        </ div >
        < div class =" separator " > </ div >
        
        < div class =" modeless-dialog " >
            < section class =" field-row " style =" justify-content: flex-start " >
                < label for =" text_find " class =" modeless-text " > Find: </ label >
                < input id =" text_find " type =" text " style =" width:100%; " placeholder ="" >
            </ section >
            < section class =" field-row " style =" justify-content: flex-end " >
                < button class =" btn " > Cancel </ button >
                < button class =" btn " style =" width:95px; " > Find </ button >
            </ section >
        </ div >
        </ div >
</ body >
</ html >

Importação de npmjs

 npm i @sakun/system.css

Em desenvolvimento

Clone o repositório e execute npm install
Execute npm start a iniciar o ambiente de desenvolvimento.

Tudo o que você precisa pode ser encontrado em estilo.css.

Contribuindo, créditos, etc.

Obrigado por verificar este projeto! Esta biblioteca foi feita muito divertida e foi amplamente inspirada em 98.css. As fontes de Chicago 12pt e Genebra 9pt são recriações de @blogmywiki

System.css ainda está na versão beta! Recreei componentes com base nas diretrizes de interface humana da Apple. No entanto, ainda há uma boa chance de eu ter perdido/esquecido algo essencial. Eu também tive que recriar a maioria dos ativos, que também podem ser encontrados aqui.

Se você encontrar um bug, considere abrir um problema. Se houver algo que você gostaria de acrescentar, sinta -se à vontade para criar um PR!

Se você quiser ver o que mais estou fazendo, considere me seguir no Twitter ou verificar meu site pessoal :)