define skins

This commit is contained in:
Matthew Hodgson 2015-07-07 18:04:31 +01:00
parent 15c93b61aa
commit df4c5c588a

View file

@ -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...