prepare for merging doc into mono-repository

docs/source/development/user-interface/css-classes.rst

@@ -0,0 +1,77 @@
+.. Copyright (C)  2016 Champs Libres Cooperative SCRLFS
+   Permission is granted to copy, distribute and/or modify this document
+   under the terms of the GNU Free Documentation License, Version 1.3
+   or any later version published by the Free Software Foundation;
+   with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+   A copy of the license is included in the section entitled "GNU
+   Free Documentation License".
+
+
+CSS classes and mixins
+######################
+
+The stylesheet are based on the framework `ScratchCSS <https://github.com/Champs-Libres/ScratchCSS>`_. 
+
+We added some useful classes and mixins for the Chill usage.
+
+CSS Classes
+************
+
+
+Statement "empty data"
+======================
+
+CSS Selector
+   :code:`.chill-no-data-statement`
+In which case will you use this selector ?
+   When a list is empty, and a message fill the list to inform that the data is empty
+Example usage
+   .. code-block:: html+jinja
+      
+      <span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
+
+
+Quotation of user text
+=======================
+
+CSS Selector
+   :code:`blockquote.chill-user-quote`
+In which case will you use this selector ?
+   When you quote text that were filled by the user in a form.
+Example usage
+   .. code-block:: html+jinja
+
+      <blockquote class="chill-user-quote">{{ entity.remark|nl2br }}</blockquote>
+
+Boxes
+=====
+
+CSS Selector
+   :code:`chill__box`
+In which case will you use this selector ?
+   When displaying some data in a nice box
+Example usage
+   .. code-block:: html+twig
+
+      <span class="chill__box green">A nice box with green background</span>
+      <span class="chill__box red">A nice box with red background</span>
+
+
+
+Mixins
+******
+
+
+Entity decorator
+=================
+
+Mixin
+   :code:`@mixin entity($background-color, $color: white)`
+In which case including this mixin ?
+   When you create a `sticker`, a sort of label to represent a text in a way that the user can associate immediatly with a certain type of class / entity.
+Example usage
+   .. code-block:: sass
+
+      span.entity.entity-activity.activity-reason {
+          @include entity($chill-pink, white);
+      }