Descargar system.css - Descargar el código fuente de system.css

system.css

Otro código fuente

1.0.0

Descargar

Documentación

System.CSS es una biblioteca CSS para construir interfaces que se asemejan al sistema operativo System de Apple que funcionó de 1984 a 1991. En cuanto al diseño, no se cambió mucho del sistema 1 al sistema 6; Sin embargo, esta biblioteca se basa en el Sistema 6, ya que fue la versión monocromática final de MacOS.

Afortunadamente, esta biblioteca no usa JavaScript y es compatible con cualquier marco frontal de su elección. La mayoría de los estilos también se pueden sobrescribir para permitir una personalización más profunda.

Empezando

¡Hay un par de formas en que puede comenzar con System.css!

Importar desde CDN (más fácil)

Agregue lo siguiente a la etiqueta de su cabeza:

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

Aquí hay un código de inicio para ayudarlo a comenzar:

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

Importar desde NPMJS

 npm i @sakun/system.css

Desarrollo

Clonar el repositorio y ejecutar npm install
Ejecute npm start a iniciar el entorno de desarrollo.

Todo lo que necesitará se puede encontrar en style.css.

Contribuyendo, créditos, etc.

¡Gracias por revisar este proyecto! Esta biblioteca se hizo en buena diversión y se inspiró en gran medida en 98.CSS. Las fuentes de Chicago 12pt y Ginebra 9pt son recreaciones de @blogmywiki

System.css todavía está en Beta! Recreé componentes basados en las pautas de la interfaz humana de Apple. Sin embargo, todavía hay una buena posibilidad de que haya perdido/pasado por alto algo esencial. También tuve que recrear la mayoría de los activos, que también se pueden encontrar aquí.

Si encuentra un error, considere abrir un problema. Si hay algo que le gustaría agregar, ¡no dude en crear un PR!

Si desea ver qué más estoy haciendo, considere seguirme en Twitter o revisar mi sitio personal :)