system.css Download - system.css исходный код скачать

system.css

Другой исходный код

1.0.0

Скачать

Документация

System.css-это библиотека CSS для строительства интерфейсов, которая напоминает систему Apple System OS, которая работала с 1984-1991 годов. С точки зрения дизайна, не очень сильно изменилось с системы 1 на систему 6; Тем не менее, эта библиотека основана на системе 6, так как это была окончательная монохромная версия MacOS.

К счастью, эта библиотека не использует никаких JavaScript и совместима с какой-либо фронтальной структурой по вашему выбору. Большинство стилей также могут быть перезаписаны, чтобы обеспечить более глубокую настройку.

Начиная

Есть несколько способов начать работу с System.css!

Импорт из CDN (самый простой)

Добавьте следующее к тегу своей головы:

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

Вот какой -то стартовый код, который поможет вам начать:

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

Импорт из NPMJS

 npm i @sakun/system.css

Развитие

Клонировать репозиторий и запустить npm install
Запустите npm start начать среду разработки.

Все, что вам нужно, можно найти в стиле. CSS.

Вклад, кредиты и т. Д.

Спасибо за проверку этого проекта! Эта библиотека была сделана в хорошем веселье и была в значительной степени вдохновлена 98.css. Чикаго 12PT и Женева 9pt.

System.css все еще в бета -версии! Я воссоздал компоненты на основе руководящих принципов Apple человеческого интерфейса. Тем не менее, все еще есть довольно хороший шанс, что я, возможно, пропустил/упустил из виду что -то важное. Мне также пришлось воссоздать большинство активов, которые также можно найти здесь.

Если вы найдете ошибку, рассмотрите возможность открытия проблемы. Если есть что -то, что вы хотели бы добавить, пожалуйста, не стесняйтесь создавать PR!

Если вы хотите посмотреть, что еще я задумал, подумайте о том, чтобы следить за мной в Твиттере или проверить мой личный сайт :)