Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-css-base) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

👇 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);