Mercurial > libervia-web

comparison doc/web_framework/css_framework.rst @ 1170:4648a333b33f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
doc: use "sourcecode" directive instead of "code" + small mistakes fixes: RST "code" directive is not always working well with "jinja" code. It has been replaced with sphinx specific "sourcecode" (alias of "code-block", nicer to read in not formatted doc) which is working better.
author Goffi <goffi@goffi.org>
date Fri, 12 Apr 2019 14:12:53 +0200
parents 28789926852a
children
comparison
equal deleted inserted replaced
1169:97e850e6fae9 1170:4648a333b33f
1 Libervia CSS Framework 1 Libervia CSS Framework
2 ====================== 2 ======================
3 3
4 4
5 Libervia come with generic CSS styling which is thought to be re-usable. If you create a new theme/site, you don't have to use it and can use something totally different, but building on top of Libervia CSS make theming more easy and consistent as you can re-use existant components without changing the classes. 5 Libervia comes with generic CSS styling which is thought to be re-usable. If you create a new theme/site, you don't have to use it and can use something totally different, but building on top of Libervia CSS make theming more easy and consistent as you can re-use existant components without changing the classes.
6 6
7 Bases 7 Bases
8 ----- 8 -----
9 All CSS files must be in the ``static`` directory of your theme. Following names are assumed to be in this directory. 9 All CSS files must be in the ``static`` directory of your theme. Following names are assumed to be in this directory.
10 10
32 Magic classes are classes which imply a modification of DOM when the page is loaded and Javascript is activated. 32 Magic classes are classes which imply a modification of DOM when the page is loaded and Javascript is activated.
33 The modification is done by a script launched by ``base/base.html``. 33 The modification is done by a script launched by ``base/base.html``.
34 There are only a few of them: 34 There are only a few of them:
35 35
36 box--expand 36 box--expand
37 When this class is applied, the box will be folded when is higher than 250px, and 2 "expand zone" (buttons) 37 When this class is applied, the box will be folded when higher than 250px, and 2 "expand zone" (buttons)
38 will be added on top and bottom of the box to expand/reduce it. 38 will be added on top and bottom of the box to expand/reduce it.
39 39
40 state_init 40 state_init
41 This is linked to state system (see below). When applied, the element will keep the ``state_init`` class until 41 This is linked to state system (see below). When applied, the element will keep the ``state_init`` class until
42 clicked for the first time, then it will apply other magic classes effects if suitable. 42 clicked for the first time, then it will apply other magic classes effects if suitable.
56 56
57 show_if_init 57 show_if_init
58 Display this class only if in ``state_init``. 58 Display this class only if in ``state_init``.
59 59
60 show_if_parent_clicked 60 show_if_parent_clicked
61 display this class only if **parent** is in ``state_clicked`` 61 display this class only if **parent** is in ``state_clicked``
62 62
63 show_if_parent_not_clicked 63 show_if_parent_not_clicked
64 display this class only if **parent** is **not** in ``state_clicked`` 64 display this class only if **parent** is **not** in ``state_clicked``
65 65
66 show_if_grandparent_clicked 66 show_if_grandparent_clicked
67 display this class only if **grandparent** is in ``state_clicked`` 67 display this class only if **grandparent** is in ``state_clicked``
68 68
69 show_if_grandparent_not_clicked 69 show_if_grandparent_not_clicked
70 display this class only if **grandparent** is **not** in ``state_clicked`` 70 display this class only if **grandparent** is **not** in ``state_clicked``