@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