mirror of
https://github.com/element-hq/element-web
synced 2024-11-26 11:15:53 +03:00
define skins
This commit is contained in:
parent
15c93b61aa
commit
df4c5c588a
1 changed files with 9 additions and 2 deletions
11
README.md
11
README.md
|
@ -49,7 +49,7 @@ classes provided in the base skin, as well as entirely replacing components as
|
||||||
required.
|
required.
|
||||||
|
|
||||||
The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
|
The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
|
||||||
encourage a very modular and reusable architecture, making it as easy to
|
encourage a very modular and reusable architecture, making it easy to
|
||||||
customise and use UI widgets independently of the rest of the SDK and your app.
|
customise and use UI widgets independently of the rest of the SDK and your app.
|
||||||
In practice this means:
|
In practice this means:
|
||||||
|
|
||||||
|
@ -70,6 +70,13 @@ In practice this means:
|
||||||
style organisms into a well-defined global look and feel
|
style organisms into a well-defined global look and feel
|
||||||
* pages: specific instances of templates.
|
* pages: specific instances of templates.
|
||||||
|
|
||||||
|
* "Skins" refer to a suite of components (views and css) which define the look
|
||||||
|
and feel of the Matrix UI used in the target app. We provide a 'base' skin
|
||||||
|
in skins/base which provides generic plain UI for typical chat functions.
|
||||||
|
To change the look and feel to embed the SDK into your own app, users can
|
||||||
|
define a new skin which inherits from the base one, or override components
|
||||||
|
in the app itself. TODO: spell out how.
|
||||||
|
|
||||||
Good separation between the components is maintained by adopting various best
|
Good separation between the components is maintained by adopting various best
|
||||||
practices that anyone working with the SDK needs to be be aware of and uphold:
|
practices that anyone working with the SDK needs to be be aware of and uphold:
|
||||||
|
|
||||||
|
@ -121,4 +128,4 @@ In practice this means:
|
||||||
|
|
||||||
With all this in mind, here's how you go about skinning the react SDK UI
|
With all this in mind, here's how you go about skinning the react SDK UI
|
||||||
components to embed a Matrix client into your app: TODO. For now, check out
|
components to embed a Matrix client into your app: TODO. For now, check out
|
||||||
the examples and work it out for yourself...
|
the examples and work it out for yourself...
|
||||||
|
|
Loading…
Reference in a new issue