Tangerine

Grid

Container

.container

You can declare your flexbox grid as a child of .container or .container.row-

<div class="container">
	<div class="row-xs">
		<div class="col">1</div>
		<div class="col">2</div>
	</div>
</div>

<div class="container row-xs">
	<div class="col">1</div>
	<div class="col">2</div>
</div>

Horizontal grid

.row-xs .row-sm .row-md .row-lg

<div class="padder">
	<div class="row-xs">
		<div class="col">1</div>
		<div class="col">2</div>
	</div>
</div>

Vertical grid

.column-xs .column-sm .column-md .column-lg

<div class="padder">
	<div class="column-xs">
		<div class="col">1</div>
		<div class="col">2</div>
	</div>
</div>

Padding

.padder

All flexbox elements have a padding of 15px. To remove the offset use .padder on a parent element.

<div class="container">
	<div class="row-xs padder">
		<div class="col">1</div>
		<div class="col">2</div>
	</div>
</div>

Nesting

Place grids inside grids.

<div class="column-xs row-md cross-xs-stretch padder">
	<div class="col-xs-half">
		<div class="column-xs">
		  <div class="col">1</div>
		  <div class="col">2</div>
		</div>
	</div>
	<div class="col-xs-half">
	  <div class="row-xs">
		<div class="col">1</div>
		<div class="col">2</div>
	  </div>
	</div>
</div>

Reverse

.reverse

Can be used on horizontal or vertical grids.

<div class="row-xs reverse">
	<div class="col">1</div>
	<div class="col">2</div>
	<div class="col">3</div>
</div>

Columns

Columns are responsive and you can add as many as you want, the grid will adjust itself.

Auto width columns

.col

<div class="padder">
	<div class="column-xs row-md">
		<div class="col">1</div>
		<div class="col">2</div>
	</div>
	<div class="column-xs row-md">
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3</div>
	</div>
</div>

Responsive width columns

.col-xs- .col-sm- .col-md- .col-lg-

<div class="padder">
	<div class="column-xs row-sm">
		<div class="col-sm-half col-lg-two-thirds">1</div>
		<div class="col-sm-half col-lg-third"">2</div>
	</div>
	<div class="column-xs row-sm">
		<div class="col-sm-tenth">1</div>
		<div class="col-sm-fifth">2</div>
		<div class="col-sm-half">3</div>
		<div class="col-sm-fifth">2</div>
	</div>
	<div class="column-xs row-sm">
		<div class="col col-md-quarter">1</div>
		<div class="col col-md-quarter">2</div>
		<div class="col col-md-half">3</div>
	</div>
</div>

.col-xs-tenth {
    flex: 0 0 10%;
}
.col-xs-fifth {
    flex: 0 0 20%;
}
.col-xs-quarter {
    flex: 0 0 25%;
}
.col-xs-third {
    flex: 0 0 33.3333334%;
}
.col-xs-half {
    flex: 0 0 50%;
}
.col-xs-two-thirds {
    flex: 0 0 66.667%;
}

Alignment on the main axis

Alignment is responsive and can be used with the same breakpoints - xs, sm, md, lg.

Center

.main-xs-center .main-sm-center .main-md-center .main-lg-center

<div class="row-xs main-xs-center">
	<div class="col-xs-third">1</div>
	<div class="col-xs-third"">2</div>
</div>

End

.main-xs-end .main-sm-end .main-md-end .main-lg-end

<div class="row-xs main-xs-end">
	<div class="col-xs-third">1</div>
	<div class="col-xs-third"">2</div>
</div>

Between

.main-xs-between .main-sm-between .main-md-between .main-lg-between

<div class="row-xs main-xs-between">
	<div class="col-xs-third">1</div>
	<div class="col-xs-third"">2</div>
</div>

Around

.main-xs-around .main-sm-around .main-md-around .main-lg-around

<div class="row-xs main-xs-around">
	<div class="col-xs-third">1</div>
	<div class="col-xs-third"">2</div>
</div>

Alignment on the cross axis

Alignment is responsive and can be used with the same breakpoints - xs, sm, md, lg.

Start

.cross-xs-start .cross-sm-start .cross-md-start .cross-lg-start

<div class="row-xs cross-xs-start">
	<div class="col-xs-third">1</div>
	<div class="col-xs-third"">2</div>
</div>

Center

.cross-xs-center .cross-sm-center .cross-md-center .cross-lg-center

<div class="row-xs cross-xs-center">
	<div class="col">1</div>
	<div class="col"">2</div>
</div>

End

.cross-xs-end .cross-sm-end .cross-md-end .cross-lg-end

<div class="row-xs cross-xs-end">
	<div class="col">1</div>
	<div class="col"">2</div>
</div>

Stretch

.cross-xs-stretch .cross-sm-stretch .cross-md-stretch .cross-lg-stretch

<div class="row-xs cross-xs-stretch">
	<div class="col">1</div>
	<div class="col"">2</div>
</div>