Project Title

Reef SCSS Flex Grid

Getting Started

1. Git clone [email protected]:onepercentclub/reef-scss-flex-grid.git.
2. Copy src/flex-grid.scss to your project.
3. @import scss file in project.

Use Grid

Every block is wrapped by a row element. Every row is wrapped by a container element. you can use the class names row and container or you can use the related mixins.

In the example below we use the classnames container and row. We could have used @include container or @include row in the code too.

On small screens the two divs (with the name 'stuff') will take 12 columns on small screens. When the screen will grow larger the two divs will get 6 columns both.

Example:

HTML

<div class="container">
  <div class="row">
    <div class="stuff left">
      <div class="content">
        12 columns 0px-xs
        6 columns xs-sm
      </div>
    </div>

    <div class="stuff right">
      <div class="content">
        12 columns 0px-xs
        6 columns xs-sm
      </div>
    </div>
  </div>
</div>

SCSS

.right {
  @include col-xs(12);
  @include col-sm(6);
}

.left {
  @include col-xs(12);
  @include col-sm(6);

}

There is more

All the things in Flexbox grid are usable in this grid.

Columns

.col-xs-6 {}

===

@include col-xs(6)

Offset

.col-xs-offset-3 {}

===

@include col-xs-offset(3)

Auto witdh

.col-xs {}

===

@include col-xs

Nesting

<div class="row">
    <div class="col-xs">
        <div class="box">
            <div class="row">
                <div class="col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

===

.container {
  @include container();

  .row {
    @include row();

    .content {
      @include col-xs-(12);

      .nested-container {
        @include container();

        .nested-row {
          @include row();

          .nested-content {
            @include col-xs-(12);
          }
        }
      }
    }
  }
}

Alignment

<div class="row start-xs">

===

@include start-xs

Options: start, center, end, top, middle or bottom

Distribution, Ordering and Reversing

The same as the given examples right above.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Christofer Joseph - Initial work - Flexbox Grid
• Pieter Rees - Reworked to sass mixins

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Again thank you Chrostofer Joseph for the awesome work you did!