npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@limetech/lime-elements

v37.70.1

Published

Lime Elements

Downloads

10,706

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

flippareflipparecybercapcybercapspecularrainspecularrainanderssonjohananderssonjohan

Keywords

lime elementslime crmmaterial designcomponent libraryweb components

Readme

Lime Elements

In the ever-evolving landscape of web-applications, streamlining the creation of user interfaces (UIs) has become paramount. This is where web-component libraries and design systems come into play, offering a powerful combination to accelerate development, enhance consistency, and foster collaboration among developers.

Web-component libraries and design systems are crucial in the rapidly evolving web-applications landscape, accelerating development, enhancing consistency, and promoting collaboration.

Sponsored by Lime Technologies, Lime Elements is an open-source component library and a design system. It provides a high-quality set of well-designed, well-documented UI components, crafted in Stencil for enterprise-level products.

Our top developers and designers continuously improve Lime Elements, fixing bugs and adding new features. It serves as Lime Technologies' central repository for UI guidelines, standards, and components, ensuring a consistent brand experience across all our applications. Lime Elements standardizes colors, typography, layouts, and interactions for a cohesive, accessible user experience.

We invite you to leverage our web-component library and design system. It can streamline development, enhance consistency, ease collaboration, and deliver exceptional user experiences. Lime Elements can be instrumental in creating modern, scalable, and accessible web applications that resonate with users worldwide.

For a full list of components, along with live examples, please visit the documentation.

Version semantic-release

Getting Started

  • To install, run npm install @limetech/lime-elements.

Requirements

1. Font

To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack. As web components typically inherit font-related styles such as font-family, font-size, and color, we recommend defining these styles at a higher level, such as the <body> element. This is because we do not specify these defaults on each individual component.

To maintain consistency with the look & feel demonstrated in this documentation, we suggest incorporating the following styles into your project:

font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
color: rgb(var(--contrast-1500));

💡 About the color specified above, read more on our color system.

Feel free to customize the font-family and related styles to suit your project's needs. For example, you might prefer a different typeface like below:

font-family: 'Roboto', Arial, Verdana, sans-serif;

2. Icons

At Lime, we utilize the Windows 10 icon set from Icons8. You may notice these icons in our components, such as the magnifying glass icon displayed as a leading icon on an input field.

If you're using Lime Elements in a non-Lime product, you'll need to provide your own icons. We're unable to redistribute Icons8's assets with our package due to licensing restrictions.

Providing your own icons is crucial as many of our components use an Icon interface. This interface allows you to specify an icon name, which corresponds to the filename of an SVG icon. For example, you can use this to display an icon on a button.

How to Set Up Your Icons Folder

  • For Lime products:

    To use @lundalogik/lime-icons8, the /assets folder from @lundalogik/lime-icons8 must be made available on the web-server.

  • For non-Lime products:

    To use a different icon set, the icons must be placed in a folder structure that looks like this: assets/icons/<name-of-icon>.svg

    If assets is placed in the root, no other setup is needed. The icons will be fetched with a relative URL from /assets/icons/<name-of-icon>.svg.

    If assets is placed in a sub-folder somewhere, the easiest way to make the icons available is to use the HTML base element:

    <base href="/my/parent/path/" />

    If this is not enough, or if the base element is already in use for something else, a global icon path can be configured with the limel-config element:

    <limel-config config={{iconPath: '/my/parent/path/'}} />

Using @beta components

Components marked as @beta are not yet stable. Here's what you need to know:

  1. Breaking changes: We may change @beta components in ways that break your code. We won't increase the major version number when we do this.
  2. Unstable: @beta components may have more bugs than other components. Use them at your own risk.
  3. Feedback wanted: We offer @beta components to get your input. Your feedback helps us improve them.

Remember: All components can change, but @beta components change more often and without warning.

Getting help

  • If you have a general question, or are in need of support, please open a Question issue on GitHub.

Contributing

  • To build and run the documentation locally on your machine, run npm start.
  • To see what other scripts are available, run npm run.
  • Please read our guidelines for contributers