Tools for Designers and Developers

Read about the tools that Adaptive.js projects use to author CSS.

At Mobify, we leverage Open Source tools to make mobile site development easier and quicker. This makes our code cleaner and more reusable.

Here is a quick overview of our favorite tools.


Sass Official Site Read about Sass at the Official Sass site at

Mobify uses Sass as the CSS preprocessing language. Sass in automatically compiled by Adaptive.js so you do not have to do it yourself.

Learn more in our Introduction to Sass.


Autoprefixer is a tool that helps to eliminate the need to write browser prefixes such as -webkit- and -moz- for CSS.

Autoprefixer Official Site Read about Autoprefixer on the GitHub site.

Because Autoprefixer is built in to Adaptive.js, you will not need to write browser prefixes in your Sass.

For example, simply write box-sizing: border-box in your SCSS file and the compiled CSS automatically includes all the browser prefixes.


body {
    box-sizing: border-box;

The above example compiles to the following CSS:

body {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;


Vellum is a Mobify Open Source project. It is a starting point for initial base CSS styles in a project.

Vellum GitHub Repository Read about Vellum in its Mobify GitHub repository.

After you import Vellum into your project, change the stub styles to suit your project. Change the variables to match the brand, spacing, and aesthetics of your website. Change the tag styles to work the way that you want their plain styles to work.

Think of Vellum as a collection of global styles. Because of this global nature, do not declare any classes or IDs in Vellum.

Instead, write these declarations in your template or component styles.

For more about our recommended SCSS file structure, read our Philosophy & Structure document.


Spline is a Sass mixin and function library. It is an Open Source project that Mobify maintains.

Spline GitHub Repository Read about Spline in its Mobify GitHub repository.

In the Spline collection, we put the most useful mixins and functions for authoring CSS that override the client markup and client styles.


Stencil is a Mobify Open Source library of reusable components and utilities which include:

Stencil also stores common utility classes such as:

This is a growing library of components and utilities. We add more of these components over time to capture common patterns that we encounter in CSS.

Stencil GitHub Repository Read about Stencil in its Mobify GitHub repository.


Finally, we use the SCSS-Lint tool for linting. This tool checks your SCSS files to warn you about CSS code style violations. With SCSS-Lint, we ensure that everyone authors CSS in a consistent manner.

Read the Mobify SCSS-Lint rules for our guidelines to write CSS.

Edit in GitHub