core css

Core-CSS

사용자 정의로 빠르고 쉬운 스타일링을 가능하게하는 스타일 시트 모음

---

유용한 링크

• 개요
• 예
• 행동 강령
• 기여
• 문제
• CSS 사용자 정의 속성

개요

많은 CSS 라이브러리와 달리,이 라이브러리는 현대 CSS의 놀라운 기능을 활용하여 사용자 정의 및 고급 기능을 허용하는 목표를 가지고 있습니다. --custom-property 변경하면 사이트의 테마를 완전히 변경할 수 있으며, 이는 기본 CSS이므로 브라우저에서이를 편집하고 결과를 실시간으로 볼 수 있습니다.

생산에서 최상의 결과를 얻으려면 다음을 사용하여 PostCS를 사용하여 CSS를 트랜스 파일해야합니다.

• cssnano
• cssnano-preset-default
• postcss
• postcss-cli
• postcss-import
• postcss-preset-env
• postcss-url

SHGYSK8ZER0/FONTS와 함께 사용하기위한 것이지만 완전히 선택 사항입니다. fonts.css 사용하지 말고 대신 원하는 글꼴 스타일 시트를 사용하십시오.

예

 @import url ( "./viewport.css" );
@import url ( "./rem.css" );
@import url ( "./fonts.css" );
@import url ( "./animations.css" );
@import url ( "./element.css" );
@import url ( "./class-rules.css" );
@import url ( "./jekyll-highlight.css" );

: root {
  /*================= Font Size and loading =================*/
  --desktop-rem : 1.3 vw ;
  --tablet-rem : 1.5 vw ;
  --mobile-rem : 3.3 vw ;
  --main-font : "Roboto" ;
  --title-font : "Ubuntu" ;
  --header-font : "Alice" ;
  --article-font : "Ubuntu" ;
  --article-header-font : var ( --header-font );
  --font-display : optional;

  /*================= Set color vars here =================*/
  --default-color : # 010101 ;
  --alt-color : # FAFAFA ;
  --primary-color : # E0E0E0 ;
  --link-color : var ( --accent-color );
  --accent-color : # 135f9d ;
  --accent-color-2 : # 0d4a7c ;
  --border-color : # 2D2D2D ;

  /*================= Button styles and config =================*/
  --button-background : var ( --accent-color );
  --button-active-background : var ( --accent-color-2 );
  --button-disabled-background : var ( --button-active-background );
  --button-border : border;
  --button-disabled-border : var ( --button-border );
  --button-active-border : var ( --button-disabled-border );
  --button-color : var ( --alt-color );
  --button-active-color : var ( --button-color );
  --button-border-radius : 4 px ;
  --button-accept-background : # 1e8709 ;
  --button-reject-background : # b41e1e ;

  /*================== Animation properties ==================*/
  --animation-stagger : 150 ms ;

  /* ================= Syntax Highlighting ====================*/
  --highlight-color : black;
  --highlight-background : # efefef ;
  --highlight-literal-number-color : # CCA418 ;
}

 < body class =" border-box scroll-smooth " >
  <!-- ... -->
  < dialog class =" animation-speed-normal animation-ease-in fade-in font-main " >
     < header class =" clearfix sticky top background-primary " >
      < button type =" button " class =" background-accent color-alt float-right " >
        < svg class =" current-color icon " >
          < use xlink:href =" #close " />
        </ svg >
      </ button >
    </ header >
    < div class =" card shadow " >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ div >