core css

CSS-CSS

Una colección de hojas de estilo que permiten un estilo rápido y fácil con personalización

---

Enlaces útiles

• Descripción general
• Ejemplo
• Código de conducta
• Que contribuye
• Asuntos
• Propiedades personalizadas de CSS

Descripción general

A diferencia de muchas bibliotecas CSS, esta tiene el objetivo de permitir la personalización y las características avanzadas utilizando las sorprendentes características del CSS moderno. Simplemente cambiar una o dos --custom-property o dos puede cambiar completamente el tema de un sitio y, dado que este es CSS nativo, puede editarlos en su navegador y ver los resultados en vivo.

Para obtener los mejores resultados, a saber, en producción, debe transpionar su CSS usando PostCSS utilizando:

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

Está destinado a usarse con shgysk8zer0/fuentes, pero eso es completamente opcional. Simplemente no use fonts.css y use cualquier hoja de estilo de fuente que desee.

Ejemplo

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