Lightweight basic CSS style sheets.

  • By Zheeeng
  • Last update: Oct 21, 2022
  • Comments: 0

Styled CSS Base

NPM

publish workflow pages workflow npm version

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"

Considering these styles only use the CSS tag selectors, if you care about isolate them from other public styling, you may try 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);

Github

https://github.com/zheeeng/styled-css-base