More Flexbox Testing

index.slim

.wrapper
  .container
    h1 Quick FlexBox Grid
    .row
      .col
        .module.white
          h3 Header
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, distinctio voluptatum sed voluptatem earum, temporibus, sit consectetur consequatur necessitatibus, esse provident!  
    .row
      -for i in(1..5)
        .col.col-1-5.square 
          .module.red
            span 1/5             
    .row
      .col.col-2-3
        .module.blue
          h3 Balanced Gutters
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis.
     
      .col.col-1-3
        .module.blue
          h3 Modules Adjust To Content
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quasi a aperiam quas doloremque architecto?
    .row
      .col.col-2-3
        .module.white
          h4 So Little CSS
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis odio ducimus laudantium placeat dicta eos impedit voluptates ab doloribus nobis porro sapiente. Expedita delectus enim, impedit?      
      .col.col-1-3
        .module.white.align-self-flex-center
          blockquote Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis odio ducimus laudantium placeat dicta eos impedit voluptates ab doloribus nobis porro sapiente. Expedita delectus enim, impedit?  
    .row
      -for i in(1..5)
        .col.col-1-5.square 
          .module.red
            span 1/5          
 

More-Flexbox-Testing-.markdown

More Flexbox Testing

Using Calc & Min Widths

A Pen by Marcus Hall on CodePen.

License.

style.scss

@import "compass/css3";

*{
  @include box-sizing(border-box);
}


@mixin aspect-ratio-box($height) {
	position: relative;
  box-sizing: border-box;
  &:before {
   content: "";
	display: block;
	padding-top: $height; /* aspect */
  }
}

@mixin ratio-box-content{
   box-sizing: border-box;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}


$gutters: 0.5em;


body {
  min-height: 100%;
  max-width: 100%;
  background: white;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding-bottom: $gutters*2;
}

.wrapper {
    padding-top: $gutters*3;
    width: 100%;
    max-width: 100%;
}


.container{
  min-height: 150px;
  padding-left: $gutters *2;
  padding-right: $gutters *2;
  padding-top: $gutters;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-bottom: $gutters*2;
}



.row{
  @include display-flex(flex);
  display: -webkit-box;
  -ms-flex-direction: row;
  @include flex-direction(row);
  @include flex-wrap(wrap);
  margin-left: -$gutters;
  margin-right: -$gutters;
}

.col {

  @include display-flex(flex);
  min-height: 40px;
  padding-right: $gutters;
  padding-left: $gutters;
  margin-top: $gutters *2; 

}



.module {
  width: 100%;
  padding: 15px;
  
  img{
    width: 100%;
  }
}

.flex-2 {
  @include flex(2 0 50%);
}
.flex-3 {
  @include flex(2.5 0 70%);
}

.col-1-1 {
  @include flex(1 0 100%);
}

.col-1-2{
@include flex(1 0 calc(50% - 1em));
}

.col-1-3{
@include flex(1 0 calc(33.33% - 1em));
}

.col-1-4{
@include flex(1 0 25%);
}

.col-1-5{
@include flex(1 0 calc(20% - 1em));
}

.col-2-3{
@include flex(1 0 calc(66.66% - 1em));
}


@media screen and (max-width: 750px) {  
  .col {
    @include flex(1 0 90%);
  }
  .col-1-5{
@include flex(1 0 calc(50% - 1em));
}
  
}

.square {
  @include aspect-ratio-box(100%);
    .module{
       position: relative;
      span{
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        @include translateY(-50%);
      }
    }
}


.align-self-flex-start {
  align-self: flex-start;
}
.align-self-flex-end {
  align-self: flex-end;
}

.align-self-flex-center {
  align-self: center;
}
.align-self-flex-baseline {
  align-self: baseline;
}



.white {
  background: #eee;
  color: #3d3d3d;
}


.blue {
  background: DodgerBlue;
  color: rgba(white,0.9);
}
.red {
  background: tomato;
  color: rgba(white,0.9);
}

.black {
  background: #3d3d3d;
  color: rgba(white,0.9);
}


@import "compass/typography";

@mixin font($font, $style: normal, $weight: normal) {
    font-family: $font;
    font-style:  $style;
    font-weight: $weight;
}


@include establish-baseline;
$base-font-size: 16px;
$base-line-height: 24px;

//fonts

$default-sans-font:'Helvetica', sans-serif;
$serif-font:'Roboto Slab', serif;
$default-font-color: rgba(black, 0.8);


h1 {
  font-weight: 700;
  @include adjust-font-size-to(42px);
  @include rhythm(0, 0, 0, 1, 42px);
  @include trailing-border(1px, 1, 42px, solid);
}

.bigass {
  @include font($serif-font,normal, 100);
  @include adjust-font-size-to(96px);
  @include adjust-leading-to(1.5, 36px);
  @include rhythm(0, 0, 0, 2, 96px);
}


h3 {
  @include font($serif-font, normal, 700);
	@include adjust-font-size-to($base-font-size);
	@include rhythm(0, 0, 0, 0, $base-font-size);
}

h4 {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .125em;
	@include adjust-font-size-to($base-font-size);
	@include rhythm(0, 1, 0, 1, $base-font-size);
	@include trailing-border(1px, 1, $base-font-size, solid);
}

p {
  @include font($serif-font);
  @include adjust-font-size-to($base-font-size);
  @include rhythm(0, 0, 0, 1, $base-font-size);
}

p.meta {
  font-style:italic;
  font-weight: 400;
  @include adjust-font-size-to(12px, 2/3);
  margin-bottom: 2.1em;
}


blockquote {
  border-left: 5px solid rgba(black, 0.3);
  padding-left: 16px;
  @include font($serif-font);
  font-style: italic;
  @include adjust-font-size-to($base-font-size * 1.2);
  @include rhythm(0, 0, 0, 1, $base-font-size * 1.2);	
}