Ellisha

A mixin collection for responsive Flexbox grids and layouts.

Basics

Ellisha uses two main mixins for flexbox layouts

  1. flexy-row()- Creates a row that will contain flexbox items.
  2. flexy-span()- Must be used on elements in a flexy-row, and controls the width of the flexboxes.
.flexy-row

.flexy-item

.flexy-item

.flexy-item

.flexy-item

.flexy-row {
	@include flexy-row();
}

.flexy-item {
	@include flexy-span();
}

flexy-span

Ellisha works on a 12-column system by default. Use the number of columns you want for each item with the flexy-span mixin.

flexy-span(1)

flexy-span(11)

flexy-span(2)

flexy-span(10)

flexy-span(3)

flexy-span(9)

flexy-span(4)

flexy-span(8)

flexy-span(5)

flexy-span(7)

flexy-span(6)

flexy-span(6)

You can also change the total number of rows for each span by using it as a second argument. Good for grids you want to act separately from your overall grid system.

flexy-span(1,4)

flexy-span(3,4)

flexy-span(1,2)

flexy-span(1,2)

flexy-span(12,16)

flexy-span(4,16)

There are three other units you can use instead of columns:

  1. Percentage widths separate from the grid system.
  2. Set widths, such as px or em. Be warned these units may stack on different screen dimensions, so use carefully.
  3. Auto - All auto spans equally divide the remaining space in the row equally and share it. This is the only option that can always include margins without disrupting the layout.

Feel free to mix and match for more complex layouts

flexy-span(30%)

flexy-span(25%)

flexy-span(45%)

flexy-span(300px)

flexy-span(15em)

flexy-span(auto)

flexy-span(auto)

flexy-span(auto)

flexy-span(auto)

flexy-span(auto)

flexy-span(auto)

flexy-span(auto)

flexy-span(2)

flexy-span(20%)

flexy-span(15em)

flexy-span(auto)


Flexy-span can also accept a third argument to create inside padding. It's called differently depending on how it's declared. If you're not declaring a total number of columns, the $padding variable should be called specifically.

@include flexy-span(1, 2, 1em)
@include flexy-span(9, $padding: 1em)

flexy-row

Can show the items in normal or reverse order, depending on the argument used.

flexy-row()

1

2

3

flexy-row(row-reverse)

1

2

3

flexy-breakpoint

Can trigger different layouts at different screen sizes for more responsive layouts. It's made to be mobile-first, so all breakpoints trigger new layouts for the specificied screen sizes and larger.

Full / Half / Third

Full / Half / Third

Full / Half / Third

Full / Half / Third

Full / Half / Third

Full / Half / Third

flexy-item {
	@include flexy-span(12);
	
	@include flexy-breakpoint(480px) {
		@include flexy-span(6);
	}
	
	@include flexy-breakpoint(900px) {
		@include flexy-span(4);
	}
}

flexy-container

Usually used on the sity's body tag to limit the overall screen size, but can also be used on rows and spans.

Good for limiting screen size on especially large screens.

flexy-container(800px)

I'm full-width but stop at 800px

flexy-container(80%)

I'm 80% wide and centered at all times

flexy-justify

Moves the flex elements to different sides of the screen. Will have no effect on rows full of items.

flexy-justify(start)

2

2

flexy-justify(end)

2

2

flexy-justify(center)

2

2

flexy-align

Aligns the span items to the top, bottom, or middle of the row. Has no effect on rows that aren't taller than the containing spans. Best used with a min-height.

flexy-align(top)

4

4

4

flexy-align(middle)

4

4

4

flexy-align(bottom)

4

4

4

flexy-spacing

Rearranges the extra space in a row around the flex items. No effect on rows full of items.

flexy-spacing(around)

2

2

2

flexy-spacing(between)

2

2

2

flexy-position

Use it on individual flex items to control what order they're in relative to the others.

For complete control, will need to be used on all elements to define their positions relative to each other.

1

2

3

4

5

6

1

flexy-position(6)

2

flexy-position(1)

3

flexy-position(5)

4

flexy-position(2)

5

flexy-position(4)

6

flexy-position(3)

flexy-align-self

Aligns individual flex items to the top, bottom, or middle of the row. Has no effect on rows that aren't taller than the containing spans. Best used with a min-height.

flexy-align-self(top)

flexy-align-self(middle)

flexy-align-self(bottom)

flexy-push and flexy-pull

Can add or remove space before or after flex items in a row. Can be based on columns, custom percentages or set lengths.

flexy-push

flexy-push(4)

flexy-push(12em)

flexy-push(50%)

flexy-pull

flexy-pull(4)

flexy-pull(12em)

flexy-pull(50%)

flexy-end

flexy-end(4)

I'm four columns away!

flexy-end(12em)

I'm 12em away!

flexy-end(50%)

I'm 50% away!

flexy-center

A shortcut for positioning elements in the center of a larger container. Accepts two arguments:

  1. The container's minimum height
  2. The container's padding
flexy-center(7.5em, 5em)

I'm always right in the center of this container, no matter what happens. This container at least 7.5em tall and has 5em of padding inside. You could give me a set height and width and I'd still be in the middle.

A flexy-container can also be paired with flexy-row and flexy-span to create layouts inside. The one below has padding but no set height.

flexy-center(10%)

flexy-row

flexy-span(6)

flexy-span(6)

flexy-span(3)

flexy-span(auto)

Nesting

Flex rows can be nested infinitely inside each other. Just be sure there's an extra container around any flexy-row inside a flexy-span.

flexy-span(auto)

flexy-span(6)

flexy-span(3)

flexy-span(3)

flexy-span(3)

flexy-span(3)

flexy-span(6)

flexy-span(4)

flexy-span(3)

flexy-span(auto)

<div class="flexy-row">
	<div class="flexy-span">
		<p>Content Here</p>
		<div class="extra-container">
			<div class="flexy-row">
				<div class="flexy-span">
					<p>Content Here</p>
				</div>
			</div>
		</div>
	</div>
</div>

Variables

These can be declared and redefined to customize several layout elements. All padding variables are set to 0 by default.