lib/sugar-web/graphics/README.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Sugar Graphics
==============

Sugar widgets and graphics, implementing the [Sugar Interface
Guidelines](http://wiki.sugarlabs.org/go/Human_Interface_Guidelines).

Modifying the CSS
-----------------

We use [LESS](http://lesscss.org) and then compile the CSS.  This is
to be able to use calculations and variables for colors and measures.
And to be able to output different CSS files for different screen
resolutions, which is planned.

To compile the CSS do:

    lessc graphics/css/sugar.less graphics/css/sugar.css

Be sure to compile it before commit.

The grid helper
---------------

The grid is a visual debug tool that allows you to check if the
elements have the correct size. To activate the grid, open the
inspector console and paste the following.

If RequireJS is not in the page head (ie. in the sugar-web-samples),
load it:

    var script = document.createElement('script');
    script.src = 'lib/require.js';
    document.head.appendChild(script);

    requirejs.config({ baseUrl: "lib" });

Then do:

    require(["sugar-web/graphics/grid"], function (grid) { grid.addGrid(11) });