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"
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);
5 Jul 10, 2022
24 Jun 9, 2022
6 Jul 28, 2022
17 Dec 12, 2022
1 Dec 19, 2021
10 Oct 3, 2022
6 Dec 20, 2022
4 Jun 11, 2022
2 Sep 13, 2022
1 Dec 22, 2021