We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

Page layout live

We use a grid to structure our designs. Just like the typography and vertical spacing we use, our grid allows the creation of a consistent horizontal space.

Example

Example

HTML

                                <div class="coop-l-grid">
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
    <div class="coop-l-grid__item coop-l-grid__item--small-6 coop-l-grid__item--medium-3 coop-l-grid__item--large-2 coop-l-grid__item--xlarge-1">
        <span class="ds-demo-block"></span>
    </div>
</div>

                                

Design and content

Our grid has 12 columns that can be used in various combinations. It has gutters of 32px above 768px and 16px below 768px. We recommend its use because it has been designed to suit our typographic scale.

The default widths (breakpoints) we use are:

  • Extra extra small (xxsmall): 320px and up (.coop-l-grid__item–xxsmall-{col-span})
  • Extra small (xsmall): 414px and up (.coop-l-grid__item–xsmall-{col-span})
  • Small (small): 600px and up (.coop-l-grid__item–small-{col-span})
  • Medium: 768px and up (.coop-l-grid__item–medium-{col-span})
  • Large: 1024px and up (.coop-l-grid__item–large-{col-span})
  • Extra large: 1300px and up (.coop-l-grid__item–xlarge-{col-span})
  • Extra extra large: 1440px and up (.coop-l-grid__item–xxlarge-{col-span})