system.css
1.0.0
선적 서류 비치
System.CSS는 1984-1991 년에 실행 된 Apple의 시스템 OS와 유사한 인터페이스를 구축하기위한 CSS 라이브러리입니다. 설계 측면에서는 시스템 1에서 시스템 6으로 크게 변경되지 않았습니다. 그러나이 라이브러리는 MACOS의 최종 단색 버전이므로 시스템 6을 기반으로합니다.
다행히도이 라이브러리는 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 .필요한 모든 것은 Style.css에서 찾을 수 있습니다.
이 프로젝트를 확인해 주셔서 감사합니다! 이 도서관은 재미로 만들어졌으며 98.CSS에서 영감을 얻었습니다. Chicago 12pt와 Geneva 9pt Fonts는 @blogmywiki의 레크리에이션입니다.
System.CSS는 여전히 베타에 있습니다! Apple의 휴먼 인터페이스 지침을 기반으로 구성 요소를 재현했습니다. 그러나 내가 필수적인 것을 놓쳤거나 간과했을 가능성이 여전히 높습니다. 나는 또한 대부분의 자산을 재현해야했는데 여기에서 찾을 수 있습니다.
버그를 찾으면 문제를 여는 것을 고려하십시오. 추가하고 싶은 것이 있으면 PR을 만들어주십시오!
내가 무엇을하고 있는지보고 싶다면 트위터에서 나를 팔로우하거나 내 개인 사이트를 확인하는 것을 고려하십시오 :)
CSS 스캔 : CSS를 확인, 복사 및 편집하는 가장 빠르고 쉬운 방법
