Skip to content

Commit

Permalink
Reorder readme a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
roblevintennis committed Sep 23, 2020
1 parent 059bfaf commit 7b28df5
Showing 1 changed file with 18 additions and 17 deletions.
35 changes: 18 additions & 17 deletions README.md
Expand Up @@ -60,23 +60,6 @@ cd agnosticui
yarn install
```

### HTML/CSS

You should be able to simply double-click on `components/button.html` to preview locally in your browser.
Currently, this is just a proof of concept page with no fancy layout styles per se. But it does show:

- The raw Buttons are styled properly
- Proof of concept theme toggling -- you will see two buttons at the top of the page 'Fancy' and 'Original'.
If you open devtools and click between the two, you'll notice that the css custom properties and thus the button styles themselves are dynamically updated. This experiment hopefully shows how themable the components are:

```css
:root {
--agnosticui-btn-bgcolor: hotpink;
}
```

So, if you were to place this in your application's top-level stylesheet, it would "override" AgnosticUI's fallback default: `--agnosticui-default-btn-bgcolor`, and your default buttons would have a background of hotpink. Note, the only difference between the fallback and override variable names is the `-default-` part. That's the naming convention for all css custom properties in the framework.

### Frameworks

Again, the philosophy of AgnosticUI is to curate the top-level _component.html_ and _component.css_, and then to synchronize the css down into the framework-based variants. This is done via a simple Node script which literally copies the CSS over.
Expand Down Expand Up @@ -107,6 +90,24 @@ To see the React storybook imply do the following from top root directory:
yarn start:react
```

### HTML/CSS

You should be able to simply double-click on `components/button.html` to preview locally in your browser.
Currently, this is just a proof of concept page with no fancy layout styles per se. But it does show:

- The raw Buttons are styled properly
- Proof of concept theme toggling -- you will see two buttons at the top of the page 'Fancy' and 'Original'.
If you open devtools and click between the two, you'll notice that the css custom properties and thus the button styles themselves are dynamically updated. This experiment hopefully shows how themable the components are:

```css
:root {
--agnosticui-btn-bgcolor: hotpink;
}
```

So, if you were to place this in your application's top-level stylesheet, it would "override" AgnosticUI's fallback default: `--agnosticui-default-btn-bgcolor`, and your default buttons would have a background of hotpink. Note, the only difference between the fallback and override variable names is the `-default-` part. That's the naming convention for all css custom properties in the framework.


## Axioms

1. Use traditional CSS as much as possible -- preferably with no preprocessing
Expand Down

0 comments on commit 7b28df5

Please sign in to comment.