system.css Download - system.css Quellcode herunterladen

system.css

Anderer Quellcode

1.0.0

Herunterladen

Dokumentation

System.css ist eine CSS-Bibliothek zum Erstellen von Schnittstellen, die das System-Betriebssystem von Apple ähneln, das von 1984 bis 1991 lief. Design, was von System 1 zu System 6 nicht viel geändert wurde; Diese Bibliothek basiert jedoch auf System 6, da sie die endgültige monochrome Version von macOS war.

Glücklicherweise verwendet diese Bibliothek kein JavaScript und ist mit einem Front-End-Framework Ihrer Wahl kompatibel. Die meisten Stile können auch überschrieben werden, um eine tiefere Anpassung zu ermöglichen.

Erste Schritte

Es gibt ein paar Möglichkeiten, wie Sie mit System.css beginnen können!

Import von CDN (einfachste)

Fügen Sie Ihrem Kopf -Tag Folgendes hinzu:

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

Hier ist ein Startercode, mit dem Sie loslegen können:

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

Import von NPMJS

 npm i @sakun/system.css

Entwicklung

Klonen Sie das Repository und führen Sie npm install aus
Führen Sie npm start , um die Entwicklungsumgebung zu beginnen.

Alles, was Sie brauchen, kann in style.css gefunden werden.

Beitrag, Credits usw.

Danke, dass du dieses Projekt überprüft hast! Diese Bibliothek wurde viel Spaß gemacht und wurde größtenteils von 98.CSS inspiriert. Die Schriften Chicago 12PT und Genf 9PT sind Erholungen von @blogmywiki

System.css ist immer noch in Beta! Ich habe Komponenten nach dem menschlichen Schnittstellenrichtlinien von Apple nachgebaut. Es besteht jedoch immer noch eine ziemlich gute Chance, dass ich etwas Wesentliches verpasst/übersehen habe. Ich musste auch die meisten Vermögenswerte neu erstellen, die auch hier zu finden sind.

Wenn Sie einen Fehler finden, sollten Sie ein Problem eröffnen. Wenn Sie etwas hinzufügen möchten, können Sie bitte eine PR erstellen!

Wenn Sie sehen möchten, was ich noch vorhat, sollten Sie mir auf Twitter folgen oder meine persönliche Website überprüfen :)