@penn-libraries/web
v0.1.1
Published
University of Pennsylvania Libraries web components and assets.
Downloads
122
Readme
@penn-libraries/web
Reusable web designs for University of Pennsylvania Libraries websites. This repo contains our code for shared Web Components and Cascading Style Sheets (CSS).
Get started
You can start using the components immediately by adding these tags to the <head>
:
<link href="https://cdn.jsdelivr.net/npm/@penn-libraries/web/dist/web/web.css" rel="stylesheet"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@penn-libraries/web/dist/web/web.esm.js"></script>
Once included, components can be used in your markup like any other regular HTML elements:
HTML
<pennlibs-header service-name="<service name>" service-lede="<service lede>">
<a href="/#">About</a>
<a href="/help">Help</a>
</pennlibs-header>
What's a web component?
Web components are evolving web platform technologies. They allow us to create custom reusable HTML elements that use standard web technologies (HTML, CSS, and JavaScript). We use the term “web component” for both the platform and the custom element we’ve created. The end result is a custom element that you can drop into your websites and applications with no additional coding or styling required.
Development
To start building a new web component using Stencil, clone this repo to a new directory and run:
npm install
To start the local development server
npm start
What's Stencil?
Stencil is a compiler for building fast web apps using Web Components. Stencil components are just Web Components, so they work in any major framework or with no framework at all.