core css

Core-CSS

คอลเลกชันของสไตล์ชีทที่เปิดใช้งานการจัดแต่งทรงผมที่รวดเร็วและง่ายดายด้วยการปรับแต่ง

---

ลิงค์ที่เป็นประโยชน์

• ภาพรวม
• ตัวอย่าง
• จรรยาบรรณ
• การบริจาค
• ปัญหา
• คุณสมบัติที่กำหนดเอง CSS

ภาพรวม

ซึ่งแตกต่างจากห้องสมุด CSS หลายแห่งนี้มีจุดประสงค์เพื่ออนุญาตให้มีการปรับแต่งและคุณสมบัติขั้นสูงโดยใช้คุณสมบัติที่น่าทึ่งของ CSS ที่ทันสมัย เพียงแค่การเปลี่ยน --custom-property หรือสองสามารถเปลี่ยนธีมของไซต์ได้อย่างสมบูรณ์และเนื่องจากนี่คือ CSS ดั้งเดิมคุณสามารถแก้ไขสิ่งเหล่านี้ ในเบราว์เซอร์ของคุณและดูผลลัพธ์สด

เพื่อผลลัพธ์ที่ดีที่สุดคือในการผลิตคุณควรถ่ายทอด CSS ของคุณโดยใช้ postcs โดยใช้:

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