From 270e446e5e52a73f2e1d1cc519cf28472a9963c8 Mon Sep 17 00:00:00 2001 From: Rob Levin Date: Wed, 23 Sep 2020 06:42:57 -0700 Subject: [PATCH] readme synchronization verbiage is hard to get right --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index aa31bfba7..e1171d1e1 100644 --- a/README.md +++ b/README.md @@ -41,9 +41,13 @@ AgnosticUI takes an HTML/CSS first approach to UI component primitives, but atte ``` So, the styles for each framework are driven from the CSS package's component CSS files, where we've tried to ensure that the core component works well standalone. For example, if you run `yarn storybook` from within the React package, we will first run a script -that copies the CSS package's component CSS files over into the corresponding React framework ones. Let's take the button component at: `agnosticui-css/button.css`. This file is literally copied over into React's: `agnosticui-react/src/stories/button.css` when we “sync styles” For Vue's Button component, a similar thing happens—that same top-level button CSS file is copied over into `agnosticui-vue/src/stories/Button.vue`, but this time within it's `` tags (this is one way to use CSS Modules in Vue). +that copies the CSS package's component CSS files over into the corresponding React framework ones. -The main idea here, is that all framework styles are synchronized with the top-level CSS package's styles before you're even allowed to fire up Storybook to view the rendered components. Essentially, this ensures synchronization of component primitive styles across frameworks. +Let's take the button component that lives in the CSS package at: `agnosticui-css/button.css`. Anytime we run `yarn storybook` within the React package, the `button.css` file is literally copied over into React's: `agnosticui-react/src/stories/button.css`. This “syncing of styles” ensures that we don't inadvertently diverge from the CSS package. + +Similarly, for Vue's Button component, that same top-level `button.css` file is copied over into `agnosticui-vue/src/stories/Button.vue`, but, this time within it's `` tags. + +The main idea here, is that all framework styles are synchronized with the top-level CSS package's styles before you're even allowed to fire up Storybook to view the rendered components. Essentially, this ensures synchronization of component primitive styles across framework implementations. ## Usage