Styled CSS Base

Lightweight basic CSS style sheets.

If you get tired of setting up a comprehensive styling scaffold, you may try returning back to this primitive styling ways.

🍀 Presets

• Simple Style Light theme

  
  
• Simple Style Dark theme

  
  

👇 Usages

Copying to your project

See the releases.

Using with application bundler

🧩 Installation

yarn add styled-css-base (or npm/pnpm)

import 'styled-css-base/presets/simple/index.css';

@import "styled-css-base/presets/simple/index.css";

Using CDN link

<link rel="stylesheet" href="https://unpkg.com/styled-css-base/presets/simple/index.css">

import 'https://unpkg.com/styled-css-base/presets/simple/index.css'

@import "https://unpkg.com/styled-css-base/presets/simple/index.css"

Switch theme

Add HTML attributes [data-prefers-color-scheme-auto], [data-prefers-color-scheme-light], [data-prefers-color-scheme-dark] to themify its children elements.

<div [data-prefers-color-scheme-auto]>
    <button>Ok</button>
    <button>Cancel</button>
</div>

• [data-prefers-color-scheme-auto]: switch theme by user's system preference.
• [data-prefers-color-scheme-light]: force using light theme.
• [data-prefers-color-scheme-dark]: force using dark theme.

Considering these styles only use the CSS tag selectors, if you care about isolating them from other page's stylesheets, it's recommended to use the CSS preprocessors or the shadow DOM.

Using with CSS preprocessors

The CSS Descendant combinator can scope our styles and we recommend nesting the styled-css-base by these common CSS preprocessors:

scss:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

less:

.showcase {
  @import "styled-css-base/presets/simple/index";
}

or:

.showcase {
  @import (less) "styled-css-base/presets/simple/index.css";
}

stylus:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

Using with Shadow DOM

Style Encapsulation is the built-in feature of Shadow DOM.

// Apply external styles to the Shadow DOM
const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://unpkg.com/styled-css-base/presets/simple/index.css');

// Attach the created element to the Shadow DOM
shadow.appendChild(linkElem);