Getting Started

with Modest Grid.

Customising Modest Grid


Before you can start using Modest Grid you will need the CSS file. You can go to the Custom Download page and customise your own version.

Here you will be able to select the number of columns, the gutter width, the maximum width of the page and the browser viewport widths.

Basic template


To start using Modest Grid, you can use the below HTML code. This will setup the CSS and show you a basic grid example.

								<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Getting Started with Modest Grid</title>
    <link href="css/modestgrid.css" media="screen" rel="stylesheet" type="text/css">
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrapper">
        <div class="row">
            <div class="dt-8 tl-6 tp-4 ml-6">
                <h1>Getting Started with Modest Grid</h1>
                <hr>
            </div>
        </div>
    </div>
</body>
</html>

Classes


The classes used in Modest Grid use a very simple naming convention.

Wrapper

The wrapper class retains all of the content within it. The default width is 1280 pixels. You can change this by adjusting the $maxwidth variable in the SASS file.

If you wish to not use this class then don't include it. This will make you content the full width of the browsers viewport.

Row

A row is used to help separate your content within columns.

Rows are very useful when you need to nest columns within one another. The row will deduct the padding so every column will line up nicely.

Columns

The columns are the driving force behind Modest Grid. They help to divide your content into multiple variations. You can set your column width by entering a value where the # is.

If for example you are using a 12 column grid, then .dt-12 would be 100% within the .wrapper. .dt-6 would be 50% and .dt-3 would be 25%.

  • .dt-# stands for desktop.
  • .tl-# stands for tablet landscape.
  • .tp-# stands for tablet portrait.
  • .ml-# stands for mobile landscape.
  • .mp-# stands for mobile portrait.

You can set various combinations depending on the device your project is viewed on. For instance if you would like your grid to show four columns on desktop but then two on a tablet landscape, then you could use the following.

								<div class="dt-3 tl-6">
    <h1>Getting Started with Modest Grid</h1>
</div>
<div class="dt-3 tl-6">
    <h1>Getting Started with Modest Grid</h1>
</div>
<div class="dt-3 tl-6">
    <h1>Getting Started with Modest Grid</h1>
</div>
<div class="dt-3 tl-6">
    <h1>Getting Started with Modest Grid</h1>
</div>

If the browser width is that of your tablet landscape size, then the desktop class will be ignored and will cycle downwards all the way to the mobile portrait view.

Nested

A margin-bottom is added to all of the .dt-#. This value is half of the $gutter variable.

The nested class should be added before any nesting takes places. This is to prevent large margin-bottoms leaving a lot of space when multiple nests are made.

For example:

								<div class="wrapper">
    <div class="row nested">
        <div class="dt-12">
            <div class="row">
                <div class="dt-6">
                    A nested item
                </div>
                <div class="dt-6">
                    Another nested item
                </div>
            </div>
        </div>
    </div>
</div>