ug-lobster v0.1.30

Lobster

Lobster is a collection of editor and UI components powered by Stencil.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Running Lobster Locally

and run:

npm install
npm start

# Your app will run at http://localhost:3000

To build the component for production, run:

npm run build

To run the unit and e2e tests for the components, run:

npm test

To prevent build error 'ts(2428)' related to testing, run:

npm run patch

Need help? Check out our docs here.

Using Lobster Externally

Including JS

Include both script tags in the head of your index.html

<script type="module" src="https://mule.c0sm0s.net/lobster/0.1.3/build/lobster.esm.js"></script>
<script nomodule src="https://mule.c0sm0s.net/lobster/0.1.3/build/lobster.js"></script>

Then you can use the components anywhere in your template, JSX, html etc

Setup Styles

The component javascript includes only as much styles as necessary to make components functional. Lobster is setup to allow for minimal customization for a plug-and-play use case, total customization on a pick and choose basis, or a combination of both.

Install via npm

npm i @hlk/lobster --save

Optional Custom Variables

When using default lobster styles, you can still access variables to override such as colors and font families and, through these means, make small customizations to the default lobster styles.

Variables must be declared before including the default variables file. If you override variables, they will not have affect without also including the default component css, which consumes them.

Available variables can be found in /node_modules/@hlk/lobster/lobster-global-theme/_variables.scss.

// variables I want to customize
$primary-color: hotpink;

// default variables
@import "../node_modules/@hlk/lobster/lobster-global-theme/variables";

Required Utils & Mixins

Needed for shared component utils and mixins

@import "../node_modules/@hlk/lobster/lobster-global-theme/mixins";
@import "../node_modules/@hlk/lobster/lobster-global-theme/utility";

Optional Default Theme

Include individual components if you have defined variables or would like to inherit default styles. Do not include these if you would like to roll your own styles beyond what is achievable via variables.

@import "../node_modules/@hlk/lobster/lobster-global-theme/components/lobster-modal-header";

Example Stylesheet:

// define your custom variables (optional)
$primary-color: hotpink;

// add default variables (required)
@import "../node_modules/@hlk/lobster/lobster-global-theme/variables";

// globally used (required)
@import "../node_modules/@hlk/lobster/lobster-global-theme/mixins";
@import "../node_modules/@hlk/lobster/lobster-global-theme/utility";

// include individual components or write your own css (optional)
@import "../node_modules/@hlk/lobster/lobster-global-theme/components/lobster-modal-header";
@import "../node_modules/@hlk/lobster/lobster-global-theme/components/lobster-layout";
@import "../node_modules/@hlk/lobster/lobster-global-theme/components/lobster-badge";
@import "../node_modules/@hlk/lobster/lobster-global-theme/components/lobster-icon";

lobster-button { // my custom button styles }