Digital Design System

Grid

8-point Grid System

We use a grid based on the 8pt system; by doing so this allows for flexibilty and consistentcy throughout the website as 8 is an easy number to mulitple and divide.

Content within the system is also sized appropriately with increments of 8 (e.g., fonts and icons).

The grid is modified at each breakpoint.

Breakpoints and Grid Information

Breakpoint Viewport (Media Query) Live Area Number of Columns Column Widths Gutters Margins
XXL ≥1400px 1320px 12 88px 24px ~60px+
XL ≥1200px 1128px 12 72px 24px ~36px+
L ≥992px 936px 12 56px 24px ~28px+
M ≥768px 696px 6 96px 24px ~36px+
S ≥576px 520px 4 112px 24px variable
XS <576px 328px 4 64px 24px variable

Grid - Visual Design

WTW Grid Design

<div class="container">
    <div class="row ">

        <div class="col-12 mb-5">

            <h3 class="d-sm-none">Extra Small (XS) 576px</h3>
            <h3 class="d-none d-sm-block d-md-none">Small (SM) >576px</h3>
            <h3 class="d-none d-md-block d-lg-none">Medium (MD) >768px</h3>
            <h3 class="d-none d-lg-block d-xl-none">Large (LG) >992px</h3>
            <h3 class="d-none d-xl-block d-xxl-none">Extra Large (XL) >1200px</h3>
            <h3 class="d-none d-xxl-block">Extra extra Large (XXL) >1400px</h3>

        </div>

        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 1</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 2</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 3</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 4</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 5</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 6</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 7</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 8</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 9</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 10</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 11</strong></p>
            </div>
        </div>
        <div class="col-1 bg-wtw-violet-mist">
            <div class="bg-wtw-onyx p-2">
                <p class="text-white text-center py-5"><strong>Col 12</strong></p>
            </div>
        </div>

    </div>
</div>