All Projects → lightspeed → Flame

lightspeed / Flame

Licence: other
Component library for building Lightspeed products

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Flame

visage
Visage design system
Stars: ✭ 12 (-81.54%)
Mutual labels:  emotion, css-in-js, design-system
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (+6284.62%)
Mutual labels:  design-system, emotion
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 346 (+432.31%)
Mutual labels:  css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+558.46%)
Mutual labels:  css-in-js, emotion
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+767.69%)
Mutual labels:  emotion, css-in-js
leafygreen-ui
LeafyGreen UI – LeafyGreen's React UI Kit
Stars: ✭ 112 (+72.31%)
Mutual labels:  emotion, design-system
Glaze
CSS-in-JS microlibrary for making design systems approachable with React
Stars: ✭ 410 (+530.77%)
Mutual labels:  design-system, css-in-js
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
Stars: ✭ 33 (-49.23%)
Mutual labels:  emotion, css-in-js
Facepaint
Responsive style values for css-in-js.
Stars: ✭ 523 (+704.62%)
Mutual labels:  css-in-js, emotion
Design System
Priceline.com Design System
Stars: ✭ 604 (+829.23%)
Mutual labels:  design-system, css-in-js
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+1070.77%)
Mutual labels:  css-in-js, emotion
stitchwind
A bridge between Tailwind and Stitches
Stars: ✭ 33 (-49.23%)
Mutual labels:  css-in-js, design-system
benefit
✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Stars: ✭ 51 (-21.54%)
Mutual labels:  emotion, css-in-js
satchel
The little bag of CSS-in-JS superpowers
Stars: ✭ 14 (-78.46%)
Mutual labels:  emotion, css-in-js
Basis
Basis Design System
Stars: ✭ 44 (-32.31%)
Mutual labels:  design-system, emotion
Twin.macro
🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+7803.08%)
Mutual labels:  css-in-js, emotion
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-20%)
Mutual labels:  emotion, css-in-js
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: ✭ 52 (-20%)
Mutual labels:  emotion, design-system
Design System Utils
👩‍🎨 Access your design tokens with ease
Stars: ✭ 465 (+615.38%)
Mutual labels:  css-in-js, emotion
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+10863.08%)
Mutual labels:  css-in-js, emotion

Lightspeed Flame

Component library for building Lightspeed products.


npm version GitHub Actions workflow status badge codecov

Storybook

For the deployed version of our development environment visit https://lightspeed-flame.netlify.com.

Playground

Fork this CodeSandbox and start playing around with components:

Edit Flame Sandbox

Installing

Install the package:

yarn add @lightspeed/flame

And its required peer dependencies:

yarn add [email protected]^16 [email protected]^16 @emotion/[email protected]^10 @emotion/[email protected]^10 [email protected]^10

Getting Started

Before being able to implement Flame in your application, there are a few steps to bootstrap the components properly. We also assume that your React application is using a bundler such as webpack.

Steps required:

  • Link fonts
  • Hook the theme provider
  • Load global styles
  • Import components via their namespace

Link fonts

There are two ways to load the proper fonts:

Add this <link> tag to your <head> to load the required fonts:

<link
  href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext"
  rel="stylesheet"
/>

Hook the theme provider, load global styles, and import components

In order to have the proper styling, it is necessary to load the theme object into the application.

To do so, wrap the <FlameTheme> provider on your app and add FlameGlobalStyles:

import React from 'react';
import { FlameTheme, FlameGlobalStyles } from '@lightspeed/flame/Core';
// Access components via their namespace
import { Button } from '@lightspeed/flame/Button';
import { Heading1, Text } from '@lightspeed/flame/Text';

// Within your root app component
class App extends React.Component {
  render() {
    return (
      <FlameTheme>
        {/* Wrapping `<div>` is necessary since `<FlameTheme>` is a Provider */}
        <div>
          {/* We set some global styles, like fonts and minimal resets */}
          <FlameGlobalStyles />

          {/* A Flame styled h1, paragraph, and button 🎉 */}
          <Heading1>My heading</Heading1>
          <Text as="p">Welcome to Flame</Text>
          <Button variant="primary" fill={true}>
            It's happening!
          </Button>
        </div>
      </FlameTheme>
    );
  }
}

Please note

If you have Emotion already installed and you would like to use the theme values provided from Flame, you will still need to wrap your application with an Emotion <ThemeProvider /> and pass in the theme object.

import React from 'react';
import { FlameTheme, lightTheme } from '@lightspeed/flame/Core';
import { ThemeProvider } from 'emotion-theming';

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={lightTheme}>
        <FlameTheme>
          <div>{/* ... */}</div>
        </FlameTheme>
      </ThemeProvider>
    );
  }
}

This is intentional since we do not want changes on FlameTheme to potentially affect your underlying components, as you might already have custom theme values being added.

Testing your app with Flame components

It's important to wrap your tests with the appropriate theme provider. This is because some flame components requires theme values to be passed in order to compute new color values.

Before rendering your component inside of your tests, ensure you wrap it up with FlameTheme.

For example:

describe('Some component', () => {
  it('renders', () => {
    const component = someTestRenderFunction(
      <FlameTheme>
        <Button />
      </FlameTheme>,
    );
  });
});

Getting started with server-side rendering (SSR)

Flame supports SSR out of the box without any additional configuration needed.

Since Flame uses the latest @emotion package, when loading components on the server, components will automatically have their styles extracted without any required setup.

Styled System props

Many of flame components have been augmented with Styled System props.

<Alert mb={3}>
  This Alert will now have a margin bottom (mb) of 1.125rem. That value corresponds to the 3rd
  spacing value of the design system.
</Alert>

These props are essentially a way to quickly customize various css properties of a component without the need of writing a custom css class or component. These props are automatically attached to the values of the design system, so long as the application was properly wrapped with the <FlameTheme> component.

Please consult the packages READMEs for a list of all activated props:

Contributing

See the contributing guidelines.

Licenses

The source code is licensed with a custom license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].