core-css

A collection of stylesheets that enable quick and easy styling with customization

Helpful Links

Overview

Unlike many CSS libraries, this one has the aim of allowing customization and advanced features by utilizing the amazing features of modern CSS. Just changing a --custom-property or two can completely change the theme of a site and, since this is native CSS, you can edit these in your browser and see the results live.

For best results, namely in production, you should transpile your CSS using PostCSS using:

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

It is intended to be used with shgysk8zer0/fonts, but that is completely optional. Simply don't use fonts.css and use whatever font stylesheet(s) you want instead.

Example

@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.3vw;
  --tablet-rem: 1.5vw;
  --mobile-rem: 3.3vw;
  --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: 4px;
  --button-accept-background: #1e8709;
  --button-reject-background: #b41e1e;

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

  /* ================= 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>

Implement Custom Property registration

Is your feature request related to a problem? Please describe.
Invalid custom property values can mess things up, such as registering a full background when something is for use only as a color.

Describe the solution you'd like
There are two options: CSS's @property (not yet supported) and JS's CSS.registerProperty()

Describe alternatives you've considered
Not really any alternatives that aren't highly manual.

Additional context
Sample implementation (bugs with <button type="share-button"> for some reason):

`custom-properties.json`

[
  {
    "name": "--default-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#343434"
  }, {
    "name": "--primary-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#fafafa"
  }, {
    "name": "--accent-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4688f4"
  }, {
    "name": "--alt-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#fefefe"
  }, {
    "name": "--button-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4688f4"
  }, {
    "name": "--button-background",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4688f4"
  }, {
    "name": "--button-active-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4688f4"
  }, {
    "name": "--button-active-background",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#5c93ea"
  }, {
    "name": "--button-disabled-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4e4e4e"
  }, {
    "name": "--button-disabled-background",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#787878"
  }, {
    "name": "--button-padding",
    "syntax": "*",
    "inherits": true,
    "initialValue": "0.4rem"
  }, {
    "name": "--button-border-radius",
    "syntax": "<length>",
    "inherits": true,
    "initialValue": "8px"
  }, {
    "name": "--scrollbar-color",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#4688f4"
  }, {
    "name": "--scrollbar-track",
    "syntax": "<color>",
    "inherits": true,
    "initialValue": "#fafafa"
  }, {
    "name": "--desktop-rem",
    "syntax": "<length>",
    "inherits": true,
    "initialValue": "1.3vmax"
  }, {
    "name": "--tablet-rem",
    "syntax": "<length>",
    "inherits": true,
    "initialValue": "1.6vmax"
  }, {
    "name": "--mobile-rem",
    "syntax": "<length>",
    "inherits": true,
    "initialValue": "20px"
  }, {
    "name": "--main-font",
    "syntax": "<custom-ident>",
    "inherits": true,
    "initialValue": "sans-serif"
  }, {
    "name": "--title-font",
    "syntax": "<custom-ident>",
    "inherits": true,
    "initialValue": "serif"
  }, {
    "name": "--article-font",
    "syntax": "<custom-ident>",
    "inherits": true,
    "initialValue": "sans-serif"
  }
]

`index.js`

if (CSS.registerProperty instanceof Function) {
	fetch('/custom-properties.json').then(resp => resp.json()).then(rules => rules.forEach(({
		name,
		syntax = '*',
		inherits = false,
		initialValue = null,
	} = {}) => {
		console.info({name, syntax, inherits, initialValue});
		try {
			CSS.registerProperty({name, syntax, inherits, initialValue});
		} catch (err) {
			console.error(err);
		}
	})).catch(console.error);
}

shgysk8zer0 / core-css Goto Github PK

core-css's Introduction

core-css

Helpful Links

Overview

Example

core-css's People

Contributors

Stargazers

Watchers

Forkers

core-css's Issues

In theme/default/index.css

Steps to reproduce

Expected behavior

Actual behavior

Add more, and make generic.

custom-properties.json

index.js

Recommend Projects

Recommend Topics

Recommend Org

In `theme/default/index.css`

`custom-properties.json`

`index.js`