@lll/design

This is part of the @lll/core. See https://github.com/Lululemon/lll-core for more details.

Overview

A way for design team to stay in sync with base/univerisal styles. This contains a design.sketch with mininal pages that contain univerisal styles like colors, typographies, and more.

Design Team Prerequisites: The Github GUI plugin for Sketch.

This does not require any programing skills just an understand of how to save versions and branch corrrectly via the Github GUI.

Inside @lll/design/

Files | Details | :---:| --- .github | Containes Github Actions src | Files not shared when published to npm. package | Files shared when published to npm.

Inside @lll/design/src

Files | Details | :---:| --- design.sketch | Sketch file contain the following pages:colors (The file structure convention is important for the src/index.js) src/index.js | Reads the design.sketch and converts it to json. Uses helper function then writes parsed out .json files to disk, thus updating the @lll/design package. src/helpers/*.js | Helper functions. The helper name (i.e. src/helpers/[name].js) should match desired outputed .json file name (i.e @lll/design/[name].json)

The design.sketch is only for the design team to stay in sync with eachother. This does not require any programing skills as there is a Github GUI plugin for sketch to publish updates to.

An example of the use case of src/helpers/[name].js files are as follows: Assume the following src/helpers/color.js. This would be a helper function to parse out the colors from provided from src/index.js and publishes a file at src/design/colors.json that the @lll/styleswould use.

package/

output deployed to npm.

Files | Details | :---:| --- package/ |
colors.json | Styles that @lll/styleswould use.

Resources:

Also see ROADMAP.md Also see CONTRIBUTING.md