core css

Core-CSS

一系列样式表，可以通过自定义快速轻松地进行样式

---

有用的链接

• 概述
• 例子
• 行为守则
• 贡献
• 问题
• CSS自定义属性

概述

与许多CSS库不同，该图书馆的目的是利用现代CSS的惊人功能来允许定制和高级功能。只需更改一个或--custom-property或两个即可完全更改站点的主题，并且，由于这是本机CSS，您可以在浏览器中编辑这些主题，并将结果现场查看。

为了获得最佳效果，即生产，您应该使用以下方式使用PostCSS进行CSS的转换：

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

它旨在与Shgysk8zer0/字体一起使用，但这是完全可选的。简直不要使用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 >