Menu
Menu Sheet Overlay
Search
Search Sheet

Moving From Design to Code

In this section learn how looking at the desktop code helps make your mobile designs better.

Understanding Components and Utilities

This section is a continuation from a previous section on Design Documentation, where we went over design systems, consistency, and code. This Build Phase allows you to really see your decisions take form. For more in-depth information on coding best practices and standards, check out the Mobify Code Style documentation.

There are two major types of design system classes that designers should at least be aware of: components and utilities.

Recreating Your Design System

We believe that a strong design system is based on base units, and multiples or divisions based off of this number. Because Progressive Mobile projects are styled using Sass, a CSS preprocessor, you can replicate this system by creating variables for your styles, like so: $base-unit: 8px.

You can then extend that base unit to other elements; using the spacing size examples from the design system in the previous section, you can create:

Extra small space $space-xs ($base-unit / 2) 4px
Small space $space-sm ($base-unit * 1) 8px
Medium space $space-md ($base-unit * 1.5) 12px
Large space $space-lg ($base-unit * 2) 16px
Extra large space $space-xl ($base-unit * 3) 24px

You can also use this base unit for things like dimensions:

Small Icon $icon-size-sm ($base-unit * 1) 8px
Base Icon $icon-size-md ($base-unit * 2) 16px
Large Icon $icon-size-lg ($base-unit * 3) 24px
Extra large space $icon-size-xl ($base-unit * 4) 32px

When building components, developers should always be using the base unit to scale designs using whole multiples or divisions. Additionally, your base unit will the central role in your utility classes as well.

.c-card {
    padding: $space-md;
}
.c-card__title {
    padding-top: $space-md;
    Margin-bottom: $space-xl;
}
.u-margin-bottom-sm {
    margin-bottom: $space-sm;
}
.u-padding-top-lg {
    padding-top: $space-lg;
}

Consistent variables based off a single base unit will assure you that everything scales on the same metric, and will therefore have a natural, consistent rhythm. Using this system makes sure things are consistent and clear, and makes the build much easier to build and maintain!