MagicMirror² v2.7.0 is available! For more information about this release, check out this topic.

Magic Mirror Redesign WIP :D



  • This is how it currently looks

    0_1558561855468_v0.1.0.PNG

    This is what I’m planning for the eventual v1.0.0 release:

    0_1558561881000_v1.0.0-preview.png

    If you’re interested in how I did this, let me know. I dove pretty deep into the development. Here’s some not-so-apparent features I’ve added:

    • Refactored the Layout in main.css to use CSS Grid
      • This allows for a more flexible layout that’s easier to work with
    • Modified MMM-Wallpaper to load images from Pexels
    • Using two instances of MMM-Todoist to load my “Daily Highlight” for the day
    • After 6:00pm, changes the Daily Highlight to tomorrow’s highlight


  • @earlman HI! That looks fantastic, very nice work! Which calendar modul are you planning to use? I would love something like this - in weekly view. I would be greatful if you could point me in the right direction with this. Thanks for sharing!



  • @skibro hiyaa! This is the one I’ve used in the past. It has the best documentation and is the most stripped down, making it the easiest to style. Tons of config options, too.



  • @earlman Hiyaa! Thanks for your reply. I will try the linked module - I am quite new to js and css, would you mind to share some of your calendar related CSS? I am especially curious of the upper border styiling in the second image you posted. Thanks in advance, have a great day!



  • @skibro That’s actually just a mockup I made in Figma (a design tool). I haven’t built that into my mirror yet, by since you’re interested, I’ll move that up the priority list. I’ll post back here when I have something up on github.