How to write and test CSS without going crazy..

cluelesscarter

Hey everyone,

first post here so apologies if I’ve got some etiquite wrong or not been able to find a previous post that covers this.

I’d like to get into customising the font, size etc. of my mirror and modules, but don’t know how to get a live ‘preview’ of the Mirror as I’m writing the code? I’ve recently learned CSS on Codepen, so I’m used to having the instant feedback…

Can i run a windowed version of MagicMirror and change the CSS file? Is this an awful idea?

Open to all suggestions!

M

sdetweil

@cluelesscarter not windowed, but you can minimize. alt, spacebar, n. same as on windows.

but, if u open the developers window ctrl-shift-i on the keyboard, and select the elements tab, u can edit the styles directly. and then you know what to.put in css/custom.css. then u can reload with ctrl-r or refresh in the developers pane

cluelesscarter

@sdetweil said in How to write and test CSS without going crazy..:

@cluelesscarter not windowed, but you can minimize. alt, spacebar, n. same as on windows.
but, if u open the developers window ctrl-shift-i on the keyboard, and select the elements tab, u can edit the styles directly. and then you know what to.put in css/custom.css. then u can reload with ctrl-r or refresh in the developer’s pane

Thanks man! I actually found creating a ‘clone’ mirror on my desktop and editing it using localhost within chrome was a lot quicker, if anyone wants to find out how see this guide https://forum.magicmirror.builders/topic/548/building-mirror-without-programing/2

sdetweil

@cluelesscarter can u describe that again.

clone mirror on your desktop?

if u have the config set to

address:"0.0.0.0",
ipWhitelist:[],

then u can open your PC browser on the pi mm site http://pi_ip:8080

if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows.

so u can run mm on pi, view and edit styles on chrome/Firefox on PC, edit pi custom.css directly from PC, over ssh ( I use notepad++ as my PC editor), save custom.css, then refresh browser page to see new styles applied via custom.css

all with only one copy of MagicMirror installed.

cluelesscarter

@sdetweil said in How to write and test CSS without going crazy..:

so u can run mm on pi, view and edit styles on chrome/Firefox on PC, edit pi custom.css directly from PC, over ssh ( I use notepad++ as my PC editor), save custom.css, then refresh browser page to see new styles applied via custom.css
all with only one copy of MagicMirror installed.

Nice! I hadn’t figured out how to edit the rpi files directly from PC without using VNC, which effectively means you are still using the pi… Thanks!

By ‘clone’, i meant there were effectively two completely seperate versions of the MM running…

cluelesscarter

@sdetweil said in How to write and test CSS without going crazy..:

if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows

If anyone is looking at this issue in the future and trying to do this on Mac see here: https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md