About Lens

Lens provides developers tools to build a modular and scalable front-end. Our goal is to write as little CSS as possible and reuse code as much as possible.

Consider reading Introduction to Lens and design systems.

Communication with designers

Lens bridges design and development by providing both the same components and styles. Design handoff becomes a conversation about what predefined patterns to use. Naming for components, styles and measurements is shared as well, so we can express decisions with a shared language, like for example: "Let's use ~~16px~~ space-medium".

Using components

Explore

Components list.

Import

Import single or multiple components:

// single
import { Button } from '@loomhq/lens'
// multiple
import { Button, Checkbox, Text } from '@loomhq/lens'

Usage

const MyComponent = () => (
  <>
    <Text>Text</Text>
    <Checkbox />
    <Button>Button</Button>
  </>
)

Using CSS utility classes

Lens offers atomic CSS classes (or functional CSS), to give developers granular styling options. Each atomic CSS class contains a single declaration (except for few cases). Mixing these classes makes it easy to use Lens styles without writing custom CSS.

An example of an atomic CSS class:

// input class
pr:medium
// output declaration
padding-right: var(--lns-space-medium);

Explore

CSS utilities documentation.

Usage

<div className="p:medium mr:medium shadow:large">content</div>

Examples

See examples.

Using CSS variables

Explore

CSS variables documentation.

Usage

.myClass {
  font-size: var(--lns-fontSize-medium);
  line-height: var(--lns-lineHeight-medium);
  box-shadow: var(--lns-shadow-medium);
  padding: var(--lns-space-large);
  color: var(--lns-color-primary);
}

Installation

If you need to install Lens on a new project follow the Installation guidelines on GitHub readme.