system.css Download - system.css Code source Télécharger

system.css

Autre code source

1.0.0

Télécharger

Documentation

System.CSS est une bibliothèque CSS pour la construction d'interfaces qui ressemblent au système d'exploitation système d'Apple qui s'est déroulé de 1984 à 1991. En ce qui concerne la conception, pas vraiment changé du système 1 au système 6; Cependant, cette bibliothèque est basée sur le système 6 car il s'agissait de la version monochrome finale de MacOS.

Heureusement, cette bibliothèque n'utilise aucun JavaScript et est compatible avec tout cadre frontal de votre choix. La plupart des styles peuvent également être écrasés pour permettre une personnalisation plus profonde.

Commencer

Il existe quelques façons de commencer avec System.css!

Importation de CDN (plus facile)

Ajoutez ce qui suit à votre étiquette de tête:

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

Voici un code de démarrage pour vous aider à démarrer:

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

Importation de NPMJS

 npm i @sakun/system.css

Développement

Clone le référentiel et exécuter npm install
Exécutez npm start pour démarrer l'environnement de développement.

Tout ce dont vous aurez besoin peut être trouvé dans Style.css.

Contribution, crédits, etc.

Merci d'avoir consulté ce projet! Cette bibliothèque a été faite très amusante et a été largement inspirée par 98.CSS. Les polices de Chicago 12pt et Genève 9pt sont des loisirs de @blogmywiki

System.css est toujours en version bêta! J'ai recréé des composants basés sur les directives d'interface humaine d'Apple. Cependant, il y a encore de très bonnes chances que j'aurais pu manquer / négliger quelque chose d'essentiel. J'ai également dû recréer la plupart des actifs, qui peuvent également être trouvés ici.

Si vous trouvez un bogue, envisagez d'ouvrir un problème. S'il y a quelque chose que vous aimeriez ajouter, n'hésitez pas à créer un PR!

Si vous souhaitez voir ce que je fais d'autre, pensez à me suivre sur Twitter ou à consulter mon site personnel :)