New.css는 HTML 만 사용하여 최신 웹 사이트를 작성하는 클래스 없는 CSS 프레임 워크입니다.
HTML 만 사용하여 최신 웹 사이트를 작성하는 클래스 없는 CSS 프레임 워크 ~ 4.5kb의 무게입니다.
newcss.net의 데모 또는 newcss.net/usage의 빠른 시작 안내서를 살펴보십시오. @ exampledev / new.css로 npm에 있습니다.
Vercel의 엄청나게 빠른 CDN은 xz / fonts를 사용하여 Inter 글꼴을 제공하므로 실제로 페이지에 부풀림이 추가되지 않습니다.
물론 어두운 모드가 있습니다. 브라우저의 환경 설정에 따라 명암 테마를 자동으로 적용합니다.
CSS 변수를 사용하여 사용자 정의 색상 테마 및 글꼴을 지원합니다. 예를 들어, 터미널 테마를 확인하십시오 : newcss.net/theme/terminal/
new.css는 xz의 프로젝트입니다.
용법
구성은 다음과 같습니다.
HTML
이 코드를 <head> 끝에 추가하십시오.
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
? new.css는 Inter 글꼴과 함께 사용하는 것이 가장 좋습니다. 위의 줄도 가져옵니다. 글꼴을 추가하지 않으려면 이 줄을 대신 사용하십시오.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
npm
또는 npm을 선호하는 경우 :
npm -i @exampledev/new.css
사용 사례
세부
요소 안내서
new.css의 시맨틱 HTML 기능 중 일부를 사용하는 방법
new.css가 브라우저의 기본 HTML에 추가 한 개선 사항은 다음과 같습니다.
테마
new.css는 10 색 팔레트를 사용하며 쉽게 사용자 지정할 수 있습니다. 이들은 : root 속성에서 CSS 변수로 선언됩니다.
커스터마이징
HTML에서 new.css 다음에 보조 스타일 시트를 로드하면 이러한 변수를 재정의 할 수 있습니다. 기본 테마는 다음과 같습니다.
@import url('https://fonts.xz.style/serve/inter.css'); :root { --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --nc-font-mono: 'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace; --nc-tx-1: #000000; --nc-tx-2: #1A1A1A; --nc-bg-1: #FFFFFF; --nc-bg-2: #F6F8FA; --nc-bg-3: #E5E7EB; --nc-lk-1: #0070F3; --nc-lk-2: #0366D6; --nc-lk-tx: #FFFFFF; --nc-ac-1: #79FFE1; --nc-ac-tx: #0C4047; }
Legend
--nc-font-sans: Font for all text besides code or preformatted--nc-font-mono: Font for <code>, <pre>, <kbd>, <samp>--nc-tx-1: Heading text color--nc-tx-2: Body text color--nc-bg-1: Base background color--nc-bg-2: Slightly darker background color--nc-bg-3: Even slightly darker background color--nc-lk-1: Action color for links and buttons--nc-lk-2: Link and buttons on mouse hover and active--nc-ac-1: Accent color for <mark> and text selection background용법
1. : root에 위 변수 중 일부 또는 전부를 포함하는 스타일 시트를 작성하십시오. 예제 파일은 boilerplate.css에 있습니다.
2. 사용자 정의 글꼴을 가져 오려면 @import 태그를 : root 요소 앞에 두십시오. xz / fonts에서 많은 오픈 소스 글꼴을 사용할 수 있습니다.
3. <head>에서 new.css 다음에 새 스타일 시트를 참조하십시오. 다음은 <head>의 예입니다.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.3/new.min.css">"> <link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css"> </head>
사전 제작 테마
다음은 CDN 링크가 있는 두 가지 추가 테마입니다. 자유롭게 사용하거나 편집하십시오!
Night
<link rel="stylesheet" href="https://newcss.net/theme/night.css">
newcss.net/theme/night/에서 미리보기
Terminal
<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
newcss.net/theme/terminal/에서 미리보기
등록된 댓글이 없습니다.
