Menu icon Foundation
Responsive alignment helper classes

Hey all,

This is the first time I use Foundation and Sass.

For positioning (horizontal/vertical) a div inside another div I have made some helper classes.

  • for all breakpoints: small, medium, large, xlarge;
  • for horizontal alignment: left, center, right;
  • for vertical alignment: top, middle, bottom;

For example:

.small-align-left-top {
  @include flex-align();
  @include breakpoint(small) {
    @include flex-align($x: left, $y: top);
  }
}

.medium-align-right-bottom {
  @include flex-align();
  @include breakpoint(medium) {
    @include flex-align($x: right, $y: bottom);
  }
}

.large-align-left-top {
  @include flex-align();
  @include breakpoint(large) {
    @include flex-align($x: left, $y: top);
  }
}

.xlarge-align-left-bottom {
  @include flex-align();
  @include breakpoint(xlarge) {
    @include flex-align($x: left, $y: bottom);
  }
}

Problem: All classes are working, EXCEPT CLASSES WHERE I WANT TO THE LEFT (e.g.) from center to left, right to center.).

See the text inside the hero at: https://portal2.youronlinemagazine.com/frontend/public/template_01.php
Here I added the following snippid:

<div class="hero-section grid-x small-align-center-middle medium-align-right-top large-align-right-bottom xlarge-align-left-bottom">
  <div class="hero-section-text text-center">
    <h1>HOTELS OP ZEE</h1>
    <h4>De cruisemarkt blijft groeien</h4>
  </div>
</div>

As you can see, the class 'xlarge-align-left-bottom' is not working.
On resize the breakpoint and viewport width is showing in your console.

What am I doing wrong?

 

Best regards,
Rien
(Netherlands)

foundation 6.4ResponsivealignmentclassesSass

Hey all,

This is the first time I use Foundation and Sass.

For positioning (horizontal/vertical) a div inside another div I have made some helper classes.

  • for all breakpoints: small, medium, large, xlarge;
  • for horizontal alignment: left, center, right;
  • for vertical alignment: top, middle, bottom;

For example:

.small-align-left-top {
  @include flex-align();
  @include breakpoint(small) {
    @include flex-align($x: left, $y: top);
  }
}

.medium-align-right-bottom {
  @include flex-align();
  @include breakpoint(medium) {
    @include flex-align($x: right, $y: bottom);
  }
}

.large-align-left-top {
  @include flex-align();
  @include breakpoint(large) {
    @include flex-align($x: left, $y: top);
  }
}

.xlarge-align-left-bottom {
  @include flex-align();
  @include breakpoint(xlarge) {
    @include flex-align($x: left, $y: bottom);
  }
}

Problem: All classes are working, EXCEPT CLASSES WHERE I WANT TO THE LEFT (e.g.) from center to left, right to center.).

See the text inside the hero at: https://portal2.youronlinemagazine.com/frontend/public/template_01.php
Here I added the following snippid:

<div class="hero-section grid-x small-align-center-middle medium-align-right-top large-align-right-bottom xlarge-align-left-bottom">
  <div class="hero-section-text text-center">
    <h1>HOTELS OP ZEE</h1>
    <h4>De cruisemarkt blijft groeien</h4>
  </div>
</div>

As you can see, the class 'xlarge-align-left-bottom' is not working.
On resize the breakpoint and viewport width is showing in your console.

What am I doing wrong?

 

Best regards,
Rien
(Netherlands)

Rafi Benkual over 1 year ago

It seems to be that you have xlarge-align-right bottom set:

Rien Kok over 1 year ago

Thanks Rafi,

You are right, but I don't know why the 'xlarge' breakpoint is not recognized. The inspector in my browser (firefox developer edition)  shows this:

Description of

The generated app.css shows this:

@media screen and (min-width: 75em) {
    .xlarge-align-left-bottom {
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-align: end;
        align-items: flex-end
    }
}

I changed the class 'large-align-right-bottom' to 'large-align-left-top' and the class 'xlarge-align-left-bottom' to 'xlarge-align-right-bottom'.

<div class="hero-section grid-x small-align-center-middle medium-align-right-top large-align-left-top xlarge-align-right-bottom">
   ...
</div>

On breakpoint 'large' with a viewportsize of 1178px, the class 'medium-align-right-top' is active instead of the class 'large-align-left-top'.

On breakpoint 'xlarge' with a viewportsize of 1302px, the class 'xlarge-align-right-bottom' is active which is correct!

Active medium class on breakpoint

So, when I make the viewport smaller (use a smaller breakpoint) it went wrong?

I defined my breakpoints and classes in a file 'custom-settings.scss' and included that file directly after 'setting.scss' in app.scss.

I use the following breakpoints (custom-settings.scss):

// 2. Breakpoints
// --------------

$breakpoints: (
  small:    0,
  smedium:  560px,    // 35rem
  medium:   768px,    // 48rem
  large:    1024px,   // 64rem
  xlarge:   1200px,   // 75rem
  xxlarge:  1440px,   // 90rem
);
$print-breakpoint: large;
$breakpoint-classes: (small smedium medium large xlarge xxlarge);

//responsive positioning

.small-align-left-top {
  @include flex-align();
  @include breakpoint(small) {
    @include flex-align($x: left, $y: top);
  }
}

.small-align-left-middle {
  @include flex-align();
  @include breakpoint(small) {
  ........

 

Alex Laforge 3 months ago

Hi,

I have found a solution for the missing responsive content alignment classes.

It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).

Here is the SCSS.

PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.

 

//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
//***********************
//https://foundation.zurb.com/sites/docs/flex-grid.html
//https://foundation.zurb.com/sites/docs/flexbox-utilities.html
@each $breakpoint in $breakpoint-classes {
	@if $breakpoint == small {
	// Do nothing
	} @else {
		@include breakpoint($breakpoint) {
			//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
			.#{$breakpoint}-align-left {
				-webkit-box-pack: start;
				-webkit-justify-content: flex-start;
				-ms-flex-pack: start;
				justify-content: flex-start;
			}
			//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
			.#{$breakpoint}-align-center {
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				-ms-flex-pack: center;
				justify-content: center;
			}
			//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
			.#{$breakpoint}-align-right {
				-webkit-box-pack: end;
				-webkit-justify-content: flex-end;
				-ms-flex-pack: end;
				justify-content: flex-end;
			}
		}
	}
}

Alex Laforge 3 months ago

Hi,

I have found a solution for the missing responsive content alignment classes.

It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).

Here is the SCSS.

PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.

 

//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
@each $breakpoint in $breakpoint-classes {
	@if $breakpoint == small {
	// Do nothing
	} @else {
		@include breakpoint($breakpoint) {
			//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
			.#{$breakpoint}-align-left {
				-webkit-box-pack: start;
				-webkit-justify-content: flex-start;
				-ms-flex-pack: start;
				justify-content: flex-start;
			}
			//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
			.#{$breakpoint}-align-center {
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				-ms-flex-pack: center;
				justify-content: center;
			}
			//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
			.#{$breakpoint}-align-right {
				-webkit-box-pack: end;
				-webkit-justify-content: flex-end;
				-ms-flex-pack: end;
				justify-content: flex-end;
			}
		}
	}
}

Rafi Benkual 3 months ago

Alex - Really great solution! This may be good for you and other to add to your project if you need this kind of "functional" CSS. Thanks for posting it!

Foundation needs to stay relatively lighter weight if possible and adding more grid classes may not be the way forward. I tend to not use alignment classes as much because it clutters up the HTML, sometimes is not contextual or descriptive, and requires others to learn more classes. That's just my opinion.

Having said that, you can certainly propose any feature on GitHub.