core css

Core-CSS

Eine Sammlung von Stylesheets, die ein schnelles und einfaches Styling mit Anpassung ermöglichen

---

Hilfreiche Links

• Überblick
• Beispiel
• Verhaltenskodex
• Beitragen
• Probleme
• CSS Customeigenschaften

Überblick

Im Gegensatz zu vielen CSS -Bibliotheken hat dieses Ziel, Anpassungen und fortschrittliche Funktionen zu ermöglichen, indem die erstaunlichen Funktionen moderner CSS verwendet werden. Wenn Sie nur ein oder zwei --custom-property ändern, können Sie das Thema einer Website vollständig ändern. Da es sich um native CSS handelt, können Sie diese in Ihrem Browser bearbeiten und die Ergebnisse live sehen.

Für die besten Ergebnisse, nämlich in der Produktion, sollten Sie Ihr CSS mit postcss mithilfe von:

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

Es soll mit shgysk8zer0/Schriftarten verwendet werden, aber das ist völlig optional. Verwenden Sie einfach keine fonts.css und verwenden Sie stattdessen die gewünschten Schriftart -Stylesheets.

Beispiel

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