turretcss

Group

Example

A generic .group class to provide spacing between like items. Can be used for <nav> or <div> wrapping and <ul><li></li></ul> structure.

  • 1
  • 2
  • 3

HTML

<div class="group">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Center

  • 1
  • 2
  • 3

HTML

<div class="group group-m group-center">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Column

  • 1
  • 2
  • 3

HTML

<div class="group group-m group-column">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Nowrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

HTML

<div class="group group-m group-nowrap">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Space Between

  • 1
  • 2

HTML

<div class="group group-m group-space-between">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Space Around

  • 1
  • 2

HTML

<div class="group group-m group-space-around">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Space Evenly

  • 1
  • 2

HTML

<div class="group group-m group-space-evenly">
  <ul>
    <li>...</li>
  </ul>
</div>

Group Stretch

  • 1
  • 2
  • 3

HTML

<div class="group group-m group-stretch">
  <ul>
    <li>...</li>
  </ul>
</div>

Sizes

Group XXL

  • 1
  • 2
  • 3

Group XL

  • 1
  • 2
  • 3

Group L

  • 1
  • 2
  • 3

Group M

  • 1
  • 2
  • 3

Group S

  • 1
  • 2
  • 3

Group XS

  • 1
  • 2
  • 3

Group XXS

  • 1
  • 2
  • 3

HTML

<div class="group group-xxl">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xl">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-l">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-m">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-s">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xs">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xxs">
  <ul>
    <li>...</li>
  </ul>
</div>

CSS

--group-xxl-space: 0.875rem;
--group-xl-space: 0.75rem;
--group-l-space: 0.625rem;
--group-m-space: 0.5rem;
--group-s-space: 0.375rem;
--group-xs-space: 0.25rem;
--group-xxs-space: 0.125rem;

Related