lll-design

@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