New to the community? Start here

Why px unit instead of em is used in Upfront themes' CSS?

In Upfront theme’s CSS mostly px is used as unit. Why not “em”? This is especially important for paddings and mobile views/responsiveness. Is there any design/development reason for this? Can that be changed safely?

Sun, 17 Dec 2017 13:38:39
  • Dimitris Kalliris
    • Support Team Lead

    Hello wiredstudios

    As this will require some feedback from our devs, I’ve already created a report about it and we’re waiting for their valuable feedback on this.

    I’d rather say that changing all units from px to em would require some extended hard-coding in the theme files, as well as editing any default values, so you don’t end up having 15em padding instead of 15px for example.

    We will keep you posted here as soon as possible! :slight_smile:

    Take care,

    Dimitris

  • Dimitris Kalliris
    • Support Team Lead

    Hello there wiredstudios,

    hope you’re doing good today! :slight_smile:

    This isn’t easily possible unfortunately, without changing the whole Upfront design and making radical changes in theme files, as it uses an adaptive approach rather than a responsive one. More info about the differences between these two can be found here: https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

    Warm regards,

    Dimitris

  • wiredstudios
    • The Incredible Code Injector

    Wow, okay.

    First of all, this is really useful thanks.

    You know, I had never heard of adaptive design, but had learnt a bit at least about responsive. So this clarification then makes sense, and that was useful.

    It does highlight my concerns that this approach does require, quite a lot more work though.

    Most importantly, surely this is the kind of stuff that should be in the Upfront documentation.

    After the fairly basic tutorial series, you’re pretty much left with experimentation with Upfront.

    This is a big leap in my understanding, but would love to see some tutorials about using this approach with an Upfront theme, specifically when it comes to style changes between layouts.

    Cheers

  • Dimitris Kalliris
    • Support Team Lead

    Hello there wiredstudios,

    hope you’re doing good today! :slight_smile:

    This approach makes things even easier for building, as you only have to design the three pre-made viewports via Upfront (desktop, tablet, mobile) and rest ensure that only these three will be served, as these aren’t responsive based on device width.

    So, for example, desktop design had a total grid width of 1080px, all large desktops will be shown this, despite their widths.

    Appreciate the feedback about documentation too. As you may understand, documentations are always getting revamped from time to time, to catch up latest changes and better approaches.

    As for getting a better look and more tips on Upfront, you can follow up this course we provide (for free!): https://wpmudev.com/academy/courses/introduction-to-upfront-4

    Warm regards,

    Dimitris