Installation
Install using a CDN
<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-block.js" integrity="sha384-oLp3ANpEh8l7QFa7niYEAhVcDMzyFCDiXx/CKeEQuIooSKzW/wc/Gk9KB3kdlrX7" crossorigin="anonymous" defer></script>
Install using npm
The package is steam-block on npm.
npm install steam-block
// Optional, must come first: import 'steam-block/dist/steam-emerge.js'
import 'steam-block/dist/steam-block.js'
Either way, there’s nothing to compile or configure for steam-block itself. No framework, no CSS file to import. With npm, your existing bundler picks it up like any other import. All layout CSS is generated by the component itself into its Shadow DOM at runtime, scoped to each <steam-block>instance.
A future major release can change existing attribute or CSS variable behavior. Each release’s hash is recorded in the changelog.
Optional: scroll reveal
If you also want scroll triggered reveal animations (see Helpers), load steam-emerge.js before steam-block.js, both as plain deferred scripts:
<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-block.js" integrity="sha384-oLp3ANpEh8l7QFa7niYEAhVcDMzyFCDiXx/CKeEQuIooSKzW/wc/Gk9KB3kdlrX7" crossorigin="anonymous" defer></script>
Browser support
steam-block relies on native Custom Elements v1 and Shadow DOM, supported by all current versions of Chrome, Firefox, Safari and Edge. Older browsers without native support require a Custom Elements polyfill.