Utilities

20.1 #Row.adjustable-ellipsis Columns with flexible width

sf-row.-adjustable-ellipsis

<div class="sf-row -adjustable-ellipsis">
   <div class="sf-row__col -full-width">
       <div>The width of <strong>First</strong> adjusts to my width</div>
   </div>
   <div class="sf-row__col -truncatable">
       <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">I am <strong>First</strong>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passa</div>
   </div>
</div>

I am First. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passa

The width of First adjusts to my width

Html

    <div class="sf-row -adjustable-ellipsis">
       <div class="sf-row__col -truncatable">
           <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">I am <strong>First</strong>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passa</div>
       </div>
       <div class="sf-row__col -full-width">
           <div>The width of <strong>First</strong> adjusts to my width</div>
       </div>
    </div>

20.2 #Row.align-content-around align-content: space-around

.sf-row.-align-content-around

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-around">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.3 #Row.align-content-between align-content: space-between

.sf-row.-align-content-between

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-between">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.4 #Row.align-content-center align-content: center

.sf-row.-align-content-center

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-center">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
      <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.5 #Row.align-content-end align-content: flex-end

.sf-row.-align-content-end

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-end">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
      <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.6 #Row.align-content-start align-content: flex-start

.sf-row.-align-content-start

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-start">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
      <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.7 #Row.align-content-stretch align-content: stretch (default)

.sf-row.-align-content-stretch

If emitted align-content: stretch

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

I am sixth in the markup

Html

    <div class="sf-row -align-content-stretch">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
      <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>sixth</strong> in the markup
       </div>
    </div>

20.8 #Row.align-items-baseline align-items: baseline

.sf-row.-align-items-baseline

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -align-items-baseline">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.9 #Row.align-items-center align-items: center

.sf-row.-align-items-center

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -align-items-center">
       <div class="sf-row__col -flex-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -flex-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -flex-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.10 #Row.align-items-end align-items: flex-end

.sf-row.-align-items-end

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -align-items-end">
       <div class="sf-row__col -flex-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -flex-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -flex-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.11 #Row.align-items-start align-items: flex-start

.sf-row.-align-items-start

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -align-items-start">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.12 #Row.align-items-stretch align-items: stretch (default)

.sf-row.-align-items-stretch

If emitted align-items: stretch

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -align-items-stretch">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.13 #Row.auto-sized Row with auto sized columns (default)

.sf-row .sf-row__col

.sf-row__col

Html

    <div class="sf-row">
       <div class="sf-row__col">
           .sf-row__col
       </div>
       <div class="sf-row__col">
           .sf-row__col
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col">
           .sf-row__col
       </div>
       <div class="sf-row__col">
           .sf-row__col
       </div>
       <div class="sf-row__col">
           .sf-row__col
       </div>
    </div>

20.14 #Row.column flex-direction: column

.sf-row.-column

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -column">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.15 #Row.column-reverse flex-direction: column-reverse

.sf-row.-column-reverse

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -column-reverse">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.16 #Row.flex-direction-row flex-direction: row (default)

.sf-row.-row

If emitted flex-direction: row

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

Html

    <div class="sf-row -row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
    </div>

20.17 #Row.flex-wrap-wrap flex-wrap: wrap (Default)

.sf-row.-wrap

If emitted flex-wrap: wrap

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -wrap">
       <div class="sf-row__col -col-6">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-6">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-10">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.18 #Row.full-height Row full height

.sf-row.-full-height

I am tall

Html

    <div class="sf-row -full-height">
       <div class="sf-row__col -col-6">
           I am tall
       </div>
       <div class="sf-row__col -col-6">
           I am tall
       </div>
    </div>

20.19 #Row.inline Row inline

.sf-row.-inline

I am first in the markup

I am second in the markup

Html

    <div class="sf-row -inline">
       <div class="sf-row__col -col-6">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-6">
           I am <strong>second</strong> in the markup
       </div>
    </div>

20.20 #Row.justify-content-around justify-content: space-around

.sf-row.-justify-content-around

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

Html

    <div class="sf-row -justify-content-around">
       <div class="sf-row__col -col-3">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-3">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
    </div>

20.21 #Row.justify-content-between justify-content: space-between

.sf-row.-justify-content-between

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

Html

    <div class="sf-row -justify-content-between">
       <div class="sf-row__col -col-3">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-3">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
    </div>

20.22 #Row.justify-content-center justify-content: center

.theme.-row.-justify-content-center

I am first in the markup

I am second in the markup

Html

    <div class="sf-row -justify-content-center">
       <div class="sf-row__col -flex-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -flex-4">
           I am <strong>second</strong> in the markup
       </div>
    </div>

20.23 #Row.justify-content-end justify-content: flex-end

.sf-row.-justify-content-end

I am first in the markup

I am second in the markup

Html

    <div class="sf-row -justify-content-end">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
    </div>

20.24 #Row.justify-content-start justify-content: flex-start (default)

.sf-row.-justify-content-start

If emitted justify-content: flex-start

I am first in the markup

I am second in the markup

Html

    <div class="sf-row -justify-content-start">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
    </div>

20.25 #Row.nested-rows Nested rows

.sf-row .sf-row

.sf-row__col.-col-6

.sf-row__col.-col-4

.sf-row__col.-col-8

.sf-row__col.-col-6

Html

    <div class="sf-row">
       <div class="sf-row__col -col-6">
         .sf-row__col.-col-6
         <div class="sf-row">
            <div class="sf-row__col -col-4">
                .sf-row__col.-col-4
            </div>
            <div class="sf-row__col -col-8">
                .sf-row__col.-col-8
            </div>
         </div>
       </div>
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
    </div>

20.26 #Row.no-gutter Row with no gutter

.sf-row.-no-gutter

I am first in the markup

I am second in the markup

Html

    <div class="sf-row -no-gutter">
       <div class="sf-row__col -col-6">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-6">
           I am <strong>second</strong> in the markup
       </div>
    </div>

20.27 #Row.no-wrap flex-wrap: no-wrap

.sf-row.-no-wrap

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -no-wrap">
       <div class="sf-row__col -col-6">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-6">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-10">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20.28 #Row.row-reverse flex-direction: row-reverse

.sf-row.-row-reverse

I am first in the markup

I am second in the markup

I am third in the markup

I am fourth in the markup

I am fifth in the markup

Html

    <div class="sf-row -row-reverse">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fourth</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>fifth</strong> in the markup
       </div>
    </div>

20.29 #Row.width-auto Width auto

.sf-row.-auto-width

Html

    <div class="sf-row -auto-width">
    </div>

20.30 #Row.wrap-reverse flex-wrap: wrap-reverse

.sf-row.-wrap-reverse

I am first in the markup

I am second in the markup

I am third in the markup

Html

    <div class="sf-row -wrap-reverse">
       <div class="sf-row__col -col-6">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-6">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-10">
           I am <strong>third</strong> in the markup
       </div>
    </div>

20 #Row Row

20.1 #Row.adjustable-ellipsis Columns with flexible width

20.2 #Row.align-content-around align-content: space-around

20.3 #Row.align-content-between align-content: space-between

20.4 #Row.align-content-center align-content: center

20.5 #Row.align-content-end align-content: flex-end

20.6 #Row.align-content-start align-content: flex-start

20.7 #Row.align-content-stretch align-content: stretch (default)

20.8 #Row.align-items-baseline align-items: baseline

20.9 #Row.align-items-center align-items: center

20.10 #Row.align-items-end align-items: flex-end

20.11 #Row.align-items-start align-items: flex-start

20.12 #Row.align-items-stretch align-items: stretch (default)

20.13 #Row.auto-sized Row with auto sized columns (default)

20.14 #Row.column flex-direction: column

20.15 #Row.column-reverse flex-direction: column-reverse

20.16 #Row.flex-direction-row flex-direction: row (default)

20.17 #Row.flex-wrap-wrap flex-wrap: wrap (Default)

20.18 #Row.full-height Row full height

20.19 #Row.inline Row inline

20.20 #Row.justify-content-around justify-content: space-around

20.21 #Row.justify-content-between justify-content: space-between

20.22 #Row.justify-content-center justify-content: center

20.23 #Row.justify-content-end justify-content: flex-end

20.24 #Row.justify-content-start justify-content: flex-start (default)

20.25 #Row.nested-rows Nested rows

20.26 #Row.no-gutter Row with no gutter

20.27 #Row.no-wrap flex-wrap: no-wrap

20.28 #Row.row-reverse flex-direction: row-reverse

20.29 #Row.width-auto Width auto

20.30 #Row.wrap-reverse flex-wrap: wrap-reverse