unibz Pattern Library

Grid 

<!-- Default -->
<div class="g-row ">
    <div class="g g-3@sm">
        <div class="placeholder">g-3@sm</div>
    </div>
    <div class="g g-3@sm">
        <div class="placeholder">g-3@sm</div>
    </div>
    <div class="g g-3@sm">
        <div class="placeholder">g-3@sm</div>
    </div>
    <div class="g g-3@sm">
        <div class="placeholder">g-3@sm</div>
    </div>
</div>


<!-- Responsive Offset -->
<div class="g-row ">
    <div class="g g-3@sm g-6@md">
        <div class="placeholder">g-3@sm g-6@md</div>
    </div>
    <div class="g g-7@sm g-off-2@sm g-6@md g-off-0@md">
        <div class="placeholder">g-6@sm g-off-3@sm g-6@md g-off-0@md</div>
    </div>
</div>


<!-- Push And Pull -->
<div class="g-row ">
    <div class="g g-4@sm g-push-8@sm">
        <div class="placeholder">This is first in the markup</div>
    </div>
    <div class="g g-8@sm g-pull-4@sm">
        <div class="placeholder">This comes second</div>
    </div>
</div>


<!-- Flexbox Grid -->
<div class="g-row g-row-flex">
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Make all elements have the same height using flexbox</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
</div>


<div class="g-row {{ class }}">
  {{#each items}}
    <div class="g {{ class }}">
      <div class="placeholder">{{ description }}</div>
    </div>
  {{/each}}
</div>
 
/* Default */
{
  "placeholder": "Placeholder element",
  "items": [
    {
      "class": "g-3@sm",
      "description": "g-3@sm"
    },
    {
      "class": "g-3@sm",
      "description": "g-3@sm"
    },
    {
      "class": "g-3@sm",
      "description": "g-3@sm"
    },
    {
      "class": "g-3@sm",
      "description": "g-3@sm"
    }
  ]
}


/* Responsive Offset */
{
  "placeholder": "Placeholder element",
  "items": [
    {
      "class": "g-3@sm g-6@md",
      "description": "g-3@sm g-6@md"
    },
    {
      "class": "g-7@sm g-off-2@sm g-6@md g-off-0@md",
      "description": "g-6@sm g-off-3@sm g-6@md g-off-0@md"
    }
  ]
}


/* Push And Pull */
{
  "placeholder": "Placeholder element",
  "items": [
    {
      "class": "g-4@sm g-push-8@sm",
      "description": "This is first in the markup"
    },
    {
      "class": "g-8@sm g-pull-4@sm",
      "description": "This comes second"
    }
  ]
}


/* Flexbox Grid */
{
  "placeholder": "Placeholder element",
  "class": "g-row-flex",
  "items": [
    {
      "class": "g-flex g-3@sm",
      "description": "Make all elements have the same height using flexbox"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    }
  ]
}

There are no notes for this item.