Module UI Design

[Temisola1]

How can I go about designing the UI for my module. Is there any site I can use as a playground to design the UI?

Thanks,

[sdetweil]

@Temisola1 nothing MM specific…

just design your page like always… understanding that your ‘body’ content should be as specific as possible…

a table, or some such, small, say 1/4 page width or smaller… my charts are 400x400 pixels on a 1920/1280 display.
…the head, and body tags themselves are supplied my MM…

look at the MM index.html
each ‘position’: value matches with one of those areas… modules are placed from config.js, top to bottom, fifo.
second module is pushed down by 1st in that same area…screen is clipped at the edges (main.css, body overflow:hidden)

[Temisola1]

@sdetweil said in Module UI Design:

n

Okay, so I I have to create another html tag or will it inherit the master?

[sdetweil]

@Temisola1 what do you mean inherit the master?
you don’t need to create any new tags…

(the forum doesn’t like < , so I will skip it for this discussion)

head
fddfd
/head
body
div
p>some text
table
tr
td
td
td
/tr
/div

the part that starts with div, thru end div, you can insert into the wrapper div innerHtml

head and body are controlled by MM

there are default classes in ~/MagicMirror/css/main.css
you can add more by adding them to ~/MagicMirror/css/custom.css

you can also have a css file local to the module folder, and include it with the getStyles() method response
(and those can be overridden in the custom.css)

Give it a try, you’ll get it pretty quick