Bourbon, Bitters, and Neat

Getting started with the modern Sass framework family

A Mobile Version

Until now, we haven't bothered with a mobile version of the "Moustache Monthly". But of course we want the site to look just as fine on a mobile browser as on the desktop.

Currently, our list view doesn't look like much on a mobile device's small screen:

But Neat (of course) offers a way to deal with different screen sizes. It allows us to define a custom grid that is only used under specific circumstances!

Let's open _variables.scss and define an additional grid that is better suited for mobile screens:

$neat-grid--mobile: (
  columns: 4,
  gutter: 20px,
  media: "(max-width: 480px)"

In a mobile context, you'll (probably) want less columns and a smaller gutter spacing. The most important part, however, is the "media" setting in this example: we feed it with a simple media query - and the grid will only be used when that media query becomes true.

Let's put this new grid to use, for example for our teaser--top element in _layout.scss:

article.teaser--top {
  @include grid-column(8, $neat-grid--page);
  @include grid-push(2, $neat-grid--page);

  @include grid-media($neat-grid--mobile) {
    @include grid-column(4);
    @include grid-push(0);

We use the grid-media mixin and simply provide the configuration of our new "mobile" grid. Any declarations in that scope will only take effect when that grid's media query is true. (In our example: when the screen is less than 480 pixels wide.)

We can then use a grid with only 4 columns and a smaller gutter spacing in our grid-* mixin calls.

After using the grid-media mixin like this in a couple of places, this is what we end up with:

Mobile optimizations - GitHub

If you wanted, you could easily target more scenarios with additional grid definitions!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.