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.

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`.

Necessary for shared component utils and mixins

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.
  1. Checkout new branch of develop, name the new version
  2. Update the package.json version
  3. Update the quick start docs to the updated cdn url
    • https://mule.c0sm0s.net/lobster/[version]/build/lobster.esm.js
  4. Update CHANGELOG.md
  5. Commit changes
  6. Push the branch and merge to develop, then master
  7. Create a new tag from master named for the version
  8. Run `npm publish`
  1. Open components.json
  2. Add your component to the json. If you use vscode, it is helpful to install the zeplin extension.
  3. From the terminal, run 'zeplin connect' and enter your credentials.
  4. In Zeplin, verify all the appropriate artboards are linking to the repo and respective demo.