@citizensadvice/cads-grid

    0.0.5 • Public • Published

    Grid

    npm (scoped)

    Component type

    • Object

    Dependencies:

    Name Description
    @citizensadvice/cads-support System-wide global variables and functions

    Installation

    $ npm install @citizensadvice/cads-grid
    
    @import "@citizensadvice/cads-grid/index.scss";

    You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-grid@latest/build/cads.grid.css" />

    Implementation

    We use a grid to add structure and consistent horizontal spacing.

    Page widths

    The default maximum page width is 1024px.

    Gutters

    Gutters are 16px and above 555px increase to 32px.

    Viewport sizes

    The grid column widths are based on the viewport sizes. These are:

    Size Variable Class name Width from Width to
    Small $bp–sm o-grid__unit--m-#-# 320px 554px
    Medium $bp–md o-grid__unit--t-#-# 555px 749px
    Large $bp–lg o-grid__unit--d-#-# 750px 1023px
    X Large $bp–xl N/A 1024px N/A

    Full width

    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit">...</div>
     
        or
     
        <div class="o-grid__unit o-grid__unit--t-1-1">...</div>
      </div>
    </div>

    Halves

    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit o-grid__unit--t-1-2">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-2">...</div>
      </div>
    </div>

    Thirds

    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
      </div>
    </div>
     
    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit o-grid__unit--t-2-3">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
      </div>
    </div>

    Quarters

    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
      </div>
    </div>
    <div class="c-wrap">
      <div class="o-grid">
        <div class="o-grid__unit o-grid__unit--t-3-4">...</div>
        <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
      </div>
    </div>

    Keywords

    none

    Install

    npm i @citizensadvice/cads-grid

    DownloadsWeekly Downloads

    6

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    9.33 kB

    Total Files

    6

    Last publish

    Collaborators

    • oliverroick
    • davidrapson
    • davidsauntson
    • mrdaniellewis
    • dianafrunza
    • baseonmars
    • panosvoudouris
    • chrisbrettca